使用sketch最重要的一点是设计好控件的规范。

对色彩的归类可分为以下几种:

通过纯度（S）和明明度（B）的变化，延伸出扩展色。

通过改变色相（H），保持纯度（S）和明度（B）与品牌色差异在一定范围内，延伸出辅助色。

通过改变色相（H），保持纯度（S）和明度（B）与品牌色差异在一定范围内，延伸出警惕色。

内容色（即文字内容的颜色）

保持品牌色色相（H），通过纯度（S）和明度（B）的变化，延伸出内容色。

注意:颜色由色相、纯度、亮度组成，通过调整HSB这三个色值来达到彼此之间的联系。

字号规范？（适配不同手机，有何规律？行间距是多多少？有何规律？）

首先先弄懂IOS手机尺寸

因此，做设计稿时以IP6尺寸设计，通过按比例缩放来适配其他手机。

单位之间的换算关系随倍率变化：

字体尺寸主要包括以下:单位（px）

36，行间距:56。用于导航标题、详情页标题。

30，46。二级导航文字、带头像列表标题、详情文字、输入提示文字等。

28，44。用于副标题、评论标题、点赞标题、按钮文字等。

26，40。列表详情、作品详情、卡片标题。

在一个黄金矩形中，以一个顶点为圆心，矩形的较短边为半径作一个四分之一圆，交较长边于一点，过这个点，作一条直线垂直于较长边，这时，生成的新矩形仍然是一个黄金矩形，这个操作可以无限重复，产生无数个的黄金矩形

单位之间的换算关系随倍率变化：

以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”寻找图片的时候，会自动根据设备屏幕取对应的图片

由于retina屏幕的普及，现在工程中用得最多的是@2x和@3x图片

material design，材料设计语言是谷歌提出的全新的设计语言。旨在为手机、平板电脑、台式机和其他平台提供更加一致、更加广泛的外观和感觉。

material design是谷歌公司为统一各平台产品外观而设计出一套规范。material design颜色更鲜艳，动画效果更突出，具有内置的实时ui阴影，可在不同屏幕切换的hero元素。

material design是谷歌拿出来媲美苹果的设计。谷歌CEO拉里.佩奇为

魔法纸片即Material Design结合卡片式设计，又结合现实世界里纸张的隐喻，统一了Google在设计上的表达，从而展示出一种强烈的风格。

,aterial design的核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

Material design是最重视跨平台体验的一套设计语言。由于规范严格细致，保证它在各个平台使用体验高度一致。不过目前还只有Google自家的服务这么做，毕竟其他平台有自己的规范与风格。

魔法纸片层叠、合并、分离拥有现实中的厚度、惯性、反馈，同时拥有液体的特性，能够自由伸展变形。

魔法纸片拥有纸片不一样的特性:

。纸片可以收缩改变形状

。纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分多张纸片

。可以拼接成一张一张纸片

。可以在任何位置凭空出现

不过，魔法纸片有些效果是禁止的：

一项操作不能同时触发两张纸片的反馈层叠的纸片，海报高度不能相同纸片不能互相穿透纸片不能弯折纸片不能产生透视，必须平行于屏幕

Material design引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。

material design引入了z轴的概念。z轴垂直于屏幕，z轴越高，元素离界面底层越远，投影越重。

dpi表示每英寸多少点，表示印刷品的点密度。

ppi表示每英寸像素数，表示设备的点密度。

针对显示器的设计时dpi=ppi

sp主要用于字体显示，字体尺寸。

动画不仅是一种装饰，它有含义，能表达界面、元素之间的关系，具备功能上的作用。

动画要贴近真实世界，就要重视easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了Material design动画的功能性。

通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。

从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。

多个相似元素，动画的设计要有先后次序，起到引导视线的作用。

相似元素的运动，要符合统一的规律。

通过图标的变化和一些细节来达到令人愉悦的效果。

颜色不宜过多，选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化，构成配色方案。

appbar背景使用主色，状态栏背景使用深一级的主色或20％透明度的纯黑。

小面积需要高亮显示的地方使用辅助色

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。注意避免以下问题：

。不要给彩色元素加投影层叠

。不要超过两层折角不要放在左上角带投影的元素要完整展现，不能被图标边缘裁剪

。如果有折痕，放在图片中央，并且最多只有一条

。带折叠效果的图标，表面不要有图案

常规形状可以遵循几套固定栅格设计。

优先使用material design默认图标。设计小图标时，使用最简练的图形来表达，图形不要带空间感。

小图标同样有栅格系统。线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。

小图标的颜色使用纯黑与纯白，通过透明度调整：

描述具体事物，优先使用照片。然后可以考虑使用插画。

图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。

可以使用半透明的主色盖住图片。

Android L可以从图片中提取主色，运用在其他UI元素上。

图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。

英文字体使用Roboto，中文字体使用Noto。

。正文/按钮文字16sp（桌面端15sp）

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

所有可操作元素最小点击区域尺寸：48dp X 48dp。

栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

顶部状态栏高度：24dp

底部导航栏高度：48dp

小图标点击区域：48x48dp

侧边抽屉到屏幕右边的距离：56dp

分隔线上下留白：8dp

大多元素的留白距离：16dp

屏幕左右对齐基线：16dp

文字左侧对齐基线：72dp

另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。

通常以列表形式出现，支持上下滚动。

按钮分为悬浮按钮、凸起按钮和扁平按钮3种。重要性如下递减：

最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。扁平按钮适合用在简单的界面，例如对话框中。

使用悬浮按钮要遵循以下规则：

建议只用一个悬浮按钮悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘悬浮按钮不能被其他元素盖住，也不能挡住其他按钮列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线。

悬浮按钮通常触发正向的操作，添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作，也不应该有数字角标。

即使在同一个列表中，卡片的内容和布局方式也可以不一样。

卡片统一带有2dp的圆角。

在以下情况考虑使用卡片：

同时展现多种不同内容卡片内容之间不需要进行比较包含了长度不确定的内容，比如评论包含丰富的内容与操作项，比如赞、滚动条、评论本该是列表，但文字超过3行本该是网格，但需要展现更多文字

卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。

狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。

对话框包含标题、内容和操作项。点击对话框外的区域，不会关闭对话框。

通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。

对话框中，取消类操作项放在左边，引起变化的操作项放在右边。要写明操作项的具体效果，不要只写“是”和“否”。标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。

在对话框中改变内容，不会提交数据，点击确定后，才会发生变化。

对话框上方不能再层叠对话框。

还有一种简易对话框，不带操作项。点击列表内容触发相应操作，并关闭对话框。点击简易对话框外面，对话框会关闭，操作取消。

对话框可以是全屏式的，全屏对话框上方可以再层叠对话框。左图是一个普通界面，其中的任何改动立即生效。右图是全屏对话框，其中任何改动，要点击保存后才生效，点击X取消。

全屏对话框右上角的操作项，可以是诸如保存、发送、添加、分享、更新、创建之类的操作，不要使用完成、OK、关闭这样的含糊措辞。

只有必填项都填了，右上角的操作项才变为可点击状态。

内容发生了改变，点左上角的X，需要有个确认对话框，提示是否忽略修改。内容没有发生改变，点左上角的X，直接退出全屏对话框。

对话框的四周留白比较大，通常是24dp。

列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。

没有头像、图标等元素时，需要用通栏分隔线。

图片本身就起到划定区域的作用，相册列表不需要分隔线。

谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。

通栏分隔线的层级高于内嵌分隔线。

网格由单元格构成，单元格中的瓦片用来承载内容。

瓦片可以横跨多个单元格。

瓦片包含主操作区和副操作区，副操作区的位置可以在上下左右4个角落。在同一个网格中，主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效，不能触发菜单。

网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。

网格中的单元格间距是2dp或8dp。

列表由行构成，行内包含瓦片。如果列表项内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。

列表包含主操作区与副操作区。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。

在同一个列表中，滑动手势操作保持一致。

主操作区与副操作区的图标或图形元素是列表控制项，列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作，也可以包含快捷键提示、二级菜单等提示信息。

顺序固定的菜单，操作频繁的选项放在上面。顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。菜单尽量不要超过2级。

当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。

菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。

菜单的当前选项，始终与当前选项水平对齐。

靠近屏幕边缘时，位置可适当错开。

菜单过长时，需要显示滚动条

菜单从当前选项固定位置展开，不要跟随点击位置改变。

菜单到上下留出8dp距离。

日期和时间选择器是固定组件，在小/屏幕设备中，通常以对话框形式展现。

线形进度条只出现在纸片的边缘。

环形进度条也分时间已知和时间未知两种。

环形进度条可以用在悬浮按钮上。

加载详细信息时，也可以使用进度条。

下拉刷新的动画比较特殊，列表不动，出现一张带有环形进度条的纸片

滑块左右两边可以放置图标。

非连续的滑块，需要标出具体数值

Snackbars至多包含一个操作项，不能包含图标。不能出现一个以上的Snackbars。

Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。

不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。

Snackbars不能遮挡住悬浮按钮，悬浮按钮要上移让出位置。

toasts和Snackbars类似，样式和位置可以自定义，建议遵循Snackbars的规则设计。

小标题是列表或网格中的特殊瓦片，描述列表内容的分类、排序等信息。

滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。

存在浮动按钮时，小标题要让出位置，与文字对齐。

必须所有选项保持可见时，才用Radio button。不然可以使用下拉菜单，节省空间。

在同一个列表中有多项开关，建议使用Checkbox。

单个开关项建议使用Switches。

tab只用来展现不同类型的内容，不能当导航菜单使用。tab至少2项，至多6项。

tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。

tab选中项的下划线高度是2dp。

简单一根横线就能代表输入框，可以带图标。

激活状态和错误状态，横线的宽度变为2dp，颜色改变。

输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。

整个点击区域增高，提示文字也是点击区域的一部分。

通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开。

右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。

通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧。

错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

字数限制与错误提示都会使点击区域增高。

同时有多个输入框错误时，顶部要有一个全局的错误提示。

输入框尽量带有自动补全功能。

提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。

提示不能包含富文本，不需要三角箭头。

触摸提示（左）和鼠标提示（右）的尺寸是不同的，背景都带有90%的透明度。

侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。

设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉，则放在Appbar的下拉菜单底部。

设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。

设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组，考虑把它放在顶部（重要）或放在底部的“其他”一栏中（不重要）。设置项较多时尝试合并，比如把两个相关的勾选项合并成一个多选项。设置项非常多时，使用子界面。

material design很重视用户的广度，应该尽量照顾到残障人士的体验。设计时考虑以下使用场景：

手机开启了高对比度模式

手机画面放大没有视觉信息，

使用屏幕阅读器只能通过语音控制

鼠标悬停显示信息，也要通过其他方式展现。考虑大字号情况下的使用体验。

不要只通过颜色表达某些信息。

音频信息也要提供文字或其他视觉呈现。

为图片和视频提供备用的文字信息。

为阿拉伯语、希伯来语、波斯语用户设计相反的界面，他们的书写和阅读习惯是从右到左的。

Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。

Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。

具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己对比调节字体大小，切记，一定是高清截图。

Android设计规范中单位是dp，dp在安卓机上不同的密度转换后的px 是不一样的，所以按照设计图的px转换成dp也是不一样的，这个可以使用转换工具转换，开发一般会有，也有些开发会使用px做单位，因为做了前期的转换工作。

Android颜色值取值为十六进制的值 比如一绿色的值， 给开发的值为 #5bc43e。

做UI出图的时候有时要常用标注，这里给大家推荐一款 Mark Man 这款软件是免费的，但如果要支持重复编辑是要购买注册版，但我们一般都是一次性标注完保存，如要再次编辑，就把保存的文件再放进去编辑一次就可以了。

1、”操作栏”对于 Android 应用来说是最重要的设计元素，它通常在应用运行的所有时间都呆 在屏幕顶部。

2、 操作栏的基本布局：

1向上＋2 Spinner视图控制＋3 重要操作按钮＋4 更多操作：其中，向上按钮，点击后是去到 当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮；Spinner 是 用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作 （action overflow）是集合操作栏中不常用的和非重要操作的地方。

多面板布局更多的是针对平板电脑，把手机端的目录视图和详情视图两个层级的界面，甚至更多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间，扁平化层级结构，简 化导航。这点在iPad上已经运用得相当娴熟了。

Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后，是 出现情境菜单的浮出层。在Android4.0中，长按后在操作栏的位置会覆盖一个临时的情境操 作栏，不再弹出情境菜单浮出层。在临时情境操作栏的环境下，当前界面的内容项允许被单个 处理，也允许被批量处理。

返回按键用在手机全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式， 连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一 个层级，若当前界面已经是最高一级，则没有向上按钮。

推出三套默认主题：Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在 这三套默认主题的基础上做设计，以加快app研发效率，但只是建议使用，并没有完全强制。

用户触摸应用中的可操作区域，应当在视觉上有响应，微小的反馈会给用户带来很好地效果。

明确的图标让用户容易理解、文本按钮、图片和文字的结合也是不错的选择

对于仅包括图标的按钮，不需要使用背景色

失效、按下、点击、正常

1、如果你可以知道当前任务完成的比例，那么使用进度条，让用户了解大约还需要多久才能完成。

2、当使用旋转圆圈时，不要配以文字标签。旋转的圆圈已经表明了正在进行后台操作。

1、复选框：用户可以在一个集合中作出多个选择。

2、单选按钮：单选按钮允许用户在一个集合中做一次选择。

3、开关：开关控制单个选项的状态。

1、对话框的左边一般情况下是取消按钮，右边是确定按钮。

2、警告对话框：对于执行下一步操作前请求用户确认或者提示用户当前的状态。内容不 同，布局也会不同。

A：没有标题栏的警告对话框：内容区应当包括一个问句或与操作有明显相关的陈述句：

B：有标题栏的警告对话框：仅在有可能引起数据丢失、连接断开、收费等高风险的操作 时才使用。并且标题应当是一个明确的问题，内容区提供一些解释。

3、弹出对话框：一般情况下用户通过触摸来作出选择。

4、toast提示：toast提供了轻量级的反馈，显示几秒钟之后会自动消失。

选择器提供了一种简单的方式，让用户在多个值中选择一个；除了可以通过点击向上/向下 按钮调整值以外，也可以通过键盘或者手势。

图标、标题、内容、次要图标、时间

2、扩展布局：可通过扩展布局显示信息的前几行或者图片的预览，来让用户了解更多的信息。

3、操作：将重要的操作按钮图标在通知栏目展现出来，这样可以加快用户的操作。

4、合并通知：如果正在等待处理的通知是同等类型，则就可以合并通知，合并的通知提供了 综合信息的描述，并告诉用户有多少条未处理的信息。

5、你可以使用扩展布局为合并的通知提供更多信息，这样用户可以知道被合并的消息细节， 并选择在应用中阅读通知内容。

1、简短：只告知用户最必要的信息，避免冗余的描述，尽可能缩短文本长度；

2、简明：使用短词语、主动词和简单名词；仅说明必要的信息，不要费力解释，用户不会care的；

3、友好：使用缩写；使用第二人称和用户对话(您或你)；保持随意，轻松的腔调；

A：句号：如果toast、标签或通知消息等控件中只包含一句话，无需使用句号作为结尾。 如果包含两句或更多，则每一句都需以句号结尾；

B：省略号：省略号常用于未完成的状态, 例如表示操作进行中 (“下载中…”) 或是表示文 本未能完全

强调纯粹的安卓应用设计

在Android4.0 app设计准则中，特别强调为Android设计纯粹的Android app，切勿使用其 他平台特定元素的注意事项，有以下5个方面：

A：强调视觉元素的样式要符合android系统；B：不用其它平台特有的图标；

C：区分向上和返回，不在操作栏上使用返回样式的按钮；

D：不在界面的下方使用选项卡tabs；

E：不在内容列表里使用向右箭头。

DPI指的是像素/英寸，直接翻译过来就是每英寸里面有多少个像素点，这个就是DPI。dpi的数值越大，就越清晰，同样拿我们的马里奥举例。第一张图是100dpi的图片，第二章是10000dpi的图片，但是图片的大小一致。简单点说就是一样大小的图片，第二张图片上的像素点比第一张多，所以就图片质量就更加的细腻，更加的清晰。

SP是安卓中专门为字体设计的单位，由于我们市场上安卓手机的分辨率越来越多，所以去适配的时候就出现了很多的麻烦，数据太多。所以安卓为了更好的适配给出了这个设计单位。在mdpi密度的屏幕中：1px=1sp。主要用于字体显示。

上面对应的是三种分辨率的屏幕显示，第一个是一倍的mdpi，第二个是两倍的xhdpi，第三个是三倍的xxhdpi。如果mdpi上的字体是12px，那么所对应的是12sp。因为sp在任何分辨率上都不会改变，所以也都是12sp，而xhdpi的字体大小显示就是：12*2=24px，xxhdpi的字体大小显示就是12*3=36px，以此类推。

DP也是一个为了安卓适配时用到的单位，安卓为了适配不同分辨率给出的单位，它也不会因为屏幕分辨率大小不一样而发生变化。适配分辨率的时候也是记住，在mdpi密度的屏幕中：1dp=1px，其余的分辨率用倍率乘以这个dp值就行了。

目前的市场上的手机有不同的分辨率：160/320/480dpi等。所以，我们不可能去记住那么多的数据，因此我们就通过DP这个单位和与PX的转化去记住。注意的是转化的时候不止是图标转化，间距和所有元素的大小也要相应的进行改变。而且还有一点值得注意的是，因为我们设计常用单位是PX ，设计的时候我们用这个单位，但是开发人员则用dp ，所以在这个设计过程中去适配不同的手机，安卓使用dp这个单位来进行px之间的转化，就是一个上述概念中的一个使用单位。

Android把屏幕密度分为了四个广义的大小：

设计时最好能够被4整除

因为MDPI是一倍的，而XHDPI是两倍，都是整数倍，容易去适配其它的分辨率，如果以XHDPI为设计稿，设计的所有数值都要求是双数的，去转换的时候才能保证不出现小数点，第二种方法的话就比较难去控制，所以一般还是建议用第一种，当然最好的方式自然是每一个分辨率都单独去做一套界面图。

元素之间的间距:8px

最细笔画:不小于2px

元素之间间距不小于:12px

元素之间的间距:16px

最细笔画:不小于4px

元素之间的间距:24px

最细笔画:不小于6px

最细笔画:不小于2px

最细笔画:不小于3px

在一个分辨率里，一张界面图上有太多的图标，不可能每一个图标的大小都是一样的，所有图标会根据所处的位置的不同，用处的不同，图标的大小也会不一样，图标的大小也不是我们想给多大就给多大，安卓系统有一套自己的规范。接下来我们看一下上面的这些图标指的是哪些。

文章标题/图标名称18sp

做安卓界面设计时最好采用dp和sp进行标注。这样的话方便适配。

在通常情况下48dp在物理屏幕上差不多是9毫米的大小，而在UI设计中所有触摸类控件的推荐大小在7毫米到10毫米之间，因为在这个值之间会使控件的点中率大大增加，在视觉上也会比较舒服。

所以当你的可触摸控件的高度和宽度大于等于48dp时，一方面可以保证你的控件在任何设备上都不会小于7毫米，同时也能够保证控件中的内容看起来比较舒服，也不会出现误触的现象。这就是所谓的48dp定律，当然这一切是个推荐值，定律在心中，实际情况灵活处理，而不是被定律束缚，才是一个优秀的APPUI设计师。

同时一定要注意控件之间最好至少有8dp的留白

在目前我们的安卓APP设计项目当中，我们并不会去为每一种分辨率去设计一套UI界面。这是一种追求完美和理想的状态。小公司肯定是耗不起这样的。

所以，这个时候我们需要学会变通。为了适应多分辨率，

1：在标准基础（xdpi：）上开始，然后放大或缩小，以适应到其他尺寸。

2：从设备的最大尺寸（xxdpi：）开始，然后缩小，并适应到所需的最小屏幕尺寸。

有些时候我们也会在实际开发过程中，Android和IOS的设计稿若无太大差异，也可从IOS的分辨率（960*640）开始，再调整设计稿的比例，适应其他分辨率。但是这种方法在切图的时候 需要做一些图片的调整。如果不是矢量图的元件需要重新按照的尺寸设计下。

基本上 App 的切图可分为下面几大类：

背景、按钮、图示、图片、照片、TabBar icon 等。

按钮的切图常以 btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性，分別为一般、点击、不能点击、选中。但不追求精致与完整度的话，只出一般属性按钮图档就可以了，在 iOS 上 RD 能在使用者点击按钮时将原图档变暗做为点击提示。

点击（highlight）：btn-xxx-h.png，使用者触摸萤幕碰到按钮，为了告知使用者有点击到而出现的回应提示。

不能点击(disabled)：btn-xxx-d.png，代表App有这功能但使用者无法使用。例如如安装在iPod上的App有播打电话功能时。既然不能被点击干脆直接隐藏的作法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需视情况决定。

选中(selected)：btn-xxx-s.png，选中出现在有复数选项时，但通常不会把按钮拿去做复数选项控件，这种按钮状态出现的机会不高。

安卓弹出对话框顶部图标:

底部或顶部tab标签图标

色彩HSB分别代表什么

色相是有彩色的最大特征。所谓色相是指能够比较确切地表示某种颜色色别的名称。如玫瑰红、桔黄、柠檬黄、钴蓝、群青、翠绿……从光学物理上讲，各种色相是由射入人眼的光线的光谱成分决定的。对于单色光来说，色相的面貌完全取决于该光线的波长；对于混合色光来说，则取决于各种波长光线的相对量。物体的颜色是由光源的光谱成分和物体表面反射（或透射）的特性决定的。

（彩度、饱和度）　色彩的纯度是指色彩的纯净程度，它表示颜色中所含有色成分的比例。含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。可见光谱的各种单色光是最纯的颜色，为极限纯度。当一种颜色掺入黑、白或其他彩色时，纯度就产生变化。当掺入的色达到很大的比例时，在眼睛看来，原来的颜色将失去本来的光彩，而变成掺和的颜色了。当然这并不等于说在这种被掺和的颜色里已经不存在原来的色素，而是由于大量的掺入其他彩色而使得原来的色素被同化，人的眼睛已经无法感觉出来了。

有色物体色彩的纯度与物体的表面结构有关。如果物体表面粗糙，其漫反射作用将使色彩的纯度降低；如果物体表面光滑，那么，全反射作用将使色彩比较鲜艳。

明度是指色彩的明亮程度。各种有色物体由于它们的反射光量的区别而产生颜色的明暗强弱。色彩的明度有两种情况：一是同一色相不同明度。如同一颜色在强光照射下显得明亮，弱光照射下显得较灰暗模糊；同一颜色加黑或加白掺和以后也能产生各种不同的明暗层次。二是各种颜色的不同明度。每一种纯色都有与其相应的明度。黄色明度最高，蓝紫色明度最低，红、绿色为中间明度。色彩的明度变化往往会影响到纯度，如红色加入黑色以后明度降低了，同时纯度也降低了；如果红色加白则明度提高了，纯度却降低了。

有彩色的色相、纯度和明度三特征是不可分割的，应用时必须同时考虑这三个因素。

以色彩的明度作为配色的主体思路。色彩从白到黑的两端靠近亮的一端的色彩称为高调，靠近暗的一端的色彩称为低调，中间部分为中调；明度反差大的配色称为长调，明度反差小的配色称为短调，明度反差适中的配色称为中调。

以高调区域的明亮色彩为主导色，采用与之稍有变化的色彩搭配，形成高调的弱对比效果。它轻柔、优雅，常常被认为是富有女性味道的色调。如浅淡的粉红色、明亮的灰色与乳白色，米色与浅鸵色、白色与淡黄色等，适合于轻盈的女装及男夏装。

以高调区域色彩为主导色，配以不强也不弱的中明度色彩，形成高调的中对比效果，其自然、明确的色彩关系多用于日常装中，如浅米色与中鸵色，白色与中绿色，浅紫色与中灰紫等。

以高调区域色彩为主导色，配以明暗反差大的低调色彩，形成高调的强对比效果。它清晰、明快、活泼、积极，富有刺激性。如白色与黑色，月白色与深灰色等。

以中调区域色彩为主导色，采用稍有变化的色彩与之搭配，形成中调的弱对比效果。它含蓄、朦胧。如灰绿色与洋红色，中咖啡色与中暖灰等。

以中调区域色彩为主，配以比中明度稍深或稍浅的色，形成不强不弱的对比效果，具有稳定、明朗、和谐的效果。

以中调区域色彩为主导色，采用高调色或低调色与之对比，形成中调的强对比效果。它丰富、充实、强壮而有力。如大面积中明度色与小面积的白色、黑色，枣红色也白色，牛仔蓝与白色等。

以低调区域色彩为主导色，采用与之接近的色彩搭配，形成低调的弱对比效果。它沉着、朴素，并带有几分忧郁。如深灰色与枣红色，橄榄绿与暗褐色等。男士冬装多用这种调子，显得稳重、浑厚。

以低调区域色彩为主导色，配以不强也不弱的中明度色彩，形成低调的中对比色效果。它庄重、强劲，多适合男装和女秋冬装的配色。如深灰色与土色，深紫色与钴蓝色，橄榄绿与金褐色等。

以低调区域色彩为主导色，采用发差大的高调色与之搭配，形成低调的强对比效果。它压抑、深沉、刺激性强，有爆发性的干扰力。如深蓝色与本白色，深棕色与米黄色等。

这是指黑白两种色彩各占1/2的搭配关系。色彩单纯，视觉效果极为强烈，具有尖锐、简单的特性，色设计师永恒的配色手法。

为灰色的文字、图标和分隔线加上 alpha 值

为了有效地传达信息的视觉层次，应该使用深浅不同的文本。对于白色背景上的文字，标准 alpha 值为 87%（#000000）。视觉层次偏低的次要文字，应该使用 54%（＃000000）的 alpha 值。而像正文和标签中用于提示用户的文字，视觉层次更低，应该使用26%（#000000）的 alpha 值。

其它元素，如图标和分隔线，也应该具有黑色的 alpha 值，而不是实心颜色，以确保他们能适应任何颜色的背景。

对于彩色背景上白色或黑色文字，可以通过表格中的调色板找到合适的色彩对比度和 alpha 值。

我们十分鼓励在 UI 中的大块区域内使用醒目的颜色。 UI 中不同的元素适合主题中不同的色彩。工具栏和大色块适合使用饱和度 500 的基础色，这也是你应用的主要颜色。状态栏适合使用更深一些的饱和度 700 的基础色。

鲜艳的强调色用于你的主要操作按钮以及组件，如开关或滑片。左对齐的部分图标或章节标题也可以使用强调色。

如果你的强调色相对于背景色太深或者太浅，默认的做法是选择一个更浅或者更深的备用颜色。如果你的强调色无法正常显示，那么在白色背景上会使用饱和度 500 的基础色。如果背景色就是饱和度 500 的基础色，那么会使用 100% 的白色或者 54% 的黑色。

主题是对应用提供一致性色调的方法。样式指定了表面的亮度、阴影的层次和字体元素的适当不透明度。为了提高应用间的一致性，提供两种主题选择：

状态栏图标尺寸通过截图看看是多大？

安卓tab选项卡是等分吗？选中状态最小高度是多少？2dp

tab选项卡投影值是多少？1dp

列表间距、字体间距、字体行距

对主题色、强调色、辅助色进行配色

颜色不宜过多，选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化，构成配色方案。

appbar背景使用主色，状态栏背景使用深一级的主色或20％透明度的纯黑。

小面积需要高亮显示的地方使用辅助色

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

iOS使用十进制色值，Android使用16进制，iOS可以绘制圆角和阴影，Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。

如何APP设计元素切图

1、和客户端的技术沟通好，用不同的框架来实现的时候，图会有不一样的切法。例如Tabbar是连背景一起切还是单独把icon做成背景透明的，文字是放在图里还是后面加字。

2、有一些小的icon式按钮，不能只切到icon边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。所以必须要多留一些透明的边，让能点击的图片在88×88以上，这样用户才保证比较好点到。

3、个人的强迫症，如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。并且用Fireworks优化大小。

4、对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。

5、切图的高度。对于一个通用的背景图，如文字圆角边框背景，那么切图的时候并不是效果图上有多高就切多高，为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的，准确的说应该切的高度H=paddingTop+textHeight+paddingBottom，及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。

6、切图的宽度。如果是一个通用的背景图，那么他的宽度应该是他在效果图中的最小宽度，也就是说这个背景可能在多处使用到了，就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候，这就需要看看你做的效果图的宽屏宽度，所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是可以拉伸、压缩吗，为什么需要参考最小的宽度呢？根据个人经验发现，一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。

通常APP设计都会涉及到多个分辨率兼容开发的问题，因此设计的时候，要定好规范。最好建立相关文档，记录使用的字体、颜色，常用的字号和间距，给出编号A1 A2 A3 B1 B2 B3，不同分辨率下换算的结果，便于技术人员进行开发。

如需对设计稿进行后期的标注，则可使用该套规范，对设计稿中的字号、颜色、间距进行标注。推荐一个小工具，MarkMan，标注设计稿十分方便。因为这是一个Adobe的插件，所以可以和PS同步。在MarkMan中打开psd源图进行标注，若psd源图有所修改，刷新之后即可同步到MarkMan文件中。

做好的设计稿进行实体机的测试很重要，因为电脑屏幕上看到的效果和手机屏幕上看到的效果可能不太一样。把常见的三种分辨率都要进行测试，当然能所有分辨率都测试一遍最好，不过这取决于有多土豪，或者身边有多少土豪朋友。

4、安卓app设计规范之适配和设计图测试预览

（1）尺寸标注工具MarkMan(马克鳗)

（5）设计图完成之后，预览工具和在线预览方法介绍：Ps play

（6）在线生成自定义APP图标字体利器：IconVault

左侧和上方的黑线交叉的部分即可扩展区域

右侧和下方的黑线交叉的部分即内容显示区域(如做button背景图时，button上文字的显示区域)

用它可以实现部分拉伸，从而实现图片在安卓系统上的完美应用

用英文命名，不用拼音每一部分用下划线分隔图片名中两倍图在名字最后要加@2x，三倍图在名字最后要加@3x

逻辑分类_表现内容_内容类型_图片状态

图片名中两倍图在名字最后要加@2x，三倍图在名字最后要加@3x

（对应中文：标签栏_图标_主页_默认@2x.png）

模块特有切图命名规则：

（对应的中文为：邮件_图标_搜索_ 默认@2x.png）

下面提供一些命名时常用的英文单词列表（有些是已经缩写过的，仅供参考）

对目前所有的页面都命名好

如果有重复的话，特征不明显

上一级+这一级组合为名字

认清标题的层次，层次不同颜色和尺寸都不一样。标题与副标题之间是否存在尺寸的剃度。

按钮保持最小距离？按钮内文字设置上下左右距离值，无论是否圆角按钮还是直角按钮。

了解图标规范:整体尺寸、实际尺寸

ps中勾选全局光与不勾选的区别。