手機(jī)設(shè)計(jì)!移動(dòng)設(shè)備的界面設(shè)計(jì)尺寸

來(lái)源:站酷 作者:豆豆1號(hào) 學(xué)習(xí):10547人次

剛開(kāi)始接觸UI的時(shí)候,碰到的最多的就是尺寸問(wèn)題,什么畫(huà)布要建多大、文字該用多大才合適、我要做幾套界面才可以?什么七七八八的也著實(shí)讓人有些頭疼。

廢話不多說(shuō),希望大家耐心看完后,不用再糾結(jié)于尺寸相關(guān)的東西了~

手機(jī)設(shè)計(jì)!移動(dòng)設(shè)備的界面設(shè)計(jì)尺寸

IOS篇

1、尺寸及分辨率

iPhone 界面尺寸:320x480、640x960、640x1136

iPad 界面尺寸:1024x768、2048x1536

(以上單位都是像素哦,至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要72 ppi)

當(dāng)然,在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套,尺寸按自己的手機(jī)尺寸來(lái)設(shè)計(jì),比較方便預(yù)覽效果,一般用640x960或者640x1136的尺寸設(shè)計(jì)。

P.S. 作圖的時(shí)候確保都是用形狀工具(快捷鍵:U)手機(jī)設(shè)計(jì)!移動(dòng)設(shè)備的界面設(shè)計(jì)尺寸畫(huà)的,這樣更方便后期的切圖或尺寸變更~

2、界面基本組成元素

iPhone的APP界面一般由四個(gè)元素組成,分別是:狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域

這里取用640x960的尺寸設(shè)計(jì),那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸:

狀態(tài)欄:就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域,其高度為:40 px

導(dǎo)航欄:顯示當(dāng)前界面的名稱(chēng),包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕,其高度為:88 px

主菜單欄:類(lèi)似于頁(yè)面的主菜單,提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn),其高度為:98 px

內(nèi)容區(qū)域:展示應(yīng)用提供的相應(yīng)內(nèi)容,整個(gè)應(yīng)用中布局變更最為頻繁的,其高度為:734 px

(等等,為了說(shuō)明我不是瞎掰的:960-40-88-98=734)

手機(jī)設(shè)計(jì)!移動(dòng)設(shè)備的界面設(shè)計(jì)尺寸

iPhone/iPod Touch

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!