華為Mate 20 發(fā)布會后,外媒給予了“全球有史以來zui強大的Android手機”的高度贊譽。
也難怪華為Mate 20“穩(wěn)了”,據(jù)了解,該系列的設(shè)計研發(fā)周期長達15個月,是同行業(yè)平均水平的2到3倍。
精心打磨的設(shè)計一定會在用戶體驗中得到好的反饋。作為UI設(shè)計師,這些安卓的設(shè)計規(guī)范你不能不了解:
1、安卓機屏幕尺寸與分辨率
安卓手機的尺寸很多很雜,用戶量目前zui高的是720P和1080P。我們建圖時一般使用1080P的分辨率來進行設(shè)計。 目前主流的安卓手機分辨率有以下幾種:
hdpi,對應(yīng)800*480的手機。主流機型,很多。如小米1 ,1s 三星 htc 等
xdpi,對應(yīng)1280*720的手機。三星Galaxy系列和華為p6.
xxdpi,對應(yīng)1080*1920的手機。小米手機,華為榮耀手機系列為主加上 htc one。
當(dāng)下主流安卓手機的屏幕尺寸和分辨率:
|
小米3和小米4屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
|
魅族MX2屏幕尺寸和分辨率: |
4.4英寸1280x800像素 |
|
魅族MX3屏幕尺寸和分辨率: |
5.1英寸1800x1080像素 |
|
HTC one屏幕尺寸和分辨率: |
4.7英寸1920x1080像素 |
|
華為榮耀6屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
|
華為p6屏幕尺寸和分辨率: |
4.7英寸1280x720像素 |
|
華為p7屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
在目前我們的安卓APP設(shè)計項目當(dāng)中,我們并不會去為每一種分辨率去設(shè)計一套UI界面,所以我們需要變通,為了適應(yīng)多分辨率,可以
1:在標準基礎(chǔ)(xdpi:1280*720)上開始,然后放大或縮小,以適應(yīng)到其他尺寸。
2:從設(shè)備的zui大尺寸(xxdpi:1920x1080)開始,然后縮小,并適應(yīng)到所需的zui小屏幕尺寸。
有些時候我們也會在實際開發(fā)過程中,Android和IOS的設(shè)計稿若無太大差異,也可從IOS的分辨率(960*640)開始,再調(diào)整設(shè)計稿的比例,適應(yīng)其他分辨率。但是這種方法在切圖的時候 需要做一些圖片的調(diào)整。如果不是矢量圖的元件需要重新按照1280*720的尺寸設(shè)計下。
2.桌面圖標尺寸
不同的安卓手機系統(tǒng)對應(yīng)的桌面圖標處理并不相同。并不是完全統(tǒng)計:除了小米手機,其他的安卓手機可能不容易直接找到規(guī)范,并不像ios系統(tǒng)提供直角即可。
那么設(shè)計師怎么辦?我們需要先搞清楚對桌面圖標進行統(tǒng)一剪裁的手機平臺規(guī)范,就可以知道圓角設(shè)置能保證在這些平臺可完全匹配,不出現(xiàn)白邊黑邊的情況。
這里提供一個簡便的測試方法:在多個統(tǒng)一剪裁的手機里面裝上一些用戶多的app進行比較,看是否都完美的匹配未出現(xiàn)白邊黑邊的情況。
我的測試結(jié)果是:主流安卓手機在96x96px尺寸下圓角小于等于20px為安全值,供大家參考指正。
規(guī)范了解以后,怎么設(shè)計比較好?
以上提到的安卓設(shè)備的種種問題,帶給設(shè)計師很多困擾。大家按照安卓zui新的Material Design規(guī)范來進行單獨的安卓版界面設(shè)計,它可能比較費時,但它是zui規(guī)范、效果zui好的。知乎、印象筆記等產(chǎn)品均采用了Material Design的設(shè)計方式。
Material Design——非扁平化設(shè)計
Material Design是安卓陣營產(chǎn)品的設(shè)計規(guī)范和風(fēng)格,它并不是簡單的扁平設(shè)計,而是一種注重卡片式設(shè)計、紙張的模擬、使用了強烈對比色彩的設(shè)計風(fēng)格。
先為大家介紹一個亮點:
Z軸的概念
手機界面是一個平面二維空間,而Material Design通過二維的一些表達手段,比如投影、動效等構(gòu)建出了Z軸(前后)的概念。
Z軸的投影
不同投影暗示了不同元素的高度,我們可以理解為如同我們桌子上的幾張紙層疊在一起,那么我們認為重要的紙在其他紙張之前,它的投影是zui高的。所以在Material Design中投影zui高的代表Z軸zui高值,也是zui重要的內(nèi)容。
不同的功能使用不同的Z軸高度可以表明他們的重要性和邏輯層級關(guān)系。界面中的Z軸應(yīng)用可以是這樣的:
Material Design還藏著很多驚喜,比如懸浮球 FAB是Material Design中zui明顯的標志了,雖然很小卻在視覺表現(xiàn)和功能承載上非常重要。我們應(yīng)該怎么使用它?
由于篇幅原因,今天就先聊到這里。想要知道問題的答案,繼續(xù)了解Material Design的話,請關(guān)注誠筑說UI設(shè)計培訓(xùn)!



,咨詢QQ:
