导航设计在产品的结构层中隶属于信息架构的范围,是框架层的主要表现形式之一。好的导航设计,不仅能反映出交互设计师对信息架构的把握层次,同时也能让用户对产品有着清晰的认识。目前移动产品的设计日趋于完善,导航设计也有以下几个较为具体的分类,今天就着实例和大家分享一下。
标签导航
标签导航是目前最为流行,也最被用户所熟悉的导航模式。像我们日常使用的微信、知乎等等都是这样的设计。
标签导航的优点在于:
入口扁平化,能够在各种功能之间轻松跳转
存在的不足就是:
导航控件占了页面较大的面积,标签的个数控制在5个以内。
知乎的标签栏具有上滑消失,下拉出现的优秀交互细节,值得称道。
如果标签的数目大于5个,该怎么办?
滑动标签导航
滑动标签导航将其余标签藏在手机右侧的不可见部分,用户通过滑动来查看其它标签。
使用这种导航的时候需要注意
提示用户可以滑动,我们可以漏出一个标签的一半,提示用户可以滑动。
还有一种标签导航的变体是iOS的基本控件——分段式导航
分段式导航多用于二级导航,一般有2-3模块,尺寸较小,能够轻松地融入界面,不占空间。
这里说的标签导航都是适用于一些功能重要程度相近,使用频率相近。即1:1:1:1:1模式
舵式导航
如果在几个功能相近的模块中,某个功能的重要程度要稍高一些,我们就需要在设计上突出这一功能。即1:1:1.5:1:1模式。我们称这种导航为舵式导航
抽屉式导航
简约至上-交互设计四策略 中讲到一个使设计更简约的方法就是“藏”
藏起来不太重要的功能,专注于核心的功能,能够大大减少主界面导航控件数量。
作为一款打车软件,考虑用户的使用场景,用户最主要需求就是叫车。抽屉式的导航可以把最大化的界面交给打车,用户有着足够大的空间去完成打车的交互,而不用担心其他元素的干扰。我称这种模式为1:10:1:1:1。
九宫格导航
我们有的时候会见到一些产品会将所有功能罗列出来,一个一个按照九宫格的样式摆好,整个产品结构一览无余。
我个人是不推荐这种导航模式的,尤为使用在app中作为主导航。这样显得app没有纵深感,更主要的是,在用户进入的一瞬间没有呈现有关产品的任何一丝实际内容,需要用户做出选择后才会显示相关事务。
组合导航
合适的导航才是好的导航,我们需要分析产品的功能结构与用户使用的具体环境,分析得出结论。
现在产品结构功能复杂,需要多个合适的导航相结合,常见的有:
抽屉式+标签导航
抽屉式+滑动标签
抽屉式+分段标签
标签导航+分段标签
标签+分段/滑动标签+抽屉式
等等
创意导航
这种导航我个人比较喜欢,应该是material design中的一个控件,切换方便,不影响页面阅读。
很难找到机会去夸奖国营公司的产品,但这个转盘的设计真的有情怀,非常喜欢。
可惜缺点也很明显,可直接去点,不需要转。内容展示不直观。
有好的创意导航设计请留言,欢迎交流 :)