美文网首页产品交互设计
移动产品设计模式之导航设计

移动产品设计模式之导航设计

作者: huangxiaohao | 来源:发表于2016-06-26 00:33 被阅读114次

    导航设计在产品的结构层中隶属于信息架构的范围,是框架层的主要表现形式之一。好的导航设计,不仅能反映出交互设计师对信息架构的把握层次,同时也能让用户对产品有着清晰的认识。目前移动产品的设计日趋于完善,导航设计也有以下几个较为具体的分类,今天就着实例和大家分享一下。

    标签导航

    标签导航是目前最为流行,也最被用户所熟悉的导航模式。像我们日常使用的微信、知乎等等都是这样的设计。

    标签导航的优点在于:

    入口扁平化,能够在各种功能之间轻松跳转

    存在的不足就是:

    导航控件占了页面较大的面积,标签的个数控制在5个以内。

    知乎的标签栏具有上滑消失,下拉出现的优秀交互细节,值得称道。

    如果标签的数目大于5个,该怎么办?

    滑动标签导航

    滑动标签导航将其余标签藏在手机右侧的不可见部分,用户通过滑动来查看其它标签。

    使用这种导航的时候需要注意

    提示用户可以滑动,我们可以漏出一个标签的一半,提示用户可以滑动。

    还有一种标签导航的变体是iOS的基本控件——分段式导航

    分段式导航多用于二级导航,一般有2-3模块,尺寸较小,能够轻松地融入界面,不占空间

    这里说的标签导航都是适用于一些功能重要程度相近,使用频率相近。即1:1:1:1:1模式

    舵式导航

    如果在几个功能相近的模块中,某个功能的重要程度要稍高一些,我们就需要在设计上突出这一功能。即1:1:1.5:1:1模式。我们称这种导航为舵式导航

    抽屉式导航

    简约至上-交互设计四策略 中讲到一个使设计更简约的方法就是“藏”

    藏起来不太重要的功能,专注于核心的功能,能够大大减少主界面导航控件数量。


    Uber

    作为一款打车软件,考虑用户的使用场景,用户最主要需求就是叫车。抽屉式的导航可以把最大化的界面交给打车,用户有着足够大的空间去完成打车的交互,而不用担心其他元素的干扰。我称这种模式为1:10:1:1:1。

    九宫格导航

    我们有的时候会见到一些产品会将所有功能罗列出来,一个一个按照九宫格的样式摆好,整个产品结构一览无余。

    我个人是不推荐这种导航模式的,尤为使用在app中作为主导航。这样显得app没有纵深感,更主要的是,在用户进入的一瞬间没有呈现有关产品的任何一丝实际内容,需要用户做出选择后才会显示相关事务。

    组合导航

    合适的导航才是好的导航,我们需要分析产品的功能结构与用户使用的具体环境,分析得出结论。

    现在产品结构功能复杂,需要多个合适的导航相结合,常见的有:

    抽屉式+标签导航

    抽屉式+滑动标签

    抽屉式+分段标签

    标签导航+分段标签

    标签+分段/滑动标签+抽屉式

    等等

    创意导航

    创意导航1

    这种导航我个人比较喜欢,应该是material design中的一个控件,切换方便,不影响页面阅读。

    电信营业厅

    很难找到机会去夸奖国营公司的产品,但这个转盘的设计真的有情怀,非常喜欢。

    可惜缺点也很明显,可直接去点,不需要转。内容展示不直观。

    有好的创意导航设计请留言,欢迎交流 :)

    相关文章

      网友评论

        本文标题:移动产品设计模式之导航设计

        本文链接:https://www.haomeiwen.com/subject/ohpadttx.html