对APP应用结构的思考
由向上返回和向前返回造成的视图切换问题
这几天抽空阅读了Android设计规范和IOS设计资源, 主要了解两个平台设计规范和之间的区别, 主要侧重非视觉和非技术相关的内容, 侧重交互设计. (忽略视觉是因为对字体和颜色毫无感觉).
本文描述基于设计规范, 而不是基于当前普遍采用的设计风格.
术语
- 向前返回按钮: Android智能机硬件返回按钮
- 向上返回按钮: Android应用左上角的返回按钮
- 硬件返回: 通过向前返回按钮触发返回事件
- 软件返回: 通过向上返回按钮触发返回事件
注: iOS不区分向前和向上返回
IOS设计资源分为三部分, 总的来说, 内容组织混乱且又冗余
- iOS 7 UI Transition Guide: 主要描述如何将应用迁移到iOS7
- iOS Human Interface Guidelines: 描述UI设计和iOS为应用提供的功能
- UIKit User Interface Catalog: 完整列举了iOS7中的视图 (view) 和 控件 (control), 设计师只需浏览每个视图 (控件) 的第一段, 了解其作用和可更改的配置即可
Android设计规范按设计远景, 视觉设计, 设计通用模式和控件组织内容, 读后收获较大.
应用组成
应用结构
和Android应用结构的多样性相比, iOS应用结构显得更简单, 作为我更喜欢iOS简单的应用结构和可预测的导航逻辑.
下图来自Android设计规范, 然而事实上, iOS的应用结构也是这样的模型.
下面通过对顶级视图, 集合视图和详细视图中视图的切换描述应用的结构, 最后将总结整体应用结构. 在描述过程中会不断提到返回的功能, 因为这于引用结构息息相关.
顶级视图
在顶级视图中, Android可以通过Tabs, Spinners和Navigation drawers切换视图, 而iOS则一般使用Tab bar.
在Android设计规范中对Navigation drawer的交互令人困惑
用户从顶级视图进入其他视图后, 通过从左向右滑动可调用Navigation drawer. 这种交互令用户困惑, 因而很多应用在这里都不调出Navigation drawer, 甚至有的应用左滑执行返回.
在iOS中, Segmented Controls可以实现类似Tab bar的功能, 然而它并不切换视图
上面讲到的这些控件基本不涉及返回功能, 除了Navigation drawers. 当使用Navigation drawers进入其他视图后可以通过向前返回回到顶级视图. 而进入下级视图 (如集合视图和详细视图) 时, 可以通过向上返回进入上级视图.
集合视图
集合视图的视图切换和顶级视图基本相同, 这里不再展开.
详细视图
通过顶级视图或集合视图可以进入详细视图.
Android支持在同类的详细视图之间进行切换
iOS很少有应用支持在详细视图之间切换, 但也有例外
总结
因为iOS没有向上和向前返回两个按钮, 应用视图切换逻辑更为清晰. 而且Android向上返回按钮由于手指不宜触摸, 使用率较少, 用户大多使用向前返回, 出于这个原因, 当前大多应用将向前返回按钮的功能替换为向上返回.
