安卓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)很多表達方面不夠準(zhǔn)確的地方,理工科的知識,力求一個嚴(yán)謹,準(zhǔn)確的描述。在上次的帖子里,講解的是andoridUI的設(shè)計入手方法和標(biāo)注、切圖方法,略顯匆忙。今天開始,把與andoridUI設(shè)計相關(guān)的,andoridUI設(shè)計本身的,標(biāo)準(zhǔn),切圖等后續(xù)工作的,甚至是一些細小的工作經(jīng)驗方面的問題給大家分篇講解下,具體多少篇,暫時沒有預(yù)算,先寫著走吧。
經(jīng)常會在群里看到新人問:我如何轉(zhuǎn)UI,每天堅持畫icon嗎?
就我個人工作經(jīng)驗來說,我大概總結(jié)一下“如何轉(zhuǎn)UI,如何學(xué)好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”。
當(dāng)然,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,但是負責(zé)的操作,讓設(shè)計師們還是有點搞不懂,如果網(wǎng)友有更好的推薦,請回復(fù)。于是我培養(yǎng)了一個靠譜的小伙伴,偶爾我把握不到的效果,我就把資源傳給他,然后麻煩小伙伴按照所標(biāo)注和解釋的方法作出效果來看是不是自己所想要的。
4. 熟悉各個平臺的UI設(shè)計規(guī)范。
每天堅持畫icon是學(xué)習(xí)UI的一個小部分,畫icon是鍛煉一個UI設(shè)計師的耐心,造型能力,色彩搭配能力,質(zhì)感表現(xiàn)能力等。除此之外,你還必須去了解,掌握,熟悉各個平臺的設(shè)計規(guī)范,但是始終要記住,設(shè)計是視覺的游戲,不要沉溺于規(guī)范里,不要被條條款款約束了自己的靈感發(fā)揮。
5.將review做為UI工作的一個階段。
老實說,在這個方面,我自己都做得不盡責(zé),可能是因為工作時間久了,就懶惰了?;蛘哒f對于程序員的期望太高,很多時候,就懶得去看程序那邊把UI實現(xiàn)出來的效果。
但是,在嚴(yán)格的公司,一定會有一個UIreview的步驟,看看程序最后實現(xiàn)的效果是不是和自己預(yù)期的一樣。它產(chǎn)生在UI編程工作(這里談到的UI編程就相當(dāng)于網(wǎng)頁的前端開發(fā),寫html,css等)結(jié)束后,如果沒有配置專門的UI編程人員,那么就產(chǎn)生在開發(fā)結(jié)束后,作為UI設(shè)計師,對于程序?qū)崿F(xiàn)效果的驗收除了是對產(chǎn)品負責(zé)之外,也是提高自己UI設(shè)計能力的過程,因為很多時候,由于我們在設(shè)計過程中用到的單位和程序開發(fā)過程中用到的單位不同,或者說安卓設(shè)備各種分辨率不同,會帶來預(yù)期之外的效果。所以,在工作中,把UI review做好,也能提高自己的UI設(shè)計能力,獲得很多細小的設(shè)計經(jīng)驗。
有了以上幾點準(zhǔn)備,接下來我分享下一些安卓設(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è)備。
標(biāo)簽(TAG) UI設(shè)計教程 原創(chuàng) 自譯教程 GUI GUI教程 chan奕迅
上一篇:用ps制作像素按鈕
下一篇:教你ps打造完美達物