您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

学习导航,这一篇就够了

原创文章 分类: 经验/观点 版权:
679 20 11 0
2018-11-24
4.4
编辑推荐

为什么写这篇讲导航的,本质上是希望提高自己界面设计的组件化意识,也是对近期自己看的关于导航方面文章的一个总结和输出。

前言

      结构和组织是关于建造房间的,而导航设计则是关于增加门窗的——《信息架构》

      在英文中Navigation这个词源于拉丁文,原意是:操纵船只在海上航行。所以导航的目的在于帮助我们到达目的地。通俗的l来说就是你知道自己在哪,下一步怎么走,如果不想去先前的目的地,那也可以顺利的回到出发的原点,这就是导航的作用。

      对于导航优缺点的思考,我主要从以下三方面来考量:

      第一,操作方式。是滑动、点击还是其他手势,不同的操作方式难易程度是不同的;

      第二,导航所处的位置。在页面顶端还是底部,结合操作方式来考虑操作的便捷性,例:导航在顶部,但不能滑动操作,对用户而言便捷性就比较差;

      第三,导航模块之间切换是否方便。是否需要页面的跳转才能切换不同模块,不同的切换方式难易程度也不同;

      这篇文章主要讲的是移动端的导航,但我们需要知道的是,在产品中没有孤立存在的模块,导航系统与组织系统、标签系统之间是密不可分的。

导航分类

      导航分为主导航与次级导航,主导航进一步又分为全局导航与瞬时导航。

Image title

      全局导航——你能看到每一个,找出你想要的那一个。

      瞬时导航——平时藏起来,需要的时候一点就出来。

各种导航优缺点

底部Tab栏(标签栏)

     底部 Tab 栏最大的优势在于不同模块之间方便快速的切换,无论是 iOS 还是 Andriod 系统,我们看到最多的主导航方式就是底部Tab栏,形式如下图所示:

Image title


       优点:

      切换快速方便——可以承载同一优先级的内容,位置处于页面底部且层级扁平,可以进行方便快速的切换;

      缺点:

      遮挡内容——常驻的Tab 栏遮挡了部分内容,减少了页面承载信息的容量,当然现在有新型模式:上滑阅读时隐藏Tab 栏,下滑返回时显示,这种模式某种程度上解决了这个问题;

      承载数量有限——模块数量不超过5个,数量上的限制也就限制了 APP 主导航的分类数量,是否使用此导航方式,要根据 APP 的组织系统来决定;

底部Tab栏扩展形式——驼式导航

      优缺点与底部Tab栏基本相同,“驼峰”的作用主要是把一项对于产品来说高优先级的行动放在突出位置,并用较大的“视觉重量”来展示,如下图所示的闲鱼、有道云笔记的驼式导航,它们都有自己的最优先级的模块需要突出展示,因此选用了驼式导航。

Image title


跳板式导航 (宫格式导航)

      跳板式导航最大优势在于生动的图标设计使得模块“好找”,当然这也会有两面性,形式如下图所示:

Image title

     

      优点:

      好找——较大的设计“重量”是通过图标来实现的,用户对图像的记忆是超过文字的,这也会使用户在操作了几次后潜意识就能找到要找的模块,当然仅有文字的跳板式导航无此优点,如下图所示,仅就好找这个维度,有图标的爱奇艺是胜过仅有文字的网易严选的;

Image title


      缺点:

      麻烦——无法在多入口间来回转换,不适合信息较为扁平的 APP例:新闻类 APP不适合宫格式导航,你可以想象你看完军事类的新闻,想看看科技新闻,总得先回到主页面再跳转到科技类页面,页面跳转的增加导致用户操作的繁琐程度增加;

      压力大——希克定律指出,一个人面临的选择越多,压力越大,这在宫格数量较多时会突显,再加设计模式的扁平化,进一步增加用户的选择压力;

      题外话:虽然现在宫格式导航出镜率与早年相比大幅下降,但从手机操作系统诞生之日起,宫格式与轮播式导航的组合一直作为系统主导航存在,原因在于对大多数用户而言经常使用的 APP 最多也就十几个,宫格式突出图标的展现方式有利于提高APP的辨识度。 

列表菜单式导航(层级导航)

      列表式导航的最大优势在于可以高效、清晰地展示信息,同时可以容纳较多信息,形式如下图所示:

Image title


      优点:

      高效——Y轴方向占用空间少,可以高效、清晰地展示信息,X轴方向可以容纳较多信息,适合于既要有名称又要有描述的模块,例:支付宝—支付-我的页面—余额一栏就可以看到你有多少余额,而不用进入,体现了列表式导航栏的高效;

Image title


     好分组——鉴于屏幕Y轴方向有较大的空间可以利用,也就可以利用这些空间进行分组分类。

      缺点:

      麻烦——同宫格式导航导航缺点1,这里不在赘述;

      压力大——同宫格式导航导航缺点2,举个例子,无论iOS系统或Andriod系统设置使用的都是列表式导航,很多情况下主导航与次级导航都是列表式导航,这种层级较深的情况就需要增加搜索系统辅助查找,从视觉设计的角度来看,列表式与搜索的形式很契合;

      视觉疲劳——当同级内容过多时,由于列表式导航形式较为单一,不断在Y轴方向滑动,容易造成视觉疲劳;   

      题外话:鉴于以上优缺点,列表式导航也主要以次级导航的方式存在,仅有设置、邮箱等突出效率的 APP会将其作为主导航。

固定选项卡&分段选项卡&滚动选项卡

      iOS平台的分段选项卡与Andriod平台的固定选项卡、滚动选项卡本质上都是通过在页面顶端对内容进行再分类,这三种导航的最大优点在于在能够使用户清晰的看到APP的分类,滚动选项卡、分段选项卡一般以二级导航的形式存在,固定选型卡既有以主导航形式存在的情况,也有以二级导航形式存在的情况,下面来看看他们分别有什么优点与缺点。

(一)固定选项卡,形式如下图所示:

Image title


      优点:

      方便——相比列表菜单及跳板式导航,固定选项卡能够通过滑动方便的在模块间切换内容;

     优先级一致——可以承载重要性及使用频率处于同一等级的信息、模块或者任务等;

      显眼——位置处于页面顶部,基于用户由上至下的浏览习惯,固定选项卡处于页面“显眼处”;

      缺点: 

      承载数量有限——数量一般不超过4个;

      遮挡内容——同 Tab 栏缺点1;

(二)滚动选项卡:

Image title


      优点:

      能装——可以承载多个选项卡,且部分应用选项卡内容及顺序可以自己定制,这也就解决了固定模式带来的弊端——某些用户喜欢的内容需要滑动半天:

      瘦——由于滚动选项卡是以滑动操作为主,点按的操作方式较为低频,因此选项卡大多以“瘦小”的文字形式展现,占用空间较少;

     缺点:

     压力大——同跳板式导航缺点2,一般滚动选项卡数量较多,这就增加了用户的选择压力。

      遮挡内容——同 Tab 栏缺点1

(三)分段式选项卡:

Image title


      优点:

      优先级一致——可以承载重要性及使用频率处于同一等级的信息、模块或者任务等;

      显眼——位置处于页面顶部,基于用户由上至下的浏览习惯,固定选项卡处于页面“显眼处”;

      缺点:

      不能滑——不能滑动操作,只能点按,且因分段式选项卡处于页面顶端,给用户的操作带来了不便:

      承载数量有限——数量一般不超过3个;

陈列馆式导航

      一般以次级导航的方式存在,最大的优势在于能够突出展示内容,与跳板式导航的区别在于,陈列馆式导航可以随时更新内容,类似图片直播类的 APP 使用这种导航形式比较多,一般有三种形式——网格式布局、轮盘布局、瀑布流网格布局,如下图所示,从左至右分别是一直播、小米有品、花瓣:

Image title


      优点:

      直观——可以实时更新内容,对于内容的展示较为直观;

      缺点:

      不适合当家做主——由于其适合作为展示内容的窗口,因此不适合作为主导航;

      题外话:瀑布流网格式布局的部分画面半隐藏式的展示内容,吸引用户继续往下探索,有利于使用户进入沉浸式状态,但轮盘式布局的缺点在于在用户以纵向浏览为主的情况下,向X轴要空间的但会打断用户向下浏览的顺畅性,且承载内容有限,一般卡片的数量都少于10个。

隐喻式导航

      隐喻式导航的最大优势在于降低学习成本,但我们需要避免的是为了隐喻而隐喻,不应该被隐喻限制住了手脚。

      例:如果在移动端或者PC端使用隐喻式文件夹,那你就不可能在一个文件夹中放一个文件夹,再放一个文件夹......但实际上我们可以以俄罗斯套娃的形式不断在文件夹套文件夹,从而使对我们的资源进行更好的分类管理,打破现实中文件夹的局限性,而不是要死板硬套的隐喻。

      题外话:如下图所示,这是锤子科技的 Smartisan OS 系统的相机图标,这就是很好的隐喻,采用相机镜头=作为手机相机图标,降低了用户成本,当然画的也很好。

Image title


抽屉式导航

      抽屉式导航最大的优势在于能藏,这也注定了它最大缺点是藏起来的内容人们经常会忘了它们的存在。如下图所示,从左至右抽屉式导航主要有三种形式,浮层式、嵌入式、3D模式。Image title


      优点:

      能藏——将大部分模块隐藏起来,使得界面更加美观,且突出产品的核心功能,避免用户被不太重要的内容所影响,毕竟用户精力有限

      好展现创意——由于主导航的内容在大半个页面上,页面背景部分给设计师留下的创意空间就比较大,设计师可以结合品牌特点在背景上营造相应的氛围。

      缺点:

      容易忘——藏在抽屉里的模块,优先级明显降低,所以产品大流量入口不适合放在抽屉导航中;

      题外话:基于用户从左到右的文字浏览习惯,抽屉导航的图标大部分情况下是在左上角,属于用户单手操作的盲区。

下拉菜单式

      与抽屉式导航类似,最大优势在于能藏,使得界面内容保持简洁,一般下拉式菜单不会覆盖整个页面,甚至也不会增加黑色蒙版,因此会给用户页面层级较少的错觉,避免了频繁的页面跳转。

 Image title

      优点:

      能藏——将功能隐藏在一小块,保证了界面的简洁,同时也使得界面上能够容纳更多的操作;

      缺点:

      容易忘——同抽屉式导航缺点1。   

      题外话:在iOS中下拉菜单为自定义控件,而Andriod 系统为这种导航提供了特别的控件——Spinner控件。Spinner用于同一个类别下的不同视图间进行导航,类似便签类APP,在顶部设置文件夹,在此导航中包括各种不同的文件夹,类似通话便签、私密便签等各类文件夹,但我们在保证对用户而言可理解且符合逻辑的情况下,不应该过于死板。

卡片式导航

      卡片式导航的原型是扑克牌,模仿了扑克牌中常见的切牌、洗牌、翻牌等手法,卡片式导航的最大优点在于可以突出内容,例:如下图所示,最新版(8.11.0版)微博在信息架构上做了调整,视频模块采用了卡片式导航。

Image title


      优点:

      有趣——配合操作动效,与用户交互的方式比较有趣,相比其他交互方式更为吸引用户;

      秩序感——卡片整体性较好,秩序感更强,每个卡片就是一块内容;

      缺点:

      效率低——对于卡片只能逐个查看,不能进行全局性浏览,也不能进行跳跃式查看,效率较低;    

      浪费空间——占用页面空间较大,最好在需要突出内容的 APP使用这种导航方式,也就是物尽其用,避免在不必要的情况下使用卡片式导航,造成页面空间的浪费。

轮播式导航

      这种导航方式主要是通过增加页面指示器配合卡片式导航,让用户知道这里不仅仅有一张卡片,本质上来说这也是增加了页面指示器的卡片式导航,卡片式导航有的优缺点,它也都有,只是这种导航方式不会占据整个页面空间,从这个角度来说它最大的优势在于向X轴方向要空间,拓展页面范围。

      优点:

      增加空间——从X轴方向要空间,拓展页面范围,使得同样一块内容可以展示较多内容,主要在banner、天气类APP中使用,如下图所示这是锤子科技商城首页中的轮播式 banner;

Image title


      缺点:

      大家不一样——处于第一页面的卡片优先级远高于其他页面;

      承载数量有限——一般数量不会超过10个;

      效率低——同卡片式导航的缺点,对于卡片只能逐个查看,不能进行全局性浏览,也不能进行跳跃式查看,效率较低;  

折叠菜单式导航

      折叠菜单式导航最大的优势在于不用跳转页面就能够看到更多信息,除列表式的折叠菜单外,也有部分APP金刚区使用折叠式菜单,如下图所示的酷狗音乐首页,采用这种方式的目的在于只给用户展示最重要的流量入口,节省首页的空间资源;

Image title


      优点:

      能藏——类似于抽屉式导航优点1;

      减少跳转——避免页面的跳转,从而给用户层级较少的感觉,减轻用户使用压力;

      缺点:

      承载数量有限——能够承载的模块有限,适于隐藏太多内容;        仪表盘式导航

      仪表盘式导航类似于列表式导航,通过各种类型图表展示关键数据, 使得用户不用跳转至下一页面,也能够浏览关键数据,其优势与劣势同列表式导航;

尾巴

      最后跟大家说说在选择导航时的需要把握的要点,我们还是得从产品出发,从产品信息架构出发,对于宽而浅的组织架构,我们可能会选择滚动式选项卡作为二级导航,例:今日头条、网易新闻;对于核心业务突出的产品,我们可能会选择抽屉式导航作为主导航,例:滴滴出行。设计,只有适合与否,适合的就是好的。

     最后的最后,这是我“这一篇就够了”系列第一篇,下一篇讲注册登录流程,感谢你的阅读并期待你的关注,能对你有所启发,是我的荣幸。

泽泽先生

所有的光芒,都需要时间才能被看到。

138粉丝/6关注

小有见解当仁不让lv.1首页新秀收藏家lv.2
UI 中国 APP 设计关于用户激励体系的 5 个问题

泽泽先生

泽泽先生

所有的光芒,都需要时间才能被看到。

小有见解当仁不让lv.1首页新秀收藏家lv.2

扫描二维码
去手机端查看海报

泽泽先生

TA已经获得5枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN