安卓和ios设计规范、materialdesign设计规范使⽤sketch最重要的⼀点是设计好控件的规范。 为做好设计规范需要对⾊彩进⾏编号，⽐如:color_a”_1，color_b_2，color_c_3等8。
对⾊彩的归类可分为以下⼏种:
品牌⾊（即主⾊调）
通过纯度（S）和明明度（B）的变化，延伸出扩展⾊。
辅助⾊”8
通过改变⾊相（H），保持纯度（S）和明度（B）与品牌⾊差异在⼀定范围内，延伸出辅助⾊。
警惕⾊
通过改变⾊相（H），保持纯度（S）和明度（B）与品牌⾊差异在⼀定范围内，延伸出警惕⾊。
内容⾊（即⽂字内容的颜⾊）
保持品牌⾊⾊相（H），通过纯度（S）和明度（B）的变化，延伸出内容⾊。
注意：颜⾊由⾊相、纯度、亮度组成，通过调整HSB这三个⾊值来达到彼此之间的联系。
字号规范？（适配不同⼿机，有何规律？⾏间距是多多少？有何规律？）
IOS字体规范
尺⼨单位pt
IP6 PLUS (@3x)
IP4、5（@2x）
⾸先先弄懂IOS⼿机尺⼨
IP7 PLUS 1080 *1920 5.5英⼨ 401PPI
IP7 750*1334 4.7英⼨ 326PPI
IP6 PLUS 设计版 1242*2208
IP6 PLUS 放⼤版 1125*2001（是IP6设计版的1.5倍）放⼤版就是等⽐放⼤1.5倍得出的分辨率。
IP6 PLUS 物理版 1080*1920 5.5英⼨ 401PPI
IP6设计版 750*1334 4.7英⼨ 326PPI
IP6放⼤版 640*1136
IP5 640*1136 4英⼨ 326PPI
IP4 640*960 3.5英⼨ 330PPI
总结:IP6是IP5（IP4）的1.5倍，IP6 PLUS（IP7 PLUS）是IP6（IP7）的1.66倍。
因此，做设计稿时以IP6尺⼨设计，通过按⽐例缩放来适配其他⼿机。
单位之间的换算关系随倍率变化：
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:
状态栏:40 导航栏:88 标签栏:98
IP6 PLUS、IP7 PLUS
状态栏:60 导航栏:132 标签栏:146
IP6 PLUS、IP7 PLUS（物理版、放⼤版）:
状态栏:54 导航栏:132 标签栏:146
IP&IPOD TOUCH ⼀代⼆代三代:
状态栏:20 导航栏:44 标签栏:49
IP图标尺⼨
IP6、5、4:
APP STORE1024*1024：程序应⽤:120*120主屏幕114*114:spotlight搜索58*58：标签栏75*75:⼯具栏和导航栏44*44* IP6 PLUS: APP STORE1024*1024：程序应⽤:180*180主屏幕114*114:spotlight搜索87*87标签栏75*75:⼯具栏和导航栏66*66 IP&IPOD⼀代、⼆代、三代:
APP STORE1024*1024：程序应⽤:180*180主屏57*57*114:spotlight搜索29*29标签栏38*38:⼯具栏和导航栏30*30⼿机界⾯设计元素
⽂字
图标
按钮
颜⾊
边距
字体尺⼨主要包括以下：单位（px）
导航字体尺⼨
⽂章列表标题尺⼨
32，50。
带头像列表尺⼨
30，46。⼆级导航⽂字、带头像列表标题、详情⽂字、输⼊提⽰⽂字等。
⽤于较重要⼩标题
28，44。⽤于副标题、评论标题、点赞标题、按钮⽂字等。
⽤于详情描述⽂字
26，40。列表详情、作品详情、卡⽚标题。
⽤于较重要的
黄⾦分割
黄⾦矩形
在⼀个黄⾦矩形中，以⼀个顶点为圆⼼，矩形的较短边为半径作⼀个四分之⼀圆，交较长边于⼀点，过这个点，作⼀条直线垂直于较长边，这时，⽣成的新矩形仍然是⼀个黄⾦矩形，这个操作可以⽆限重复，产⽣⽆数个的黄⾦矩形
IPAD设计尺⼨
IWATCH设计规范密封杯
MAC设计规范
IOS10新功能
安卓⼿机尺⼨规范
尺⼨单位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
单位之间的换算关系随倍率变化：
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为基准，像素密度更⾼或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率相近的显⽰效
物联⽹
⼩程序
什么是⼩程序？
地球仪制作方法简单⼩程序的特点？如何使⽤？
⼩程序⽂档。
图标规范
理性定制好图标的安全区，根据不同图形基本型进⾏视差调整，保持视觉体量感的⼀致
////
普通图和视⽹膜图
视⽹膜屏是分辨率超过⼈眼识别的⾼分辨率屏幕，是苹果公司在2010年Iphone4发布会上提出的营销术语。
将640*960像素压缩到3.5英⼨的显⽰屏内，该屏幕的像素密度达到326ppi（当拿的⼿机距离你25到30厘⽶，⼿机像素密度达到300ppi以上，视⽹膜就⽆法分辨出像素点了）
像素密度={√（长度像素数^2+宽度像素数^2）}/ 屏幕尺⼨
/////
⼿机切图的命名规则
//////
产品测试⼀、图⽚格式@2x与@3x
应对⾮视⽹膜和视⽹膜屏，APP有时会提供不同⼤⼩的图⽚，1倍图和2倍图和3倍87图，它们的像素与1倍数图相⽐相差2倍或者3倍。
命名规则：2倍图在1倍图的名字后加@2x
普通：sample.png2倍：**************倍：*************
系统⽤“sample”寻图⽚的时候，会⾃动根据设备屏幕取对应的图⽚
由于retina屏幕的普及，现在⼯程中⽤得最多的是@2x和@3x图⽚
/////
iphone4、5、6采⽤@2x图，iphone6plus采⽤@3x图。对于iphone4、5、6不需要加@2x，程序会优先加载@2x的图。对于iphone6 plus加@3x，
/////
material design设计规范
material design，材料设计语⾔是⾕歌提出的全新的设计语⾔。旨在为⼿机、平板电脑、台式机和其他平台提供更加⼀致、更加⼴泛的外观和感觉。
material design是⾕歌公司为统⼀各平台产品外观⽽设计出⼀套规范。material design颜⾊更鲜艳，动画效果更突出，具有内置的实时ui阴影，可在不同屏幕切换的hero元素。
material design是⾕歌拿出来媲美苹果的设计。⾕歌CEO拉⾥.佩奇为
魔法纸⽚即Material Design结合卡⽚式设计，⼜结合现实世界⾥纸张的隐喻，统⼀了Google在设计上的表达，从⽽展⽰出⼀种强烈的风格。
1、核⼼思想
,aterial design的核⼼思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。
Material design是最重视跨平台体验的⼀套设计语⾔。由于规范严格细致，保证它在各个平台使⽤体验⾼度⼀致。不过⽬前还只有Google⾃家的服务这么做，毕竟其他平台有⾃⼰的规范与风格。
2、材质与空间
材质
魔法纸⽚层叠、合并、分离拥有现实中的厚度、惯性、反馈，同时拥有液体的特性，能够⾃由伸展变形。
魔法纸⽚拥有纸⽚不⼀样的特性:
。纸⽚可以收缩改变形状卫星电视接收卡
。纸⽚变形时可以裁剪内容，⽐如纸⽚缩⼩时，内容⼤⼩不变，⽽是隐藏超出部分多张纸⽚
。可以拼接成⼀张⼀张纸⽚
。可以分裂成多张纸⽚
。可以在任何位置凭空出现
不过，魔法纸⽚有些效果是禁⽌的：
⼀项操作不能同时触发两张纸⽚的反馈层叠的纸⽚，海报⾼度不能相同纸⽚不能互相穿透纸⽚不能弯折纸⽚不能产⽣透视，必须平⾏于屏幕 空间
Material design引⼊了z轴的概念，z轴垂直于屏幕，⽤来表现元素的层叠关系。z值（海拔⾼度）越⾼，元素离界⾯底层（⽔平⾯）越远，投影
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议