IOS＆AndroidAPPUI設(shè)計(jì)規(guī)范1

iOS篇22024/5/13點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本iOS界面尺寸設(shè)備分辨率PPI狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度Iphone6plus1080x1920px401

ppi54px132px146pxIphone6/6s750x1334px326

ppi40px88px98pxIphone5/5c/5s640x1136px326

ppi40px88px98pxIphone4/4s640x960px326

ppi40px88px98pxppi（pixelsperinch）即每英寸像素，也叫像素密度。3

圖標(biāo)尺寸設(shè)備APPstore程序應(yīng)用主屏幕Spotlight搜索標(biāo)簽欄工具欄/導(dǎo)航欄Iphone6plus1024x1024px180x180px114x114px87x87px75x75px66x66pxIphone6/6s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone5/5c/5s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone4/4s1024x1024px120x120px114x114px58x58px75x75px44x44px42024/5/13Iphone6圖例52024/5/13狀態(tài)欄規(guī)范用戶依賴于狀態(tài)欄的重要信息，如信號(hào)，時(shí)間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。pt（point）是印刷業(yè)上長(zhǎng)使用的單位，磅的意思，是一種固定的長(zhǎng)度單位，可以用測(cè)量設(shè)備測(cè)量的單位。pt=px*3/41pt=1/72英寸62024/5/13導(dǎo)航欄規(guī)范導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動(dòng)作按鈕，如添加，編輯，完成。請(qǐng)注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。72024/5/13搜索欄82024/5/13工具欄Stepper控件92024/5/13提示框提示對(duì)話框是用于輸送關(guān)鍵信息和提示快速操作。提示應(yīng)保持最少文字，退出一定是明顯。102024/5/13分段控制框112024/5/13滑塊開(kāi)關(guān)122024/5/13布局標(biāo)準(zhǔn)控件布局原理（8px原理由來(lái)）由于ios技術(shù)開(kāi)發(fā)是以320x640px為標(biāo)準(zhǔn)開(kāi)發(fā)的，所以此設(shè)定尺寸為1，算出各個(gè)尺寸的比例，然后乘以4，各個(gè)尺寸都能滿足是整數(shù)，可以保證開(kāi)發(fā)時(shí)不會(huì)模糊。@2px（視網(wǎng)膜屏的到來(lái)）切圖設(shè)計(jì)稿尺寸是640x960px，所以設(shè)計(jì)時(shí)最小的單位尺寸是8px。使用8px原理的目的保證在雙平臺(tái)上大部分機(jī)型開(kāi)發(fā)中不會(huì)出現(xiàn)模糊的變形的問(wèn)題；而且只需設(shè)計(jì)一套設(shè)計(jì)稿，減少設(shè)計(jì)師的工作量，提高工作效率。ios1334x750pxIphone6/6s132024/5/13點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

圖標(biāo)網(wǎng)絡(luò)Apple使用黃金分割在它們的一些圖標(biāo)上。這讓圖標(biāo)保持良好的比例，同時(shí)確保了美感。雖然這是一個(gè)很好的規(guī)范，但它不是嚴(yán)格要求。甚至Apple在很多圖標(biāo)上也省略了它。14

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

標(biāo)準(zhǔn)色15

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

字體大小、規(guī)格一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。IOS9中文字體：蘋方/PingFangSCIOS8中文字體：常州華文的黑體-簡(jiǎn)，在macosx系統(tǒng)中選擇黑體-簡(jiǎn)IOS英文、數(shù)字：Helvetial16

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本間距和對(duì)齊方式一般的規(guī)范最低要求8pt空白或邊距。這將有足夠留白空間，使得布局更容易掃描和文本更具可讀性。而且在此基礎(chǔ)上，UI元素應(yīng)對(duì)齊，文本應(yīng)該有相同的基線位置。

17

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本Android篇18

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本Android界面尺寸19

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

界面尺寸（1280x720px）狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和標(biāo)簽欄一樣的：96px

內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）20

常用尺寸一般把48dp作為可觸碰UI原件的標(biāo)準(zhǔn)，48dp=72px=9mm，這是一個(gè)用戶手指能夠準(zhǔn)確舒適觸碰的最小尺寸。Android界面默認(rèn)list的高度是：48dp=72px；Android界面每個(gè)元素之間最小的間距是：8dp=12px；Android界面默認(rèn)btn的高度是：40dp=60pxpx=ppi/160*dp212024/5/13常用屏幕尺寸240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）相應(yīng)的圖片資源尺寸的比例關(guān)系為1：1.5:2也就是第一套圖為mdpi的資源圖片，hdpi可調(diào)整到150%，xhdpi可調(diào)整到200%。222024/5/13點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本雙擊添加標(biāo)題文字字體規(guī)范、大小5.X版本：思源黑體/NotoSansHan5.0以下版本：DroidSansFallback，可用文泉驛微米黑代替英文、數(shù)字：Roboto標(biāo)題（58px或60px）二級(jí)標(biāo)題（44px或48px）正文字體（32px或36px）；英文最小字號(hào)22px，中文最小字號(hào)。23

SP與DP介紹dp：deviceindependentpixels(設(shè)備獨(dú)立像素)。

sp：scaledpixels(放大像素)，

主要用于字體顯示bestfortextsize。由此，根據(jù)google的建議，TextView的字號(hào)最好使用sp做單位，而且查看TextView的源碼可知Android默認(rèn)使用sp作為字號(hào)單位。

sp和dp一樣，是android開(kāi)發(fā)里特有的單位，設(shè)計(jì)師在做UI設(shè)計(jì)的時(shí)候通常最初是建立320*480這個(gè)尺寸的畫布開(kāi)始的，這個(gè)尺寸的畫布在android分辨率的分類中稱為mdpi，在這個(gè)尺寸下，ps里的1px就等于android中的1dp，同樣，這個(gè)時(shí)候1點(diǎn)的字就等于android中1sp，舉個(gè)例子：你建立畫布的尺寸是320-480，里面的文字是30點(diǎn)，那么它就是30sp。一般android設(shè)置長(zhǎng)度和寬度多用dp,設(shè)置字體大小多用sp.在屏幕密度為160，1dp=1px,當(dāng)屏幕密度為240時(shí)，1dp=1.5px.242024/5/1348DP定律48dp作為安卓可觸摸的UI元件的標(biāo)準(zhǔn)。一般來(lái)說(shuō)，