使用sketch最重要的一點(diǎn)是設(shè)計(jì)好控件的規(guī)范。
為做好設(shè)計(jì)規(guī)范需要對(duì)色彩進(jìn)行編號(hào)，比如:color_a”_1，color_b_2，color_c_3等8。
對(duì)色彩的歸類可分為以下幾種:
品牌色（即主色調(diào)）
通過(guò)純度（S）和明明度（B）的變化，延伸出擴(kuò)展色。
輔助色”8
通過(guò)改變色相（H），保持純度（S）和明度（B）與品牌色差異在一定范圍內(nèi)，延伸出輔助色。
警惕色
通過(guò)改變色相（H），保持純度（S）和明度（B）與品牌色差異在一定范圍內(nèi)，延伸出警惕色。
內(nèi)容色（即文字內(nèi)容的顏色）
保持品牌色色相（H），通過(guò)純度（S）和明度（B）的變化，延伸出內(nèi)容色。
注意:顏色由色相、純度、亮度組成，通過(guò)調(diào)整HSB這三個(gè)色值來(lái)達(dá)到彼此之間的聯(lián)系。
字號(hào)規(guī)范？（適配不同手機(jī)，有何規(guī)律？行間距是多多少？有何規(guī)律？）
IOS字體規(guī)范
尺寸單位pt
IP6 ?PLUS ?(@3x)
IP4、5（@2x）
首先先弄懂IOS手機(jī)尺寸
IP7 PLUS ? ? 1080 *1920 ? 5.5英寸 ? 401PPI
IP7 ? ? ? ? ? ? ? ?750*1334 ? ?4.7英寸 ? ? 326PPI
IP6 PLUS ?設(shè)計(jì)版 ?1242*2208
IP6 PLUS ?放大版 ?1125*2001（是IP6設(shè)計(jì)版的1.5倍）放大版就是等比放大1.5倍得出的分辨率。
IP6 PLUS ?物理版 1080*1920 ?5.5英寸 ?401PPI
IP6設(shè)計(jì)版 ? ? ? ? ? ?750*1334 ? ? ?4.7英寸 ?326PPI
IP6放大版 ? ? ? ? ? ?640*1136
IP5 ? ? ? ? ? ? ? ? ? ? ? 640*1136 ? ? ?4英寸 ? ? 326PPI
IP4 ? ? ? ? ? ? ? ? ? ? ? 640*960 ? ? ? ? 3.5英寸 330PPI
總結(jié):IP6是IP5（IP4）的1.5倍，IP6 PLUS（IP7 PLUS）是IP6（IP7）的1.66倍。
因此，做設(shè)計(jì)稿時(shí)以IP6尺寸設(shè)計(jì)，通過(guò)按比例縮放來(lái)適配其他手機(jī)。
單位之間的換算關(guān)系隨倍率變化：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
4倍：1pt=1dp=4px（xxxhdpi）
IP4、5、6、7:
狀態(tài)欄:40 ? 導(dǎo)航欄:88 ? 標(biāo)簽欄:98
IP6 PLUS、IP7 PLUS
狀態(tài)欄:60 ? 導(dǎo)航欄:132 ? 標(biāo)簽欄:146
IP6 PLUS、IP7 PLUS（物理版、放大版）:
狀態(tài)欄:54 ? 導(dǎo)航欄:132 ? 標(biāo)簽欄:146
IP&IPOD TOUCH 一代二代三代:
狀態(tài)欄:20 ? 導(dǎo)航欄:44 ?標(biāo)簽欄:49
IP圖標(biāo)尺寸
IP6、5、4:
APP STORE1024*1024:程序應(yīng)用:120*120主屏幕114*114:spotlight搜索58*58:標(biāo)簽欄75*75:工具欄和導(dǎo)航欄44*44*
IP6 PLUS:
APP STORE1024*1024:程序應(yīng)用:180*180主屏幕114*114:spotlight搜索87*87標(biāo)簽欄75*75:工具欄和導(dǎo)航欄66*66
IP&IPOD一代、二代、三代:
APP STORE1024*1024:程序應(yīng)用:180*180主屏57*57*114:spotlight搜索29*29標(biāo)簽欄38*38:工具欄和導(dǎo)航欄30*30
手機(jī)界面設(shè)計(jì)元素
文字
圖標(biāo)
按鈕
顏色
邊距
字體尺寸主要包括以下:單位（px）
導(dǎo)航字體尺寸
36，行間距:56。用于導(dǎo)航標(biāo)題、詳情頁(yè)標(biāo)題。
文章列表標(biāo)題尺寸
32，50。
帶頭像列表尺寸
30，46。二級(jí)導(dǎo)航文字、帶頭像列表標(biāo)題、詳情文字、輸入提示文字等。
用于較重要小標(biāo)題
28，44。用于副標(biāo)題、評(píng)論標(biāo)題、點(diǎn)贊標(biāo)題、按鈕文字等。
用于詳情描述文字
26，40。列表詳情、作品詳情、卡片標(biāo)題。
用于較重要的
黃金分割
黃金矩形
在一個(gè)黃金矩形中，以一個(gè)頂點(diǎn)為圓心，矩形的較短邊為半徑作一個(gè)四分之一圓，交較長(zhǎng)邊于一點(diǎn)，過(guò)這個(gè)點(diǎn)，作一條直線垂直于較長(zhǎng)邊，這時(shí)，生成的新矩形仍然是一個(gè)黃金矩形，這個(gè)操作可以無(wú)限重復(fù)，產(chǎn)生無(wú)數(shù)個(gè)的黃金矩形
IPAD設(shè)計(jì)尺寸
IWATCH設(shè)計(jì)規(guī)范
MAC設(shè)計(jì)規(guī)范
IOS10新功能
安卓手機(jī)尺寸規(guī)范
尺寸單位dp
QVGA ? 240*320
WQVGA ? 400*240
HVGA ?480*320
VGA ? 640*480
WVGA ? 800*480
? ? ? ?倍率
ldpi ?0.75
mdpi（320*480） ?1
hdpi（480*800 480*854 ?540*960） 1.5
xhdpi（720*1280）2
xxhdpi ?（1080*1920）3
xxxhdpi ?（1440*2560）4
單位之間的換算關(guān)系隨倍率變化：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
4倍：1pt=1dp=4px（xxxhdpi）
以1倍的mdpi為基準(zhǔn)，像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率相近的顯示效
物聯(lián)網(wǎng)
微信小程序
什么是微信小程序？
微信小程序的特點(diǎn)？如何使用？
微信小程序文檔。
圖標(biāo)規(guī)范
理性定制好圖標(biāo)的安全區(qū)，根據(jù)不同圖形基本型進(jìn)行視差調(diào)整，保持視覺(jué)體量感的一致
////
普通圖和視網(wǎng)膜圖
視網(wǎng)膜屏是分辨率超過(guò)人眼識(shí)別的高分辨率屏幕，是蘋果公司在2010年Iphone4發(fā)布會(huì)上提出的營(yíng)銷術(shù)語(yǔ)。
將640*960像素壓縮到3.5英寸的顯示屏內(nèi)，該屏幕的像素密度達(dá)到326ppi（當(dāng)拿的手機(jī)距離你25到30厘米，手機(jī)像素密度達(dá)到300ppi以上，視網(wǎng)膜就無(wú)法分辨出像素點(diǎn)了）
像素密度={√（長(zhǎng)度像素?cái)?shù)^2+寬度像素?cái)?shù)^2）}/ 屏幕尺寸
/////
手機(jī)切圖的命名規(guī)則
//////
一、圖片格式@2x與@3x
應(yīng)對(duì)非視網(wǎng)膜和視網(wǎng)膜屏，APP有時(shí)會(huì)提供不同大小的圖片，1倍圖和2倍圖和3倍87圖，它們的像素與1倍數(shù)圖相比相差2倍或者3倍。
命名規(guī)則：2倍圖在1倍圖的名字后加@2x
普通：sample.png2倍：sample@2x.png3倍：sample@3x.png
系統(tǒng)用“sample”尋找圖片的時(shí)候，會(huì)自動(dòng)根據(jù)設(shè)備屏幕取對(duì)應(yīng)的圖片
由于retina屏幕的普及，現(xiàn)在工程中用得最多的是@2x和@3x圖片
/////
iphone4、5、6采用@2x圖，iphone6plus采用@3x圖。對(duì)于iphone4、5、6不需要加@2x，程序會(huì)優(yōu)先加載@2x的圖。對(duì)于iphone6 plus加@3x，
/////
material design設(shè)計(jì)規(guī)范
material design，材料設(shè)計(jì)語(yǔ)言是谷歌提出的全新的設(shè)計(jì)語(yǔ)言。旨在為手機(jī)、平板電腦、臺(tái)式機(jī)和其他平臺(tái)提供更加一致、更加廣泛的外觀和感覺(jué)。
material design是谷歌公司為統(tǒng)一各平臺(tái)產(chǎn)品外觀而設(shè)計(jì)出一套規(guī)范。material design顏色更鮮艷，動(dòng)畫效果更突出，具有內(nèi)置的實(shí)時(shí)ui陰影，可在不同屏幕切換的hero元素。
material design是谷歌拿出來(lái)媲美蘋果的設(shè)計(jì)。谷歌CEO拉里.佩奇為
魔法紙片即Material Design結(jié)合卡片式設(shè)計(jì)，又結(jié)合現(xiàn)實(shí)世界里紙張的隱喻，統(tǒng)一了Google在設(shè)計(jì)上的表達(dá)，從而展示出一種強(qiáng)烈的風(fēng)格。
1、核心思想
,aterial design的核心思想，就是把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過(guò)渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡(jiǎn)潔與直觀的效果。
Material design是最重視跨平臺(tái)體驗(yàn)的一套設(shè)計(jì)語(yǔ)言。由于規(guī)范嚴(yán)格細(xì)致，保證它在各個(gè)平臺(tái)使用體驗(yàn)高度一致。不過(guò)目前還只有Google自家的服務(wù)這么做，畢竟其他平臺(tái)有自己的規(guī)范與風(fēng)格。
2、材質(zhì)與空間
材質(zhì)
魔法紙片層疊、合并、分離擁有現(xiàn)實(shí)中的厚度、慣性、反饋，同時(shí)擁有液體的特性，能夠自由伸展變形。
魔法紙片擁有紙片不一樣的特性:
。紙片可以收縮改變形狀
。紙片變形時(shí)可以裁剪內(nèi)容，比如紙片縮小時(shí)，內(nèi)容大小不變，而是隱藏超出部分多張紙片
。可以拼接成一張一張紙片
。可以分裂成多張紙片
。可以在任何位置憑空出現(xiàn)
不過(guò)，魔法紙片有些效果是禁止的：
一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋層疊的紙片，海報(bào)高度不能相同紙片不能互相穿透紙片不能彎折紙片不能產(chǎn)生透視，必須平行于屏幕
空間
Material design引入了z軸的概念，z軸垂直于屏幕，用來(lái)表現(xiàn)元素的層疊關(guān)系。z值（海拔高度）越高，元素離界面底層（水平面）越遠(yuǎn)，投影越重。這里有一個(gè)前提，所有的元素的厚度都是1dp。
material design引入了z軸的概念。z軸垂直于屏幕，z軸越高，元素離界面底層越遠(yuǎn)，投影越重。
dp是倍率
dpi表示每英寸多少點(diǎn)，表示印刷品的點(diǎn)密度。
ppi表示每英寸像素?cái)?shù)，表示設(shè)備的點(diǎn)密度。
針對(duì)顯示器的設(shè)計(jì)時(shí)dpi=ppi
sp主要用于字體顯示，字體尺寸。
3、動(dòng)畫
動(dòng)畫不僅是一種裝飾，它有含義，能表達(dá)界面、元素之間的關(guān)系，具備功能上的作用。
easing
動(dòng)畫要貼近真實(shí)世界，就要重視easing。物理世界中的運(yùn)動(dòng)和變化都是有加速和減速過(guò)程的，忽然開(kāi)始、忽然停止的勻速動(dòng)畫顯得機(jī)械而不真實(shí)。考慮動(dòng)畫的easing，要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。
水波反饋
所有可點(diǎn)擊的元素，都應(yīng)該有這樣的反饋效果。通過(guò)這個(gè)動(dòng)畫，將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來(lái)，體現(xiàn)了Material design動(dòng)畫的功能性。
轉(zhuǎn)場(chǎng)效果
通過(guò)過(guò)渡動(dòng)畫，表達(dá)界面之間的空間與層級(jí)關(guān)系，并且跨界面?zhèn)鬟f信息。
從父界面進(jìn)入子界面，需要抬升子元素的海拔高度，并展開(kāi)至整個(gè)屏幕，反之亦然。
多個(gè)相似元素，動(dòng)畫的設(shè)計(jì)要有先后次序，起到引導(dǎo)視線的作用。
相似元素的運(yùn)動(dòng)，要符合統(tǒng)一的規(guī)律。
細(xì)節(jié)動(dòng)畫
通過(guò)圖標(biāo)的變化和一些細(xì)節(jié)來(lái)達(dá)到令人愉悅的效果。
4、顏色
顏色不宜過(guò)多，選擇一種主色、一種輔助色。在此基礎(chǔ)上進(jìn)行明度和飽和度的變化，構(gòu)成配色方案。
appbar背景使用主色，狀態(tài)欄背景使用深一級(jí)的主色或20％透明度的純黑。
小面積需要高亮顯示的地方使用輔助色
其余顏色通過(guò)純黑#000000與純白#ffffff的透明度變化來(lái)展現(xiàn)（包括圖標(biāo)和分隔線），而且透明度限定了幾個(gè)值。
黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態(tài)/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字] [12% 分隔線]
5、圖標(biāo)
桌面圖標(biāo)
桌面圖標(biāo)尺寸是48dp X 48dp。
桌面圖標(biāo)建議模仿現(xiàn)實(shí)中的折紙效果，通過(guò)扁平色彩表現(xiàn)空間和光影。注意避免以下問(wèn)題：
。不要給彩色元素加投影層疊
。不要超過(guò)兩層折角不要放在左上角帶投影的元素要完整展現(xiàn)，不能被圖標(biāo)邊緣裁剪
。如果有折痕，放在圖片中央，并且最多只有一條
。帶折疊效果的圖標(biāo)，表面不要有圖案
。不能透視、彎曲
常規(guī)形狀可以遵循幾套固定柵格設(shè)計(jì)。
小圖標(biāo)
優(yōu)先使用material design默認(rèn)圖標(biāo)。設(shè)計(jì)小圖標(biāo)時(shí)，使用最簡(jiǎn)練的圖形來(lái)表達(dá)，圖形不要帶空間感。
小圖標(biāo)尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區(qū)域內(nèi)。
小圖標(biāo)同樣有柵格系統(tǒng)。線條、空隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應(yīng)調(diào)整。
小圖標(biāo)的顏色使用純黑與純白，通過(guò)透明度調(diào)整：
黑色：[54% 正常狀態(tài)] [26% 禁用狀態(tài)]
白色：[100% 正常狀態(tài)] [30% 禁用狀態(tài)]
6、圖片
選用的圖片
描述具體事物，優(yōu)先使用照片。然后可以考慮使用插畫。
圖片上的文字
圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%-40%之間，淺色的遮罩透明度在40%-60%之間。
對(duì)于帶有文字的大幅圖片，遮罩文字區(qū)域，不要遮住整張圖片。
可以使用半透明的主色蓋住圖片。
提取顏色
Android L可以從圖片中提取主色，運(yùn)用在其他UI元素上。
圖片加載過(guò)程
圖片的加載過(guò)程非常講究，透明度、曝光度、飽和度3個(gè)指標(biāo)依次變化，效果相當(dāng)細(xì)膩。
7、文字
字體
英文字體使用Roboto，中文字體使用Noto。
Roboto有6種字重：Thin、Light、Regular、Medium、Bold 和 Black。
Noto有7種字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
文字排版
常用字號(hào)：
。12sp 小字提示14sp（桌面端13sp）
。正文/按鈕文字16sp（桌面端15sp）
。小標(biāo)題20sp Appbar文字24sp
。大標(biāo)題34sp/45sp/56sp/112sp 超大號(hào)文字
長(zhǎng)篇幅正文，每行建議60字符（英文）左右。短文本，建議每行30字符（英文）左右。
8、布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp X 48dp。
柵格系統(tǒng)的最小單位是8dp，一距離、尺寸都應(yīng)該是8dp的整數(shù)倍。以下是一些常見(jiàn)的尺寸與距離：
頂部狀態(tài)欄高度：24dp
Appbar（導(dǎo)航欄）最小高度：56dp
底部導(dǎo)航欄高度：48dp
懸浮按鈕尺寸：56x56dp/40x40dp
用戶頭像尺寸：64x64dp/40x40dp
小圖標(biāo)點(diǎn)擊區(qū)域：48x48dp
側(cè)邊抽屜到屏幕右邊的距離：56dp
卡片間距：8dp
分隔線上下留白：8dp
大多元素的留白距離：16dp
屏幕左右對(duì)齊基線：16dp
文字左側(cè)對(duì)齊基線：72dp
另外注意56dp這個(gè)數(shù)字，許多尺寸可變的控件，比如對(duì)話框、菜單等，寬度都可以按56的整數(shù)倍來(lái)設(shè)計(jì)。
還有非常多規(guī)范，不詳細(xì)列舉，遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多，距離與尺寸要相應(yīng)增大。
9、組件
bottom sheets
通常以列表形式出現(xiàn)，支持上下滾動(dòng)。
也可以是網(wǎng)格式的。
buttons
按鈕分為懸浮按鈕、凸起按鈕和扁平按鈕3種。重要性如下遞減：
最重要且隨處用到的操作，建議使用懸浮按鈕。信息較多時(shí)，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適合用在簡(jiǎn)單的界面，例如對(duì)話框中。
使用懸浮按鈕要遵循以下規(guī)則：
建議只用一個(gè)懸浮按鈕懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對(duì)話框、側(cè)邊抽屜和菜單的邊緣懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕列表滾動(dòng)至底部時(shí)，懸浮按鈕應(yīng)該隱藏，防止它擋住列表項(xiàng)懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對(duì)齊基線。
懸浮按鈕通常觸發(fā)正向的操作，添加、創(chuàng)建、收藏之類。不能觸發(fā)負(fù)面、破壞性或不重要的操作，也不應(yīng)該有數(shù)字角標(biāo)。
cards
即使在同一個(gè)列表中，卡片的內(nèi)容和布局方式也可以不一樣。
卡片統(tǒng)一帶有2dp的圓角。
在以下情況考慮使用卡片：
同時(shí)展現(xiàn)多種不同內(nèi)容卡片內(nèi)容之間不需要進(jìn)行比較包含了長(zhǎng)度不確定的內(nèi)容，比如評(píng)論包含豐富的內(nèi)容與操作項(xiàng)，比如贊、滾動(dòng)條、評(píng)論本該是列表，但文字超過(guò)3行本該是網(wǎng)格，但需要展現(xiàn)更多文字
卡片最多有兩塊操作區(qū)域。輔助操作區(qū)至多包含兩個(gè)操作項(xiàng)，更多操作需要使用下拉菜單。其余部分都是主操作區(qū)。
chips
狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件，比如日期、聯(lián)系人選擇器。
dialogs
對(duì)話框包含標(biāo)題、內(nèi)容和操作項(xiàng)。點(diǎn)擊對(duì)話框外的區(qū)域，不會(huì)關(guān)閉對(duì)話框。
通常情況，避免出現(xiàn)滾動(dòng)條。空間不足時(shí)允許滾動(dòng)，滾動(dòng)條建議默認(rèn)顯示。
對(duì)話框中，取消類操作項(xiàng)放在左邊，引起變化的操作項(xiàng)放在右邊。要寫明操作項(xiàng)的具體效果，不要只寫“是”和“否”。標(biāo)題文字要明確，即使不讀正文內(nèi)容也能知道在干什么，標(biāo)題不要用“確定嗎”這樣的含糊措辭。
在對(duì)話框中改變內(nèi)容，不會(huì)提交數(shù)據(jù)，點(diǎn)擊確定后，才會(huì)發(fā)生變化。
對(duì)話框上方不能再層疊對(duì)話框。
還有一種簡(jiǎn)易對(duì)話框，不帶操作項(xiàng)。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對(duì)話框。點(diǎn)擊簡(jiǎn)易對(duì)話框外面，對(duì)話框會(huì)關(guān)閉，操作取消。
對(duì)話框可以是全屏式的，全屏對(duì)話框上方可以再層疊對(duì)話框。左圖是一個(gè)普通界面，其中的任何改動(dòng)立即生效。右圖是全屏對(duì)話框，其中任何改動(dòng)，要點(diǎn)擊保存后才生效，點(diǎn)擊X取消。
全屏對(duì)話框右上角的操作項(xiàng)，可以是諸如保存、發(fā)送、添加、分享、更新、創(chuàng)建之類的操作，不要使用完成、OK、關(guān)閉這樣的含糊措辭。
只有必填項(xiàng)都填了，右上角的操作項(xiàng)才變?yōu)榭牲c(diǎn)擊狀態(tài)。
內(nèi)容發(fā)生了改變，點(diǎn)左上角的X，需要有個(gè)確認(rèn)對(duì)話框，提示是否忽略修改。內(nèi)容沒(méi)有發(fā)生改變，點(diǎn)左上角的X，直接退出全屏對(duì)話框。
對(duì)話框的四周留白比較大，通常是24dp。
dividers
列表中有頭像、圖片等元素時(shí)，使用內(nèi)嵌分隔線，左端與文字對(duì)齊。
沒(méi)有頭像、圖標(biāo)等元素時(shí)，需要用通欄分隔線。
圖片本身就起到劃定區(qū)域的作用，相冊(cè)列表不需要分隔線。
謹(jǐn)慎使用分隔線，留白和小標(biāo)題也能起到分隔作用。能用留白的地方，優(yōu)先使用留白。分隔線的層級(jí)高于留白。
通欄分隔線的層級(jí)高于內(nèi)嵌分隔線。
Grids
網(wǎng)格由單元格構(gòu)成，單元格中的瓦片用來(lái)承載內(nèi)容。
瓦片可以橫跨多個(gè)單元格。
瓦片包含主操作區(qū)和副操作區(qū)，副操作區(qū)的位置可以在上下左右4個(gè)角落。在同一個(gè)網(wǎng)格中，主、副操作區(qū)的內(nèi)容與位置要保持一致。兩者的操作都應(yīng)該直接生效，不能觸發(fā)菜單。
網(wǎng)格只能垂直滾動(dòng)。單個(gè)瓦片不支持滑動(dòng)手勢(shì)，也不鼓勵(lì)使用拖放操作。
網(wǎng)格中的單元格間距是2dp或8dp。
lists
列表由行構(gòu)成，行內(nèi)包含瓦片。如果列表項(xiàng)內(nèi)容文字超過(guò)3行，請(qǐng)改用卡片。如果列表項(xiàng)的主要區(qū)別在于圖片，請(qǐng)改用網(wǎng)格。
列表包含主操作區(qū)與副操作區(qū)。副操作區(qū)位于列表右側(cè)，其余都是主操作區(qū)。在同一個(gè)列表中，主、副操作區(qū)的內(nèi)容與位置要保持一致。
在同一個(gè)列表中，滑動(dòng)手勢(shì)操作保持一致。
主操作區(qū)與副操作區(qū)的圖標(biāo)或圖形元素是列表控制項(xiàng)，列表的控制項(xiàng)可以是勾選框、開(kāi)關(guān)、拖動(dòng)排序、展開(kāi)/收起等操作，也可以包含快捷鍵提示、二級(jí)菜單等提示信息。
menu
順序固定的菜單，操作頻繁的選項(xiàng)放在上面。順序可變的菜單，可以把之前用過(guò)的選項(xiàng)排在前面，動(dòng)態(tài)排序。菜單盡量不要超過(guò)2級(jí)。
當(dāng)前不可用的選項(xiàng)要顯示出來(lái)，讓用戶知道在特定條件可以觸發(fā)這些操作。
菜單原地展開(kāi)，蓋住當(dāng)前選項(xiàng)，當(dāng)前選項(xiàng)應(yīng)該成為菜單的第一項(xiàng)。
菜單的當(dāng)前選項(xiàng)，始終與當(dāng)前選項(xiàng)水平對(duì)齊。
靠近屏幕邊緣時(shí)，位置可適當(dāng)錯(cuò)開(kāi)。
菜單過(guò)長(zhǎng)時(shí)，需要顯示滾動(dòng)條
菜單從當(dāng)前選項(xiàng)固定位置展開(kāi)，不要跟隨點(diǎn)擊位置改變。
菜單到上下留出8dp距離。
pickers
日期和時(shí)間選擇器是固定組件，在小/屏幕設(shè)備中，通常以對(duì)話框形式展現(xiàn)。
Progress & activity
線形進(jìn)度條只出現(xiàn)在紙片的邊緣。
環(huán)形進(jìn)度條也分時(shí)間已知和時(shí)間未知兩種。
環(huán)形進(jìn)度條可以用在懸浮按鈕上。
加載詳細(xì)信息時(shí)，也可以使用進(jìn)度條。
下拉刷新的動(dòng)畫比較特殊，列表不動(dòng)，出現(xiàn)一張帶有環(huán)形進(jìn)度條的紙片
slider
滑塊左右兩邊可以放置圖標(biāo)。
非連續(xù)的滑塊，需要標(biāo)出具體數(shù)值
Snackbars至多包含一個(gè)操作項(xiàng)，不能包含圖標(biāo)。不能出現(xiàn)一個(gè)以上的Snackbars。
Snackbars在移動(dòng)設(shè)備上，出現(xiàn)在底部。在PC上，應(yīng)該懸浮在屏幕左下角。
不一定要用戶響應(yīng)的提示，可以使用Snackbars。非常重要的提示，必須用戶來(lái)決定的，應(yīng)該用對(duì)話框。
Snackbars不能遮擋住懸浮按鈕，懸浮按鈕要上移讓出位置。
Snackbars的留白比較大，24dp。
toasts和Snackbars類似，樣式和位置可以自定義，建議遵循Snackbars的規(guī)則設(shè)計(jì)。
subheaders
小標(biāo)題是列表或網(wǎng)格中的特殊瓦片，描述列表內(nèi)容的分類、排序等信息。
滾動(dòng)時(shí)，如果列表較長(zhǎng)，小標(biāo)題會(huì)固定在頂部，直到下一個(gè)小標(biāo)題將它頂上去。
存在浮動(dòng)按鈕時(shí)，小標(biāo)題要讓出位置，與文字對(duì)齊。
switches
必須所有選項(xiàng)保持可見(jiàn)時(shí)，才用Radio button。不然可以使用下拉菜單，節(jié)省空間。
在同一個(gè)列表中有多項(xiàng)開(kāi)關(guān)，建議使用Checkbox。
單個(gè)開(kāi)關(guān)項(xiàng)建議使用Switches。
tabs
tab只用來(lái)展現(xiàn)不同類型的內(nèi)容，不能當(dāng)導(dǎo)航菜單使用。tab至少2項(xiàng)，至多6項(xiàng)。
tab文字要顯示完整，字號(hào)保持一致，不能折行，文字與圖標(biāo)不能混用。
tab選中項(xiàng)的下劃線高度是2dp。
Text fields
簡(jiǎn)單一根橫線就能代表輸入框，可以帶圖標(biāo)。
激活狀態(tài)和錯(cuò)誤狀態(tài)，橫線的寬度變?yōu)?dp，顏色改變。
輸入框點(diǎn)擊區(qū)域高度至少48dp，但橫線并不在點(diǎn)擊區(qū)域的底部，還有8dp距離。
整個(gè)點(diǎn)擊區(qū)域增高，提示文字也是點(diǎn)擊區(qū)域的一部分。
通欄輸入框是沒(méi)有橫線的，這種情況下通常有分隔線將輸入框隔開(kāi)。
右下角可以加入字?jǐn)?shù)統(tǒng)計(jì)。字?jǐn)?shù)統(tǒng)計(jì)不要默認(rèn)顯示，字?jǐn)?shù)接近上限時(shí)再顯示出來(lái)。
通欄輸入框也可以有字?jǐn)?shù)統(tǒng)計(jì)，單行的字?jǐn)?shù)統(tǒng)計(jì)顯示在同一行右側(cè)。
錯(cuò)誤提示顯示在輸入框的左下方。默認(rèn)提示文本可以轉(zhuǎn)換為錯(cuò)誤提示。
字?jǐn)?shù)限制與錯(cuò)誤提示都會(huì)使點(diǎn)擊區(qū)域增高。
同時(shí)有多個(gè)輸入框錯(cuò)誤時(shí)，頂部要有一個(gè)全局的錯(cuò)誤提示。
輸入框盡量帶有自動(dòng)補(bǔ)全功能。
Tooltips
提示只用在小圖標(biāo)上，文字不需要提示。鼠標(biāo)懸停、獲得焦點(diǎn)、手指長(zhǎng)按都可以觸發(fā)提示。
提示不能包含富文本，不需要三角箭頭。
觸摸提示（左）和鼠標(biāo)提示（右）的尺寸是不同的，背景都帶有90%的透明度。
側(cè)邊抽屜從左側(cè)滑出，占據(jù)整個(gè)屏幕高度，遵循普通列表的布局規(guī)則。手機(jī)端的側(cè)邊抽屜距離屏幕右側(cè)56dp。
側(cè)邊抽屜支持滾動(dòng)。如果內(nèi)容過(guò)長(zhǎng)，設(shè)置和幫助反饋可以固定在底部。抽屜收起時(shí)，會(huì)保留之前的滾動(dòng)位置。
列表較短不需要滾動(dòng)時(shí)，設(shè)置和幫助反饋跟隨在列表后面。
十、設(shè)置頁(yè)面
設(shè)置和幫助反饋通常放在側(cè)邊抽屜中。如果沒(méi)有側(cè)邊抽屜，則放在Appbar的下拉菜單底部。
設(shè)置界面只能包含設(shè)置項(xiàng)，諸如關(guān)于、反饋之類的界面，入口應(yīng)該放在其他地方。
設(shè)置項(xiàng)使用通欄分隔線來(lái)分組。7項(xiàng)以下不必分組。如果某項(xiàng)獨(dú)立一組，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）。設(shè)置項(xiàng)較多時(shí)嘗試合并，比如把兩個(gè)相關(guān)的勾選項(xiàng)合并成一個(gè)多選項(xiàng)。設(shè)置項(xiàng)非常多時(shí)，使用子界面。
十一、易用性
無(wú)障礙設(shè)計(jì)
material design很重視用戶的廣度，應(yīng)該盡量照顧到殘障人士的體驗(yàn)。設(shè)計(jì)時(shí)考慮以下使用場(chǎng)景：
沒(méi)有聲音
沒(méi)有色彩
手機(jī)開(kāi)啟了高對(duì)比度模式
手機(jī)畫面放大沒(méi)有視覺(jué)信息，
使用屏幕閱讀器只能通過(guò)語(yǔ)音控制
以上多項(xiàng)結(jié)合
并注意以下問(wèn)題：
無(wú)鼠標(biāo)、純鍵盤操作。
鼠標(biāo)懸停顯示信息，也要通過(guò)其他方式展現(xiàn)。考慮大字號(hào)情況下的使用體驗(yàn)。
不要只通過(guò)顏色表達(dá)某些信息。
音頻信息也要提供文字或其他視覺(jué)呈現(xiàn)。
為圖片和視頻提供備用的文字信息。
本地化
為阿拉伯語(yǔ)、希伯來(lái)語(yǔ)、波斯語(yǔ)用戶設(shè)計(jì)相反的界面，他們的書寫和閱讀習(xí)慣是從右到左的。
–the end
安卓篇
Android界面尺寸：480*800、720*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è)尺寸下這些元素的尺寸。
狀態(tài)欄高度為：50px
導(dǎo)航欄高度為：96px
主菜單欄高度為：96px
內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)
Android為了在界面上區(qū)別于iOS，Android4.0開(kāi)始提出的一套HOLO的UI風(fēng)格一些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。
具體大小，還是那句話，找自己喜歡的app界面，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小，切記，一定是高清截圖。
Android 上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像。
Android設(shè)計(jì)規(guī)范中單位是dp，dp在安卓機(jī)上不同的密度轉(zhuǎn)換后的px 是不一樣的，所以按照設(shè)計(jì)圖的px轉(zhuǎn)換成dp也是不一樣的，這個(gè)可以使用轉(zhuǎn)換工具轉(zhuǎn)換，開(kāi)發(fā)一般會(huì)有，也有些開(kāi)發(fā)會(huì)使用px做單位，因?yàn)樽隽饲捌诘霓D(zhuǎn)換工作。
Android顏色值取值為十六進(jìn)制的值 比如一綠色的值， 給開(kāi)發(fā)的值為 #5bc43e。
做UI出圖的時(shí)候有時(shí)要常用標(biāo)注，這里給大家推薦一款 Mark Man 這款軟件是免費(fèi)的，但如果要支持重復(fù)編輯是要購(gòu)買注冊(cè)版，但我們一般都是一次性標(biāo)注完保存，如要再次編輯，就把保存的文件再放進(jìn)去編輯一次就可以了。
操作欄
1、”操作欄”對(duì)于 Android 應(yīng)用來(lái)說(shuō)是最重要的設(shè)計(jì)元素，它通常在應(yīng)用運(yùn)行的所有時(shí)間都呆 在屏幕頂部。
2、 操作欄的基本布局：
1向上＋2 Spinner視圖控制＋3 重要操作按鈕＋4 更多操作：其中，向上按鈕，點(diǎn)擊后是去到 當(dāng)前界面的上一個(gè)層級(jí)，非第一層級(jí)界面有此按鈕，第一層級(jí)界面則無(wú)向上按鈕；Spinner 是 用于展示內(nèi)容的下拉菜單，其內(nèi)容包括視圖的快速切換和顯示相關(guān)內(nèi)容的完整信息；更多操作 （action overflow）是集合操作欄中不常用的和非重要操作的地方。
多面板布局
多面板布局更多的是針對(duì)平板電腦，把手機(jī)端的目錄視圖和詳情視圖兩個(gè)層級(jí)的界面，甚至更多的頁(yè)面，復(fù)合展示在同一個(gè)界面中，有效地利用平板電腦的屏幕空間，扁平化層級(jí)結(jié)構(gòu)，簡(jiǎn) 化導(dǎo)航。這點(diǎn)在iPad上已經(jīng)運(yùn)用得相當(dāng)嫻熟了。
選擇
Android4.0中的長(zhǎng)按與Android2.3及更早期的版本有很大的不同。早期版本長(zhǎng)按操作后，是 出現(xiàn)情境菜單的浮出層。在Android4.0中，長(zhǎng)按后在操作欄的位置會(huì)覆蓋一個(gè)臨時(shí)的情境操 作欄，不再?gòu)棾銮榫巢藛胃〕鰧印Ｔ谂R時(shí)情境操作欄的環(huán)境下，當(dāng)前界面的內(nèi)容項(xiàng)允許被單個(gè) 處理，也允許被批量處理。
返回和向上
返回按鍵用在手機(jī)全局的虛擬導(dǎo)航欄中，基于用戶最近查看的界面歷史，采用時(shí)間倒序的方式， 連接界面間的關(guān)系。向上按鈕用在操作欄的左側(cè)，基于層級(jí)結(jié)構(gòu)，點(diǎn)擊后是去到當(dāng)前界面的上一 個(gè)層級(jí)，若當(dāng)前界面已經(jīng)是最高一級(jí)，則沒(méi)有向上按鈕。
主題和樣式
推出三套默認(rèn)主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在 這三套默認(rèn)主題的基礎(chǔ)上做設(shè)計(jì)，以加快app研發(fā)效率，但只是建議使用，并沒(méi)有完全強(qiáng)制。
觸摸與反饋
用戶觸摸應(yīng)用中的可操作區(qū)域，應(yīng)當(dāng)在視覺(jué)上有響應(yīng)，微小的反饋會(huì)給用戶帶來(lái)很好地效果。
按鈕
明確的圖標(biāo)讓用戶容易理解、文本按鈕、圖片和文字的結(jié)合也是不錯(cuò)的選擇
對(duì)于僅包括圖標(biāo)的按鈕，不需要使用背景色
滑塊
失效、按下、點(diǎn)擊、正常
進(jìn)度條
1、如果你可以知道當(dāng)前任務(wù)完成的比例，那么使用進(jìn)度條，讓用戶了解大約還需要多久才能完成。
2、當(dāng)使用旋轉(zhuǎn)圓圈時(shí)，不要配以文字標(biāo)簽。旋轉(zhuǎn)的圓圈已經(jīng)表明了正在進(jìn)行后臺(tái)操作。
開(kāi)關(guān)
1、復(fù)選框：用戶可以在一個(gè)集合中作出多個(gè)選擇。
2、單選按鈕：?jiǎn)芜x按鈕允許用戶在一個(gè)集合中做一次選擇。
3、開(kāi)關(guān)：開(kāi)關(guān)控制單個(gè)選項(xiàng)的狀態(tài)。
對(duì)話框
1、對(duì)話框的左邊一般情況下是取消按鈕，右邊是確定按鈕。
2、警告對(duì)話框：對(duì)于執(zhí)行下一步操作前請(qǐng)求用戶確認(rèn)或者提示用戶當(dāng)前的狀態(tài)。內(nèi)容不 同，布局也會(huì)不同。
A：沒(méi)有標(biāo)題欄的警告對(duì)話框：內(nèi)容區(qū)應(yīng)當(dāng)包括一個(gè)問(wèn)句或與操作有明顯相關(guān)的陳述句：
B：有標(biāo)題欄的警告對(duì)話框：僅在有可能引起數(shù)據(jù)丟失、連接斷開(kāi)、收費(fèi)等高風(fēng)險(xiǎn)的操作 時(shí)才使用。并且標(biāo)題應(yīng)當(dāng)是一個(gè)明確的問(wèn)題，內(nèi)容區(qū)提供一些解釋。
3、彈出對(duì)話框：一般情況下用戶通過(guò)觸摸來(lái)作出選擇。
4、toast提示：toast提供了輕量級(jí)的反饋，顯示幾秒鐘之后會(huì)自動(dòng)消失。
選擇器
選擇器提供了一種簡(jiǎn)單的方式，讓用戶在多個(gè)值中選擇一個(gè)；除了可以通過(guò)點(diǎn)擊向上/向下 按鈕調(diào)整值以外，也可以通過(guò)鍵盤或者手勢(shì)。
通知
1、基本布局
圖標(biāo)、標(biāo)題、內(nèi)容、次要圖標(biāo)、時(shí)間
2、擴(kuò)展布局：可通過(guò)擴(kuò)展布局顯示信息的前幾行或者圖片的預(yù)覽，來(lái)讓用戶了解更多的信息。
3、操作：將重要的操作按鈕圖標(biāo)在通知欄目展現(xiàn)出來(lái)，這樣可以加快用戶的操作。
4、合并通知：如果正在等待處理的通知是同等類型，則就可以合并通知，合并的通知提供了 綜合信息的描述，并告訴用戶有多少條未處理的信息。
5、你可以使用擴(kuò)展布局為合并的通知提供更多信息，這樣用戶可以知道被合并的消息細(xì)節(jié)， 并選擇在應(yīng)用中閱讀通知內(nèi)容。
寫作風(fēng)格
1、簡(jiǎn)短：只告知用戶最必要的信息，避免冗余的描述，盡可能縮短文本長(zhǎng)度；
2、簡(jiǎn)明：使用短詞語(yǔ)、主動(dòng)詞和簡(jiǎn)單名詞；僅說(shuō)明必要的信息，不要費(fèi)力解釋，用戶不會(huì)care的；
3、友好：使用縮寫；使用第二人稱和用戶對(duì)話(您或你)；保持隨意，輕松的腔調(diào)；
4、標(biāo)點(diǎn)符號(hào)
A：句號(hào)：如果toast、標(biāo)簽或通知消息等控件中只包含一句話，無(wú)需使用句號(hào)作為結(jié)尾。 如果包含兩句或更多，則每一句都需以句號(hào)結(jié)尾；
B：省略號(hào)：省略號(hào)常用于未完成的狀態(tài), 例如表示操作進(jìn)行中 (“下載中…”) 或是表示文 本未能完全
強(qiáng)調(diào)純粹的安卓應(yīng)用設(shè)計(jì)
在Android4.0 app設(shè)計(jì)準(zhǔn)則中，特別強(qiáng)調(diào)為Android設(shè)計(jì)純粹的Android app，切勿使用其 他平臺(tái)特定元素的注意事項(xiàng)，有以下5個(gè)方面：
A：強(qiáng)調(diào)視覺(jué)元素的樣式要符合android系統(tǒng)；B：不用其它平臺(tái)特有的圖標(biāo)；
C：區(qū)分向上和返回，不在操作欄上使用返回樣式的按鈕；
D：不在界面的下方使用選項(xiàng)卡tabs；
E：不在內(nèi)容列表里使用向右箭頭。
DPI
DPI指的是像素/英寸，直接翻譯過(guò)來(lái)就是每英寸里面有多少個(gè)像素點(diǎn)，這個(gè)就是DPI。dpi的數(shù)值越大，就越清晰，同樣拿我們的馬里奧舉例。第一張圖是100dpi的圖片，第二章是10000dpi的圖片，但是圖片的大小一致。簡(jiǎn)單點(diǎn)說(shuō)就是一樣大小的圖片，第二張圖片上的像素點(diǎn)比第一張多，所以就圖片質(zhì)量就更加的細(xì)膩，更加的清晰。
SP
SP是安卓中專門為字體設(shè)計(jì)的單位，由于我們市場(chǎng)上安卓手機(jī)的分辨率越來(lái)越多，所以去適配的時(shí)候就出現(xiàn)了很多的麻煩，數(shù)據(jù)太多。所以安卓為了更好的適配給出了這個(gè)設(shè)計(jì)單位。在mdpi密度的屏幕中：1px=1sp。主要用于字體顯示。
上面對(duì)應(yīng)的是三種分辨率的屏幕顯示，第一個(gè)是一倍的mdpi，第二個(gè)是兩倍的xhdpi，第三個(gè)是三倍的xxhdpi。如果mdpi上的字體是12px，那么所對(duì)應(yīng)的是12sp。因?yàn)閟p在任何分辨率上都不會(huì)改變，所以也都是12sp，而xhdpi的字體大小顯示就是：12*2=24px，xxhdpi的字體大小顯示就是12*3=36px，以此類推。
DP
DP也是一個(gè)為了安卓適配時(shí)用到的單位，安卓為了適配不同分辨率給出的單位，它也不會(huì)因?yàn)槠聊环直媛蚀笮〔灰粯佣l(fā)生變化。適配分辨率的時(shí)候也是記住，在mdpi密度的屏幕中：1dp=1px，其余的分辨率用倍率乘以這個(gè)dp值就行了。
目前的市場(chǎng)上的手機(jī)有不同的分辨率：160/320/480dpi等。所以，我們不可能去記住那么多的數(shù)據(jù)，因此我們就通過(guò)DP這個(gè)單位和與PX的轉(zhuǎn)化去記住。注意的是轉(zhuǎn)化的時(shí)候不止是圖標(biāo)轉(zhuǎn)化，間距和所有元素的大小也要相應(yīng)的進(jìn)行改變。而且還有一點(diǎn)值得注意的是，因?yàn)槲覀冊(cè)O(shè)計(jì)常用單位是PX ，設(shè)計(jì)的時(shí)候我們用這個(gè)單位，但是開(kāi)發(fā)人員則用dp ，所以在這個(gè)設(shè)計(jì)過(guò)程中去適配不同的手機(jī)，安卓使用dp這個(gè)單位來(lái)進(jìn)行px之間的轉(zhuǎn)化，就是一個(gè)上述概念中的一個(gè)使用單位。
ldpi ? ? 240*320 ? ? ?0.75px=1dp
mdpi ? ? 320*480 ? ? ?1px=1dp
hdpi ? ? ? 480*800、540*960 ? ? 1.5px=1dp
xhdpi ? ? ?720*1280 ? ? ? 2px=1dp
xxhdpi ? ? 1080*1920 ? ? ? 3px=1dp
其他 ? ? ? ? 1440*2560 ? ? ? ?3.0625px=1dp
Android把屏幕密度分為了四個(gè)廣義的大小：
低（120dpi）ldpi
中（160dpi）mdpi
高（240dpi）hdpi
超高（320dpi）xhdpi
超超高（480dpi）xxhdpi
1pt=1/72英寸
設(shè)計(jì)時(shí)最好能夠被4整除
因?yàn)镸DPI是一倍的，而XHDPI是兩倍，都是整數(shù)倍，容易去適配其它的分辨率，如果以XHDPI為設(shè)計(jì)稿，設(shè)計(jì)的所有數(shù)值都要求是雙數(shù)的，去轉(zhuǎn)換的時(shí)候才能保證不出現(xiàn)小數(shù)點(diǎn)，第二種方法的話就比較難去控制，所以一般還是建議用第一種，當(dāng)然最好的方式自然是每一個(gè)分辨率都單獨(dú)去做一套界面圖。
mdpi（320*480）
狀態(tài)欄:25px
導(dǎo)航欄:48px
菜單欄:48px
元素之間的間距:8px
最細(xì)筆畫:不小于2px
hdpi（480*800、480*854、540*960）
元素之間間距不小于:12px
xhdpi（720*1280）
狀態(tài)欄:50px
導(dǎo)航欄:96px
菜單欄:96px
元素之間的間距:16px
最細(xì)筆畫:不小于4px
xxhdpi（1080*1920）
狀態(tài)欄:75px
導(dǎo)航欄:144px
菜單欄:144px
元素之間的間距:24px
最細(xì)筆畫:不小于6px
圖標(biāo)尺寸
ldpi（320*480）
啟動(dòng)圖標(biāo):48*48px
操作欄圖標(biāo):32*32px
上下文圖標(biāo):16*16px
系統(tǒng)通知圖標(biāo):24*24px
play商店啟動(dòng)圖標(biāo):512*512px
最細(xì)筆畫:不小于2px
mdpi（480*800）
啟動(dòng)圖標(biāo):72*72px
操作欄圖標(biāo):48*48px
上下文圖標(biāo):24*24px
系統(tǒng)通知圖標(biāo):36*36px
play商店啟動(dòng)圖標(biāo):512*512px
最細(xì)筆畫:不小于3px
在一個(gè)分辨率里，一張界面圖上有太多的圖標(biāo)，不可能每一個(gè)圖標(biāo)的大小都是一樣的，所有圖標(biāo)會(huì)根據(jù)所處的位置的不同，用處的不同，圖標(biāo)的大小也會(huì)不一樣，圖標(biāo)的大小也不是我們想給多大就給多大，安卓系統(tǒng)有一套自己的規(guī)范。接下來(lái)我們看一下上面的這些圖標(biāo)指的是哪些。
字體規(guī)范
ldpi（320*480）
注釋最小字體12sp
文本字體14sp
文章標(biāo)題/圖標(biāo)名稱18sp
導(dǎo)航標(biāo)題22sp
字體:
英文:Roboto
中文:droid sans fallback、方正蘭亭黑體
ldpi（320*480）
用戶認(rèn)為最舒適的值:
注釋:14～16px
短文本:18px
長(zhǎng)文本:18～20px
mdpi（480*800）
用戶認(rèn)為最舒適的值:
注釋:21px
短文本:27px
長(zhǎng)文本:27px
安卓顏色值:十六進(jìn)制
做安卓界面設(shè)計(jì)時(shí)最好采用dp和sp進(jìn)行標(biāo)注。這樣的話方便適配。
在通常情況下48dp在物理屏幕上差不多是9毫米的大小，而在UI設(shè)計(jì)中所有觸摸類控件的推薦大小在7毫米到10毫米之間，因?yàn)樵谶@個(gè)值之間會(huì)使控件的點(diǎn)中率大大增加，在視覺(jué)上也會(huì)比較舒服。
所以當(dāng)你的可觸摸控件的高度和寬度大于等于48dp時(shí)，一方面可以保證你的控件在任何設(shè)備上都不會(huì)小于7毫米，同時(shí)也能夠保證控件中的內(nèi)容看起來(lái)比較舒服，也不會(huì)出現(xiàn)誤觸的現(xiàn)象。這就是所謂的48dp定律，當(dāng)然這一切是個(gè)推薦值，定律在心中，實(shí)際情況靈活處理，而不是被定律束縛，才是一個(gè)優(yōu)秀的APPUI設(shè)計(jì)師。
同時(shí)一定要注意控件之間最好至少有8dp的留白
設(shè)計(jì)稿適配
在目前我們的安卓APP設(shè)計(jì)項(xiàng)目當(dāng)中，我們并不會(huì)去為每一種分辨率去設(shè)計(jì)一套UI界面。這是一種追求完美和理想的狀態(tài)。小公司肯定是耗不起這樣的。
所以，這個(gè)時(shí)候我們需要學(xué)會(huì)變通。為了適應(yīng)多分辨率，
1：在標(biāo)準(zhǔn)基礎(chǔ)（xdpi：1280*720）上開(kāi)始，然后放大或縮小，以適應(yīng)到其他尺寸。
2：從設(shè)備的最大尺寸（xxdpi：1920×1080）開(kāi)始，然后縮小，并適應(yīng)到所需的最小屏幕尺寸。
有些時(shí)候我們也會(huì)在實(shí)際開(kāi)發(fā)過(guò)程中，Android和IOS的設(shè)計(jì)稿若無(wú)太大差異，也可從IOS的分辨率（960*640）開(kāi)始，再調(diào)整設(shè)計(jì)稿的比例，適應(yīng)其他分辨率。但是這種方法在切圖的時(shí)候 需要做一些圖片的調(diào)整。如果不是矢量圖的元件需要重新按照1280*720的尺寸設(shè)計(jì)下。
安卓切圖命名規(guī)則
基本上 App 的切圖可分為下面幾大類：
背景、按鈕、圖示、圖片、照片、TabBar icon 等。
為了讓切圖便於管理，通常會(huì)依圖片性質(zhì)命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當(dāng)圖檔要做給 Retina 螢?zāi)皇褂脮r(shí)，只要在副檔名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png、icon-xxx@2x.png。在命名時(shí) bg-xxx.png 中間的 – 可以改為 _ 。
按鈕的切圖常以 btn-xxx.png 來(lái)命名 。App 里的按鈕擁有 4 種屬性，分別為一般、點(diǎn)擊、不能點(diǎn)擊、選中。但不追求精致與完整度的話，只出一般屬性按鈕圖檔就可以了，在 iOS 上 RD 能在使用者點(diǎn)擊按鈕時(shí)將原圖檔變暗做為點(diǎn)擊提示。
一般（normal）：btn-xxx-n.png，最基本的按鈕外觀。
點(diǎn)擊（highlight）：btn-xxx-h.png，使用者觸摸螢?zāi)慌龅桨粹o，為了告知使用者有點(diǎn)擊到而出現(xiàn)的回應(yīng)提示。
不能點(diǎn)擊(disabled)：btn-xxx-d.png，代表App有這功能但使用者無(wú)法使用。例如如安裝在iPod上的App有播打電話功能時(shí)。既然不能被點(diǎn)擊干脆直接隱藏的作法也是有的。要直接將按鈕隱藏或是以不能被點(diǎn)擊的狀態(tài)呈現(xiàn)需視情況決定。
選中(selected)：btn-xxx-s.png，選中出現(xiàn)在有復(fù)數(shù)選項(xiàng)時(shí)，但通常不會(huì)把按鈕拿去做復(fù)數(shù)選項(xiàng)控件，這種按鈕狀態(tài)出現(xiàn)的機(jī)會(huì)不高。
TabBar 上的 icon 作法較特殊，雖然它是 icon，但我不會(huì)以 icon-xxx.png 來(lái)命名。為了和其他 icon 作區(qū)隔，我會(huì)使用 tab-xxx.png 來(lái)表示。
安卓后綴命名方式:
單倍圖無(wú)需后綴
兩倍圖后綴@2x
三倍圖后綴@3x
1.5倍圖后綴@480x800
ios命名規(guī)范
兩倍圖后綴@2x
三倍圖后綴@3x
安卓底部菜單圖標(biāo):
小屏mdpi:
完整圖片:36*36dp
圖標(biāo):24*24dp
圖標(biāo)外邊框:22*22dp
安卓彈出對(duì)話框頂部圖標(biāo):
小屏 中屏 大屏 24x24 px 36x36 px 48x48 px
長(zhǎng)列表內(nèi)部列表項(xiàng)圖標(biāo)
小屏 中屏 大屏 24x24 px 36x36px 48x48 px
底部或頂部tab標(biāo)簽圖標(biāo)
小屏 中屏 大屏 完整圖片（紅色） 24x24 px 36x36 px 48x48 px 圖標(biāo)（藍(lán)色） 20x20 px 32x32 px 44x44 px
底部狀態(tài)欄圖標(biāo)
小屏ldpi(120dpi) 中屏mdpi(160dpi) 大屏hdpi(240dpi) 特大屏xhdpi(320dpi) 18x18 px 24x24 px 36x36 px 48x48 px
material design色彩研
色彩HSB分別代表什么
色相
色相是有彩色的最大特征。所謂色相是指能夠比較確切地表示某種顏色色別的名稱。如玫瑰紅、桔黃、檸檬黃、鈷藍(lán)、群青、翠綠……從光學(xué)物理上講，各種色相是由射入人眼的光線的光譜成分決定的。對(duì)于單色光來(lái)說(shuō)，色相的面貌完全取決于該光線的波長(zhǎng)；對(duì)于混合色光來(lái)說(shuō)，則取決于各種波長(zhǎng)光線的相對(duì)量。物體的顏色是由光源的光譜成分和物體表面反射（或透射）的特性決定的。
純度
（彩度、飽和度） 色彩的純度是指色彩的純凈程度，它表示顏色中所含有色成分的比例。含有色彩成分的比例愈大，則色彩的純度愈高，含有色成分的比例愈小，則色彩的純度也愈低。可見(jiàn)光譜的各種單色光是最純的顏色，為極限純度。當(dāng)一種顏色摻入黑、白或其他彩色時(shí)，純度就產(chǎn)生變化。當(dāng)摻入的色達(dá)到很大的比例時(shí)，在眼睛看來(lái)，原來(lái)的顏色將失去本來(lái)的光彩，而變成摻和的顏色了。當(dāng)然這并不等于說(shuō)在這種被摻和的顏色里已經(jīng)不存在原來(lái)的色素，而是由于大量的摻入其他彩色而使得原來(lái)的色素被同化，人的眼睛已經(jīng)無(wú)法感覺(jué)出來(lái)了。
有色物體色彩的純度與物體的表面結(jié)構(gòu)有關(guān)。如果物體表面粗糙，其漫反射作用將使色彩的純度降低；如果物體表面光滑，那么，全反射作用將使色彩比較鮮艷。
明度
明度是指色彩的明亮程度。各種有色物體由于它們的反射光量的區(qū)別而產(chǎn)生顏色的明暗強(qiáng)弱。色彩的明度有兩種情況：一是同一色相不同明度。如同一顏色在強(qiáng)光照射下顯得明亮，弱光照射下顯得較灰暗模糊；同一顏色加黑或加白摻和以后也能產(chǎn)生各種不同的明暗層次。二是各種顏色的不同明度。每一種純色都有與其相應(yīng)的明度。黃色明度最高，藍(lán)紫色明度最低，紅、綠色為中間明度。色彩的明度變化往往會(huì)影響到純度，如紅色加入黑色以后明度降低了，同時(shí)純度也降低了；如果紅色加白則明度提高了，純度卻降低了。
有彩色的色相、純度和明度三特征是不可分割的，應(yīng)用時(shí)必須同時(shí)考慮這三個(gè)因素。
色彩明度配色
聽(tīng)語(yǔ)音
以色彩的明度作為配色的主體思路。色彩從白到黑的兩端靠近亮的一端的色彩稱為高調(diào)，靠近暗的一端的色彩稱為低調(diào)，中間部分為中調(diào)；明度反差大的配色稱為長(zhǎng)調(diào)，明度反差小的配色稱為短調(diào)，明度反差適中的配色稱為中調(diào)。
(1)高短調(diào)配色
以高調(diào)區(qū)域的明亮色彩為主導(dǎo)色，采用與之稍有變化的色彩搭配，形成高調(diào)的弱對(duì)比效果。它輕柔、優(yōu)雅，常常被認(rèn)為是富有女性味道的色調(diào)。如淺淡的粉紅色、明亮的灰色與乳白色，米色與淺鴕色、白色與淡黃色等，適合于輕盈的女裝及男夏裝。
(2)高中調(diào)配色
以高調(diào)區(qū)域色彩為主導(dǎo)色，配以不強(qiáng)也不弱的中明度色彩，形成高調(diào)的中對(duì)比效果，其自然、明確的色彩關(guān)系多用于日常裝中，如淺米色與中鴕色，白色與中綠色，淺紫色與中灰紫等。
(3)高長(zhǎng)調(diào)配色
以高調(diào)區(qū)域色彩為主導(dǎo)色，配以明暗反差大的低調(diào)色彩，形成高調(diào)的強(qiáng)對(duì)比效果。它清晰、明快、活潑、積極，富有刺激性。如白色與黑色，月白色與深灰色等。
(4)中短調(diào)配色
以中調(diào)區(qū)域色彩為主導(dǎo)色，采用稍有變化的色彩與之搭配，形成中調(diào)的弱對(duì)比效果。它含蓄、朦朧。如灰綠色與洋紅色，中咖啡色與中暖灰等。
(5)中中調(diào)配色
以中調(diào)區(qū)域色彩為主，配以比中明度稍深或稍淺的色，形成不強(qiáng)不弱的對(duì)比效果，具有穩(wěn)定、明朗、和諧的效果。
(6)中長(zhǎng)調(diào)配色
以中調(diào)區(qū)域色彩為主導(dǎo)色，采用高調(diào)色或低調(diào)色與之對(duì)比，形成中調(diào)的強(qiáng)對(duì)比效果。它豐富、充實(shí)、強(qiáng)壯而有力。如大面積中明度色與小面積的白色、黑色，棗紅色也白色，牛仔藍(lán)與白色等。
(7)低短調(diào)配色
以低調(diào)區(qū)域色彩為主導(dǎo)色，采用與之接近的色彩搭配，形成低調(diào)的弱對(duì)比效果。它沉著、樸素，并帶有幾分憂郁。如深灰色與棗紅色，橄欖綠與暗褐色等。男士冬裝多用這種調(diào)子，顯得穩(wěn)重、渾厚。
(8)低中調(diào)配色
以低調(diào)區(qū)域色彩為主導(dǎo)色，配以不強(qiáng)也不弱的中明度色彩，形成低調(diào)的中對(duì)比色效果。它莊重、強(qiáng)勁，多適合男裝和女秋冬裝的配色。如深灰色與土色，深紫色與鈷藍(lán)色，橄欖綠與金褐色等。
(9)低長(zhǎng)調(diào)配色
以低調(diào)區(qū)域色彩為主導(dǎo)色，采用發(fā)差大的高調(diào)色與之搭配，形成低調(diào)的強(qiáng)對(duì)比效果。它壓抑、深沉、刺激性強(qiáng)，有爆發(fā)性的干擾力。如深藍(lán)色與本白色，深棕色與米黃色等。
(10)最長(zhǎng)調(diào)配色
這是指黑白兩種色彩各占1/2的搭配關(guān)系。色彩單純，視覺(jué)效果極為強(qiáng)烈，具有尖銳、簡(jiǎn)單的特性，色設(shè)計(jì)師永恒的配色手法。
顏色板
為灰色的文字、圖標(biāo)和分隔線加上 alpha 值
為了有效地傳達(dá)信息的視覺(jué)層次，應(yīng)該使用深淺不同的文本。對(duì)于白色背景上的文字，標(biāo)準(zhǔn) alpha 值為 87%（#000000）。視覺(jué)層次偏低的次要文字，應(yīng)該使用 54%（＃000000）的 alpha 值。而像正文和標(biāo)簽中用于提示用戶的文字，視覺(jué)層次更低，應(yīng)該使用26%（#000000）的 alpha 值。
其它元素，如圖標(biāo)和分隔線，也應(yīng)該具有黑色的 alpha 值，而不是實(shí)心顏色，以確保他們能適應(yīng)任何顏色的背景。
對(duì)于彩色背景上白色或黑色文字，可以通過(guò)表格中的調(diào)色板找到合適的色彩對(duì)比度和 alpha 值。
我們十分鼓勵(lì)在 UI 中的大塊區(qū)域內(nèi)使用醒目的顏色。 UI 中不同的元素適合主題中不同的色彩。工具欄和大色塊適合使用飽和度 500 的基礎(chǔ)色，這也是你應(yīng)用的主要顏色。狀態(tài)欄適合使用更深一些的飽和度 700 的基礎(chǔ)色。
強(qiáng)調(diào)色
鮮艷的強(qiáng)調(diào)色用于你的主要操作按鈕以及組件，如開(kāi)關(guān)或滑片。左對(duì)齊的部分圖標(biāo)或章節(jié)標(biāo)題也可以使用強(qiáng)調(diào)色。
備用強(qiáng)調(diào)色
如果你的強(qiáng)調(diào)色相對(duì)于背景色太深或者太淺，默認(rèn)的做法是選擇一個(gè)更淺或者更深的備用顏色。如果你的強(qiáng)調(diào)色無(wú)法正常顯示，那么在白色背景上會(huì)使用飽和度 500 的基礎(chǔ)色。如果背景色就是飽和度 500 的基礎(chǔ)色，那么會(huì)使用 100% 的白色或者 54% 的黑色。
主題
主題是對(duì)應(yīng)用提供一致性色調(diào)的方法。樣式指定了表面的亮度、陰影的層次和字體元素的適當(dāng)不透明度。為了提高應(yīng)用間的一致性，提供兩種主題選擇：
淺色
深色
material design 圖標(biāo)750個(gè)，谷歌有下載。
狀態(tài)欄圖標(biāo)尺寸通過(guò)截圖看看是多大？
PPI公式的意義？
sp和px的公式？
安卓tab選項(xiàng)卡是等分嗎？選中狀態(tài)最小高度是多少？2dp
tab選項(xiàng)卡投影值是多少？1dp
列表間距、字體間距、字體行距
對(duì)主題色、強(qiáng)調(diào)色、輔助色進(jìn)行配色
主題色:3個(gè)
強(qiáng)調(diào)色:1個(gè)
黑灰色:
字體配色:
顏色不宜過(guò)多，選擇一種主色、一種輔助色。在此基礎(chǔ)上進(jìn)行明度和飽和度的變化，構(gòu)成配色方案。
appbar背景使用主色，狀態(tài)欄背景使用深一級(jí)的主色或20％透明度的純黑。
小面積需要高亮顯示的地方使用輔助色
其余顏色通過(guò)純黑#000000與純白#ffffff的透明度變化來(lái)展現(xiàn)（包括圖標(biāo)和分隔線），而且透明度限定了幾個(gè)值。
黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態(tài)/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字] [12% 分隔線]
切圖命名規(guī)范
導(dǎo)航欄:
iOS使用十進(jìn)制色值，Android使用16進(jìn)制，iOS可以繪制圓角和陰影，Android更傾向于用.9.png等。這些差異要在同一套標(biāo)注中體現(xiàn)出來(lái)，讓兩端的開(kāi)發(fā)各取所需。
如何APP設(shè)計(jì)元素切圖
1、和客戶端的技術(shù)溝通好，用不同的框架來(lái)實(shí)現(xiàn)的時(shí)候，圖會(huì)有不一樣的切法。例如Tabbar是連背景一起切還是單獨(dú)把icon做成背景透明的，文字是放在圖里還是后面加字。
2、有一些小的icon式按鈕，不能只切到icon邊緣，而是要考慮到最終實(shí)現(xiàn)的時(shí)候，是把這個(gè)圖片做成按鈕，和用戶交互。所以必須要多留一些透明的邊，讓能點(diǎn)擊的圖片在88×88以上，這樣用戶才保證比較好點(diǎn)到。
3、個(gè)人的強(qiáng)迫癥，如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。并且用Fireworks優(yōu)化大小。
4、對(duì)于不改變可見(jiàn)圖形而又需要加大點(diǎn)擊區(qū)域的圖。那么切圖的時(shí)候建議在可見(jiàn)圖形的四周都加上1像素的透明，這是為了放大拉伸而不產(chǎn)生可見(jiàn)區(qū)域的圖像失真。
5、切圖的高度。對(duì)于一個(gè)通用的背景圖，如文字圓角邊框背景，那么切圖的時(shí)候并不是效果圖上有多高就切多高，為了通用而是只需切一行文字的高度就可以了。不過(guò)這也不是絕對(duì)的，準(zhǔn)確的說(shuō)應(yīng)該切的高度H=paddingTop+textHeight+paddingBottom，及文字相對(duì)背景的上邊距+一行文字的高度+文字相對(duì)背景的下邊距。
6、切圖的寬度。如果是一個(gè)通用的背景圖，那么他的寬度應(yīng)該是他在效果圖中的最小寬度，也就是說(shuō)這個(gè)背景可能在多處使用到了，就取最小的那個(gè)寬度就可以了。比較麻煩的是鋪滿全屏的時(shí)候，這就需要看看你做的效果圖的寬屏寬度，所以說(shuō)做效果圖的時(shí)候最好是做小屏幕的效果圖。有人可能會(huì)問(wèn)點(diǎn)9的圖不是可以拉伸、壓縮嗎，為什么需要參考最小的寬度呢？根據(jù)個(gè)人經(jīng)驗(yàn)發(fā)現(xiàn)，一個(gè)大圖在屏幕小的情況下點(diǎn)9圖中拉伸的部分會(huì)變得顏色更深。
通常APP設(shè)計(jì)都會(huì)涉及到多個(gè)分辨率兼容開(kāi)發(fā)的問(wèn)題，因此設(shè)計(jì)的時(shí)候，要定好規(guī)范。最好建立相關(guān)文檔，記錄使用的字體、顏色，常用的字號(hào)和間距，給出編號(hào)A1 A2 A3 B1 B2 B3，不同分辨率下?lián)Q算的結(jié)果，便于技術(shù)人員進(jìn)行開(kāi)發(fā)。
如需對(duì)設(shè)計(jì)稿進(jìn)行后期的標(biāo)注，則可使用該套規(guī)范，對(duì)設(shè)計(jì)稿中的字號(hào)、顏色、間距進(jìn)行標(biāo)注。推薦一個(gè)小工具，MarkMan，標(biāo)注設(shè)計(jì)稿十分方便。因?yàn)檫@是一個(gè)Adobe的插件，所以可以和PS同步。在MarkMan中打開(kāi)psd源圖進(jìn)行標(biāo)注，若psd源圖有所修改，刷新之后即可同步到MarkMan文件中。
H. 兼容性測(cè)試
做好的設(shè)計(jì)稿進(jìn)行實(shí)體機(jī)的測(cè)試很重要，因?yàn)殡娔X屏幕上看到的效果和手機(jī)屏幕上看到的效果可能不太一樣。把常見(jiàn)的三種分辨率都要進(jìn)行測(cè)試，當(dāng)然能所有分辨率都測(cè)試一遍最好，不過(guò)這取決于有多土豪，或者身邊有多少土豪朋友。
4、安卓app設(shè)計(jì)規(guī)范之適配和設(shè)計(jì)圖測(cè)試預(yù)覽
（1）尺寸標(biāo)注工具M(jìn)arkMan(馬克鰻)
（2）APP快速切圖工具：Cutterman
（3）一個(gè)可視化的Android UI界面設(shè)計(jì)工具：DroidDraw
（5）設(shè)計(jì)圖完成之后，預(yù)覽工具和在線預(yù)覽方法介紹：Ps play
（6）在線生成自定義APP圖標(biāo)字體利器：IconVault
.9圖繪制技巧:
左側(cè)和上方的黑線交叉的部分即可擴(kuò)展區(qū)域
右側(cè)和下方的黑線交叉的部分即內(nèi)容顯示區(qū)域(如做button背景圖時(shí)，button上文字的顯示區(qū)域)
用它可以實(shí)現(xiàn)部分拉伸，從而實(shí)現(xiàn)圖片在安卓系統(tǒng)上的完美應(yīng)用
tab（選項(xiàng)卡）、dialog（對(duì)話框）、list view（列表項(xiàng)）圖標(biāo):
mdpi:24dp*24dp
安卓底部菜單圖標(biāo):
mdpi:36dp*36dp
安卓啟動(dòng)圖標(biāo):
mdpi:36dp*36dp
安卓狀態(tài)欄圖標(biāo):
mdpi:24dp*24dp
主菜單欄:
背景:bg
按鈕:btn
按鈕常態(tài):nor
按鈕選中:sel
按鈕按下:down
圖標(biāo):icon
搜索:search
個(gè)人資料:profile
用戶:user
彈出:pop
返回:back
刷新:refresh
刪除:delete
編輯:eidt
例如:nav_bg，nav_btn_nor，nav_btn_sel，pop_box，tab_btn_sel等。
命名規(guī)范:
icon:ic_
launcher icon:ic_launcher_
menu icon:ic_menu_
status bar icon:ic_stat_notify_
tab icon:ic_tab_tab_
dialog icon:ic_dialog_
圖標(biāo)命名公式:
圖標(biāo)命名規(guī)范:
用英文命名，不用拼音每一部分用下劃線分隔圖片名中兩倍圖在名字最后要加@2x，三倍圖在名字最后要加@3x
邏輯分類_表現(xiàn)內(nèi)容_內(nèi)容類型_圖片狀態(tài)
首先有幾個(gè)規(guī)則是：
用英文命名，不用拼音
每一部分用下劃線分隔
圖片名中兩倍圖在名字最后要加@2x，三倍圖在名字最后要加@3x
通用切片命名格式：
組件_類別_功能_狀態(tài)@2x.png
舉例：tabbar_icon_home_default@2x.png
（對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png）
模塊特有切圖命名規(guī)則：
模塊_類別_功能_狀態(tài)@2x.png
舉例：mail_icon_search_pressed@2x.png
（對(duì)應(yīng)的中文為：郵件_圖標(biāo)_搜索_ 默認(rèn)@2x.png）
下面提供一些命名時(shí)常用的英文單詞列表（有些是已經(jīng)縮寫過(guò)的，僅供參考）
bg（backgrond 背景）
nav（navbar 導(dǎo)航欄）
tab（tabbar 標(biāo)簽欄）
btn（button 按鈕）
img（image 圖片）
del（delete 刪除）
msg（message 提示信息）
pop（pop up 彈出）
icon（圖標(biāo)）
selected（選中）
disabled（不可點(diǎn)擊）
default（默認(rèn)）
pressed（按下）
back（返回）
edit（編輯）
content（內(nèi)容）
left/center/right（左/中/右）
logo（標(biāo)識(shí)）
login（登錄）
refresh（刷新）
banner（廣告）
link（鏈接）
user（用戶）
download（下載）
note（注釋）
個(gè)人心得:
對(duì)目前所有的頁(yè)面都命名好
如果有重復(fù)的話，特征不明顯
上一級(jí)+這一級(jí)組合為名字
名字特征明顯
本級(jí)名字為準(zhǔn)
以特征取名
psplay預(yù)覽設(shè)計(jì)效果
material design 圖片高度的定義
列表距離是否等分？
認(rèn)清標(biāo)題的層次，層次不同顏色和尺寸都不一樣。標(biāo)題與副標(biāo)題之間是否存在尺寸的剃度。
按鈕保持最小距離？按鈕內(nèi)文字設(shè)置上下左右距離值，無(wú)論是否圓角按鈕還是直角按鈕。
了解圖標(biāo)規(guī)范:整體尺寸、實(shí)際尺寸
.9切圖規(guī)范
智能對(duì)齊
ps中勾選全局光與不勾選的區(qū)別。
安卓界面圖標(biāo)的設(shè)計(jì)
mipmap和drawable文件夾的區(qū)別
mipmap放啟動(dòng)圖標(biāo)，其他圖標(biāo)放drawable里面。
/////
ios10設(shè)計(jì)指南
