安卓UI設(shè)計(jì)系列知識(二)(4)
(以下內(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í)候的背景顏色,這樣的變動就是微小的。如果你要這樣做:
變動太大,的確不怎么好看。
談到“觸摸反饋”我們不得了解“控件的幾種狀態(tài)”,在我們下載的Android_Design_Stencils_Sources.psd中可以看到:
對于一個(gè)控件,andoridUI規(guī)范了有5中狀態(tài),從上往下通俗的說:常規(guī)狀態(tài),按下狀態(tài),獲得焦點(diǎn)狀態(tài),不可用狀態(tài),不可用狀態(tài)下獲取焦點(diǎn)狀態(tài)。其中說明了:“不可用”狀態(tài)即為“常規(guī)”狀態(tài)的30%不透明度;“不可用狀態(tài)下獲取焦點(diǎn)”狀態(tài)即為“獲得焦點(diǎn)”狀態(tài)的30%不透明度。對于一個(gè)嚴(yán)格的項(xiàng)目來說,這5中狀態(tài)都是得設(shè)計(jì)的,有一種狀態(tài)是大家不太熟悉的,即focused狀態(tài)(獲得焦點(diǎn)狀態(tài)),這種狀態(tài)針對一種比較古老的設(shè)備,如下圖:
在這種設(shè)備中,會有一個(gè)控制方向的滑輪,像我們學(xué)生時(shí)代用的滾輪鼠標(biāo)一樣,手指控制這個(gè)小球,滑動到需要控制的控件上,但不按下。那么這個(gè)時(shí)候,控件就有一個(gè)focused狀態(tài)(獲得焦點(diǎn)狀態(tài))
Logo:andoridUI的一個(gè)細(xì)小的獨(dú)特的風(fēng)格
圖中的g+和Howz都是應(yīng)用的logo,將它們放在操作欄的左邊,就是一個(gè)非常好的展示場所。
值得一提的是在這種情況下的觸摸反饋,通俗的說就是將操作圖標(biāo)連同logo看作一個(gè)整體,進(jìn)行觸摸反饋的表達(dá),如下圖:
當(dāng)然,你不一定非得像上面這樣做,如果你不打算放上你的APP logo,你還可以用以下的方式表達(dá):
將 標(biāo)題 直接置于 返回圖標(biāo) 后面,在這一點(diǎn)上,ios的表達(dá)方式大多數(shù)是將 標(biāo)題文字 放在操作欄的中間。這種情況下的觸摸反饋應(yīng)該是:
這兩種方式是andoridUI的一種很特別有的表達(dá)方式,算是一種“個(gè)性”,大家參考視情況使用吧。
圖標(biāo)
如圖中所描述的。圖標(biāo)的使用也要做到風(fēng)格的統(tǒng)一,你可以直接使用安卓自帶的圖標(biāo),下載地址:http://developer.android.com/design/downloads/index.html
當(dāng)然。你會發(fā)現(xiàn),有可能你需要的圖標(biāo),并不在這些御用圖標(biāo)里,或者說你覺得這些圖標(biāo)真的太丑,比如它們:
真心覺得這是要吃人的節(jié)奏嗎?
那么,你自己有自己畫啦~~
字體問題
在官網(wǎng)的“字體”一欄,是針對英文版本下的UI設(shè)計(jì)所用字體的說明。個(gè)人的看法是:你在設(shè)計(jì)稿中的字體并不會使用在程序里,你做的僅僅是“效果圖”,所以你用什么字體完全沒有限制。我們設(shè)計(jì)的效果圖是應(yīng)該和最終的程序在效果上高度相同的,所以我們建議選擇一些類似于安卓系統(tǒng)字體的字體作為一個(gè)替代,你甚至可以用“黑體”“微軟雅黑”,當(dāng)然,還是專業(yè)點(diǎn)兒吧,我才開始使用“文泉驛微米黑”,后來一直用DroidSansFallback.ttf,下載地址:http://www.zcool.com.cn/gfx/ZMjk0MjUy.html
-------------------------------------------------------------------------------------------------------------
我們一起閱讀并理解了官網(wǎng)上對于andoridUI風(fēng)格一模塊的描述,也分享了我的一些工作經(jīng)驗(yàn)給大家。我們常常聽到或者被自己的領(lǐng)導(dǎo)要求“這個(gè)界面要做成Holo風(fēng)格”。Holo風(fēng)格是什么呢,到底怎樣做holo風(fēng)格呢?在解開這個(gè)問題之前,我們先看幾個(gè)優(yōu)秀的App,它們的界面設(shè)計(jì)。
上周非常幸運(yùn)得搶到了紅米手機(jī)一臺,撒花并得瑟一下~~作為一名UI設(shè)計(jì)師,如果你還沒有玩過MIUI,那你是時(shí)候去了解一下了。以下是我截取的界面并在圖片上做了適當(dāng)?shù)拿枋觯?/p>
第一:我們是不是可以在我們的設(shè)計(jì)中參考MIUI的表達(dá)方式,將操作欄設(shè)計(jì)為圓角,這樣一來,比起用直角,會更加親切一些,柔和一些。
第二:如果一個(gè)保守的交互設(shè)計(jì)師,或者說一個(gè)保守的GUI設(shè)計(jì)師,他會老老實(shí)實(shí)的保留操作欄,并在操作欄上描述這一個(gè)頁面的名字叫做“設(shè)置”,然后將這個(gè)頁面中的內(nèi)容分類,分出的類別在正文中用tab切換顯示,從交互上來說,用戶是通過“設(shè)置”圖標(biāo)進(jìn)入這一個(gè)頁面的,那么這里的所有操作都與設(shè)置相關(guān),用不著再在操作欄上總述一下當(dāng)前頁面的名字,從視覺上來說,將操作欄直接用于tab切換,在高度上也節(jié)省了不少,以至于一頁上能顯示下面更多的列表項(xiàng)。
正文的背景,我們往往使用純色,而MIUI則將正文背景用漸變色處理,這樣一來更加有層次感,不是嗎?所以,如果你覺得不錯(cuò),也可以在你的設(shè)計(jì)中參考著這樣做。
操作欄還可以直接用于輸入文本哦~
操作欄中甚至可以直接放置一個(gè)輸入框,輸入框里甚至可以放置一些按鈕,或者標(biāo)簽~~
操作欄還可以放置超鏈接哦~
這些都是值得我們學(xué)習(xí)的地方。
類似這些從交互和視覺都很優(yōu)秀的地方還有很多,就不一一舉例了,總得來說,MIUI的確是一款好看的UI界面。
我們再來看一款UI界面,
這些輸入的文本框似乎有點(diǎn)不好看,但是又好像在哪兒見到過。
好了。如果你要將以上兩款UI做個(gè)比較,相信大部分人都覺得MIUI要好看得多。事實(shí)上MIUI并不是Holo風(fēng)格的UI。
什么是Holo?
Holo Theme 是 Android Design 的最基礎(chǔ)的呈現(xiàn)方式。因?yàn)槭亲顬榛A(chǔ)的 Android Design 呈現(xiàn)形式,每一臺 Android 4.X 的手機(jī)系統(tǒng)內(nèi)部都有集成 Holo Theme 需要的控件,即開發(fā)者不需要自己設(shè)計(jì)控件,而是直接從系統(tǒng)里調(diào)用相應(yīng)的控件。如果完全使用 Holo Theme,那么做出來的效果大致是上面舉的第二款UI界面那樣的。
也就是說,作為設(shè)計(jì)師的你,可以直接將Android_Design_Stencils_Sources.psd中的控件用于你的設(shè)計(jì)界面中,比如你需要一個(gè)多選按鈕,或者單選按鈕,或者是需要一個(gè)控制音量的控件,你都可以直接在Android_Design_Stencils_Sources.psd上取得。
如果有必要,你甚至可以直接使用官方建議的色板,或者直接拿用前面下載下來的安卓自帶的圖標(biāo)。比如我們在上面舉的第二款UI例子中看到的那些單選按鈕或是輸入文本框,它門都是直接拿用這個(gè)源文件上的控件或者設(shè)計(jì)為一樣的效果,這些應(yīng)用在 UI 方面沒有任何的亮點(diǎn),但是如果你這樣做,就非常“安卓”,就好比你看到它:
大面積的色塊加上簡潔的文字表達(dá),你就一定知道“嗯,這是win8風(fēng)格”,或者“沒錯(cuò),它是metro風(fēng)格”。
不過,調(diào)用系統(tǒng)控件在天朝是風(fēng)險(xiǎn)十足的行為,因?yàn)?MIUI 和很多國產(chǎn)ROM 私自替換了 ROM 中 Google 原本規(guī)定保留的 Holo 控件,這樣直接導(dǎo)致了一個(gè)原本在原生系統(tǒng)上運(yùn)行時(shí)是 Holo Theme 的應(yīng)用在 MIUI 之流上運(yùn)行時(shí)變成不倫不類的樣子。
原本完全符合 Android Design 但因?yàn)?MIUI 而變得不倫不類的兩個(gè)應(yīng)用:Dropbox 和 Press在這里我必須再埋汰一下 MIUI,這喪心病狂的東西不但篡改系統(tǒng)自帶的 Holo 控件,還擅自更改開發(fā)者嵌入應(yīng)用的 Holo 風(fēng)格控件,簡直罪大惡極。不過,三星和 HTC 也對一些系統(tǒng)的 Holo 控件做了修改(當(dāng)然沒有像 MIUI 這么喪心病狂)。在這方面做得最好的反而是魅族,魅族修改的控件都依然符合 Android Design。而 Holo Theme 最大的特點(diǎn)是什么?簡單,質(zhì)樸。Google 提供的 Holo 控件是不可能違背 Android Design 的,而這些控件的樣式和配色也非常保守,不會影響用戶的操作或者分散用戶的注意力,Holo Theme 的布局也是最為普通的列表。而 Android 系統(tǒng)對這些默認(rèn)元素的優(yōu)化已經(jīng)很到位了,所以就算是默認(rèn)的 Holo 主題也能帶來不錯(cuò)的閱讀/操作體驗(yàn)。但是,就如同在 Windows Phone 上的 Metro UI 引起的一個(gè)問題一樣,如果開發(fā)者全盤在照搬Holo Theme,那么最后的結(jié)果就是做出來的應(yīng)用除了圖標(biāo)之外都長得一個(gè)樣。這個(gè)時(shí)候,開發(fā)者就需要跳出 Holo Theme 這個(gè)框架,進(jìn)入更高
的境界了。
總結(jié)起來說,如果你打算做一款Holo風(fēng)格的UI。那么有幾點(diǎn)是你可以參考使用的:
1.出色的光影效果清晰的層次關(guān)系。這種層次關(guān)系一方面提現(xiàn)在視覺上,非常重要的一點(diǎn)同樣也要求做交互的人員這么做。所以,Holo不是視覺的Holo,還應(yīng)該包括交互的“Holo”。
2.像上面介紹的第二款UI這些應(yīng)用大多數(shù)都使用了自制控件和自定義布局。自制控件的好處有很多,其中之一就是可以保證在大多數(shù)機(jī)器上看起來都是一個(gè)樣子(當(dāng)然遇上 MIUI 這樣的惡棍就沒辦法了,道高一尺魔高一丈)。
3.可以使用建議的色板,或者自己選擇更加豐富的顏色,雖然配色的使用變得豐富,這些配色依然都是低飽和度,不是很鮮艷,搭配起來比較容易的中性色。比如你常常會看到正文的背景用了淺灰底色配上白色卡片。
4.參考Android_Design_Stencils_Sources.psd上的布局方式,當(dāng)然。如果你有更好的,也可以不用被規(guī)范束縛。
下期預(yù)告:andoridUI的入手方法和畫圖方法。
我們下期見。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- ps相機(jī)APP圖標(biāo)
- UI知識,UI設(shè)計(jì)需要學(xué)習(xí)什么軟件?
- 播放按鈕,設(shè)計(jì)圓形白色播放按鈕
- 玉石效果,通過PS制作太極主題玉石圖標(biāo)制作
- UI設(shè)計(jì)教程:文件夾ICON圖標(biāo)教程
- ps設(shè)計(jì)一個(gè)圣誕iphone icon圖標(biāo)教程
- 相機(jī)圖標(biāo),設(shè)計(jì)白色相機(jī)UI圖標(biāo)
- UI知識,圖標(biāo)的認(rèn)知與設(shè)計(jì)步驟
- UI教程,螺旋槳式風(fēng)扇主題UI圖標(biāo)教程
- ui設(shè)計(jì)教程:唱片機(jī)圖標(biāo)