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

2023-12-26 17:26:42 來源/作者: / 己有:0人學(xué)習(xí)過

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

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

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

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

 

 

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

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

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

 


 

 

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

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

 

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

 

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

 

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

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

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

 

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

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

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

 

 

 

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

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

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

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

 

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

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

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