APPUI設(shè)計(jì)規(guī)范

1、IOS Android APP UI設(shè)計(jì)規(guī)范iOS 篇 iOS 界面尺寸設(shè)備設(shè)備分辨率分辨率PPI狀態(tài)欄高度狀態(tài)欄高度導(dǎo)航欄高度導(dǎo)航欄高度標(biāo)簽欄高度標(biāo)簽欄高度Iphone6 plus1080 x1920 px401 ppi54 px132 px146 pxIphone6/6s750 x1334 px326 ppi40 px88 px98 pxIphone5/5c/5s640 x1136 px326 ppi40 px88 px98 pxIphone4/4s640 x960 px326 ppi40 px88 px98 pxppi（pixels per inch）即每英寸像素，也叫像素密度。圖標(biāo)尺寸

2、設(shè)備設(shè)備APP store程序應(yīng)用程序應(yīng)用主屏幕主屏幕Spotlight搜索搜索標(biāo)簽欄標(biāo)簽欄工具欄工具欄/導(dǎo)導(dǎo)航欄航欄Iphone6 plus1024x1024px180 x180 px114x114px87x87 px75x75 px66x66 pxIphone6/6s1024x1024px120 x120px114x114px58x58 px75x75 px44x44 pxIphone5/5c/5s1024x1024px120 x120px114x114px58x58 px75x75 px44x44 pxIphone4/4s1024x1024px120 x120px114x114px58x

3、58 px75x75 px44x44 pxIphone6 圖例狀態(tài)欄規(guī)范 用戶依賴于狀態(tài)欄的重要信息，如信號(hào)，時(shí)間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。pt（point）是印刷業(yè)上長使用的單位，磅的意思，是一種固定的長度單位，可以用測量設(shè)備測量的單位。pt=px*3/4 1pt=1/72英寸導(dǎo)航欄規(guī)范 導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動(dòng)作按鈕，如添加，編輯，完成。請(qǐng)注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。搜索欄工具欄Stepper控件 提示框 提示對(duì)話框是用于輸送關(guān)鍵信息和提示快速操作。

4、提示應(yīng)保持最少文字，退出一定是明顯。分段控制框滑塊開關(guān) 布局標(biāo)準(zhǔn)控件 布局原理（8px原理由來） 由于ios技術(shù)開發(fā)是以320 x640px為標(biāo)準(zhǔn)開發(fā)的，所以此設(shè)定尺寸為1，算出各個(gè)尺寸的比例，然后乘以4，各個(gè)尺寸都能滿足是整數(shù)，可以保證開發(fā)時(shí)不會(huì)模糊。2px（視網(wǎng)膜屏的到來）切圖設(shè)計(jì)稿尺寸是640 x960px，所以設(shè)計(jì)時(shí)最小的單位尺寸是8px。 使用8px原理的目的 保證在雙平臺(tái)上大部分機(jī)型開發(fā)中不會(huì)出現(xiàn)模糊的變形的問題；而且只需設(shè)計(jì)一套設(shè)計(jì)稿，減少設(shè)計(jì)師的工作量，提高工作效率。ios 1334x750 pxIphone6/6s 圖標(biāo)網(wǎng)絡(luò) Apple使用黃金分割在它們的一些圖標(biāo)上。這讓圖標(biāo)

5、保持良好的比例，同時(shí)確保了美感。雖然這是一個(gè)很好的規(guī)范，但它不是嚴(yán)格要求。甚至Apple在很多圖標(biāo)上也省略了它。 標(biāo)準(zhǔn)色 字體大小、規(guī)格一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。IOS 9 中文字體：蘋方/PingFang SCIOS 8 中文字體：常州華文的黑體-簡，在mac os x 系統(tǒng)中選擇 黑體-簡IOS 英文、數(shù)字：Helvetial 間距和對(duì)齊方式 一般的規(guī)范最低要求8pt空白或邊距。這將有足夠留白空間，使得布局更容易掃描和文本更具可讀性。而且在此基礎(chǔ)上，UI元素應(yīng)對(duì)齊，文本應(yīng)該有相同的基線位置。Android篇Android 界面尺寸

6、界面尺寸（1280 x720px）狀態(tài)欄高度：50 px導(dǎo)航欄高度：96 px標(biāo)簽欄高度：96 pxAndroid最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和標(biāo)簽欄一樣的：96 px內(nèi)容區(qū)域高度為：1038 px （1280-50-96-96=1038）常用尺寸一般把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*d

7、p常用屏幕尺寸240 x320 ldpi （低等屏幕）320 x480 mdpi （中等屏幕）480 x800 hdpi （高清屏幕）720 x1280 xhdpi （超高清屏幕）相應(yīng)的圖片資源尺寸的比例關(guān)系為1：1.5: 2也就是第一套圖為mdpi的資源圖片，hdpi可調(diào)整到150%，xhdpi可調(diào)整到200%。字體規(guī)范、大小5.X版本：思源黑體/Noto Sans Han5.0以下版本：Droid Sans Fallback，可用 文泉驛微米黑 代替英文、數(shù)字：Roboto標(biāo)題（58px或60px） 二級(jí)標(biāo)題（44px或48px） 正文字體（32px或36px）；英文最小字號(hào)22px，中文

8、最小字號(hào)。SP與DP介紹 dp：device independent pixelsdevice independent pixels(設(shè)備獨(dú)立像素)。 spsp：scaled pixels(放大像素)， 主要用于字體顯示best for textsize。由此，根據(jù) google 的建議，TextView 的字號(hào)最好使用 sp 做單位，而且查看TextView的源碼可知 Android 默認(rèn)使用 sp 作為字號(hào)單位。 sp和dp一樣，是android開發(fā)里特有的單位，設(shè)計(jì)師在做UI設(shè)計(jì)的時(shí)候 通常最初是建立320*480這個(gè)尺寸的畫布開始的，這個(gè)尺寸的畫布 在android分辨率的分類中稱為mdpi，在這個(gè)尺寸下，ps里的1px就等于android中的1dp，同樣，這個(gè)時(shí)候1點(diǎn)的字就等于 android中1sp，舉個(gè)例子：你建立畫布的尺寸是320-480，里面的文字是30點(diǎn)，那么它就是30sp。 一般android設(shè)置長度和寬度多用dp,設(shè)置字體大小多用sp. 在屏幕密度為160，1dp=1px,當(dāng)屏幕密度為240時(shí)，1dp=1.5px.48DP定律 48dp作為安卓可觸摸的UI元件的標(biāo)準(zhǔn)。 一般來說，48dp轉(zhuǎn)化為一個(gè)物理尺寸約9毫米。建議的目標(biāo)大小為7-10毫米的范