策划007-App界面交互设计规范
在上篇 《策划006-APP界面设计风格》 确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！
APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。
APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。
页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。
推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范：
安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件
IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件
PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等
标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱：普遍用于背景色和不需要显眼的边角信息。
文字是APP主要信息的表现，尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小，标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要：大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。标准字一般：主要用在大多数文字，比如正文。标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。
APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局。
五、弹层规范
弹层规范要注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作再页面中央，这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；提示性弹层：弱提示性的应用系统的token飘字提示即可；需要强提示可以使用取消、确定的模块弹层；更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。
页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。
图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式：如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
按钮规范按状态分有：常态、点击态、不可点击态。按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；而且按不同手机平台长中短尺寸也注意有所不同。
页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。
......
...
设计规范主要由设计童鞋来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了。在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。
Android 平台设计规范有哪些
众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体，英文字体为robot字体。
只使用偶数单位 24 pt，28 pt，36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？
讲图标之前先来分析一下一排英文的意思：
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。
px是像素的意思， 不同设备显示效果相同。
安卓各屏幕密度关系如下：
3、图标
不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：
系统图标的尺寸：
快捷图标的尺寸：
应用图标的尺寸：
4、应用栏的尺寸
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。
如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~
安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益***化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。
安卓设计规范
在讲安卓设计规范之前我们先来看看一下的问题：
*规范是什么？
*规范的目的是什么？
*怎样进行规范？
规范是什么
规范：意指明文规定或约定成俗的标准。或是按照标准，规范的要求进行操作，使某一行为或某一活动达到或是超越规定的标准。
也就是说 规范通过制定一些规定与约束 （如字体大小，界面尺寸，图标大小等） 使某一行为 （如项目开发，组件库的组件等） 达到标准 。
制定规范的目的是 确保设计的统一性与合理性 。规范维护的是项目的统一，而不是设计师个人的设计。想一想在公司里，除了设计，前有产品经理，后有程序员，还有用户，你做的东西都是要交给他们的。产品经理看你的设计是否展现了她的需求（设计内容是否包括前期讨论的内容），程序员问你要各种切图（图标、组件、布局、间距、字体大小等），用户看你的设计（颜色，图标使用的大小范围等），如果设计师完全没有规范，全凭自己的“天马行空”设计出来的东西，是会带来很大的麻烦的，举个简单的例子，切图规范，如果你的命名只有自己能看懂，那你就不要发给程序员了吧~因为发给他他也找不到哪个是哪个，这个图标应该放在哪里。你所做的设计是为了公司项目服务的，是为了客户服务的，所以你设计的东西就得满足项目中其他职位（产品经理、程序员）使用的需求，以及符合用户的使用习惯。所以 规范是为了项目利益***化，高效化而在团队中制定成的约定。
不同的规范虽然内容不同但是包含的内容其实是差不多的，通常包括布局，颜色，图标，组件，字体这几个方面。接下来我们就来看看安卓中常见的设计规范，相信学习了之后，以后项目里的设计规范你都很清楚了，在设计中多加注意就行。一个产品设计完成之后，进行设计规范制作也是对项目总结的一个方法。能注意规范且会制定规范。
在进行app设计的时候，我们都会先建画布大小，当然是根据安卓界面尺寸来建立的。安卓手机那么多，不必每一个都记住。只要记住一两个，懂得之间的换算关系就行了。
目前安卓端主流尺寸主要是@1.5x，@2x以及@3x，记住下面三个就够用了。
@1.5x 480x854 /540x960
@2x 720x1280( 这是我最常用的界面尺寸)
@3x 1080x1920
考考你，那@1x是多少呢？
除了知道界面尺寸外，还得知道状态栏，导航栏，菜单栏的高度是多少，设计时建立好相应的参考线。
建议取用 720 ×1280 这个尺寸，这个尺寸 720×1280中显示完美，切图后的图片文件大小也适中，应用的内存消耗也不会过高。
对于图标其实在规范上面有很多要注意的，比如图标大小，图标设计，图标切图规范，这里就重点讲图标大小，之后会再讲图标设计规范。
安卓系统中，中文使用的是谷歌思源，英文使用的是Roboto。思源字体，是一种非衬线字体，Adobe称思源体为Source Han Sans,Google称思源体为Noto Sans CJK. 思源体包含7个自重，也就是7中不同粗细的字体。
对于字体或许在设计过程中你会选用其他字体，但是需要注意你所用的字体是否利于用户阅读，是否舒服等问题。
对于字体的大小，在界面设计过程中，需要统一，比如所有正文是统一大小，所有标题是统一大小。
不同风格的字体大小，给人的感觉也是不同的，我们要学会灵活应用。安卓文字单位是sp，以下文字是按照@1x倍率来规范的
在安卓中，标注距离一般用dp，标注文字用sp，而知之间的换算关系为：
1dp＝（屏幕ppi／160）px
不清楚单位的，可以去找上一篇文章了解px pt sp dp ppi。
Android开发需要的设计交付物至少要有：高保真UI图，标注，切图
这是最后，也是最重要的一点，因为你所切的图是要交到程序员的手里的，他写的程序达不到你想要的效果可能就是他看不懂你给他的规范~
1.切图尺寸必须为双数
2.单像素的图会出现边缘模糊的情况
3.命名需要规范
基本上 App 的切图可分为下面几大类： 背景、按钮、图示、图片、照片、TabBar icon 等。
一般命名规范可以为：
前缀：位置 组件 用途
后缀：状态
如用btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性，分别为一般normal、点击highlight、不能点击disabled、选中(selected)。
但不追求精致与完整度的话，只出一般属性按钮图档就可以了。如果是点击（hightlight）状态就可以命名为：btn- cancel-hightlight.png 表示取消按钮点击时图标。
就算不是按照很严格的规范来命名，至少能让程序员知道你这个图标是在那种情况下使用的图标，这就需要设计师跟程序员很好的沟通，方便整个团队的开发，提高团队的开发效率
手机UI设计的基本规范
大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。
而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。
那我们就来看看安卓和iOS的具体有哪些界面规范。
一、iOS界面规范
首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。
苹果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。
来分析一下界面的尺寸规范：
首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。
而下边的底部栏（导航栏）高度则为98px。
注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？
☆ 关于图标部分
苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。
整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。
☆ 关于分割线部分
注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。
☆ 关于板块与板块之间
板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？
☆ 关于列表中的尺寸规范以及字体要求
☆ 关于左右间隔的安全区域
这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，***的特点就是数值全是偶数。
☆ 关于切换按钮的尺寸
☆ 关于字体
iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。
主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
关于苹果界面的小部分尺寸规范就介绍到这里，下期再做安卓界面的尺寸介绍。
作为UI设计师，一定要具体掌握界面的大小尺寸来适应美学观点，让人感觉协调舒适，能在有效的范围内极快吸引用户的注意力。
二、安卓界面规范
众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体，英文字体为robot字体。
只使用偶数单位 24 pt，28 pt，36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？
讲图标之前先来分析一下一排英文的意思：
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。
px是像素的意思， 不同设备显示效果相同。
安卓各屏幕密度关系如下：
3、图标
不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：
系统图标的尺寸：
快捷图标的尺寸：
应用图标的尺寸：
4、应用栏的尺寸
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。
如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~
安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益***化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。
所以作为UI设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。
iOS和安卓的设计规范有何不同
iOS设计规范围绕一个核心，就是“模态”
安卓设计规范如果总结成一句话，就是“任何地方均可点击”
区别iOS和安卓设计的10个check points
1. 如何全局导航：
iOS导航tab bar放在底部（顶部手短摸不着）
安卓导航tab个数少用固定tab，个数多用滚动tab，都在顶部（安卓的硬按键在底部，防止误操作）
（如果种类太多，都可以使用左侧抽屉设计）
2. 二级页页头导航条是什么顺序：
iOS导航
1 向上箭头+上级页面标题
2 当下页面标题（居中，可以没有）
3 操作（一般就一个）
iOS不需要给出logo
安卓导航
1 向上箭头+logo+当下页面标题
2 Spinner（optional）
3 重要操作（可能多个）
4 更多操作 （省略号竖向）
安卓不需要指出上一级页面标题
3. 搜索框设计
安卓搜索点击放大镜进入搜索
搜索框=非模态窗口+左箭头+LOGO+输入框（占位符）
iOS7搜索下拉滑出搜索框进入搜索
搜索框=模态窗口，没有左箭头，没有搜索按钮
4. 管理列表条目
iOS左滑能删掉条目
安卓长按操作条目（展现contextual menu或者contextual action bar）
ps：安卓4.0已经逐步接受手势操作，不那么严格
5. 批量管理条目
iOS右上角有编辑按钮，点击进入批量管理
安卓长按条目进入批量管理模态
5. 视觉
iOS主要内容白色，背景淡色，内容与背景衬线分割
安卓不使用背景，一切区域皆可点
6. 选择分类
iOS使用scope bar或者左上角抽屉设计（汉堡包）
安卓使用下拉菜单spinner（但是很少设计师喜欢）
7. 操作工具栏
iOS一律放在底部，叫split action bar
安卓一律放在顶部右端，叫contextual action bar
8. 产品LOGO
iOS不在导航中显示logo
安卓每一个页面左侧顶部都应该显示logo
9. 列表样式
iOS在条目上提供右箭头，提醒更多内容（optional）
安卓不放右箭头，一切区域皆可点击，不需要额外提醒
10. 按钮
安卓使用扁平方型按钮设计
iOS7建议borderless按钮设计
两者圆角尺寸也不同
关于安卓设计规范和安卓设计规范名称的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。