良好的导航与优秀的设计如出一辙, 都是低调内敛的, 好的导航设计使得应用软件简单易用, 无论是浏览图片, 还是申请购车贷款, 用户都可以轻松完成.
主导航模式 -- 全局导航
在决定使用全局导航还是瞬时导航时, 先问自己几个问题:
- 你的应用层级是否 “扁平”? 应用的菜单分类是同级的还是有优先级的? 主要类别是否只有少数几个, 即 3 到 5 个?
- 你的用户是否需要菜单一直处于可见状态以便快速访问?
- 菜单分类有无状态指示, 比如未读邮件数?
如果你的回答中至少有一个 "是", 那么你可能最好使用全局导航.
跳板式 (Springboard)
也称为启动面板 (Launchpad), 是 2011 年最流行的导航模式.
优点:
- 跨平台, 一屏最多可以放置 9 个选项 (3 x 3 格), 大大增加了选项容量, 而且页面底部还可以再加上翻页指示 (小圆点).
缺点:
- 全部选项都被扁平化, 没有任何优先级.
iOS 版 Path (2011 年 11 月): 进入了抽屉式设计时代.
卡片式 (Card)
卡片式导航的原型是扑克牌, 模仿了扑克牌中常见的切牌, 洗牌, 弃牌, 翻牌等手法.
列表菜单式 (List Menu)
列表菜单式中的每一个列表项都是进入该应用各项功能的入口, 这一点与跳板式类似, 并且模块之间的切换需要返回到列表主页. 在苹果的设计规范中将其称为层级导航 (hierarchal navigation).
在设计层级结构的应用导航时可以考虑列表菜单式. 这种模式对于列表项名称较长的菜单和列表项既要有名称又要有描述的菜单都同样适用. 实现这种导航模式要遵循不同操作系统的设计规范.
仪表盘式 (Dashboard)
在需要使用关键指标或数据作为应用入口的时候, 可以采用仪表盘式. 但不要载入过多信息, 对于要展示的关键指标或数据需要经过仔细研究再做决定.
陈列馆式 (Gallery)
陈列馆式设计可用来呈现实时内容, 比如新闻, 菜谱或照片, 可以采用网格布局或轮盘布局, 还可以采用幻灯片模式进行展示.
陈列馆式设计模式最适合呈现经常更新的, 视觉效果直观的无层级内容.
选项卡菜单式 (Tab Menu)
iOS 设计规范中建议我们把标签栏作为扁平式应用的导航:
在扁平式信息结构的应用中, 因为所有的主要类别都可以从主页面进入, 所以用户可以直接从一个主要类别切换到另一个. 音乐和应用商店便是运用扁平式结构的范例.
Android 设计规范中提供了三种选项卡菜单模式:
- 固定选项卡 (Fixed Tabs)
- 下拉菜单 (Spinners)
- 导航抽屉 (Navigation Drawers)
在以下场景中使用选项卡:
- 预计你的用户会经常切换视图
- 顶级内容视图有限, 最多 3 个
- 你想让用户清楚地知道有可供选择的视图
Windows Phone 设计规范中选项卡菜单被称为应用选项卡 (App Tabs):
你可使用透视控件 (Pivot control) 实现 "应用选项卡" 模式, 该控件允许用户在每个页面之间向左右水平导航.
折叠选项卡式 (Retracting Tab)
Pinterest 在用户向下滑动浏览内容时把工具栏收起来, 在向上滑动时工具栏又重新显示出来.
可配置选项卡式 (Configurable Tabs)
Frequency 模仿了网页浏览器的标签页, 添加一个频道就增加一个新的选项卡, 可以左右滚动, 长按可调整选项卡顺序.
侧边栏导航
侧边栏导航不太可能被广泛用作智能手机的全局导航模式, 主要有两个原因:
- 大多数人都是在竖屏模式下使用智能手机, 而侧边栏需要占用相当多的横向空间.
- 因为空间有限, 所以文字表示往往被去掉, 这就降低了应用的可用性.
要了解并遵守不同操作系统对选项卡菜单式的设计规范, 用选中和未选中选项卡间的视觉差异明确指示出用户所出的位置.
隐喻式 (Skeuomorphic)
隐喻式 (或拟物式) 的特征是用页面模仿应用的隐喻形象.
一定要谨慎地使用隐喻式导航, 蹩脚的模仿很可能造成第 11 章中讨论的标新立异反模式 (Novel Notionanti - Pattern).
主导航模式 -- 瞬时导航
这种导航菜单只有在我们需要的时候才显示出来, 在我们做出选择后, 它会再次消失.
侧边抽屉式 (Side Drawer)
浮层 (overlay)
通过轻滑或点击的手势打开抽屉, 抽屉部分遮挡或覆盖原来页面的内容, 如 RetailMeNot.
嵌入层 (inlay)
通过轻滑, 平移或点击打开抽屉, 把原先的页面内容部分推出屏幕外, 如 Path.
- 建议首次启动应用时通过弹出抽屉的方式提醒用户那里有导航菜单.
- 侧边抽屉式的设计可以多样化, 但切忌不要让它承载太多功能, 抽屉的首要功能是展示主导航选项.
- 在采用侧边抽屉式做导航前, 先制定出应用的信息架构, 并于用户确认. 如果侧边抽屉式行得通, 你应该做出几种不同的应用原型进行测试, 看看哪一个设计效果最好.
下拉菜单式 (Toggle Menu)
下拉菜单式的一个重要规则是, 无论什么样的手势, 都能打开菜单, 比如点击图标, 轻滑, 平移. 同样, 隐藏菜单也是这样的.
不要让菜单覆盖整个屏幕, 要把背景露出来一点. 点击背景的任何一位置时, 同样可以隐藏菜单.
Android 为这种主导航提供了一种 Spinner 控件, 但要注意, Spinner 应该用于在同一类别下的不同视图间进行导航, 而不是跳转到完全不同的类别.
转盘菜单式 (Pie Menu)
这个模式可能是所有主导航模式中最不常用的, 在设计任何有多个层级的菜单时应该避免采用. 如果你的应用信息结构扁平化, 那么可以考虑选用选项卡式菜单, 这对所有用户来说都更为熟悉.
次导航模式
所有主导航模式都同样可以用作次级导航模式.
翻页式 (Page Swiping)
通过滑动手势快速导航内容页, 一般通过页面指示器 (Page Indicator) 来表现, 也较 "小圆点".
运用翻页式时要利用移动的手势控制, 不要依赖像下一步按钮或标签页这类桌面端模式. 但要注意提供视觉指示, 让用户知道可以使用滑动手势.
滚动选项卡式 (Scrolling Tabs)
滚动选项卡式一般比标准的标签栏要窄, 因为它们没有必要作为触摸对象, 通常在某一个模块中显示多种类别或视图时, 这种模式非常有用.
折叠菜单式 (Folding Menu)
要使用常见的图标来指示折叠式菜单的打开或关闭状态.
推荐图书: 移动应用UI设计模式(第2版)
(未完)
本文作者「雪人Ricky」, 首发在Ricky's Blog.
欢迎转发但请保留此说明.
如果它对你有帮助，可以来五道口请我喝咖啡。
期待进一步勾搭： | 微博 | 邮件 (正经事)