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

談到“觸摸反饋”我們不得了解“控件的幾種狀態(tài)”，在我們下載的Android_Design_Stencils_Sources.psd中可以看到：

對(duì)于一個(gè)控件，andoridUI規(guī)范了有5中狀態(tài)，從上往下通俗的說(shuō)：常規(guī)狀態(tài)，按下?tīng)顟B(tài)，獲得焦點(diǎn)狀態(tài)，不可用狀態(tài)，不可用狀態(tài)下獲取焦點(diǎn)狀態(tài)。其中說(shuō)明了：“不可用”狀態(tài)即為“常規(guī)”狀態(tài)的30%不透明度；“不可用狀態(tài)下獲取焦點(diǎn)”狀態(tài)即為“獲得焦點(diǎn)”狀態(tài)的30%不透明度。對(duì)于一個(gè)嚴(yán)格的項(xiàng)目來(lái)說(shuō)，這5中狀態(tài)都是得設(shè)計(jì)的，有一種狀態(tài)是大家不太熟悉的，即focused狀態(tài)(獲得焦點(diǎn)狀態(tài))，這種狀態(tài)針對(duì)一種比較古老的設(shè)備，如下圖:

在這種設(shè)備中，會(huì)有一個(gè)控制方向的滑輪，像我們學(xué)生時(shí)代用的滾輪鼠標(biāo)一樣，手指控制這個(gè)小球，滑動(dòng)到需要控制的控件上，但不按下。那么這個(gè)時(shí)候，控件就有一個(gè)focused狀態(tài)(獲得焦點(diǎn)狀態(tài))

Logo：andoridUI的一個(gè)細(xì)小的獨(dú)特的風(fēng)格

圖中的g+和Howz都是應(yīng)用的logo，將它們放在操作欄的左邊，就是一個(gè)非常好的展示場(chǎng)所。

值得一提的是在這種情況下的觸摸反饋，通俗的說(shuō)就是將操作圖標(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)然。你會(huì)發(fā)現(xiàn)，有可能你需要的圖標(biāo)，并不在這些御用圖標(biāo)里，或者說(shuō)你覺(jué)得這些圖標(biāo)真的太丑，比如它們：

真心覺(jué)得這是要吃人的節(jié)奏嗎？

那么，你自己有自己畫(huà)啦~~

字體問(wèn)題

在官網(wǎng)的“字體”一欄，是針對(duì)英文版本下的UI設(shè)計(jì)所用字體的說(shuō)明。個(gè)人的看法是：你在設(shè)計(jì)稿中的字體并不會(huì)使用在程序里，你做的僅僅是“效果圖”，所以你用什么字體完全沒(méi)有限制。我們?cè)O(shè)計(jì)的效果圖是應(yīng)該和最終的程序在效果上高度相同的，所以我們建議選擇一些類(lèi)似于安卓系統(tǒng)字體的字體作為一個(gè)替代，你甚至可以用“黑體”“微軟雅黑”，當(dāng)然，還是專(zhuān)業(yè)點(diǎn)兒吧，我才開(kāi)始使用“文泉驛微米黑”，后來(lái)一直用DroidSansFallback.ttf，下載地址：http://www.zcool.com.cn/gfx/ZMjk0MjUy.html

-------------------------------------------------------------------------------------------------------------

我們一起閱讀并理解了官網(wǎng)上對(duì)于andoridUI風(fēng)格一模塊的描述，也分享了我的一些工作經(jīng)驗(yàn)給大家。我們常常聽(tīng)到或者被自己的領(lǐng)導(dǎo)要求“這個(gè)界面要做成Holo風(fēng)格”。Holo風(fēng)格是什么呢，到底怎樣做holo風(fēng)格呢？在解開(kāi)這個(gè)問(wèn)題之前，我們先看幾個(gè)優(yōu)秀的App，它們的界面設(shè)計(jì)。

上周非常幸運(yùn)得搶到了紅米手機(jī)一臺(tái)，撒花并得瑟一下~~作為一名UI設(shè)計(jì)師，如果你還沒(méi)有玩過(guò)MIUI，那你是時(shí)候去了解一下了。以下是我截取的界面并在圖片上做了適當(dāng)?shù)拿枋觯?/p>

第一：我們是不是可以在我們的設(shè)計(jì)中參考MIUI的表達(dá)方式，將操作欄設(shè)計(jì)為圓角，這樣一來(lái)，比起用直角，會(huì)更加親切一些，柔和一些。

第二：如果一個(gè)保守的交互設(shè)計(jì)師，或者說(shuō)一個(gè)保守的GUI設(shè)計(jì)師，他會(huì)老老實(shí)實(shí)的保留操作欄，并在操作欄上描述這一個(gè)頁(yè)面的名字叫做“設(shè)置”，然后將這個(gè)頁(yè)面中的內(nèi)容分類(lèi)，分出的類(lèi)別在正文中用tab切換顯示，從交互上來(lái)說(shuō)，用戶是通過(guò)“設(shè)置”圖標(biāo)進(jìn)入這一個(gè)頁(yè)面的，那么這里的所有操作都與設(shè)置相關(guān)，用不著再在操作欄上總述一下當(dāng)前頁(yè)面的名字，從視覺(jué)上來(lái)說(shuō)，將操作欄直接用于tab切換，在高度上也節(jié)省了不少，以至于一頁(yè)上能顯示下面更多的列表項(xiàng)。

正文的背景，我們往往使用純色，而MIUI則將正文背景用漸變色處理，這樣一來(lái)更加有層次感，不是嗎？所以，如果你覺(jué)得不錯(cuò)，也可以在你的設(shè)計(jì)中參考著這樣做。