移动端导航设计,这里一定有你不知道的——细节系列第01篇设计每日一贴

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

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

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

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

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

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

一、导航分类

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

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

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

二、各种导航优缺点

(一)底部Tab栏(标签栏)

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

缺点:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(五)固定选项卡&分段选项卡&滚动选项卡

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

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

优点:

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

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

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

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

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

(2)滚动选项卡:

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

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

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

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

(3)分段式选项卡:

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

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

(五)陈列馆式导航

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

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

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

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

(六)隐喻式导航

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

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

(七)抽屉式导航

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

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

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

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

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

(八)下拉菜单式

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

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

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

(九)卡片式导航

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

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

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

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

(十)轮播式导航

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

缺点:

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

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

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

(十一)折叠菜单式导航

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

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

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

承载数量有限——能够承载的模块有限,适于隐藏太多内容;

(十二)仪表盘式导航

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

三、尾巴

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

THE END
1.如何在PPT中设置图片轮播功能:步骤详解接下来,我们将设置图片轮播效果。 选中你想要设置为轮播的图片。 点击“动画”选项卡。 在“动画”选项卡中,找到“动画窗格”按钮并点击它,这将打开一个包含所有选定图片动画的窗格。 在“动画”选项卡中,点击“添加动画”按钮。 在下拉菜单中选择“进入”效果下的“擦除”、“淡入”或其他适合连续播放的动画效果https://www.kdocs.cn/article/D6F7E7403E.html
2.网易交互设计微专业干货提炼3、舵式导航 多个功能中有某个功能特别重要 4、抽屉式导航 隐藏不重要功能,让用户更关注核心功能,大大减少主界面中的导航控件数量 Tips:不要在抽屉式导航放置太重要的功能 5、下拉菜单式导航 可与滚动式导航结合 导航栏类型 (三)移动产品模式设计之列表 https://www.jianshu.com/p/ee503ff78494
3.推荐圣诞氛围感SVG模版产品菜单式切换 如果你准备了丰富的动静态 LOOK 和产品图,那么结合 SVG「无限选择器」制作成简洁而灵动的交互菜单,无疑能极大提升销售转化率。参考卡地亚公众号的《爱,点亮欢聚时刻》,点击下方对应按钮可进行切换查看: 关于无限选择器的创造性应用,建议广大运营人对照我们曾经录制的专题解析进行深度学习,掌握它丰富的多https://blog.csdn.net/e2_cool/article/details/144431140
4.福建师范大学附属小学图书馆设备采购项目附件10、系统驱动方式采用以菜单式、键盘快捷式、图标式多种驱动方式,并提供统一的快捷键。支持键盘、鼠标、光驱扫描和条码扫描仪多种外设操作方式,各子系统之间界面、快捷键操作方式统一; 11、系统数据采用自动和手动备份两种方式。自动备份可根据用户的需要自定义备份的频率和时间。并且系统提供了恢复备份数据的工具; 12、https://zfcg.czt.fujian.gov.cn/upload/document/20201126/4a1857c5700f4e21bdc556d67e9f1369.html
5.flash完全教程30天学会flash动画的制作弹出菜单式链接 49 3.16 图片选择器 50 3.17 链接导航框 51 3.18 小球跟踪链接 52 3.19 单击按钮打开全屏窗口 56 3.20 单选按钮选择链接 56 3.21 隐藏的链接 57 3.22 变换链接颜色 58 3.23 固定链接的位置 59 第4章 时间类特效 61 4.1 时间的水中倒影 62 4.2 简单的日历 63 4.3 带有农历的日历 65 4.4 https://www.iteye.com/resource/chenmingwo1986-1253870
6.网易交互设计师微专业C1揭开交互神秘面纱51CTO博客3、舵式导航 多个功能中有某个功能特别重要 4、抽屉式导航 隐藏不重要功能,让用户更关注核心功能,大大减少主界面中的导航控件数量 Tips:不要在抽屉式导航放置太重要的功能 5、下拉菜单式导航 可与滚动式导航结合 (三)移动产品模式设计之列表 1、垂直列表 https://blog.51cto.com/zhuxiaoxia/6543562
7.超全面的导航设计基础知识总结(一)目前市面上移动界面设计所使用的导航设计,基本分为以下(桌面式、选项卡式、列表式、侧边抽屉式、下拉菜单式、点聚式)6大基础导航模式,为了不断满足业务、用户需求,涌出(舵式、轮播式等)新颖的混合型导航模式。设计师们在基础导航模式上仍在不断做升级优化以及组合创新。 https://www.adinnet.cn/bloginfo/2018_07/blog_3745.html
8.移动端界面设计模式:导航设计的各个类型目前市面上移动界面设计所使用的导航设计,基本分为以下(桌面式、选项卡式、列表式、侧边抽屉式、下拉菜单式、点聚式)6大基础导航模式,为了不断满足业务、用户需求,涌出(舵式、轮播式等)新颖的混合型导航模式。设计师们在基础导航模式上仍在不断做升级优化以及组合创新。 https://www.sohu.com/a/240462313_114819