移动 APP 设计规范
一、设计规范的意义
1、保证设计的一致性。
对内部：多个设计师合作，依然能保证设计风格的统一。
对用户：提高用户体验，提高操作效率，加深对产品的记忆。
2、提高开发效率
与前端有效沟通的工具，提高设计还原度，降低对接成本。
开发可以建立公共组件库，极大的提高了开发效率。
3、方便产品迭代
随着产品的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。
二、移动平台设计语言
2.1 平台设计语言
2.1.1 谷歌设计语言 Google Design
谷歌设计中心，展示了谷歌的设计工作和概念，包括了 Material Design 在内的所有关于产品、体验、设计、品牌等互联网领域的设计思考。
2.1.2 苹果 IOS 设计规范
https://developer.apple.com/cn/design/tips/
苹果人机界面设计指南，含有IOS设计规范，指导界面设计。苹果人机界面设计指南，详细介绍了苹果公司最新的移动设备和系统，设计屏幕分辨率、图标设计规范、色彩搭配、文字等设计语言，同时还提供了 UI 设计资源可供大家使用。
2.2 设计常见概念
2.2.1 DPI 和 PPI 的定义
DPI原来是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。但随着数字输入，输出设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但较为严谨的人可能注意到，印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并非相同，所以较专业的人士，会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。
我们通常讲的打印机分辨率是多少DPI，指的是”在该打印机最高分辨率模式下,每英寸所能打印的最多”理论”墨点数”。
Pixels Per Inch也叫像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。像素密度=√{（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
Pixels Per Inch是像素的密度单位，就像PPI值越高，画面的细节就会越丰富，所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同，常见的有72PPI，180PPI和300PPI,默认出来就是这么多(A710拍出的是180PPI)。
DPI(Dots Per Inch)是指输出分辨，针对于输出设备而言的，一般的激光打印机的输出分辨率是300PPI-600PPI，印刷的照排机达到1200PPI-2400PPI，常见的冲印一般在150PPI到300PPI之间。
2.2.2 PX 和 PT
PX大家可能比较熟悉，就是像素，英文pixel的简称。最通俗的理解就是找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为1080x1920px的显示器中，横向分布1920个点，纵向则有1080个点。这些点通过显示器的光学特性，为我们组成不同的图像。
请注意， 在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。
由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。
另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。
同样用简单直观的例子来演示，拿两台不同型号的iPhone，比如一台ip11和一台ip11pro Max，打开同样一款应用（如QQ音乐），准备好一把尺子，使用尺子分别测量最上方title“音乐馆”文字尺寸。经测量，可以发现不同型号的“音乐馆”文字的尺寸都一样。也可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号（30PT）。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。
请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。
2.2.3 屏幕分辨率（px）和显示分辨率
屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。
显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
iPhone 6、7、8 的屏幕物理尺寸是 4.7 英寸。RetinaHD高清显示屏，移动端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB标准。
iPhone 6 Plus,5.5英寸(对角线)LED背光宽Multi‑Touch显示屏，具有IPS技术,1920x1080像素分辨率，401ppi.全sRGB标准,如下图所示。
iPhone X 尺寸 是 5.8英寸，手机主屏幕分辨率是750乘1624 PX，整个屏幕的像素尺寸,一倍图：375 乘 812 。
屏幕的长宽尺寸比例，4:3 是最常见屏幕比例。16:10 就是常见的「宽屏幕」比例。16:9 主要是HD电视在用的比例。常听到的720p、1080p 都是这个比例。
2.2.4 逻辑像素与实际像素
实际像素除以倍率，就得到逻辑像素尺寸。
iOS 系统逻辑像素是pt，实际像素是px。1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。开发项目中，一倍图机型上是100px乘100px,在iPhone 6s 中显示出来的是200px乘200px，在 iPhone 8 plus 中显示出来的是 300px乘300px 。在视觉上，这三个尺寸看起来是一样的。
安卓系统的逻辑像素单位是 dp。安卓系统把各种设备的像素密度划分成几个范围区间，并且给不同范围的设备定义了不同的倍率，保证显示效果的相近。安卓系统的手机屏幕都可以找到自己密度值、代表分辨率、倍率、逻辑分辨率等。
密度为xxxhdpi(1080px乘1920px) 的手机目前市场份额占比较大；目前密度为 xhdpi、xxdpi 和 xxxdpi 的手机产品占绝大多数的市场份额，而正好他们的逻辑像素是 360dp 乘 640dp, 根据这样的分辨率标准导出 @2x、@3x、@4x 这三种格式的切图，基本就可以适配市面上绝大部分的Andriod 系统的机型了。
三、移动平台设计原则
设计原则其实就是对一些设计过程中基于人类的认知规律对设计做出的一些指导性的原则。并且对已经成为行业共识的设计经验做个总结，用来指导产品、交互、UI界定问题、提高效率，其提倡的核心原则就是从用户出发，充分考虑用户的使用体验。
产品设计黄金定律
满足用户需求
设计的本质就是为用户解决问题提供价值，设计以人为本，用户目标是最重要的
最快捷的去解决他的问题，达成他的目的。
充分考虑用户的使用习惯
比如大多数人拿手机的时候是双手握还是单手握，单手握的时候是右手操作还是左手操作，操作的时候用哪个手指就能进行操作。
考虑到用户的使用习惯有助于在设计时避开手指的触碰盲区。
充分考虑用户的使用场景和干扰源
- 用户使用产品是在什么时间，什么地点，什么环境下使用譬如，用户经常在嘈杂的环境中使用自己的产品，这时候的干扰源就是噪音，产品设计时应避免使用语音技术;
- 用户经常在拥挤的环境中使用产品，则产品设计时应避免用户过多地进行输入操作;
- 用户经常在地铁等网络环境不好的场所使用产品，产品就应该自动保存用户的信息，防止信息的丢失。
尽量减少产品层级
在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。如果产品层级确实过深，考虑用一下几种方法扁平化你的层级结构：
- 使用选项卡(tabs)结合分类和内容的展示;
- 允许穿越层级操作，比如允许用户在第一层级对第二层级的内容进行直接操作(新浪微博信息列表页的长按)。
APP 的第一层级
如果 APP 的第一层级包括多种视图，确保在主操作栏上给出明显操作入口;如果 APP 允许用户创建内容，考虑在第一层级给出创建内容的入口;如果 APP 内容允许被搜索，考虑在第一层级给出搜索入口，用户可以通过搜索打破导航结构，进行全局搜索。
操作栏的设计
- 空间足够情况下，给出 APP 图标;
- 如果 APP 支持用不同的方式展示内容，要在操作栏支持视图切换的功能。
可以考虑用选项卡或者下拉菜单的方式来进行切换：
- 选项卡展示 APP 视图的同时，使其便于浏览和切换，如果你希望用户频繁切换视图，可以考虑选项卡。
- 如果你不想放弃垂直屏幕空间且希望用户不是那么频繁的切换视图，考虑使用下拉菜单。
操作按钮：操作栏上的操作按钮用来展示你 APP 中的最重要功能的操作。
使用 FIT 来确保优先展示操作按钮的准则：
- F — 频繁。用户在访问界面时，是否会频繁使用这个操作
- I — 重要，这个操作对于用户来说是否真的很重要
- T — 典型，在类似的 APP 中，是否把这个操作作为典型的第一操作
一般来说，如果符合 FIT 准则，则放在操作栏里，否则，它属于更多操作。比如：微博客户端的刷新按钮。浏览微博对于大多数人来说是第一诉求，而刷新按钮对于浏览微博来讲是一个重要的操作且操作频率极高，所以，微博的客户端一般把“刷新”这个操作放在主操作栏里。
主操作栏的内容不易过多，一般不超过三项
主操作栏的作用是为了把最重要的内容展示给用户，过多的内容容易对用户造成干扰。比如，腾讯微博的主操作栏里只有切换视图和写微博两个内容项，微信的主操作栏只有图标和把不常用功能收起按钮两个内容项，Fuubo 的主操作栏也只有图标和刷新按钮两个内容项。而新浪微博官方安卓客户端的主操作栏内容项则过多。
设计要主次分明
将主流用户最常用的 20% 功能进行显现，其他进行适度的隐藏，越不常用的功能，隐藏的层级越深。例如：微信的扫本机二维码、避免新浪微博广场的堆积式设计。
始终提供明确的导航
要提供明确的返回上一级的操作。
尊重用户的付出，自动保存用户输入的内容
比如，微信的消息发送在没联网的情况下发送会显示叹号保存在手机端，联网后只需重新发送即可，不需要重新键入信息。新浪微博在网络不好的情况下进行转发或评论，相应的信息也会自动保存在草稿箱，联网后操作一下即可。
尽量减少用户的输入，输入时给出适当的参考
比如百度地图这一点做的很好，用户输入一般时就会给出相关地点。
尽量去猜测用户的行为，但要允许纠错
比如，用户在进行搜索时，可以根据用户最近的搜索行为给出参考答案。
只在最重要的时候才去打断用户
比如通知，好的 APP 只有在需要它发言的时候它才发言。
提供即时的，明确的反馈
好的反馈能使用户有被感知的感觉。操作反馈不及时时，用设计打掩护。
内容优先 ，合理的布局
对于手机而言，屏幕空间资源显得非常珍贵，为了提升屏幕空间的利用率，界面布局应以内容为核心，而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容，使用户能快速理解移动应用所提供的内容，使内容真正有意义，这是非常关键的。
- 充足内容，使内容符合移动的特征。
- 优先突出用户需要的信息，而简化页面的导航。
- 适时提升屏幕空间的利用率。
是为移动触摸而设计
点击操作是PC时代交互的基础，在触摸屏设备上基于手指的手势操作已经代替了鼠标的点击操作。
- 以信息架构为基础，简历手势交互规范。
- 优先设计自然的手势交互，而不是TAP点击
- 引导用户在情境中学习手势操作。
- 特殊手势不是必须的。
- 可触区域必须大于7×7mm,尽量大于9×9mm。
- 手势操作需要提供过程及反馈演示。
输入方式的 转换
文字输入是移动端的软肋之一，不管是手写输入还是键盘输入，操作效率都相对较低。在行走或者单手操作时，输入的出错率也比较高。
- 减少文本输入，转化输入形式。
- 简化输入选项，变填空为选择。
- 使用手机已有的传感器输入。
操作流程必须确保流畅性
在移动产品的操作过程中会碰到多种多样的情况——找不到目标、不知道该怎么操作、操作后没有及时反馈，等等，这都会对产品的流畅性造成影响。在移动产品的设计中主要从三个方面来考虑产品的流畅性：
- 手指及手势的操作流。
- 用户的注意流。
- 转场流畅或者自然，不能牵强！
多通道设计
多通道设计是指系统的输入和输入都可以由视觉、听觉、触觉等来协作完成，协同的多通道界面和交互也会让用户更有真实感和沉浸感。
当前各个系统平台的基础技术已经越来越成熟，语音输入、手势识别及其他由多种传感器组成的综合识别系统也会给用户带来更接近自然的感觉。
作为产品设计师或APP设计师，也可以从其他通道的角度思考设计，给用户更好的交互方式。
移动APP产品必须具备易学性
对于移动产品，提倡的是简单、直接的操作，倾向于清晰地表达产品目标和价值。让用户快速学会使用，尽量不要让他们查看帮助文档。界面架构简单，明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的想说就能让用户清晰地知道操作方式。只有这样的设计，才能让用户的学习使用没有负担，而不是通过帮助系统来教会用户操作。
避免干扰和打断
在玩手机时突然没电了、写微博时又被老板叫去做重要的事情、在搜索商品时收到一条重要的信息……在移动情境中，被各种其他的事情打断是很正常的。
- 保存用户的操作，减少重复劳动。
- 网络中断状态或编辑中断状态。
- 衔接用户的记忆而不是让用户重头开始。
移动设计必须有爱
评价一个移动产品用户体验的好坏，除了要看它是否满足用户需求和是否基友友好的可用性之外，能让用户感受到惊喜是在移动产品设计最为推崇的。这样的设计往往是超越了用户的期望，它的表现是功能、交互或者操作流虽不是用户预期的，但是用户能很好地理解，并且更高效、更有趣地完成任务。
四、APP 设计规范常见内容
1、设计尺寸：375x667pt @1x（750x1334px @2x）为基准设计。
2、设计工具：Sketch、Adobe XD、Photoshop
3、预览效果：Sketch Mirror、Adobe XD 或 Ps Play
4、切图输出：@2x @3x两套
5、标注工具：蓝湖，摹客
6、常用组件需要指定颜色、尺寸规范，如按钮、分割线、导航、文字等
7、通用展示页面需要统一的展示处理规范，如空数据页面、网络异常页面、加载页面