安卓UI設計系列知識(二)
操作欄還可以直接用于輸入文本哦~
操作欄中甚至可以直接放置一個輸入框,輸入框里甚至可以放置一些按鈕,或者標簽~~
操作欄還可以放置超鏈接哦~
這些都是值得我們學習的地方。
類似這些從交互和視覺都很優(yōu)秀的地方還有很多,就不一一舉例了,總得來說,MIUI的確是一款好看的UI界面。
我們再來看一款UI界面,
這些輸入的文本框似乎有點不好看,但是又好像在哪兒見到過。
好了。如果你要將以上兩款UI做個比較,相信大部分人都覺得MIUI要好看得多。事實上MIUI并不是Holo風格的UI。
什么是Holo?
Holo Theme 是 Android Design 的最基礎的呈現(xiàn)方式。因為是最為基礎的 Android Design 呈現(xiàn)形式,每一臺 Android 4.X 的手機系統(tǒng)內(nèi)部都有集成 Holo Theme 需要的控件,即開發(fā)者不需要自己設計控件,而是直接從系統(tǒng)里調(diào)用相應的控件。如果完全使用 Holo Theme,那么做出來的效果大致是上面舉的第二款UI界面那樣的。
也就是說,作為設計師的你,可以直接將Android_Design_Stencils_Sources.psd中的控件用于你的設計界面中,比如你需要一個多選按鈕,或者單選按鈕,或者是需要一個控制音量的控件,你都可以直接在Android_Design_Stencils_Sources.psd上取得。
如果有必要,你甚至可以直接使用官方建議的色板,或者直接拿用前面下載下來的安卓自帶的圖標。比如我們在上面舉的第二款UI例子中看到的那些單選按鈕或是輸入文本框,它門都是直接拿用這個源文件上的控件或者設計為一樣的效果,這些應用在 UI 方面沒有任何的亮點,但是如果你這樣做,就非常“安卓”,就好比你看到它:
大面積的色塊加上簡潔的文字表達,你就一定知道“嗯,這是win8風格”,或者“沒錯,它是metro風格”。
不過,調(diào)用系統(tǒng)控件在天朝是風險十足的行為,因為 MIUI 和很多國產(chǎn)ROM 私自替換了 ROM 中 Google 原本規(guī)定保留的 Holo 控件,這樣直接導致了一個原本在原生系統(tǒng)上運行時是 Holo Theme 的應用在 MIUI 之流上運行時變成不倫不類的樣子。
原本完全符合 Android Design 但因為 MIUI 而變得不倫不類的兩個應用:Dropbox 和 Press在這里我必須再埋汰一下 MIUI,這喪心病狂的東西不但篡改系統(tǒng)自帶的 Holo 控件,還擅自更改開發(fā)者嵌入應用的 Holo 風格控件,簡直罪大惡極。不過,三星和 HTC 也對一些系統(tǒng)的 Holo 控件做了修改(當然沒有像 MIUI 這么喪心病狂)。在這方面做得最好的反而是魅族,魅族修改的控件都依然符合 Android Design。而 Holo Theme 最大的特點是什么?簡單,質(zhì)樸。Google 提供的 Holo 控件是不可能違背 Android Design 的,而這些控件的樣式和配色也非常保守,不會影響用戶的操作或者分散用戶的注意力,Holo Theme 的布局也是最為普通的列表。而 Android 系統(tǒng)對這些默認元素的優(yōu)化已經(jīng)很到位了,所以就算是默認的 Holo 主題也能帶來不錯的閱讀/操作體驗。但是,就如同在 Windows Phone 上的 Metro UI 引起的一個問題一樣,如果開發(fā)者全盤在照搬Holo Theme,那么最后的結(jié)果就是做出來的應用除了圖標之外都長得一個樣。這個時候,開發(fā)者就需要跳出 Holo Theme 這個框架,進入更高
的境界了。
總結(jié)起來說,如果你打算做一款Holo風格的UI。那么有幾點是你可以參考使用的:
1.出色的光影效果清晰的層次關系。這種層次關系一方面提現(xiàn)在視覺上,非常重要的一點同樣也要求做交互的人員這么做。所以,Holo不是視覺的Holo,還應該包括交互的“Holo”。
2.像上面介紹的第二款UI這些應用大多數(shù)都使用了自制控件和自定義布局。自制控件的好處有很多,其中之一就是可以保證在大多數(shù)機器上看起來都是一個樣子(當然遇上 MIUI 這樣的惡棍就沒辦法了,道高一尺魔高一丈)。
3.可以使用建議的色板,或者自己選擇更加豐富的顏色,雖然配色的使用變得豐富,這些配色依然都是低飽和度,不是很鮮艷,搭配起來比較容易的中性色。比如你常常會看到正文的背景用了淺灰底色配上白色卡片。
4.參考Android_Design_Stencils_Sources.psd上的布局方式,當然。如果你有更好的,也可以不用被規(guī)范束縛。
下期預告:andoridUI的入手方法和畫圖方法。
我們下期見。
上一篇:用ps制作簡易按鈕