最全总结！iOS与Android最新原生设计规范差异

系统版本

Andriod 9.0 VS iOS 12.1.4

分析思路：

不管是面对哪个平台的交互设计任务，在确定业务流程及功能需求的前提下。需要解决的问题，主要涉及以下几个方面：导航、内容布局、页面关系、操作、反馈。因此，本文在阅读了iOS 及Andriod官方设计指南的情况，希望从上述几个维度，对于指南中提及的内容，进行划分，希望对日常的交互设计工作起到一定帮助。

差异点概述：

1.导航：

Andriod：顶部导航（多用文字/图文/可滑动形式）

iOS：顶部导航（分段控制器）

2.布局：

Andriod：多出图片、卡片的相关规范

iOS：仅对列表有规定

3.页面关系：

Andriod：Bcakdrop、底部表单（本页）

iOS：滚轮选择器、模态

4.操作

Andriod：长按手势、标签（chips)

iOS：滑动手势

5.反馈

Andriod：Snackbar、横幅（Banner）

iOS：Toast

系统级差异：

1.应用间切换：

Andriod：由底部向上滑动/应用切换按钮

iOS：连续按两次home键/向上滑动并停止

Android—Pixel机型

Android—其他机型

iOS—连按两次Home健

iOS—向上滑动并停止

2.控制中心：

Andriod:由底部向上滑动

iOS:由顶部向下滑动

Andriod

iOS

3.激活小部件

Andriod:通过长按激活

iOS：通过3Dtouch激活，且小部件可选

Andriod — 长按

iOS

4.删除

Andriod:长按并拖拽

iOS:长按

Android

iOS

4.文件管理

Andriod: 1.可选择图片、最近、网盘、本机所有文件；2.多层文件夹，可任一层级返回

iOS：1.仅能选择icloud/iphone/应用中文件；2.多层文件夹，需逐级返回；3.可新建文件夹

Andriod

iOS

布局

1.列表：

Andriod:

1.单行：（1）纯文本：选项；（2）图标+文字：选项、通讯录；

2.两行：（1）图标+元图标：文件列表；（2）缩略图+元文本：商品列表；

3.三行：（1）形象+文本：邮件列表；（2）缩略图+文本+元文本：食物列表；

Andriod—列表

iOS: 1.基本：选项/导航项；2.含详情：单个已选；3.含辅助信息：多个已选；4.组合式：列表归类

iOS—列表

2.图片列表（仅Android）：

1.规则：各项同等重要；2.非规则：强调某些项；3.编织：浏览对等对象；4.砌体：浏览原比例对象；

Andriod—图片列表

3.卡片（仅Android）：

1.规则型：快速浏览； 2.仪表盘：多功能+多主题； 3.差别型：凸显卡片；

Android—卡片结构

Android—卡片类型

页面关系

1.本页关系：

Andriod:

1.Backdrop：多用于底层（多操作）与顶层（内容多于操作）产生联动关系；2.模态底部表单(sheet:bottom): 用于替换菜单；

iOS：

1.滚轮选择器：用于选择（时间、日期、地址…)；2.模态（用于操作）：提醒、操作表单、活动视图、模态视图（整屏/部分）；

注：通常模态会提供「取消」、「完成」

Android

iOS

背景帷（Backdrop)

结构：底层、顶层

用法：1.底层(隐藏):展示与顶层相关的内容； 2.底层(显示):提供与顶层相关的操作(导航、更改内容、筛选）

注：一次仅能激活一层

顶层：

1.内容形式：列表行、图片、卡片、文本

2.行为：(1)内容支持横/竖向滚动；(2)底层出现，顶层淡出； (3)底层滚动，顶层模态； (4)顶层滚动，标题悬浮；

底层：

1.内容形式：导航、步骤条、文本框、选择控件

2.底层高度：取决于内容

3.被关闭： (1)点击「关闭」；(2)点击顶层； (3)顶层展开箭头；

4.被展现： (1)点击菜单/输入区域

注：不能通过滑动前层

底层导航&前层内容

底层输入&前层内容

底层高度—根据内容变化

2.跨页关系：

Andriod:

1.返回：用于页面层级递进关系；2.关闭：仅用于编辑状态；

iOS：

1.返回：同上；2.关闭：仅全页面模态；

Andriod

iOS

增、改操作

1.按钮：

Andriod:

1.文字按钮：非强调；

2.带边框按钮：中强调；

3.带背景按钮：最强调；

4.FAB：(1)角色：界面中主操作；（2）用法：触发操作/发起界面；（3）用于：创建/关注/分享/发起；

FAB（基本型）&FAB（扩展型）

iOS：

1.文字按钮：默认；

2.带边框按钮：仅必要时用（拨号键）；

3.带背景按钮：仅必要时用（呼叫键）；

FAB—发起操作

FAB—发起页面

2.文本框：

Andriod:

1.类型：（1）填充型；（2）线框型；

2.辅助信息：替换原有帮助信息

iOS：

1.类型：无具体规定；

Andriod-文本输入

3.标签：

Andriod:

1.结构：容器*、文字*、图标、移除按钮；

2.类型：

（1）输入标签：文本输入—标签；单行/折行显示；

（2）选择标签：仅单选；可替换单选；多水平放置；横向滑动/折行显示；

（3）筛选标签：可替换按钮/复选框；多位于搜索框下/右侧；横向滑动/折行显示；

（4）操作标签：与内容相关操作，以动态/关联关系出现；可替换按钮；多位于卡片下方/界面底部；

3.1 输入标签：

点击后，可编辑

表达错误状态

可移动

可扩展

3.2 选择标签：

被选中：增加勾选&长度加长

3.3 筛选标签：

多级标签：父子联动

3.4 操作标签：

触发操作项

呈现过程&反馈

4.键盘：

Andriod:

1.类型（原生）：默认；电话；数字；链接；邮箱；密码；英文输入；数字和符号；计算；

2.命令（原生）：完成；前往；上一项；下一项；搜索；发送；回车；

注：各厂商定制系统，难确保「发送」一定存在，故一般输入框后，紧跟「发送」

3.命令（H5）：下一项&完成，不可调起

特例：输入框字符为数字时，按键可为“下一项”

iOS：

1.类型（原生）：默认；ASCii码；数字和符号；链接；数字；电话；名字和电话；邮箱地址；小数；推特；网页搜索；字母；

2.命令（原生）

键盘类型：

1.默认：常规键盘

2.文本键盘：默认键盘-表情符号(密码输入）

3.整数键盘：仅输入数字0-9。

4.小数键盘：整数键盘+小数点。

5.电话键盘：数字键盘+“*” 和 “#” 。

6.邮箱键盘：默认键盘+“@”和“.”。

7.链接键盘：默认键盘上+“.com”、“.”和“/”（网址输入）

8.数字和符号：数字键盘+标点符号

键盘命令：

1.回车（return/enter）：换行

2.搜索（search）：执行搜索

3.下一项（next）: 多输入框，切换至下一个

4.发送（send): 内容发送(通讯App)

5.前往（go): 任务过程中,执行下一步骤（eg:输入网址后，前往打开的网页)

6.完成（done）: 提交