【小(xiǎo)編推薦】iOS和(hé)A÷¶∑♣ndroid的(de)界面設計(jì)尺寸規範♠≈

廢話(huà)不(bù)多(duō)說(shuō)，希望大(™α∑dà)家(jiā)耐心看(kàn)完後，不(bù♠™☆≠)要(yào)再糾結于尺寸相(xiàng)關的(de)λ< 東(dōng)西(xī)了(le)！

一(yī)、尺寸及分(fēn)辨率

iPhone界面尺寸：320*480、640*960、640*1136

iPad界面尺寸：1024*768、2048*153→ε6

單位：像素72dpi，在設計(jì)的(→♠‌de)時(shí)候并不(bù)是(shì)每個(gè)尺寸都(dō♣×φ¶u)要(yào)做(zuò)一(yī)套，尺寸按自(zì)★☆己的(de)手機(jī)來(lái)設計(jì¥ )，比較方便預覽效果，一(yī)般用(yòng)6∞‌40*960或者640*1136的(de)尺寸來(lái)≈→γ設計(jì)。

Ps：作(zuò)圖的(de)時(shí)候确保都(dōu)是✘σ£(shì)用(yòng)形狀工(gōng)具（快(kuài)捷鍵：→γ↑₽U）畫(huà)的(de)，這(zhè)樣更方便後期的(de)切圖或者尺寸變更☆σ↑。

二、界面基本組成元素

iPhone的(de)app界面一(yī)般由四個(gè)元素組成，分→•↕£(fēn)别是(shì)：狀态欄、導航欄、主菜單欄、內(nè÷¥§i)容區(qū)域。

這(zhè)裡(lǐ)取用(yòng)640*960的(de)尺寸設計( ✔jì)，那(nà)我們就(jiù)說(shuō)說(shuō)在這(zhè​↑)個(gè)尺寸下(xià)這(zhè)些(xiē)元素的(de)尺寸♦∑。

• 狀态欄：就(jiù)是(shì)我們經常說(shuō)的(de)信$∑→÷号、運營商、電(diàn)量等顯示手機(jī)狀态的(de)區(qū)域×φπ≠，其高(gāo)度為(wèi)：40px
• 導航欄：顯示當前界面的(de)名稱，包含相(xiàng)應的(de)功能(n€α éng)或者頁面間(jiān)的(de)跳(tiào)轉按鈕，™φ€其高(gāo)度為(wèi)：88px
• 主菜單欄：類似于頁面的(de)主菜單，提供整個(gè)應用(yò∏£ng)的(de)分(fēn)類內(nèi)容的(de)快(kuài)速跳(t∞♠iào)轉，其高(gāo)度為(wèi)♦≥•©：98px
• 內(nèi)容區(qū)域：展示應用(yòng)提供的(de)相(xiànσ¥g)應內(nèi)容，整個(gè)應用(yòng₩÷€)中布局變更最為(wèi)頻(pín)繁，其高(gāo)度為(wèi"&)：734px

至于我們經常說(shuō)的(de)iPhone5±↔☆♥/5s的(de)640*1136的(de)尺£β•寸，其實就(jiù)是(shì)中間(jiān)的(©$​de)內(nèi)容區(qū)域高(gāo)度增加到(dào)→←910px。

PS：在最新的(de)iOS7的(de)風(fēng)格中，♣×™蘋果已經開(kāi)始慢(màn)慢(m¶‌♥àn)弱化(huà)狀态欄的(de)存在，将狀态欄和(hé)導航欄合在了•♠∞♣(le)一(yī)起，但(dàn)是(shì)再怎麽變，尺寸高(gāo)ε¶×度也(yě)還(hái)是(shì)沒有(yǒu)變的(de)，★♥₹₽隻不(bù)過大(dà)家(jiā)在設計(jì)♥↓Ω​iOS7風(fēng)格的(de)界面的(de)時(shí)候多(duō)多(¥≠ λduō)注意下(xià)~

三、字體(tǐ)大(dà)小(xiǎo)

Phone上(shàng)的(de)字體(tǐ)英文(wéγ€n)為(wèi)：HelveticaNeue §ε;。至于中文(wén)Mac下(xià)用(yònσΩ×δg)的(de)是(shì)黑(hēi)體(tǐ)，Win下(xià)則為(w>÷δ→èi)華文(wén)黑(hēi)體(tǐ)。

下(xià)圖是(shì)百度用(yòng)戶體(tǐ)驗$♦做(zuò)過的(de)一(yī)個(gè)小(xiǎo)調查，可  (kě)以看(kàn)出用(yòng)戶可(kě)接受的(↑σ→de)文(wén)字大(dà)小(xiǎo)。

其實還(hái)有(yǒu)個(gè)更簡單的(de)方法就∑→"‍(jiù)是(shì)找你(nǐ)覺得(de)好(hǎo)•σ♦的(de)app應用(yòng)，手機(jī)截圖後放(fàng)進PSσ≈自(zì)己比對(duì)調節字體(tǐ)大(dà)小(<$ ♥xiǎo)咯。

我的(de)音(yīn)樂(yuè)—&md↔®♠ash;34px
我的(de)、淘歌(gē)、發現(xiàn)—— <30px
Muxx——34px
本地(dì)音(yīn)樂(yuè)—&m÷φα¥dash;30px
泡沫、鄧紫棋——24≠♦px

總之，方法是(shì)自(zì)己找到(dào)的(de)，想辦法解決問(wèα>σn)題，自(zì)己實踐，比别人(rén)告訴你(nǐ)印象更深₩♦λ刻不(bù)是(shì)麽？

一(yī)、尺寸及分(fēn)辨率

Android界面尺寸：480*800、720*1280、1080*1920。€☆∞♥[單位：像素]

Android比iPhone的(de)寸尺多(duō)了(le)很(hěn)多±÷→♣(duō)套，建議(yì)取用(yòng)720*1280這(zhè)個(g♣₹è)尺寸，這(zhè)個(gè)尺寸720*1280中顯示完美(měi)，♠£λ在1080*1920中看(kàn)起來(láΩε₩i)比較清晰，切圖後的(de)圖片文(wén)件(jiàn)大±λ∏(dà)小(xiǎo)也(yě)适中，應用(yòng)✘γ的(de)內(nèi)存消耗也(yě)不∑¶Ω<(bù)會(huì)過高(gāo)。

二、界面基本組成元素

Android的(de)app界面和(hé)iPhone的(de)基本相(x'✘iàng)同：狀态欄、導航欄、主菜單、內(nèi)<™¶容區(qū)域。

Android中我們取用(yòng)的(de)720*1280的(de)尺σε寸設計(jì)，那(nà)我們就(jiù)∑"×∑說(shuō)說(shuō)在這(zhè)個(gè)尺寸下(xi β<∏à)這(zhè)些(xiē)元素的(de)尺寸。

狀态欄高(gāo)度為(wèi)：50px

導航欄高(gāo)度為(wèi)：96px

主菜單欄高(gāo)度為(wèi)：96px

內(nèi)容區(qū)域高(gāo)度為★∏↓(wèi)：1038px（1280-50-96-96=1038）

Android最近(jìn)出的(de)手機(jī)都(dōu)幾‌♥₩乎去(qù)掉了(le)實體(tǐ)鍵，把功能(néng)鍵移到(ε₹γdào)了(le)屏幕中，當然高(gāo)度也(yě)是(shì)和(hé)Ωλ菜單欄一(yī)樣的(de)：96px

Ps：寫之前我翻了(le)好(hǎo)多(duō)關于Android的$★<(de)界面尺寸教程，都(dōu)沒找到(dào)像iOS一(yī)樣具Ωα←體(tǐ)的(de)規範，或許因為(wèi)在安卓中這(zhèα≤≥​)些(xiē)控件(jiàn)的(de)高(gā‌©o)度都(dōu)能(néng)用(yòn≠¶♥÷g)程序自(zì)定義，都(dōu)沒有(yǒu)提到(d‌↔ào)具體(tǐ)的(de)尺寸數(shù)值，所以就(jiù)自(≤Ω‌zì)己找了(le)Android的(de)設計(jì)規範，尺寸都(↔→♠dōu)是(shì)自(zì)己在PS中量的(de)∏₹Ω。

Android為(wèi)了(le)在界面上(shàng)區(qū)Ω÷别于iOS，Android4.0開(kāi)始提出的(de)一(y∑↕ī)套HOLO的(de)UI風(fēng)格一(yī)些(x©¶iē)app的(de)最新版本都(dōu)采用(yòng)了(le)這(zh¥>∑è)一(yī)風(fēng)格，這(zh♠$φ è)一(yī)風(fēng)格最明(míng)顯的(de)變化(huà∏≈¥ε)就(jiù)是(shì)将下(xià)方的(de)主菜©$單移到(dào)了(le)導航欄下(xià)面 ÷φ♦，這(zhè)樣的(de)方式解決了(le)現(xiàn)在很σ¥(hěn)多(duō)手機(jī)去(qù)除實體₽γ>(tǐ)鍵後再屏幕中顯示而出現(xiàn)的(de)雙底欄的('≥de)尴尬情景。

三、字體(tǐ)大(dà)小(xiǎo)

Android 上(shàng)的(de)字體(tǐ)為(w<©λ©èi)：Droid sans fallback，是(shì)谷歌☆©(gē)自(zì)己的(de)字體(tǐ)，與微(wēi)軟雅黑(hēiΩεσ®)很(hěn)像。

同樣，百度用(yòng)戶體(tǐ)驗的(de)調查中，可(kě)以‌✔看(kàn)出用(yòng)戶可(kě)接受的(de)文(☆®​wén)字相(xiàng)應問(wèn)題。

具體(tǐ)大(dà)小(xiǎo)，還(hái)是(sh≠¥↓→ì)那(nà)句話(huà)，找自(zì)己喜歡的(d✔ ₹e)app界面，手機(jī)截圖後放(f♥Ω★ àng)進PS自(zì)己比對(duì)調節字體(tǐ)大∑♣ (dà)小(xiǎo)[切記，一(yī)定是(shì)高(¥≠ >gāo)清截圖哦]