安卓UI設計系列知識(二)

2024-01-15 14:10:01 來源/作者: / 己有:1人學習過

(以下內容是個人心得,若有表達不準確的地方,望同行賜教)

剛剛涉足andoridUI的朋友們總在詢問關于andoridUI的規(guī)范一類的資料,其實最有效的規(guī)范資料應該是安卓官網(wǎng)提供的規(guī)范http://www.apkbus.com/design/index.html,打開這個網(wǎng)站,一看,內容相當多,再加上一些專業(yè)術語,大部分人就沒有耐心往下讀了,從某種意義上來說,設計本是視覺的游戲,只關心“好看不好看”,但是畢竟UI設計是處于移動互聯(lián)網(wǎng)這一“理性”行業(yè),再加上GUI的前身是工業(yè)設計專業(yè),多多少少還是得熟悉一些數(shù)據(jù),邏輯上的知識。當然,我們不能被規(guī)范束縛,我一直認為,這里的規(guī)范可以看作為一個“設計建議”。

和每個andoridUI設計師一樣,我也是從這個網(wǎng)站開始學習的,在上一章節(jié)中,我們分享了如何學習andoridUI設計,搭配著這個網(wǎng)站上關于“設備和顯示”的這一章節(jié),講解了如何劃分一臺設備是屬于哪一種分辨率,以及關注了一下最近一段時間市面上各種機型的比例。

這一章節(jié),我們還是再一次回歸安卓官網(wǎng)提供的規(guī)范網(wǎng)站,帶著大家一起研究一下官方提供的這些知識,分享一下安卓設計中的風格和主題問題,Holo風格到底是什么?如何做Holo風格?

 

 

安卓UI設計系列知識(二)(原創(chuàng))

在官網(wǎng)的“風格-主題”一欄中,官網(wǎng)簡單的描述了兩個內容:淺色的holo主題,深色的holo主題。我們還看到了一些對于設計師來說有效的關鍵字:“統(tǒng)一”“個性化”。其他的內容呢,說實話,真的讓設計師一頭霧水,有效的信息獲取量的確很少,那到底什么是淺色/深色holo主題呢,怎樣做才是“達標”的呢?要搞清楚這個問題,我們得討論一下什么是“風格/主題”。

其實這兩個詞對于我們設計師來說是相當熟悉的,設計風格/主題的把握這個階段應該是一個非常重要的階段,因為這個階段的步驟是合理的,優(yōu)秀的,必然會造成其結果是“好看”的。那么我們又如何看待官方對于andoridUI設計中的風格和主題的解釋呢?

我們?yōu)g覽規(guī)范網(wǎng)站,看到“風格-自我標識”這一欄。

 

配色:風格/主題表現(xiàn)中的一個重要步驟,在規(guī)范里說到了三點:

安卓UI設計系列知識(二)(原創(chuàng))

 

1.默認使用藍色。

為什么要默認使用藍色的?沒有為什么,“默認”的東西都沒有為什么,好比要用“√”來代表“正確”。

說到這里,我們必須下載一個安卓提供的開放資源Android_Design_Stencils_Sources。

下載地址http://developer.android.com/downloads/design/Android_Design_Stencils_Sources_20131106.zip

安卓UI設計系列知識(二)(原創(chuàng))

 

它是一個psd格式的文件(用ai設計的小伙伴們可以在網(wǎng)路上搜索AI格式的),如下圖:

安卓UI設計系列知識(二)(原創(chuàng))

 

看起來,這個psd的源文件(14.5M)貌似很有用。是的,它的確很有用,以后的章節(jié)里,我們會經(jīng)常拿出它來說明問題。在這一章的知識里,我們要關心的是以下幾點:

a.我們看到在這個Android_Design_Stencils_Sources.psd的源文件里,所有的控件都用上了統(tǒng)一的藍色,是的,沒錯,如果你覺得好看,我們也可以用這種藍色,比如一個科技行業(yè)的APP,那藍色一定是不錯的選擇,藍色色值請參考下圖:

安卓UI設計系列知識(二)(原創(chuàng))

 

b.如果你覺得藍色不合適,你可以選擇其他的顏色,比如紫色,綠色,黃色,紅色,各個顏色的色值都在上圖中有描述。如果你已經(jīng)愛上這些顏色,你可以將他們調色板下載下來直接使用,下載地址http://developer.android.com/design/downloads/index.html

安卓UI設計系列知識(二)(原創(chuàng))

 


 

 

c.藍色是 Android 調色板中的標準顏色。每一種顏色都有相應的深色版本以供使用。工作經(jīng)驗而言,我們常常這樣使用它們:

安卓UI設計系列知識(二)(原創(chuàng))

 

如果你也想走走現(xiàn)在流行的“扁平化路線”,再來點“陰影”,那么以上這樣的表現(xiàn)方式是不錯的選擇。將標準色用于按鈕背景顏色,將深色版用于按鈕的投影顏色。(PS,如果這個按鈕按下去,背景怎樣表現(xiàn)是最好的呢?)

 

d.當然,我們知道,官網(wǎng)上的規(guī)范,我們都可以將其看作一個“設計建議”,以上的這些顏色都是官方給我們的推薦顏色,如果你真的不能接受,完全沒有問題,你可以挑選其他顏色。但一定要記住,無論你是挑選推薦顏色,還是自己去選擇其他顏色,無論是選擇一種,還是多種,你都必須從設計對象出發(fā)考慮顏色的選擇。比如,如果你要做一個幼兒教育方面的應用,你如果選擇黑色的風格,那么是萬萬不合適的。

 

2. 適時使用高對比度的配色來表示強調。

用于操作欄或主要按鈕的背景色。避免濫用,不是所有操作都同樣重要,只在最重要的一到兩個操作上使用這樣的配色。

安卓UI設計系列知識(二)(原創(chuàng))

 

Google Play Music 應用使用一種橙色主題來強調操作欄、當前標簽頁選項卡、滾動指示和超鏈接。

當然,你如果覺得藍色色系更適合這款音樂播放APP,你完全可以將圖中的橙色更換為推薦顏色中的藍色,或者你自己挑選別的顏色,但仍然要注意風格的統(tǒng)一。

安卓UI設計系列知識(二)(原創(chuàng))

 

 

 

3.定制配色時,別忘了通過視覺上微小變動給予 觸摸反饋 。

一定要讓用戶知道他“點到”了,這種就是觸摸反饋。作為設計師的你,一定要從視覺上給與微小的變化,讓他們知道他們“做到了!”

Android KitKat 之前的版本中,默認觸摸反饋是一種充滿活力的藍色。而且所有的觸摸反饋都有明顯的色彩對比,所以有可能和你的標識色相沖突。Android KitKat 開始,觸摸反饋變得比較微妙,觸摸僅僅帶來控件背景色的微小變化。這樣做有兩個好處: (1) 符合 設計原則 - 給予鼓勵 的原則(將復雜的任務分割成簡單的步驟,這樣更容易完成。對操作要給予反饋,哪怕僅僅是個微小的光暈。);(2) 更加容易突出你品牌的形象,不會與系統(tǒng)的設計風格混淆。如圖:

安卓UI設計系列知識(二)(原創(chuàng))

 

就工作經(jīng)驗而言,我也贊同官方所描述的“微小的變動”來表達觸摸反饋。比如上圖中,就用一個更深的橙色作為“搜索icon”點下去時候的背景顏色,這樣的變動就是微小的。如果你要這樣做:

安卓UI設計系列知識(二)(原創(chuàng))

變動太大,的確不怎么好看。