iPhone设计规范
iPhone历史
谈到iPhone，人们首先想到的是史蒂夫·乔布斯（Steve Jobs）。尽管乔布斯已经去世，但是他的理念仍然是现代智能手机设计的原则。乔布斯不仅重新定义了智能手机，还定义了移动端应用程序。
乔布斯在自家车库里创立了苹果公司，自此“车库”也成了创业者最爱的地标。苹果公司的第一代电脑内置了非常出色的用户图形界面系统（GUI）并且内置了Helvetica等漂亮的字体。
后来，在经历了苹果公司的权利斗争后，成熟的乔布斯再次登上发布会的舞台，推出真正能改变世界的产品——iPhone。乔布斯强调用户界面和交互设计的重要性，这种理念改变了当时的设计思维，并影响至今。
iPhone历程
相关产品：iPhone（初代）、iPhone 3G（二代）、iPhone 3GS（三代）、iPhone 4（四代）、iPhone 4s（五代）、iPhone 5（六代）、iPhone 5s和iPhone 5C（七代）、iPhone 6和iPhone 6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone 7和iPhone 7 Plus（十代）、iPhone 8和iPhone 8 Plus（十一代）、iPhone X（十一代）、iPhone XS/iPhone XS Max、iPhone XR（十二代）
逻辑像素和物理像素
逻辑像素（Logic Point）：逻辑像素的单位是pt，它是按照内容的尺寸计算的单位。
iPhone 4的逻辑像素是480pt*320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，所以iPhone4的物理像素是960px*640px
物理像素：物理像素单位是pixel，简写为px。它是按照像素格计算的单位，屏幕设计中最小的单位是px。
ppi（Pixel Per Inch）：屏幕分辨率的单位，表示每英寸显示的像素密度。屏幕的ppi值越高，这个屏幕每英寸能容纳的像素颗粒就越多，那这个产品的画面的细节也就越丰富。
当ppi值大于300时，人类无法用肉眼察觉出屏幕上的“马赛克”格子。但是如果屏幕很大，那么呈现视网膜屏的ppi值也需要更大。
UI设计师更适合选择按照iPhone 6/7/8作为基准进行界面设计。
HIG设计指南
各个组件专有名词以及对应尺寸：
状态栏（Status Bars）最上方，显示时间、运营商信息、电池电量的区域。
（iPhone6/7/8状态栏高度=20pt（40px）、iPhone X状态栏高度=44pt（132px））
导航栏（Mavigation Bars）状态栏之下，一般来说导航栏中间是页面标题，左右是放置功能图标的区域。
（iPhone6/7/8导航栏高度=44pt（88px）、iPhone X状态栏高度=44pt（132px））
注意：iPhone X的ppi值为458，与iPhone6/7/8的换算方式不同。
大标题导航栏：高度一般是116pt（232px），这包括20pt（40px）状态栏的高度，同时能放下34pt（68px）的大标题和辅助信息（如返回等图标）。
注意：大标题不应该像传统的导航一样常驻在页面之上，因为他占用的空间太大。iPhone X数值需要另外换算。
标签栏（Tab Bars）指的是App底部的区域。iOS规范中Tab栏一般有五个、四个、三个图标形式，也就是把宽度等分为五份、四份、三份。
（iPhone6/7/8标签栏高度=49pt（98px）
注意：通常UI设计师会在Tab栏图标之下加上10pt（20px）的注释文字，这个注释文字一般来说是非常浅的浅灰色。
工具栏（Tool Bars）在苹果自带浏览器的底部。工具栏同Tab栏一样都是位于浏览器的底部，但是高度略窄，其高度是44pt（88px）。
闪屏：一张完整的静态满屏的图片，用于App启动加载的页面。UI设计师只需要按照正常的iOS移动端尺寸进行设计就行。
安全距离：即与手机边缘留出的边距（Margin）。虽然这个边距没有明确严格的规定，但是一般的App会留出16pt~24pt的边距，防止用户在屏幕边缘不易选择。
色彩：只要符合产品气质并且从色彩心理学理论角度思考，用什么颜色是设计师的自由。
字体：iOS英文使用的是San Francisco（SF）字体，中文是苹方黑体。
苹果认为App的字体信息层级可分为 大标题（Large Title）、标题一（Title 1）、标题二（Title 2）、标题三（Title 3）、头条（Headline）、正文（Body）、标注（Callout）、副标题（Subhead）、注解（Footnote）、注释一（Caption 1）、注释二（Caption 2）等几种。
启动图标，在苹果提供的资源中，有Template-AppIcons-iOS这个文件。只需要专注设计启动图标，用启动图标替换智能对象里的内容就会发现所有尺寸的图标都变成了设计的图标。
控件：包括输入框、按钮、滑杆、页卡、开关等。
注意：设计师要想自己设计控件，一定要注意两件事情
1、选择区域基本符合44pt（88px）原则
2、设计操作的不同状态
键盘：在设计时，考虑到键盘展开时的效果，有两种情况：
1、一些界面中的输入框和信息可能往上移动；
2、当输入一个表单时，页面会垂直定位到输入位置。
iTunes上传截图：这里需要提供1242px*2688px和1125px*2436px的两套截图。
工作流程
1、前期调研阶段
2、原型图阶段
3、视觉稿阶段（iPhone 6/7/8尺寸下，实时预览设计稿）
4、视觉规范（主色/辅色/色彩规范、文字颜色/大小规范、ICON规范、应用图标规范、按钮和交互态规范、间距规范）
5、切图（Adobe XD、蓝湖、Cutterman）、命名规范（可以按照“功能_类型_名称_状态@倍数”的格式命名）
6、标注（蓝湖、px像素大厨、Markman）
7、iOS开发（Objective-C、Swift、UIkit框架）、
8、项目走查（判断视觉还原程度、懂i笑傲、选择状态等动态效果是否符合预期）
动效
目前iOS主流的动效实现方式有四种。
1、设计师提供开发动效视频或GIF
2、可以使用序列帧的方式实现动画
3、给程序猿AVI等视频文件直接插入视频
4、使用Airbnb开源的Lottie
Material Design
安卓是什么？
安卓是基于Linux的开放源代码的操作系统。它是安迪·鲁宾（Andy Rubin）创立的。最后被Google收购，安卓的发展更加顺利。安卓是一套与Windows类似的操作系统。
安卓是一套性能非常好的底层框架，但是用户体验和设计上都是白纸，因此很多开发商基于安卓系统的底层系统开发了交互良好、视觉设计更加的表现部分，这种开发称为安卓ROM开发。
小米通过优化安卓底层框架，加上自身研发的、用户体验良好的交互和视觉，完成了MIUI——一款基于安卓的手机操作系统包。
自此，几乎每一个国内手机品牌都有一套自身的ROM系统。小米MIUI、魅族Flyme、锤子Smartisan、联想有联想乐OS、华为有华为ROM等。
安卓的尺寸
由于安卓的市场发展比较乱，没有像苹果一样严格的硬件生产规范，因此屏幕尺寸一场混乱。其中使用率最高的是720P和1080P。
dp单位：独立密度像素的简称（Density-independent Pixels），是安卓设备上的基本单位，如同苹果设备上的pt一样。已知一个设备的ppi值，dp与px之间的换算关系是：
dp×ppi/160=px
sp单位：独立缩放像素的简称（Scale-independent Pixels），是安卓设备上文字的单位。默认情况下1sp=1dp。
三大金刚键：底部有返回键、Home键、任务列表键。这三个金刚键是安卓交互的一部分，安卓平台上的应用程序交互基于三大金刚键。
但是由于很多用户喜欢iPhone的单独Home键设计，因此很多厂商辉仔啊硬件上一隐藏三大金刚键或像iPhone一样保留Home键。
切图：UI设计师需要切出五套不同分辨率的切图，那么不同的分辨率应该按照drawable-mdpi、drawable-hdpi、drawable-xdpi、drawable-xxdpi、drawable-xxxdpi的文件夹存放各套切图。
.9切图：这种图片可以表明哪些部分可以被拉伸，哪些部分不能拉伸。
设计师要做的就是用ps中的铅笔工具1px大小，透明度为100%，颜色#00-0纯黑色，然后在切图边缘画出1px的横竖线，再把这张图命名后缀加上.9，这样就搭好了“暗号”。
什么是Material Design？
安卓阵营产品的设计规范和风格。目标是创建一种优秀的设计原则和科学技术融合的可能性，并给不同的平台带来一致性的体验，同时可以在规范的基础上突出设计者自己的品牌性。
Material Design并不是完全的抽象扁平风格，它是从物理现实中学习了如质感、投影、加速度、纸张的模拟等隐喻方法。这些都会让MD更加被用户理解。
设计理念
Z轴的概念：手机界面是一个平面二维的空间，而MD通过二维的一些表达手段，如投影、动效等构建出Z轴的概念。
组件
悬浮球FAB（Buttons：Floating Action Button）
FAB尺寸：默认尺寸（56dp*56dp)和mini尺寸（40dp*40dp）。
可交互的FAB：可以具有一个跳转走的功能，他也可以是一个展开的子菜单。
扩展性的FAB：带文字异性并且不随屏幕滚动的按钮属于扩展性的FAB。
底部应用栏（App Bars：Bottom）
底部应用栏显示屏幕底部的导航和按键操作。底部应用栏是由容器、导航栏抽屉控制、浮动悬浮按钮、动作图标、更多菜单空间几部分组成。
顶部应用栏（App Bars：Top）
顶部应用栏中的标题像报纸一样居左。这是因为MD认为阅读应该如报纸一样按照从左往右的顺序排列，并且图标左侧最多可以放置一个系统图标，右侧可以放置多个系统图标。
顶部应用栏由顶部栏容器、抽屉式导航图标、标题、系统图标、更多按钮组成。
背板设计
在引发的某个操作中，可设计背板承载某些选项和辅助信息。背板的设计与iOS中的Action Sheet类似，但又可以更加个性化。
背板设计的辅助控件主要包括一下几个点
1、背板设计隐藏时，后层控件可以提供有关前层的辅助信息
2、背板设计激活时，后层会显示与前层相关的控件。
这样可变的设计可以让用户更加方便的找到需要的功能。
横幅：顶部栏下面的第一个凸显区域，显示突出的消息和相关的可选操作，它可以是一个对话，也可以是一个提示或者包含图形的设计。
底部导航（Bottom Navigation）：与iOS一致。
按钮（Buttons）：纯文字按钮、线性按钮、切换按钮、填充按钮
纯文字按钮：只有加粗带色彩的文字，可以理解为可选择链接
线性按钮：用一个线框说明选择区域，比较不显眼
填充按钮：明显
切换按钮：使用率低于其他按钮
卡片式设计
MD的显著标志。卡片设计如同一个小的单元，在这个单元里的信息逻辑关系更加紧密。
如果一个单元的信息过多，很容易在用户阅读时发生串行的现象，卡片式设计能够有效地规避这个问题。
纸片设计
纸片设计是输入框中多个元素的组合，纸片有选中态和交互态等丰富的交互。
例如：邮件添加人的操作就是一个输入框内添加一个纸片的操作，这样的纸片可以承载头像和文字双重信息。
对话框（Dialogs）
可以分为模态对话框和非模态对话框。
模态对话框需要和人交互；
非模态对话框更多的是显示提示信息。
分割线（Deviders）
分割线分为全出血分割线和插入式分割线/居中分割线和标题分割线。
全出血分割线给人的感受是信息完全独立；
插入式分割线更方便用户阅读并准确找到当前阅读的位置；
居中分割线如果阅读曲线是沿中心进行的，同属一类的附属元素；
标题分割线用小号标题的当作分割线。
抽屉式导航（Navigation Drawer）
苹果不建议使用抽屉式导航，因为与 Tab栏相比，Tab栏的用户触发率更高，而抽屉式导航需要选择两次才能触发某个功能，层级较深。
页卡（Tabs）
页卡常见于顶部应用栏，作为应用栏的一部分粗壮乃。一般由2~3个页卡组成。当用户选择其中一个页卡时，应用栏下方跳转对应的内容。
文本输入框（Text Fields）
用户需要输入文本信息时使用文字输入框，文本输入框样式MD提供的由填充性输入框和线框输入框。
图片组（Image Lists）
四种形式
正常图片组：每张图片大小一样，间距统一并且通常会窄一些，给人秩序感和统一感。
排版图片组：图片按照栅格分割，最大尺寸的图片等于四个小图片拼起的高、宽，宽尺寸的图片的宽度等于两个小图片的宽度相加。
照片墙图片组：结构比较松散，适合图像尺寸不均等的内容展示，效果如同家居中的照片墙。
瀑布流图片组：花瓣的瀑布流，图片宽度全部相等，由于高度不等会展现出如同瀑布一样的形式。
滑块（Sliders）
设计师在设计某个音乐类的App或者视频App时，音量或者其他设置都需要一个滑块，从而方便用户进行调节。调节功能就可以使用滑块进行隐喻。
选择器（Selection Control）
单选框/复选框
底部提示栏（Snackbars）
一个对用户不过多干扰，并且信息不必确认操作的信息提示工具栏。
状态指示（Progress Indicators）
某些进程加载内容时，需要让用户感知到这个状态，即进度条。
色彩
在配色的时候需要注意三个原则：
分级：设计师可以用不同的颜色告诉用户哪些时可以交互的，哪些是装饰，并且色彩与信息的逻辑关系应该是相关的，重要的元素应该使用最突出的颜色；
清晰：文本和背景一定要有色彩反差，也就是”白纸黑字“、”黑纸白字“；
品牌：一个产品的品牌与调性体现出移动端应用程序上就是主色调，如网易红、QQ音乐绿，能让人时刻明白自己使用的是什么产品。
文字
Material Design在安卓上的字体，中文使用的是思源字体，英文用的Roboto。其他Google的免费字体也全部可以子啊安卓的MD中使用。
字体单位sp
产品图标
产品图标是设计师在设计界面时体现品牌和功能性的图标。图标以简单、大胆、友好的方式传达产品的核心理念和意图。
网格
尽量使用4的倍数构建。网格对设计师设计图标有很好的参考作用，有利于其发i西安横纵方向上没有对齐的细节。而参考线是有黄金比例和不同形状但面积相等的几何图形模板组合而来的，同样具有很好的参考意义。
图标处理
注意：颜色本身没有z轴，不要因为颜色的关系增加多余的阴影；
重叠的表面层数要注意，太多的图层可能使图标过于复杂；
不要在图标上使用过多的层级和分割；
手风琴是指图标扁平阴影的处理，不要食用过多的手风琴层次，避免臃肿；
不要用奇怪的透视扭曲产品图标。
系统图标
系统图标是设计师在构件界面时负责表意功能和信息的图标，系统图标设计应简单、现代、友好，每个图标都应尽可能简化以表达最基本的特征。
图标分类
MD把图标分为填充图标、线性图标、圆角图标、双调图标、尖角图标。系统图标可以适应任何产品的风格。
形状
MD过去版本中对形状规定较为死板，最新的MD在形状上非常自由。菱形、半圆形、圆角都可以使用，这些充满个性的形状可以帮助设计师构建更酷的界面。
交互
空状态（Empty States）
空状态应该与品牌保持一致，可以使用幽默和可爱的情感化设计同用户产生亲和感，，但是不应该体现可操作性，不用使用口号和可选择是的暗号。
警告对话框（Alert Dialog）
警告对话框可以让用户预知下一步会发生什么，并提供选择来取消这个行为。
闪屏（Launch Screens）
图像（Images）
在设计师设计的App中一个图像可能会被切成很多个尺寸，如1：1、3：4、16：9等，甚至是圆形或正方形，这时候需要保证图像的核心区域在任何尺寸中都能显示。
新手引导（Onboarding）
MD建议产品设计新手引导页，一次帮助用户了解该程序是如何操作的，以及有什么样的功能。
离线功能（Offline States）
有些功能会因为无网络而完全不能使用，这时同样需要设计师设计一些状态用于表现现在是无网络的。让用户感知这个状态。
主题编辑器
