移动端设计规范和方法汇总
主要讲IOS的设计规范，安卓设备太多，这里不做赘述。
前言：
年底了，用之前的沉淀和知识积累，输出一些自己的看法，希望大家多批评指正，我们共同进步！也希望能给刚入门的设计师一些帮助。设计不易，且行且珍惜。开始之前，先简单说一下我自己对于移动端设计的方法和步骤的理解。（因为我大部分设计稿是用sketch输出，所以用sketch举例）
1、打开软件，新建画布，确定终端尺寸。
我一般用750*1624 iPhoneX @2x，也有用750*1334 iPhone6s/7/8 @2x。
2、建立系统组件/插件。
UI-bars UI栏，UI-views UI视图。
3、建立布局，思考功能和交互形态。
大部分都是按照需求来定，也可以和产品沟通优化布局和交互。
4、输出低保真原型，对交互和布局功能进行走查。
可以用sketch原生交互功能，也可以用插件Axure RP导出到Axure做设计和交互，当然也有很多其他设计软件可以做，这里主要讲我自己的方法。
5、优化页面视觉风格，包括交互细节等。
用自己的组件库或者去追波和BE上看一下好的设计，取其精华去其糟粕，融入到自己的设计里，思考如何做能在视觉和交互上减轻用户的负担，从而真正的做到提高用户体验，这也是我们的价值所在。
6、对设计稿进行细节优化，整体走查。
页面demo出来了以后一定要检查至少一遍，保证设计完整，形成闭环。
7、确认设计稿，修改，输出切图，标注。
和产品以及甲方确认设计稿，这中间可能就意味着改稿，这或许是我们设计师最大的噩梦，所以为了避免重复劳动，提高自己的工作效率，项目开始之前就要做好沟通和细节上的确认。
8、交付设计稿。
当一切尘埃落定，你就可以把设计稿交付到前端或者产品了，这个时候你也别高兴太早，天知道甲方会不会在定稿以后再来修改意见 = =
说完设计方法那我们开始讲移动端设计规范吧~
一、界面设计尺寸
1、目前主流iOS设备有 ① iPhone SE（4英寸）
② iPhone 6S/7/8（英寸）
③ iPhone 6S/7/8 Plus（5.5英寸）
④ iPhone X（5.8英寸） 「以上全部都是Retina视网膜屏幕」
2、系统各栏高
蓝色部分是较为常用的设计尺寸其中 iPhone6S/7/8 Plus 和 iPhoneX 设计尺寸采用的是3倍率，其他则是2倍率分辨率。（@3x、@2x）
二、页面边距和间距
1、全局边距（页面内容到屏幕边缘的距离）
常用的全局边距为： 32px
30px（最舒服的边距，iOS系统采用的是30px。）
24px
20px（极限边距，尽量不要低于20px。）
2、卡片间距（页面中每个卡片之间的距离）
常用的卡片间距为： 16px（Wechat）极限值
20px（有货）
22px（Dribbble）
28px（Behance）
30px（有货）
34px（Dribbble）
40px（再大就过于松散了）
微信 有货
Behance Dribbble
3、页面内容间距（每一部分内容和文字之间的距离）
一款app中除去刚提到那些有明确数值区间的控件以外，剩下的内容布局和间距就比较灵活多变了，没有具体的规定。
三、内容布局间距
1、列表式布局间距（每个列表的高度）
常用的列表高度为： 144px（Wechat）
132px（QQ）
112px（自如）
142px（爱彼迎）
80px（极限距离）
微信 QQ
自如 爱彼迎
2、卡片式布局（每个页面可显示的卡片数量）
常用的卡片式布局为： 1个（抖音、大片）
2个（Behance、开眼）
3个（脉脉）
4个（今日头条）
4个以上（一般电商类app卡片比较多，为了展示更多商品）
大片 抖音
Behance 开眼
脉脉 今日头条
有货 天猫
四、界面图片设计比例
没有严格规范，但比较符合黄金比例的尺寸有：
16：9（开眼、腾讯视频）
4：3（站酷）
3：2（自如）
1：0.618（黄金比例）
开眼 腾讯视频
站酷 自如
五、统一风格的图标
在界面设计中，功能图标通常是由许多不同的点线面构成的，它们贯穿于整个产品的所有页面并向用户传递信息。
一套APP图标应该具有相同的风格，包括造型规则、圆角大小，线框粗细，图形样式和个性细节等元素都应该具有统一的规范。这样可以给用户高度统一的视觉体验。
六、版式规范
版式设计就是在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，下面是我们经常用到的版式规范：
1、对齐方式（对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验。）
①左对齐
②居中对齐
③右对齐
爱彼迎 百度网盘
2、对称（我们对美感有两种感觉：一种是对称美，另一种是不对称美。人的形体是对称的，设想一个人少一只眼、或嘴歪在一边，那一定被认为不是很美的。人类对对称的偏爱不难理解，英国诗人布莱克曾说对称是一种美，诗人们寻找韵律的对仗和整齐的叠句，正是出于对诗歌形式美的追求。在应用界面的设计中，引导页设计、注册登录输入框和按钮等大多都是对称的设计。）
有货 自如
领英 全民K歌
3、分组（分组就是将同类别的信息组合在一起，直观的呈现在用户面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。）
WeChat QQ
网易云音乐 QQ音乐
七、界面文字规范
文字是 APP 中最核心的元素，是产品传达给用户的主要内容，所以说，文字的字体、字号、加粗、倾斜、颜色的规范就显得异常重要。
在一款 APP 中字号范围一般在20-36之间（@2x）,现在又出现了大标题的设计，苹果在引领潮流这块还是比较大胆和超前的。所以字号还是要根据产品属性酌情设定。还有就是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
字体方面普遍采用的是华文黑体、思源、冬青、等字体进行设计，目前苹方字体在设计中应用的比较广泛。
字体的颜色一般很少用纯黑色，基本都用深灰色和浅灰色；用字重来区分重要信息和次要信息，进行信息层级的划分。
八、适配切图
在设计工作中我们有可能需要设计一套基准设计图来达到适配多个分辨率的终端，所以我们可以选择中间尺寸750*1134px作为基准，向下适配640*1136px，向上适配1242*2208px和750*1624px／1125*2436px。
1. 750*1334px向下适配640*1136px
由于750*1334px和640*1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。
上面提到了由于750*1334px到640*1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以不需要改变图像大小，只需将画布大小改成640*1136px即可，然后再改变横向元素的间距以达到适配的目的。
上面左图裁切到右图适配过程如下：
导航栏图标向左右移动保持和原来的边框距离一致，标题居中。
入口图标向左移动保持和原来的右边距一致，各图标的间距等宽。
banner和图片高度除以1.17（750／640=1.17得到）后居中，宽度640px。
2. 750*1334px向上适配1242*2208px（@3x）
由于750*1334px界面是2倍的像素倍率，而1242*2208px是3倍的像素倍率，也就是说1242*2208px界面上所有的元素的尺寸都是750*1334px界面上元素的1.5倍，所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242*2208px，最后调整界面图标和元素的横向间距的大小完成适配。
3. 750*1334px向上适配1125*2436px（@3x）
由于iPhone X 的像素分辨率发生了变化，为1125*2436px（@3x），在实际工作中为了方便向上和向下的适配，我们仍然可以选择熟悉的 iPhone 7（750*1334px）的尺寸作为模版进行设计，只是高度增加了290px；设计尺寸为：750*1624px（@2x）。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125*2436px（@3x）尺寸的设计稿。这里要注意状态栏由之前的40px增加到88px，标签底部预留68px用于放置主页指示器。
对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
4. 切图规范（当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，通常我们只需要对 icon 进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。）
·输出切片和命名
先将设计稿中的图标重新排列在一张新的画布中，保证同样尺寸的图标间距相同，这样做的好处是为图标建立一个控件库，有利于图标的整理。
给每一个图标建立好参考线之后，用 sketch 自带的切片功能，点击 MAKE EXPORTABLE 输出想要的尺寸的PNG图片即可。（PNG 格式拥有更多的颜色和细节并且支持透明）
导出切片命名的通用规范是：界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接，例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性，设计师需要先和合作的开发工程师进行沟通确认。
·标注
当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率，常用的标注工具有 Cutterman、measure、蓝湖等插件；当然了也可以手动标注~
在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度；界面的背景颜色、不透明度；各个图标、列表、文字之间的间距。
界面标注的作用是给开发工程师提供参考，因此在标注之前需要和开发工程师进行沟通，了解他们的工作方式，标注完成之后宣讲你的注意事项，以更快捷高效的完成工作，并且最大限度的完成视觉高的还原。沟通方式掌握的好可能对后续的工作有很大帮助。
最后
对于我们设计师来讲，掌握一定的规范和设计分析方法都对未来发展有很大好处，多看多想多练，不怕试错，你迈出了一步就比原地不动要强。无论行业如何也不管别人说什么，做你自己，坚持下去，你知道我在说什么。在竞争如此激烈的互联网设计领域，更应该鞭策自己不要懈怠，以上共勉。
本文由 @斯易 发布于站酷。
·部分图片截取已标注来源
·参考文章 https://www.uisdc.com/mobile-ui-design-specifications
