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

最全总结!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键/向上滑动并停止

最全总结!iOS与Android最新原生设计规范差异_第1张图片
Android—Pixel机型
最全总结!iOS与Android最新原生设计规范差异_第2张图片
Android—其他机型
最全总结!iOS与Android最新原生设计规范差异_第3张图片
iOS—连按两次Home健
最全总结!iOS与Android最新原生设计规范差异_第4张图片
iOS—向上滑动并停止

2.控制中心:

Andriod:由底部向上滑动

iOS:由顶部向下滑动

最全总结!iOS与Android最新原生设计规范差异_第5张图片
Andriod
最全总结!iOS与Android最新原生设计规范差异_第6张图片
iOS

3.激活小部件

Andriod:通过长按激活

iOS:通过3Dtouch激活,且小部件可选

最全总结!iOS与Android最新原生设计规范差异_第7张图片
Andriod — 长按
最全总结!iOS与Android最新原生设计规范差异_第8张图片
iOS

4.删除

Andriod:长按并拖拽

iOS:长按

最全总结!iOS与Android最新原生设计规范差异_第9张图片
Android


最全总结!iOS与Android最新原生设计规范差异_第10张图片
iOS

4.文件管理

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

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

最全总结!iOS与Android最新原生设计规范差异_第11张图片
Andriod
最全总结!iOS与Android最新原生设计规范差异_第12张图片
iOS

导航

1.顶级导航间切换

Andriod:页面内容被重置(允许修改)

iOS: 页面内容保留

最全总结!iOS与Android最新原生设计规范差异_第13张图片
Andriod
最全总结!iOS与Android最新原生设计规范差异_第14张图片
iOS


2.顶部应用栏/导航栏

Android:1.本页标题居左;2.一级页面多含抽屉;

iOS:1.本页标题多居中;2.上级标题多居左;

最全总结!iOS与Android最新原生设计规范差异_第15张图片
Andriod(左) VS iOS(右)

3.底部应用栏(仅Andriod)

用于:1.需在底部设置「抽屉导航」;2.操作项(2-5);3.仅移动端

最全总结!iOS与Android最新原生设计规范差异_第16张图片
三种基础布局
最全总结!iOS与Android最新原生设计规范差异_第17张图片
重叠&插入

4.抽屉导航(仅Andriod)

1.适用:5+导航项

2.滑出位置:(1)抽屉位于左上:从左至右滑出;(2)抽屉位于左下:从下至上滑出;

最全总结!iOS与Android最新原生设计规范差异_第18张图片
抽屉:左上
最全总结!iOS与Android最新原生设计规范差异_第19张图片
抽屉:左下

4.顶部导航

Andriod:

1.适用:2+导航项

2.形式:固定/滑动&文字/图形,四者相互组合

3.行为:向上滚动时,可选项卡吸顶,仅显示状态栏

最全总结!iOS与Android最新原生设计规范差异_第20张图片
Andriod

iOS:

1.分段控制器—适用:(1)表单中单选;(2)视图中切换/分割同类数据

2.分段控制器—属性:(1)<5个;(2)文本/图像二选一;(3)大小一致;(4)仅点击

3.行为:向上滚动页面时,可切换「大标题」至「标准标题」

最全总结!iOS与Android最新原生设计规范差异_第21张图片
iOS


5.底部导航

Andriod:

1.适用:3-5个导航项

2.行为:(1)页面向上滚动时,底部导航可消失;(2)子页面可保留底部导航

最全总结!iOS与Android最新原生设计规范差异_第22张图片
Andriod

iOS:

1.行为:子页面,底部导航消失;

最全总结!iOS与Android最新原生设计规范差异_第23张图片
iOS



布局

1.列表:

Andriod:

1.单行:(1)纯文本:选项;(2)图标+文字:选项、通讯录;

2.两行:(1)图标+元图标:文件列表;(2)缩略图+元文本:商品列表;

3.三行:(1)形象+文本:邮件列表;(2)缩略图+文本+元文本:食物列表;

最全总结!iOS与Android最新原生设计规范差异_第24张图片
Andriod—列表

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

最全总结!iOS与Android最新原生设计规范差异_第25张图片
iOS—列表

2.图片列表(仅Android):

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

最全总结!iOS与Android最新原生设计规范差异_第26张图片
Andriod—图片列表

3.卡片(仅Android):

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

最全总结!iOS与Android最新原生设计规范差异_第27张图片
Android—卡片结构
最全总结!iOS与Android最新原生设计规范差异_第28张图片
Android—卡片类型

页面关系

1.本页关系:

Andriod:

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

iOS:

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

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

最全总结!iOS与Android最新原生设计规范差异_第29张图片
Android
最全总结!iOS与Android最新原生设计规范差异_第30张图片
iOS

背景帷(Backdrop)

结构:底层 、顶层

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

注:一次仅能激活一层

顶层:

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

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

底层:

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

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

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

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

注:不能通过滑动前层

最全总结!iOS与Android最新原生设计规范差异_第31张图片
底层导航&前层内容
最全总结!iOS与Android最新原生设计规范差异_第32张图片
底层输入&前层内容
最全总结!iOS与Android最新原生设计规范差异_第33张图片
底层高度—根据内容变化

2.跨页关系:

Andriod:

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

iOS:

1.返回:同上;2.关闭:仅全页面模态;

最全总结!iOS与Android最新原生设计规范差异_第34张图片
Andriod
最全总结!iOS与Android最新原生设计规范差异_第35张图片
iOS

增、改操作

1.按钮:

Andriod:

1.文字按钮:非强调;

2.带边框按钮:中强调;

3.带背景按钮:最强调;

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

FAB(基本型)&FAB(扩展型)

iOS:

1.文字按钮:默认;

2.带边框按钮:仅必要时用(拨号键);

3.带背景按钮:仅必要时用(呼叫键);

最全总结!iOS与Android最新原生设计规范差异_第36张图片
FAB—发起操作
最全总结!iOS与Android最新原生设计规范差异_第37张图片
FAB—发起操作
最全总结!iOS与Android最新原生设计规范差异_第38张图片
FAB—发起页面

2.文本框:

Andriod:

1.类型:(1)填充型;(2)线框型;

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

iOS:

1.类型:无具体规定;

Andriod-文本输入

3.标签:

Andriod:

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

2.类型:

(1)输入标签:文本输入—标签;单行/折行显示;

(2)选择标签:仅单选;可替换单选;多水平放置;横向滑动/折行显示;

(3)筛选标签:可替换按钮/复选框;多位于搜索框下/右侧;横向滑动/折行显示;

(4)操作标签:与内容相关操作,以动态/关联关系出现;可替换按钮;多位于卡片下方/界面底部;

3.1 输入标签:

点击后,可编辑
最全总结!iOS与Android最新原生设计规范差异_第39张图片
表达错误状态
最全总结!iOS与Android最新原生设计规范差异_第40张图片
可移动
可扩展

3.2 选择标签:

最全总结!iOS与Android最新原生设计规范差异_第41张图片
被选中:增加勾选&长度加长

3.3 筛选标签:

最全总结!iOS与Android最新原生设计规范差异_第42张图片
多级标签:父子联动

3.4 操作标签:

最全总结!iOS与Android最新原生设计规范差异_第43张图片
触发操作项
呈现过程&反馈

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): 提交

最全总结!iOS与Android最新原生设计规范差异_第44张图片
Android—键盘
最全总结!iOS与Android最新原生设计规范差异_第45张图片
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 点击

最全总结!iOS与Android最新原生设计规范差异_第46张图片
Android
最全总结!iOS与Android最新原生设计规范差异_第47张图片
iOS

1.2 拖动

最全总结!iOS与Android最新原生设计规范差异_第48张图片
Andriod—全屏视图后支持滚动
最全总结!iOS与Android最新原生设计规范差异_第49张图片
iOS

1.3 滑动

最全总结!iOS与Android最新原生设计规范差异_第50张图片
Android—列表左滑至阈值
最全总结!iOS与Android最新原生设计规范差异_第51张图片
iOS—列表左滑
最全总结!iOS与Android最新原生设计规范差异_第52张图片
Android—首页右滑,呼出侧边
最全总结!iOS与Android最新原生设计规范差异_第53张图片
iOS—非首页,右滑返回

1.4 长按

最全总结!iOS与Android最新原生设计规范差异_第54张图片
Android—编辑界面:工具栏替换应用栏
最全总结!iOS与Android最新原生设计规范差异_第55张图片
iOS—放大文字

1.5 拾取&移动

最全总结!iOS与Android最新原生设计规范差异_第56张图片
Android—进行排序

2.操作

Andriod:

1.操作菜单:独有;

2.底部表单:无取消按钮;

3.简易对话框:(1)中间弹出;(2)无「取消」;(3)选择操作,会关闭;(4)操作非遮罩区域,直接关闭;

iOS:操作表单/活动视图

1.关闭:取消/遮罩区域

2.使用:(1)单任务,多选项;(2)危险操作,二次确认;(3)可连续弹出;(4)操作表单,避免滚动;

注:如危险情况,非用户触发,则使用「提醒」;

2.1 操作菜单

最全总结!iOS与Android最新原生设计规范差异_第57张图片
Android

2.2底部表单/操作表单

最全总结!iOS与Android最新原生设计规范差异_第58张图片
Android—底部表单
最全总结!iOS与Android最新原生设计规范差异_第59张图片
iOS—操作表单
最全总结!iOS与Android最新原生设计规范差异_第60张图片
iOS—活动视图

2.3 简易对话框

最全总结!iOS与Android最新原生设计规范差异_第61张图片
Andriod—简易对话框

3.选择控件

Andriod:

1.日期选择—对话框;2.时间选择—对话框;3.单选/多选—区分;4.其他选择—下拉菜单;

iOS

1.日期选择—滚轮选择器;2.时间选择—滚动选择器(多出现下方/附近);3.单选/多选—不区分;4.其他选择—滚轮选择器;

3.1 日期选择

最全总结!iOS与Android最新原生设计规范差异_第62张图片
Android
最全总结!iOS与Android最新原生设计规范差异_第63张图片
iOS—滚轮选择器(下方)
最全总结!iOS与Android最新原生设计规范差异_第64张图片
iOS—滚轮选择器(附近)

3.2 时间选择

最全总结!iOS与Android最新原生设计规范差异_第65张图片
Android—时间选择

3.3 其他

最全总结!iOS与Android最新原生设计规范差异_第66张图片
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.轻打断:

最全总结!iOS与Android最新原生设计规范差异_第67张图片
Snackbar VS Toast

2.中打断:

最全总结!iOS与Android最新原生设计规范差异_第68张图片
Andriod—横幅

3.重打断:

最全总结!iOS与Android最新原生设计规范差异_第69张图片
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

https://www.material.io/design/

你可能感兴趣的:(最全总结!iOS与Android最新原生设计规范差异)