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

2023-11-16 17:20:36 來源/作者: / 己有:1人學(xué)習(xí)過

 

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

操作欄還可以直接用于輸入文本哦~

 

 

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

 

操作欄中甚至可以直接放置一個(gè)輸入框,輸入框里甚至可以放置一些按鈕,或者標(biāo)簽~~

 

 

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

 

操作欄還可以放置超鏈接哦~

這些都是值得我們學(xué)習(xí)的地方。

類似這些從交互和視覺都很優(yōu)秀的地方還有很多,就不一一舉例了,總得來說,MIUI的確是一款好看的UI界面。

 

我們再來看一款UI界面,

 

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

 

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

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

這些輸入的文本框似乎有點(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上取得。

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

如果有必要,你甚至可以直接使用官方建議的色板,或者直接拿用前面下載下來的安卓自帶的圖標(biāo)。比如我們在上面舉的第二款UI例子中看到的那些單選按鈕或是輸入文本框,它門都是直接拿用這個(gè)源文件上的控件或者設(shè)計(jì)為一樣的效果,這些應(yīng)用在 UI 方面沒有任何的亮點(diǎn),但是如果你這樣做,就非常“安卓”,就好比你看到它:

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

 

 

大面積的色塊加上簡潔的文字表達(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í)變成不倫不類的樣子。

 

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

 

原本完全符合 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 的,而這些控件的樣式和配色也非常保守,不會(huì)影響用戶的操作或者分散用戶的注意力,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.可以使用建議的色板,或者自己選擇更加豐富的顏色,雖然配色的使用變得豐富,這些配色依然都是低飽和度,不是很鮮艷,搭配起來比較容易的中性色。比如你常常會(huì)看到正文的背景用了淺灰底色配上白色卡片。

 

4.參考Android_Design_Stencils_Sources.psd上的布局方式,當(dāng)然。如果你有更好的,也可以不用被規(guī)范束縛。

 

下期預(yù)告:andoridUI的入手方法和畫圖方法。

我們下期見。