一、主导航模式
决定是全局/瞬时导航时自问 若答案存在“是” 使用全局导航:
你的应用层次是否扁平?菜单的分类是同级还是有优先级?主大类是否为少数 3~5个?
你的用户是否需要菜单一直可见?
菜单分类有无状态指示?比如未读邮件数?
1.1全局导航
1.1.1 跳板式
非常扁平。宫格布局。像功能机的菜单界面,菜单选项就是进入各个应用的起点。加上轮播可以容纳更多选项。 微软的磁贴模式为跳板式的极致。有动态磁贴(来电消息、约会安排)、静态磁贴(应用程序)。windows Phone磁贴的多功能性:可用于主导航设计&子导航设计。
1.1.2 卡片式
模仿扑克牌的切牌洗牌弃牌翻牌。左滑右滑。卡片视觉风格不等于卡片式设计。真正卡片式设计应模拟扑克牌的交互。
1.1.3 列表菜单式(层级导航)
每个页面选择一次,要做出不同选择必须原路返回。适用于选项名称长又要描述。表达该模式的意符:返回按钮(向上按钮)
1.1.4 仪表盘式
关键内容展开到一个页面,作为入口。用户一眼就能看到最需要的信息概览不需要转到另一个页面。标题+部分内容+查看更多。注意不要载入过多信息且需要斟酌展示什么信息。
1.1.5 陈列馆式
瀑布流属于此类。内容间彼此独立无层级关系。适合视觉效果好,经常更新的内容。
1.1.6 选项卡式(Tab标签栏)
分ios、Android和Windows Phone三种讲解。一种趋势:折叠选项卡式(retracting Tab)隐藏头部与底部以使得内容获得更大的屏幕空间。一种新生模式:可配置选项卡式(Configurable Tabs)选项卡可yi以被用户配置。iPad上的侧边导航,数量过多要文字标识。
ios
①底部标签导航
针对的是应用的类别的切换,不同于工具栏的可执行操作。但有些应用如Instagram,“拍照”非常重要,所以放到了选项卡中。行为召唤(calls to action,一项优先的行动)。如果要这样设计就需要突出行为召唤的选项卡:舵式导航。
Android
②固定选项卡(Fixed Tabs)
通常置于顶部。应允许用户滑动切换。不要错误地在主导航中使用Fixed Tabs。主导航应该使用下拉菜单或者导航抽屉。
预计你的用户会经常切换视图。
顶部内容视图有限 最多3个。
你想让你的用户知道有可供选择的视图。
Windows Phone
③应用选项卡(APP Tabs)
就是tab的延伸版。左右滑动查看更多tab。形式上与滚动选项卡相同,就是这里用于主导航。
1.1.7 隐喻式(拟物式)
游戏、音乐的黑胶唱片、复古相机NOME、阅读app的书架。存在局限:过度的概念模型降低易用性,造成迷惑如iBook的书架让人以为书架大小暗示了可容纳的电子书数量。
1.2 瞬时导航
1.2.1 侧边抽屉式
分为浮层式(overlay)和嵌入式(inlay),就是新页面抽出一半遮挡原页面还是一个新页面完全抽出来。如何让用户知道存在抽屉?首次进入应用时展示抽屉打开再关闭。侧边抽屉的内容不必限制为导航(个人资料啥的都可以)侧边抽屉可以有层级但不要太深。 侧边导航可以配合一种效果,打开侧边抽屉的同时把原有的页面缩小(假装有3d)
1.2.2 下拉菜单式
用于同一类别下的不同试图间进行导航,而不是跳转到不同的类别。对于的安卓控件是spinner。
1.2.3 转盘式菜单
游戏中会见到。触摸对象可能过小,不常用。
二、次级导航模式
所有主导航模式都可以作为次导航模式。此外还有:
2.1 翻页式
用上页面指示器(Page indicator)引导用户翻页,就是轮播小圆点。
2.2 滚动选项卡式
在某模块显示多种类别或视图时,这种模式非常有用。。keep就用了这种。很多新闻客户端也用这种导航。分类过多的时候使用。注意选中状态的标签设计。
2.3 折叠菜单式(accordion)
又称手风琴式。用户可以展开和折叠某以类目,选择子类目不必进入下一页面,改变选择时也不必原路返回。注意使用+/-或者>/^ 常用符号指示状态.
# 个人心得体会
很多导航方式的设计并不需要墨守所谓规范,唯一的宗旨就是用户为中心。用这样的导航,是否符合用户习惯和用户直觉?当然,创新是要带有思考的,不要为了标新立异而打破规则。如果创新不能带给用户惊喜,那将会是迷惑和不安。
有几点疑问。
1.下拉菜单样式在国内目前比较成熟和规范的产品如微信、支付宝,都被设计成工具栏。点开右上角的➕比下拉菜单里进扫一扫工具。而在这本书被用介绍主导航?想知道这样设计的产品现在还有没有。书中的例子都比较老了。不过瞬时导航应用于主导航在需要频繁切换一级页面的时候都会显得不太友好吧。那么适用于瞬时导航的产品是什么样的?抖音这样的沉浸式应用也许会比较适合。不过看了一眼它也是用了选项卡式(底部tab导航)
2.次级导航除了主导航能用的都能用之外,作者特别提及的三种导航方式,滚动选项卡与前文所提利用了屏幕负空间的Windows Phone的APP Tabs有什么差别……?折叠菜单能否用于主导航?iPad上的notability自定义添加上了分割条后就与折叠菜单式非常相似了(且算为主导航吧)
3.事实上,我不理解跳板式与陈列馆式的关键区别在哪.