一、封闭与开放

1.两个系统对屏幕反应的优先级不同

iOS对屏幕反应的优先级是最高的，它的响应顺序依次为Touch--Media--Service--Core架构，换句话说当用户只要触摸接触了屏幕之后，系统就会最优先去处理屏幕显示也就是Touch这个层级，然后才是媒体（Media），服务（Service）以及Core架构。

而Android系统的优先级响应层级则是Application--Framework--Library--Kernal架构，和显示相关的图形图像处理这一部分属于Library，你可以看到到第三位才是它，当你触摸屏幕之后Android系统首先会激活应用，框架然后才是屏幕最后是核心架构。

2.硬件工作配置不同

iOS基于GPU加速Android系统产品则并非如此，因为Android需要适应不同的手机硬件，需要满足各种差异配置，所以很多图形特效大多都要靠程序本身进行加速和渲染，并严重依赖CPU运算的操作自然会加大处理器的负荷，从而出现卡顿的问题

3.开发机制不同：

安卓机制效率低，Android的编程语言是JAVA，而iOS的则为Objective-C。Objective-C的优势是效率高但比较“唯一”，而JAVA的优势则是跨平台不过运行效率相对偏低，其实这两个编程语言所带来的机制不同，就已经造成了各自系统之间的流畅性差异化。

我们可以用一个简单易懂的案例来解释封闭与开放。例如消息提醒机制的差异。

iOS系统对权限控制比较严，每当我们下载一个新的app，当要调用相册权限、相机、麦克风、位置等都需要用户选择确定，如果用户点击不允许，就没法调取。想要再次允许的时候操作也比较麻烦，需要到系统设置里面去打开权限。这也就是为什么iOS消息设置相对来说复杂一点，根本原因是iOS系统。

由于Android开源，Android开发在用户安装app就获取了很多权限，比如用户安装app后，对于消息提醒的设置只需要在app设置界面设置就可以了。

二、物理交互区别

Android和iOS除了封闭和开放的差别外，还有物理控制、交互的差别。iOS全是由苹果公司统一出品，而安卓则不同。在国内，经济快速发展，安卓手机厂商如雨后春笋拔地而起，很多从原来的山寨机一步步打造自己的品牌，逐渐得到用户的认可。我们常见的Android手机有三星、谷歌、小米、华为、中兴、魅族、oppo、美图手机、锤子手机、努比亚......面对着这么多手机厂商，每个厂商有着自己独特的功能和交互方式，甚至有的物理键都不相同。

截屏

就拿一个很常见的截屏功能来说，iOS是电源开关键和home键同时按，而小米手机截屏则是按住音量键和最左边的功能键截屏（其实小米有五种截屏方法，如下图），谷歌手机又不同了，华为也不一样了。

解锁

比如说一个常见的功能，指纹解锁，苹果5、6、7的指纹解锁就是在home键上，而iPhone x则采用面部识别解锁。从用户的操作习惯来说，会用大拇指来解锁，不管左手还是右手。而华为手机的指纹解锁放在手机的背面，用户大多数则会选择食指来解锁。再举一个栗子，密码解锁除了指纹外，还有输入密码解锁，iOS从原来的四位到现在的6位，都是采用键盘输入密码的方式进行解锁；而安卓手机解锁大部分是采用的手势密码的方式进行解锁。

拍照

再比如美图手机、oppo r11这些手机都是主打拍照功能，拍照很牛逼，吸引着用户，当然，拍照是现在很多手机主推功能，包括苹果手机也一直在拍照功能上改进。

三、设计的差异

1.设计输入与输出

a.尺寸大小

如果每种手机尺寸都去做设计，一个设计师你会做死，设计师多了公司又请不起。

通常设计师们是这样做的：Android就以720px＊1280px 或者1080px＊1920px（根据具体情况定，但大部分是以720px＊1280px做的），iOS则以750px＊1334px。

我们看公司业务情况，重Android还是重iOS，重谁就以谁为基础做设计，只做一套，让开发适配，具体控件调用相应平台原生控件。如果两种都重视，那我们就以iOS的750px＊1334px作为设计基础。

Android的安全点击范围为48dp，iOS的则为44pt。Android的状态栏为24dp，iOS的为20pt。安卓的顶部导航栏为56dp，iOS的为44pt。

b.单位

• px是我们常用的像素单位。比如我们常说的苹果6的设计尺寸为750px＊1334px。
• pt是在iOS中表示长度单位和字体单位。对于iOS开发来说，我们应该给他们pt的单位，我们现在设计的尺寸基本是以苹果6的尺寸设计的（用pt单位表示就是375pt＊667pt，用像素单位表示就是750px＊1334px，在2倍图中1pt＝2px）。
• dp是安卓开发中使用的设计单位，就拿我们常用的720px＊1280px来说，与之对应的安卓单位表示为360dp＊640dp，它们也是2倍的关系。
• sp是安卓的字体单位，假如字体在你的设计稿720px＊1280px中为32px，那么在360dp＊640dp中该字体的大小就为16sp。

• XHDPI是对应安卓的2倍图（720px＊1280px)，XXHDPI是对应安卓的3倍图（1080px＊1920px）这两个是我们现在常用的。

  
  

• iOS我们通常设计尺寸是750px＊1334px，它对应的是iOS的@2x图。

  
  

c.字体

• 在Android中，英文字体使用Roboto，中文字体使用Noto（思源黑体）。Google联合Adobe发布的「思源黑体」作为Android的默认中文字体，不仅仅在字形上更易于在屏幕的阅读，并且拥有7个字重，充分满足了设计的需求。

  
  

• iOS 中，在英文方面，苹果加入了新的字体San Francisco，该字族包含了有两个字体：为 iOS 和 OS X 设计的 SF，以及为 Watch OS 设计的 SF Compact ，而各自分为各自分为Text 和 Display，前者 6 个字重，后者 9 个（多了三个斜体）。OS全新的「苹方」，字形更加优美，且在屏幕的显示也更加清晰易读，拥有6个字重，满足了日常的设计和阅读需求。

  
  
• 在我们移交设计稿时，我们要向开发说明，安卓、iOS开发，用系统自带的字体，那么安卓就会用安卓系统的字体，iOS则会用iOS系统的字体。除非设计特殊要求用其他字体，那就要和开发工程师商量了，在安装包植入字体包，这样才能让用户使用的字体都相同。

d.距离大小、字体大小的区别

• 在iOS中，内容到边的距离通常是15pt（以750px＊1334px为基础，像素大小为30px）。
• 而安卓基本是16dp（以720px＊1280px为基础，像素大小为32px）。
• 字体大小也不一样，iOS是11pt、13pt、15pt、17pt，而安卓中是12sp、14sp、16sp、18sp。

• 用一种设计尺寸，那么我们通常采用偶数，这样方便两边适配，就是间距以8px为基础我们边距可以定位32px。字体大小也采用12sp、14sp、16sp、18sp。

  
  

e.设计输出

标注

sketch Measure，它可以轻松导出我们的尺寸标注，导出的时候我们可以选择默认展示的单位。如果是给安卓开发导出尺寸，你的画板是360dp＊640dp，那我们选择导出的单位就为MDPI，这样开发就直接读取值就行，不用换算了。如果给iOS导出尺寸，画板是375pt＊667pt，那就选择导出的单位为@1x。

windows标注神器：

• Markman（http://www.getmarkman.com），
• Pxcook像素大厨（http://www.fancynode.com.cn），
• Assister ps（ http://witstudio.net/en/assistor/ ）
• Markly（http://marklyapp.com/）
• INK（http://ink.chrometaphore.com/）

切图

• 通常我们切图格式为png，当然，现在h5页面、网页开发基本都是采用svg格式（矢量）。
• 在sketch中，我们可以新建一个面板，专门放切图文件。
• ps也有切图插件cutterman，一键切图，非常智能高效。

切图我们需要注意的是：
统一规格：通常，我们都有一套自己的图标设计规范，在这个规范内进行我们的图标设计，设计完后再用到相应的位置。比如，安卓常见的图标制作大小为24dp，安卓切图通常就为24dp

注意点击范围：安卓的安全点击范围为48dp，比如我们顶部的导航返回键，点击范围就应该设置为48dp。虽然通常设计切图可以不切这么大，但是应该在移交的时候注明点击范围。

统一命名：命名规范，其实也就像我们使用ps的时候图层命名一样，它的主要作用是让我们能够快速找到想要的切图和区分其他切图，是一个习惯的问题。切图命名统一英文，不要用中文，程序不识别的。

安卓点九切图：这个是安卓切图比较特别的地方，点九切图可以更好的适配手机和减少系统占用资源，当然并不是所有安卓切图都用点九，只是在特殊情况下才使用的，比如按钮、背景等。使用点九，你可以用ps切，也可以下载一个点九图的生成器。

切图的输出：虽然前面我们讲了只做一套设计稿，但是我们切图的时候最好分别输出，因为安卓和iOS的命名是不一样的。iOS切图是全部放在一个文件夹的，以后缀名不同来区分@2x和@3x。而安卓是把2倍图和3倍图分开放在不同的文件夹里，名字都是一样的，2倍图放在xhdpi的文件夹中，3倍图放在xxhdpi中。

交互与视觉输出：交互设计师需要把页面跳转流程、交互事件在交互文档中说明。视觉设计师最后输出切图、标注、图片，最后统一移交给开发。

2.控件差别

导航

• 导航栏的高度是不相同的，iOS系统规范为44pt，安卓的为56dp。
• 其次iOS导航栏的标题在中间，返回键旁边可以有返回字样或者上一层级的名称；而安卓导航栏的标题通常是和返回键挨着的，还有就是两者的箭头样式不同。

• 如果只做一套，那就把标题统一放在中间，返回键旁边也不需要放指示文字。

  
  

弹窗

Dialog／Alerts

首先它们在两个平台的名称不一样，安卓称之为dialog，iOS中称之为alert。使用场景就是：需要用户对此弹框进行操作后才能继续执行其他任务。使用Dialog／Alerts的时候还是谨慎一点比较好，尽量不要给用户带来糟糕的体验感。

Toast／HUD

toast是安卓中的习惯叫法，HUD是iOS中的习惯叫法。

安卓中是这样规范toast的：
1.出现在屏幕底部。2.只能放文字不能带图标，文字要精简不宜太长。3.不是模态的，可以透过Toast对其他控件进行操作。4.短时间后会自动消失。5.不能对Toast进行交互，不能手动操作让Toast主动消失。

它们两的不同主要是：

• Toasts一般出现在屏幕下方，HUD出现在屏幕中间。
• Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。
• 每次产生的Toasts内容不可改变，HUD内容可以改变（比如调节音量时出现的HUD）
  *但其实现在toast使用也已泛化，每个平台都在用，而且也延伸出其他样式，出现的位置也不一定在中间或者底部，也有可能出现在顶部。

Actionbar（Action Sheets、Acitivity Views）

动作栏虽然两个系统都有，但是官方给的指导建议还是有些不同的。

安卓中称为Bottom Sheets，特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。

底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的，没有取消按钮。宫格布局可以增加视觉的清晰度。在一个标准的列表样式的底部动作条(Bottom Sheets)中，每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话，也可以使用分隔符对这些操作进行逻辑分组，也可以为分组添加标题或者副标题。

而iOS中，也有和安卓类似的功能，但是action sheets是没有图标的，居中对齐，在action sheets（操作列表）和activity views（活动视图）通常还带有一个取消按钮，通常点击取消或者弹窗外的界面，弹窗都会消失。

其实，安卓中也有不带文字的操作列表，不过通常是在屏幕中间弹出。样式我们现在基本也趋于统一，不去纠结每个平台的特殊性了。

tips和popover

这两种用法在每个平台都有用到，我们在正确的场景中使用它们就好了。

Snackbar

安卓独有的（见上图）。它是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

动画

Material Design运用的是机械物理和电磁物理，而iOS的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。

Material Design动画最引人注目的就是响应式交互动画，更加模拟真实物理场景，点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布，离手指越近的元素越亮，阴影越深，而离开远的元素则越暗，直至淹没在黑暗之中。

iOS的系统动效可以发现，每当用户去点击，镜头就会切近，而背景则是隐入了一片高斯模糊的景深之中。高斯模糊也成为了iOS特有的一个表达层级关系的利器（其中不仅是模糊，还存在着镜头晃动时的位移）。同样类型的动效还体现在打开app的时候由一个点放大成一个面，包括“日历”App和“相册”App（皆为系统应用）中年-日-月切换的操作，均是镜头思路的表现形式。

按钮

安卓主要使用的按钮是：扁平按钮、凸起按钮、悬浮按钮、底部常驻按钮、下拉菜单按钮、开关按钮。

iOS和安卓的按钮形式都很接近，系统主要采用文字按钮和图标按钮。

两者最大的差异是安卓点击有响应效果。比如：悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的圆形按钮。浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。而iOS没有墨水扩散效果，而是颜色变浅来反馈用户点击事件。

键盘

安卓和iOS的键盘是不相同的，根据不同场景呼出不同的键盘类型，具体使用场景大家可以自己去深入了解下。如下图。通常对于对话框来说，iOS的发送按钮是可以直接放在键盘上的，而安卓的通常是放在对话框里面。

选择控件和日期选择等

常见的选择控件样式是不相同的，iOS像滚轮，模糊弱化未选择的选项，安卓就是平移滑动。开关控件样式也是不相同的。通常这些对于做原生应用的来说，各自调用各自的系统组件就行，但是对于h5来说，他们是采用统一的设计，安卓和iOS是相同的，应该让开发制作统一样式，需要更少的系统区分。

iOS11

设计语汇

1.字体加重

字体的变化在这个版本来说是非常大的，字重发生变化，比如主界面，App 名称的字变粗，日历字体变粗改进阅读体验。

2.字体变大

全新的 Navigation Bar，我们可能早就已经见过过这种样式了，去年(2016)在新版 Apple Music 就应用了这种大大字 Nav Bar，可谓是iOS的一次尝试，随后在今年就全部应用在iOS11系统中了。当然设计师也不要担心开发的实现难度，iOS11也开放 API 让大家使用了。

3.卡片、阴影、圆角的应用

卡片的应用，大家可以去观察App Store，这次它的改变也非常大，整体交互架构都发生了变化，视觉表现也让人耳目一新，当然它的改变不是为了更好看，而是为了达到苹果公司的商业目的。App Store也充分展现了卡片、阴影、圆角的应用方式。

4.icon从空心到实心

据研究表明，实心的图标比空心更容易识别。当然，这里的改变主要的原因我认为是卡片和阴影的应用，实心图标能更好的和它们结合在一起。

5.键盘样式改变

数字虚拟键盘也从原来的空心变成实心了，它和拨号、计算器统一为实心按钮。

系统本身交互和应用的变化

1.解锁交互发生变化

iPhone x解锁采用面部解锁，取代了原来的指纹解锁，实体home键已经被虚拟条取代。

2.控制中心的变化

控制中心从原来的2个页面变为现在的一个页面了。

3.计算器、拨号样式的变化

计算器和拨号样式也和数字键盘一样，从空心按钮便为实心按钮。

五、iPhone x

尺寸

原来的屏幕在 iPhone X 之前，尽管 iPhone SE，7 和 7 Plus 的屏幕尺寸大小不同，但都是 16:9 的屏幕。而 iPhone X 差不多是个 13:6 的屏幕812pt x 375 pt（2436px x 1125px）。屏幕的绝对尺寸也变大了，从 4.7 吋增大到 5.8 吋。

就尺寸大小来说，我们就可以简单的认为，iPhone X的竖屏模式，宽度与iPhone6、iPhone7、iPhone8的4.7寸显示屏宽度相同；iPhone X的高度比4.7寸的屏幕要高出145pt，增加大约20%的垂直显示空间。应用程序可以显示高分辨率的图像。iPhone X是显示高分辨率的@3x图片。375x812@1x，3倍尺寸就为1125x2436@3x，所以我们设计稿就以375pt x 812pt做，最后导出3倍图就可以。

安全区

为了在iPhone x上适配我们的设计，我们就不得不考虑这个问题。相对于其他来说，iPhone x 的状态栏变高了，垂直空间更大，展示的内容更多。还有home键采用虚拟条，交互也发生了一些变化。我们通过下面的图来了解它。