原創(chuàng)/自譯教程：APP設(shè)計(jì)規(guī)范(原創(chuàng)文章)
想來各位工作時(shí)最常提起的就是規(guī)范，最讓人頭疼的也是“規(guī)范”了吧。一個(gè)沒那么多亮點(diǎn)的app，有了規(guī)范也會(huì)讓用戶用著舒服，反而言之，一個(gè)很特別很個(gè)性的app肆意發(fā)揮，沒有規(guī)范，這讓用戶用著也覺得食之無味棄之可惜了吧。進(jìn)入正題，咳咳...
一、IOS部分
1.界面尺寸
注：PPI越高，顯示的密度越高，擬真度就越高。
示例
ios通常用750*1334px（iphone6尺寸），主流為1080*1920px(PLUS尺寸)
Screen Size這個(gè)網(wǎng)站可以在線查詢不同屏幕的尺寸
2.字體規(guī)范
2.1字體選擇
IOS7-8:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好。英文用：HelveticaNeue
IOS9（及9以上）:中文使用蘋方體
2.2字體大小
iPhone上的字體英文為Helvetica Nenu，一種纖細(xì)簡單的文字，中文為一種比較細(xì)黑體（常用華文細(xì)黑，冬青黑體，不是微軟雅黑）
A：導(dǎo)航欄標(biāo)題：medium 34px（34-36px）
B：按鈕和表頭：light 34px
C：表格標(biāo)簽：Regular 28px
D：Tab頁圖標(biāo)標(biāo)簽：Regular 20px（20-34px）
E:文本中特殊字體最小不能小于16px
2.3顏色選擇
2.3.1常用字體顏色
在界面中的文字分為三個(gè)層級(jí)，主文、副文、提示文案等。在白色的背景下，字體的顏色層次其實(shí)就是黑、深灰、灰色。
2.3.2常用背景與分割顏色
分割線則采用#e5e5e5或#cccccc的顏色值，一個(gè)深一些，一個(gè)淺一些。這個(gè)會(huì)更具不同的軟件風(fēng)格采用不同的深淺，由設(shè)計(jì)自己把控。
建議：不管是IOS系統(tǒng)還是Android系統(tǒng)，字體大小設(shè)定都不是定死的，我們可以在PC端做好效果圖后導(dǎo)到自己的手機(jī)里看一下實(shí)際效果。
3.圖標(biāo)尺寸大小
圖標(biāo)都按照最大1024*1024進(jìn)行設(shè)計(jì)，之后按照比例進(jìn)行縮小、調(diào)整
高光部分與圓角不需要做，ios系統(tǒng)自動(dòng)生成
APP Stroe圖標(biāo) 1024*1024PX
應(yīng)用啟動(dòng)圖標(biāo) 120*120PX
導(dǎo)航欄圖標(biāo) 44*44PX
標(biāo)簽欄圖標(biāo) 50*50PX
注：750*1334px中一個(gè)圖標(biāo)最小不要小于44*44px；頁面中的小icon要小、易畫、不要太具象化
小icon: http://www.iconfont.cn/ (可現(xiàn)用、可靈感用)
https://www.iconfinder.com/ (可現(xiàn)用、可靈感用)
http://www.easyicon.net/ (找靈感)
二、Android部分
1.界面尺寸
安卓界面尺寸不像蘋果，只有那么幾個(gè)，而且都是蘋果公司開發(fā)，安卓系統(tǒng)的手機(jī)開發(fā)商及界面尺寸很多，這就有了適配問題……所以安卓做界面的時(shí)候就要以一個(gè)市面上用戶居多的那個(gè)尺寸來做，做完切圖，cutterman你懂的撒,點(diǎn)幾下就完事兒(/≧▽≦)/
Android界面尺寸：
480 * 800 720 * 1280 1080 * 1920
Android的尺寸比IOS要多很多套，建議采用720*1080或1080*1920這個(gè)尺寸進(jìn)行設(shè)計(jì)
Android的APP界面與IOS基本相同：狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄以及中間的內(nèi)容
布局規(guī)范
720*1280的布局規(guī)范
根據(jù)48dp原則，以及一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求：
狀態(tài)欄高度： 50 px
導(dǎo)航欄、操作欄高度： 96 px=48dp x 2
主菜單欄高度： 96 px
內(nèi)容區(qū)域高度： 1038 px （1280-50-96-96=1038）
Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96 px
補(bǔ)：1080*1920是用3@，用720*1280的各欄高度除以2乘以3可得
圖標(biāo)尺寸
字體大小
Android
英文字體：Roboto 中文字體：Noto(思源字體) 安卓手機(jī)的默認(rèn)中文字體都是droid sans fallback，是谷歌自己的字體，與微軟雅黑很像，小米miui 用的也是這種字體。
三、切圖
第三方插件Cutterman的安裝：
打開文件菜單-腳本-瀏覽-打開.Jsx文件，把Cutterman粘貼到彈出的文件夾中
我們?cè)賮砜纯催@個(gè)@1、@2、@3，系統(tǒng)ios
@1x適配：iPhone4 iPhone4S
@2x適配：iPhone5 iPhone5S iPhone5C iPhone6 iPhone6s
@3x適配：iPhone6 Plus iPhone6s Plus
前面ios有講到過PPI，安卓這邊有DPI
MDPI:320*480 HDPI:480*800
XHDPI:720*1280 XXHDPI:1080*1920
當(dāng)然切圖的時(shí)候還得注意圖層的命名以及文件的整理歸類，最后你還得標(biāo)注，當(dāng)然有的公司UI不標(biāo)注=、=，隨你吧，app規(guī)范總結(jié)到此結(jié)束，還有啥不懂得記得問度娘，若文中有什么錯(cuò)誤或?qū)懙貌缓玫牡胤竭€請(qǐng)包涵，還有就是我從百度上擼來的幾張不清晰但是用放大鏡還是看得見的圖。。。。。就別吐槽了，蟹蟹，就醬
關(guān)于規(guī)范網(wǎng)址：http://www.foolo.cn/
設(shè)計(jì)師導(dǎo)航：http://www.niudana.com/
http://www.userinterface.com.cn/
網(wǎng)址相信大家逛各種技術(shù)網(wǎng)站的時(shí)候都有看過或者收藏過，這里只是冰山一角，獻(xiàn)丑了，飄走=、=
不好意思，贊在下邊↓
