安卓UI設(shè)計(jì)系列知識(二)

(以下內(nèi)容是個(gè)人心得，若有表達(dá)不準(zhǔn)確的地方，望同行賜教)

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

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

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

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

其實(shí)這兩個(gè)詞對于我們設(shè)計(jì)師來說是相當(dāng)熟悉的，設(shè)計(jì)風(fēng)格/主題的把握這個(gè)階段應(yīng)該是一個(gè)非常重要的階段，因?yàn)檫@個(gè)階段的步驟是合理的，優(yōu)秀的，必然會造成其結(jié)果是“好看”的。那么我們又如何看待官方對于andoridUI設(shè)計(jì)中的風(fēng)格和主題的解釋呢？

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

配色：風(fēng)格/主題表現(xiàn)中的一個(gè)重要步驟，在規(guī)范里說到了三點(diǎn):

1.默認(rèn)使用藍(lán)色。

為什么要默認(rèn)使用藍(lán)色的？沒有為什么，“默認(rèn)”的東西都沒有為什么，好比要用“√”來代表“正確”。

說到這里，我們必須下載一個(gè)安卓提供的開放資源Android_Design_Stencils_Sources。

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

它是一個(gè)psd格式的文件(用ai設(shè)計(jì)的小伙伴們可以在網(wǎng)路上搜索AI格式的)，如下圖：

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

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

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

c．藍(lán)色是 Android 調(diào)色板中的標(biāo)準(zhǔn)顏色。每一種顏色都有相應(yīng)的深色版本以供使用。工作經(jīng)驗(yàn)而言，我們常常這樣使用它們：

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

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

2. 適時(shí)使用高對比度的配色來表示強(qiáng)調(diào)。

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

Google Play Music 應(yīng)用使用一種橙色主題來強(qiáng)調(diào)操作欄、當(dāng)前標(biāo)簽頁選項(xiàng)卡、滾動指示和超鏈接。

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

3．定制配色時(shí)，別忘了通過視覺上微小變動給予 觸摸反饋 。

一定要讓用戶知道他“點(diǎn)到”了，這種就是觸摸反饋。作為設(shè)計(jì)師的你，一定要從視覺上給與微小的變化，讓他們知道他們“做到了！”

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

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

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