iOS界面設(shè)計(jì)尺寸規(guī)范

1、iOS界面設(shè)計(jì)尺寸規(guī)范一、尺寸及分辨率iPhone 界面尺寸：320*480、640*960>640*1136、750*1334、1080*1920等。iPad 界面尺寸：1024*768、2048*1536 等。單位：像素72dpi ,在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來(lái)設(shè) 計(jì)，比較方便預(yù)覽效果，一般用 640*960 或者640*1136的尺寸來(lái)設(shè)計(jì)。Ps :作圖的時(shí)候確保都是用形狀工具（快捷鍵：U）畫的，這樣更方便后期的切圖或者尺寸變更。二、界面基本組成元素iPhone的app界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容區(qū)域。640*960的尺

2、寸設(shè)計(jì)下這些元素的尺寸。 狀態(tài)欄：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域， 其高度為：40px 導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕， 其高度為：88Px 主菜單欄：類似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)， 其高度為：98px 內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其 高度為：734px下圖說(shuō)明：Photnr至于我們經(jīng)常說(shuō)的iPhone5/5s 的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910Px 。PS:在最新的iOS7的風(fēng)格中，蘋果已經(jīng)開(kāi)始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航 欄合在了一起，但是

3、再怎么變，尺寸高度也還是沒(méi)有變的，只不過(guò)大家在設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意下 iM nn Elk尸 ir三、字體大小Heiti SC （黑體-簡(jiǎn)，黑體-簡(jiǎn)的英文名稱為Heiti),是 Mac OS X SnowSC。Heiti為黑體的拼音，SC代表簡(jiǎn)體中文（Simplified ChineseLeopard （版本10.6）包含的簡(jiǎn)體中文字型，也是 iPhone OS 3.0 （版本4.0后改名為iOS）及iPod nano第五代以來(lái)的預(yù)設(shè)簡(jiǎn)體中文字型。黑體-簡(jiǎn)系為黑體，取代華文黑體成為Mac OS X SnowMac OSLeopard的預(yù)設(shè)簡(jiǎn)體中文字型。在過(guò)去，華文黑體是X的預(yù)設(shè)簡(jiǎn)

4、體中文字型，因此以前并沒(méi)有黑體-簡(jiǎn)。黑體-簡(jiǎn)是全新的字型，與黑體 -繁同以華文黑體為基礎(chǔ)開(kāi)發(fā)，成為 Mac OS X SnowLeopard 與 iPhone OS3.0 (版本4.0后改名為iOS)之后內(nèi)建并同時(shí)為預(yù)設(shè)的簡(jiǎn)體中文字型。雖與華文黑體為兩套 字型，但差異微小，僅排列上有差距，筆畫的差距也十分微小。包含 細(xì)體”與中黑”，黑體-簡(jiǎn)與黑體-繁皆使用.ttc (TrueTypeCollection )格式，可以在單一檔案包含多套字型。其中，黑體-簡(jiǎn)與黑體-繁的細(xì)體在/System/Library/Fonts/STHeiti Light.ttc ,黑體-簡(jiǎn)與黑體-繁的中黑在 /Librar

5、y/Fonts/STHeiti Medium.ttc 。在ios中默認(rèn)字體分為三類：第一種：STHeiti-Light.ttc 和 STHeiti-Medium.ttc 代表的是中文字體第二種：_H_Heketica.ttc 和_H_HelveticaNeue.ttc 代表的是英文以及數(shù)字字體第三種：LockClock.ttf代表的是鎖屏?xí)r間字體IPhone 上的字體英文為：HelveticaNeue 。至于中文 Mac下用的是黑體，Win下則為華文黑體。卜圖是百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小?？尚尬蚁戮€f日口書用戶訓(xùn)按費(fèi))見(jiàn)小周£出戶認(rèn)即時(shí)')蜉幽

6、tiOS區(qū)文本26Px30px32px-34px皿*28Px3Cpx注釋24 px2Epx其實(shí)還有個(gè)更簡(jiǎn)單的方法就是找你覺(jué)得好的app應(yīng)用，手機(jī)截圖后放進(jìn) PS自己比對(duì)調(diào)節(jié)字體大小咯。 B£LL 量4； 21 PM我的音樂(lè)海歌發(fā)現(xiàn)MUXXa本地音哥”3>Q我的最強(qiáng)25>Q云歌單o>井莪的下鞋47>忠音樂(lè)射>34px ,本地音樂(lè)我的音樂(lè)34Px ,我的、淘歌、發(fā)現(xiàn)30Px , Muxx30Px ,泡沫、鄧紫棋24px總之，方法是自己找到的，想辦法解決問(wèn)題，自己實(shí)踐，比別人告訴你印象更深刻不是 么？、尺寸及分辨率Android 界面尺寸：480*800、72

7、0*1280、1080*1920。單位：像素Android 比iPhone的寸尺多了很多套，建議取用720*1280這個(gè)尺寸，這個(gè)尺寸720*1280中顯示完美，在1080*1920中看起來(lái)比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過(guò)高。二、界面基本組成元素Android 的app界面和iPhone的基本相同： 狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。Android 中我們?nèi)∮玫?20*1280的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸。牙茶1Q B / « 17:50曲 練2 Q >RENO*SUGGESTEII'm first!LOyQupNavi

8、gation ModeBia*-z> r(i狀態(tài)欄高度為：50Px導(dǎo)航欄高度為：96px主菜單欄高度為：96Px內(nèi)容區(qū)域高度為：1038Px(1280-50-96-96=1038)Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和菜單欄一樣的：96pxPs：寫之前我翻了好多關(guān)于Android的界面尺寸教程，都沒(méi)找到像iOS 一樣具體的規(guī)范，或許因?yàn)樵诎沧恐羞@些控件的高度都能用程序自定義，都沒(méi)有提到具體的尺寸數(shù)值，所以就自己找了 Android 的設(shè)計(jì)規(guī)范，尺寸都是自己在PS中量的。Android 為了在界面上區(qū)別于 iOS , Android4.0開(kāi)始提出的一套 HOLO的UI風(fēng)格些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了 導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的 尷尬情景。矢黃更會(huì)用印心o 期賦中心Q圓德中心心 SffJXQ氣胞.主況莪懦文樣r陽(yáng)總的十生活優(yōu)stwsha原本的風(fēng)格”朋厘留口潘俄稅近的人/灌吊需族哀情山HOLOi>三、字體大小Android上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像。