最全总结！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:页面内容被重置（允许修改）
iOS: 页面内容保留
Andriod
iOS
2.顶部应用栏/导航栏
Android：1.本页标题居左；2.一级页面多含抽屉；
iOS：1.本页标题多居中；2.上级标题多居左；
Andriod(左） VS iOS（右）
3.底部应用栏（仅Andriod)
用于：1.需在底部设置「抽屉导航」；2.操作项（2-5）；3.仅移动端
三种基础布局
重叠&插入
4.抽屉导航（仅Andriod)
1.适用：5+导航项
2.滑出位置：（1）抽屉位于左上：从左至右滑出；（2）抽屉位于左下：从下至上滑出；
抽屉：左上
抽屉：左下
4.顶部导航
Andriod:
1.适用：2+导航项
2.形式：固定/滑动&文字/图形，四者相互组合
3.行为：向上滚动时，可选项卡吸顶，仅显示状态栏
Andriod
iOS：
1.分段控制器—适用：（1）表单中单选；（2）视图中切换/分割同类数据
2.分段控制器—属性：（1）<5个；（2）文本/图像二选一；（3）大小一致；（4）仅点击
3.行为：向上滚动页面时，可切换「大标题」至「标准标题」
iOS
5.底部导航
Andriod:
1.适用：3-5个导航项
2.行为：（1）页面向上滚动时，底部导航可消失；（2）子页面可保留底部导航
Andriod
iOS：
1.行为：子页面，底部导航消失；
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—发起操作
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）: 提交
Android—键盘
iOS-键盘
删除操作
1.手势
Andriod:
1.点击：通过点击，进行导航；执行操作/元素交互；
2.拖动：滑动超出阈值，「默认视图」变为「全屏视图」/「关闭视图」；
3.滚动&平移/轻坲：垂直/水平/全方向移动；
4.滑动：（1）左滑/右滑动列表>阈值，可完成操作；（2）一级页面，可右滑唤出导航；
5.连续点击：缩放
6.捏：（1）缩放进行导航；（2）图形缩放：
7.长按：可显示其他模式和特性（eg:编辑）；
8.拾取&移动：长按并拖动，可对内容重新排序；
9.复合手势：用户可在不同手势（缩放、旋转、平移）间无缝切换；
iOS：
1.点击：激活操作/选择条目；
2.拖动：进入编辑状态后，从一侧移动至另一侧，屏幕内拖动；
3.轻坲：快速滚动/平移：
4.滑动：（1）左滑列表行；（2）单手右滑，回到上页；（3）单手滑动，展示被隐藏分割视图；（4）四指滑动：应用间切换（仅iPad）；
5.连续点击：缩放
6.捏：仅图像缩放；
7.触摸&按住：可放大文本；3D touch;
8.旋转：旋转图片/视图；
1.1 点击
Android
iOS
1.2 拖动
Andriod—全屏视图后支持滚动
iOS
1.3 滑动
Android—列表左滑至阈值
iOS—列表左滑
Android—首页右滑，呼出侧边
iOS—非首页，右滑返回
1.4 长按
Android—编辑界面：工具栏替换应用栏
iOS—放大文字
1.5 拾取&移动
Android—进行排序
2.操作
Andriod:
1.操作菜单：独有；
2.底部表单：无取消按钮；
3.简易对话框：（1）中间弹出；（2）无「取消」；（3）选择操作，会关闭；（4）操作非遮罩区域，直接关闭；
iOS：操作表单/活动视图
1.关闭：取消/遮罩区域
2.使用：（1）单任务，多选项；（2）危险操作，二次确认；（3）可连续弹出；（4）操作表单，避免滚动；
注：如危险情况，非用户触发，则使用「提醒」；
2.1 操作菜单
Android
2.2底部表单/操作表单
Android—底部表单
iOS—操作表单
iOS—活动视图
2.3 简易对话框
Andriod—简易对话框
3.选择控件
Andriod:
1.日期选择—对话框；2.时间选择—对话框；3.单选/多选—区分；4.其他选择—下拉菜单；
iOS
1.日期选择—滚轮选择器；2.时间选择—滚动选择器（多出现下方/附近）；3.单选/多选—不区分；4.其他选择—滚轮选择器；
3.1 日期选择
Android
iOS—滚轮选择器（下方）
iOS—滚轮选择器（附近）
3.2 时间选择
Android—时间选择
3.3 其他
Andriod VS iOS
反馈
Andriod:
1.轻打断：Snackbar
（1）操作（非必须）；（2）自动消失（4-10S）；（3）操作项（0-1）；（4）位置：底部部导航；
2.中打断：横幅
（1）操作/图标（可选）；（2）随内容滚动，需用户消除；（3）操作项（1-2）；（4）位置：导航栏/固定搜索之下；
3.重打断：对话框
（1）操作（必须）；（2）需用户忽略；（3）操作项（1-2）；
注：操作项位于右侧
iOS:
1.轻打断：Toast
（1）无操作；（2）自动消失；
2.重打断：对话框
（1）操作（必须）；（2）需用户忽略；（3）操作项（1-2）；
注：操作项位于居中
1.轻打断：
Snackbar VS Toast
2.中打断：
Andriod—横幅
3.重打断：
Andriod VS iOS
参考文章及来源：
1.这个控件叫：Soft Keyboard/Virtual Keyboard/软键盘/虚拟键盘
https://www.jianshu.com/p/0c210c8ec5a0
2.交互稿中「键盘类型」的标注
https://mp.weixin.qq.com/s/ii7iTwT7B-SmHkC_7bcUbQ?
3.深度基础 | 交互中的Android键盘详解
https://mp.weixin.qq.com/s/nQx2CpEHCycwyunEgI-m2w?
4.Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
5.Material Design
网友评论