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

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

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

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

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

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

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

1. 一定要玩機器，玩APP。

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

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

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

2．無論是你iOSUI還是andoridUI，甚至是WPUI,一定要有一臺測試機

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

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

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

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

4. 熟悉各個平臺的UI設(shè)計規(guī)范。

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

5.將review做為UI工作的一個階段。

老實說，在這個方面，我自己都做得不盡責，可能是因為工作時間久了，就懶惰了?；蛘哒f對于程序員的期望太高，很多時候，就懶得去看程序那邊把UI實現(xiàn)出來的效果。

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

有了以上幾點準備，接下來我分享下一些安卓設(shè)計的知識。

北京時間2013年9月4日凌晨對外公布了該Android新版本的名稱，為Android 4.4，代號 KitKat，接下來的文章里，我們都在此基礎(chǔ)上進行討論。

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

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

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

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

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

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

橫向上來看：

mdpi： 360左右

Hhdpi：480左右(1.5倍)

xhdpi：720左右(2倍)

xxdhpi：1080左右(3倍)

xxxdhpi：1440左右(4倍)

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

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

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