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

距離上一篇關(guān)于andoridUI的帖子已經(jīng)有239天了，直到今天還有朋友點(diǎn)贊或是私信，或是沿著留下的QQ號(hào)和群號(hào)詢(xún)問(wèn)我有關(guān)andoridUI設(shè)計(jì)的知識(shí)，在此很感謝大家的支持。

搜集了很多朋友的問(wèn)題，有一個(gè)比較明顯的問(wèn)題是現(xiàn)在網(wǎng)絡(luò)上沒(méi)有相關(guān)的教程or經(jīng)驗(yàn)說(shuō)明，書(shū)店里賣(mài)的相關(guān)書(shū)籍不是大篇大段的講photoshop的使用技巧，就是講一些宏觀的問(wèn)題，所以看到上次的帖子，很是有效。

打算寫(xiě)這次的教程是一周之前的想法，但是由于最近工作上忙碌，下班回家還要做私單(PS:求成都地區(qū)的web 或者 andorid或者ios的UI設(shè)計(jì)私單啦)，真的沒(méi)有時(shí)間整理頭腦里的思路。

偶爾還是會(huì)回過(guò)頭去看自己上次的帖子，還是會(huì)發(fā)現(xiàn)很多表達(dá)方面不夠準(zhǔn)確的地方，理工科的知識(shí)，力求一個(gè)嚴(yán)謹(jǐn)，準(zhǔn)確的描述。在上次的帖子里，講解的是andoridUI的設(shè)計(jì)入手方法和標(biāo)注、切圖方法，略顯匆忙。今天開(kāi)始，把與andoridUI設(shè)計(jì)相關(guān)的，andoridUI設(shè)計(jì)本身的，標(biāo)準(zhǔn)，切圖等后續(xù)工作的，甚至是一些細(xì)小的工作經(jīng)驗(yàn)方面的問(wèn)題給大家分篇講解下，具體多少篇，暫時(shí)沒(méi)有預(yù)算，先寫(xiě)著走吧。

經(jīng)常會(huì)在群里看到新人問(wèn)：我如何轉(zhuǎn)UI，每天堅(jiān)持畫(huà)icon嗎？

就我個(gè)人工作經(jīng)驗(yàn)來(lái)說(shuō)，我大概總結(jié)一下“如何轉(zhuǎn)UI，如何學(xué)好UI設(shè)計(jì)”幾點(diǎn)建議，如果臨時(shí)想起，我會(huì)在后面的章節(jié)里添加。

1. 一定要玩機(jī)器，玩APP。

你作為移動(dòng)互聯(lián)網(wǎng)行業(yè)中的一員，你不經(jīng)常玩機(jī)器，玩APP，你是做不好UI的，

無(wú)論什么檔次的手機(jī)，借周?chē)笥训氖謾C(jī)看看玩玩。了解最近市場(chǎng)上火熱的手機(jī)，看看它們的參數(shù)；同時(shí)，你要多玩app，各個(gè)行業(yè)的app都下載下來(lái)玩玩，覺(jué)得漂亮的界面別忘了截圖下來(lái)，保存在手機(jī)里。在這里，推薦大家?guī)讉€(gè)獲得好app的途徑，安卓市場(chǎng)里有：“ifanr”，“最美應(yīng)用”，或是搜索微信訂閱號(hào)“nice-app”,“appsolution”。

當(dāng)然，dribbble，behance，pinterest，站酷，花瓣這些設(shè)計(jì)網(wǎng)站，也應(yīng)該是你每天必看的。

2．無(wú)論是你iOSUI還是andoridUI，甚至是WPUI,一定要有一臺(tái)測(cè)試機(jī)

不是說(shuō)只有程序員才要測(cè)試機(jī)，咱們UI設(shè)計(jì)師也要有一臺(tái)測(cè)試機(jī)，個(gè)人建議UI設(shè)計(jì)師一定一定要向公司申請(qǐng)，安卓方面，最好是超高清分辨率(720*1280)的，市面上這樣的機(jī)器太多太多了，小米3，紅米，三星note2等等，至于為什么，我們將在后面的篇幅里給大家解釋。

很多時(shí)候，我們?cè)陔娔X上畫(huà)圖，總覺(jué)得“尺寸夠大了”“距離夠?qū)捔?rdquo;“顏色夠亮了”，但是一旦把設(shè)計(jì)資源交付給程序員，做出來(lái)的效果往往大跌眼鏡。所以，作為UI設(shè)計(jì)師，在設(shè)計(jì)過(guò)程中一定要把效果圖放在機(jī)器上查看，有時(shí)候，你真的會(huì)發(fā)現(xiàn)，原本“感覺(jué)”不錯(cuò)的稿子，在機(jī)器上查看，就走了樣。在這里，推薦大家一個(gè)軟件：PS play，下載地址：http://isux.tencent.com/app/psplay，具體使用方法見(jiàn)網(wǎng)站，這里就不做闡述了

3.培養(yǎng)一個(gè)靠譜的程序小伙伴。

很多時(shí)候，UI設(shè)計(jì)師在設(shè)計(jì)效果圖中，或是切圖中，把握不了所用的切圖方式在程序里會(huì)不會(huì)出現(xiàn)預(yù)期的效果，是多磨希望能有一個(gè)即時(shí)的設(shè)備能看到運(yùn)行的效果。我現(xiàn)在所了解的類(lèi)似這樣的軟件有AppInventor，但是負(fù)責(zé)的操作，讓設(shè)計(jì)師們還是有點(diǎn)搞不懂，如果網(wǎng)友有更好的推薦，請(qǐng)回復(fù)。于是我培養(yǎng)了一個(gè)靠譜的小伙伴，偶爾我把握不到的效果，我就把資源傳給他，然后麻煩小伙伴按照所標(biāo)注和解釋的方法作出效果來(lái)看是不是自己所想要的。

4. 熟悉各個(gè)平臺(tái)的UI設(shè)計(jì)規(guī)范。

每天堅(jiān)持畫(huà)icon是學(xué)習(xí)UI的一個(gè)小部分，畫(huà)icon是鍛煉一個(gè)UI設(shè)計(jì)師的耐心，造型能力，色彩搭配能力，質(zhì)感表現(xiàn)能力等。除此之外，你還必須去了解，掌握，熟悉各個(gè)平臺(tái)的設(shè)計(jì)規(guī)范，但是始終要記住，設(shè)計(jì)是視覺(jué)的游戲，不要沉溺于規(guī)范里，不要被條條款款約束了自己的靈感發(fā)揮。

5.將review做為UI工作的一個(gè)階段。

老實(shí)說(shuō)，在這個(gè)方面，我自己都做得不盡責(zé)，可能是因?yàn)楣ぷ鲿r(shí)間久了，就懶惰了?；蛘哒f(shuō)對(duì)于程序員的期望太高，很多時(shí)候，就懶得去看程序那邊把UI實(shí)現(xiàn)出來(lái)的效果。

但是，在嚴(yán)格的公司，一定會(huì)有一個(gè)UIreview的步驟，看看程序最后實(shí)現(xiàn)的效果是不是和自己預(yù)期的一樣。它產(chǎn)生在UI編程工作(這里談到的UI編程就相當(dāng)于網(wǎng)頁(yè)的前端開(kāi)發(fā)，寫(xiě)html，css等)結(jié)束后，如果沒(méi)有配置專(zhuān)門(mén)的UI編程人員，那么就產(chǎn)生在開(kāi)發(fā)結(jié)束后，作為UI設(shè)計(jì)師，對(duì)于程序?qū)崿F(xiàn)效果的驗(yàn)收除了是對(duì)產(chǎn)品負(fù)責(zé)之外，也是提高自己UI設(shè)計(jì)能力的過(guò)程，因?yàn)楹芏鄷r(shí)候，由于我們?cè)谠O(shè)計(jì)過(guò)程中用到的單位和程序開(kāi)發(fā)過(guò)程中用到的單位不同，或者說(shuō)安卓設(shè)備各種分辨率不同，會(huì)帶來(lái)預(yù)期之外的效果。所以，在工作中，把UI review做好，也能提高自己的UI設(shè)計(jì)能力，獲得很多細(xì)小的設(shè)計(jì)經(jīng)驗(yàn)。

有了以上幾點(diǎn)準(zhǔn)備，接下來(lái)我分享下一些安卓設(shè)計(jì)的知識(shí)。

北京時(shí)間2013年9月4日凌晨對(duì)外公布了該Android新版本的名稱(chēng)，為Android 4.4，代號(hào) KitKat，接下來(lái)的文章里，我們都在此基礎(chǔ)上進(jìn)行討論。

谷歌公司對(duì)于安卓4.4的規(guī)范官網(wǎng)地址是：http://www.apkbus.com/design/index.html(中文版)http://developer.android.com/design/index.html(英文版)個(gè)人建議在熟悉中文版的基礎(chǔ)上，去看看英文版，畢竟老外的東西，翻譯后的中文版比起英文原版有些地方表達(dá)和描述會(huì)不一樣，甚至少了一些些細(xì)節(jié)的東西。

首先，我們談“設(shè)備”，設(shè)備作為UI設(shè)計(jì)的大環(huán)境，也是一個(gè)andoridUI設(shè)計(jì)師最為痛疼的問(wèn)題，主要涉及到各種設(shè)備之間的適配問(wèn)題，在今后的篇章中，我會(huì)講解各種設(shè)備的適配方法。

在最新的規(guī)范網(wǎng)址中，官方為我們描述了以下幾種分辨率的設(shè)備：

我們從圖中看到，有mdpi,hdpi,xhdpi xxdhpi,xxxdhpi幾種分辨率的機(jī)器，如果我沒(méi)有記錯(cuò)的話，官網(wǎng)在近期更新過(guò)這個(gè)網(wǎng)頁(yè)，在4.4沒(méi)有發(fā)布之前，還加入了最小的一個(gè)分辨率 ldpi的設(shè)備。

我們看到圖中有一些說(shuō)明“1x,1.5x,2x,3x,4x”。我們可以理解為相對(duì)單位或是倍數(shù)關(guān)系。在圖中對(duì)于mdpi分辨率一欄有說(shuō)明“basceline”,也就是說(shuō)將mdpi作為一個(gè)基礎(chǔ)，一個(gè)參考物，它為1倍的話，那么hdpi就為1.5倍，xhdpi為2倍，其他以此類(lèi)推。

作為設(shè)計(jì)師的我們，要側(cè)重關(guān)心的是橫向分辨率，各種分辨率的設(shè)備其分辨率的數(shù)值為：

橫向上來(lái)看：

mdpi： 360左右

Hhdpi：480左右(1.5倍)

xhdpi：720左右(2倍)

xxdhpi：1080左右(3倍)

xxxdhpi：1440左右(4倍)

這里需要說(shuō)明一點(diǎn)的是：設(shè)備的尺寸和分辨率沒(méi)有絕對(duì)的關(guān)系，不是說(shuō)屏幕大的手機(jī)就一定更清晰。如果你的老板叫你“為某一個(gè)設(shè)備做設(shè)計(jì)并只適配它的分辨率，那你一定要去看的是它的分辨率，而不是它的尺寸。”

之前，我們說(shuō)過(guò)，作為一名UI設(shè)計(jì)師，你一定要多玩手機(jī)，我們?nèi)绾慰匆豢钍謾C(jī)，它到底屬于哪一個(gè)分辨率呢？我舉幾個(gè)例子說(shuō)明：

小米1，從網(wǎng)絡(luò)上查到的相關(guān)參數(shù)，我們發(fā)現(xiàn)。它的分辨率為854*480(通常在描述分辨率的時(shí)候時(shí)候描述為Y軸分辨率*X軸分辨率)，那也就是說(shuō)，它的橫向分辨率為480，屬于hdpi分辨率的設(shè)備。