界面設(shè)計(jì)之尺寸篇

1、界面設(shè)計(jì)之尺寸篇 剛開始接觸UI的時(shí)候，碰到的最多的就是尺寸問題，什么畫布要建多大、文字該用多大才合適、我要做幾套界面才可以？什么七七八八的也著實(shí)讓人有些頭疼。 廢話不多說，以下是由一網(wǎng)學(xué)UI設(shè)計(jì)培訓(xùn)老師整理的，希望大家耐心看完后，不用再糾結(jié)于尺寸相關(guān)的東西了IOS篇1、尺寸及分辨率iPhone 界面尺寸：320×480、640×960、640×1136iPad 界面尺寸：1024×768、2048×1536（以上單位都是像素哦，至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要 72 ppi）當(dāng)然，在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的

2、手機(jī)尺寸來設(shè)計(jì)，比較方便預(yù)覽效果，一般用 640×960或者 640×1136的尺寸設(shè)計(jì)。P.S. 作圖的時(shí)候確保都是用形狀工具（快捷鍵：U）畫的，這樣更方便后期的切圖或尺寸變更2、界面基本組成元素iPhone的APP界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域這里取用 640×960的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸：狀態(tài)欄：就是我們經(jīng)常說的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40 px導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕，其高度為：88 px主菜單欄：類似于頁(yè)面的主菜單，提供

3、整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98 px內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁的，其高度為：734 px（等等，為了說明我不是瞎掰的：960-40-88-98=734）                         iPhone/iPod Touch                       第一代、第二代、第三

4、代                            iPhone4/iPhone4s                           iPhone5/iPhone5C/iPhone5s至于我們經(jīng)常說的 iPhone5/5s 的 640×1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910 pxP

5、.S. 在最新的 iOS7 的風(fēng)格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起，但是再怎么變化，尺寸高度也還是沒有變化的，只不過大家再設(shè)計(jì) iOS7 風(fēng)格的界面的時(shí)候多多注意一下3、字體大小iPhone 上的字體英文為： HelveticaNeue 至于中文，Mac下用的是黑體-簡(jiǎn)，Win下則為華文黑體。下圖是百度用戶體驗(yàn)做過的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小，像素為單位，也就是大家在PS里的文字像素大小。P.S. 多留心下一些大公司的數(shù)據(jù)研究，你會(huì)發(fā)現(xiàn)很多你根本沒考慮到的問題哦 其實(shí)還有個(gè)更簡(jiǎn)單的方法就是找你覺得好的APP應(yīng)用，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大

6、小咯總之，方法是自己找的，想辦法解決問題，自己實(shí)踐，比別人告訴你印象更深刻不是么？Android篇1、尺寸及分辨率Android 界面尺寸：480×800、720×1280、1080×1920 （單位：像素） Android 比 iPhone 的尺寸多了很多套，建議取用 720×1280 這個(gè)尺寸，這個(gè)尺寸 720×1280中顯示完美，在 1080×1920 中看起來也比較清晰；切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過高。2、界面基本組成元素Android 的 APP 界面和 iPhone 的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單

7、欄以及中間的內(nèi)容區(qū)域。Android 中我們?nèi)∮?720×1280的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸：P.S. 寫之前我翻了好多關(guān)于 Android 的界面尺寸教程，都沒找到像iOS一樣具體的規(guī)范，或許因?yàn)樵诎沧恐羞@些控件的高度都能用程序自定義都沒有提到具體的尺寸數(shù)值，所以就自己找了 Android 的設(shè)計(jì)規(guī)范，尺寸都是自己在PS中量的Android 為了在界面上區(qū)別于 iOS ，Android 4.0 開始提出一套 HOLO的 UI風(fēng)格，一些APP的最新版都采用了這一風(fēng)格。這一風(fēng)格最明顯的變化就是將下方的主菜單移動(dòng)到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體按鍵后在屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。3、字體大小Android 上的字體為： Droid sans fallback ，是谷歌自己的字體，與微軟雅黑很像。 同樣，百度用戶體驗(yàn)的調(diào)查中，可以看出用戶可接受的文字相應(yīng)問