手機(jī)設(shè)計!移動設(shè)備的界面設(shè)計尺寸
剛開始接觸UI的時候,碰到的最多的就是尺寸問題,什么畫布要建多大、文字該用多大才合適、我要做幾套界面才可以?什么七七八八的也著實讓人有些頭疼。
廢話不多說,希望大家耐心看完后,不用再糾結(jié)于尺寸相關(guān)的東西了~
IOS篇
1、尺寸及分辨率
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536
(以上單位都是像素哦,至于分辨率一般網(wǎng)頁UI和移動UI基本上都只要72 ppi)
當(dāng)然,在設(shè)計的時候并不是每個尺寸都要做一套,尺寸按自己的手機(jī)尺寸來設(shè)計,比較方便預(yù)覽效果,一般用640x960或者640x1136的尺寸設(shè)計。
P.S. 作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便后期的切圖或尺寸變更~
2、界面基本組成元素
iPhone的APP界面一般由四個元素組成,分別是:狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域
這里取用640x960的尺寸設(shè)計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態(tài)欄:就是我們經(jīng)常說的信號、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域,其高度為:40 px
導(dǎo)航欄:顯示當(dāng)前界面的名稱,包含相應(yīng)的功能或者頁面間跳轉(zhuǎn)的按鈕,其高度為:88 px
主菜單欄:類似于頁面的主菜單,提供整個應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn),其高度為:98 px
內(nèi)容區(qū)域:展示應(yīng)用提供的相應(yīng)內(nèi)容,整個應(yīng)用中布局變更最為頻繁的,其高度為:734 px
(等等,為了說明我不是瞎掰的:960-40-88-98=734)
iPhone/iPod Touch
學(xué)習(xí) · 提示
相關(guān)教程