你真的懂移动端的导航吗?

应用正确的导航模式,能够合理展示产品功能,减少用户学习成本,并快速引导用户如何使用,确保用户能够在你的应用中找到并使用其中有价值的功能,今天介绍一下移动端导航模中的几种类型,一个好的导航设计可以提高软件的易用性用户可以轻松的完成操作。

要介绍的导航类型

一 、跳板式(宫格式)

二 、卡片式

三、列表菜单式

四 、仪表盘式

五 、 陈列式

六、 选项卡菜单式

一、 跳板式

跳板式设计模式,也称快速启动板,各模块之间相对独立,模块之间的信息间也没有任何交集,无法相互跳转,一般作为主导航使用,这种模式一屏最多可以放置9个选项(常说的九宫格),通常还有2*3、2*2、2*1等布局形式,相比标签栏3~5个选项卡的限制,这种设计模式增加了选项容量并且可以进行更多选项的延展,所以承载的信息量更大,然而跳板式的设计模式是没有任何优先级的。

优点:

1、功能入口展示更加清晰,方便用户查找,提高产品易用性

2、可展示的选项卡更多,承载的信息量大,应用不规则布局可以突出某项功能

缺点:

1、各个模块内容之间切换较为繁琐,操作不灵活

2、入口的内容无法得到直接的展示

3、模块信息的次级内容展示收到限制

二 、卡片式

卡片式设计可以提高用户获取信息的速度,减少用户的思考时间,它来源于现实生活中的扑克牌,包含切牌、洗牌、弃牌、翻牌等交互形式,卡片式的设计也有利于自适应布局,它是以内容为核心,框架服务于内容的一种设计形式,在同一页面卡片可以以不同的形式承载不同的信息内容,相比于列表式导航更加丰富,但是卡片式设计对页面的空间消耗很大(这里指移动端),对于卡片中需要展示内容特别多的情况下会造成一屏展示的信息量极少,在这种情况下就不易使用卡片式设计了。

优点:

1、每个卡片都是独立内容,增强视觉聚焦、增强点击感

2、信息集中直观,减少用户思考时间,从而快速找到自己所需的信息

缺点:

1、不易展示过多信息

2、占用屏幕空间较多

3、不方便信息的搜索查找

三、列表菜单式

列表菜单式中每个列表项都是一个新的功能入口并且各个模块之间的切换都需要返回列表主页,一般作为次级导航使用,在少数应用中作为主导航使用,它可以高效、清晰的展示信息,可容纳信息较多,并且具有很强的延展性,可以不断的增加信息,导航效率较高,在使用这种布局的时候要注意列表最舒适体验的最小高度为80px高度不定,可以用来显示较长或者拥有次级文字的内容标题。

优点:

1、容纳信息较多所以能够详细解析说明功能的作用

2、符合用户浏览习惯(从上至下)

3、明确用户当前所在位置,便于查找

缺点:

1、不易展示过多功能条目,易产生浏览疲劳

2、进入功能后必须原路返回在进行其他操作,增加了操作成本

3、只能通过先后顺序区分功能之间的优先级和功能重要性

四、仪表盘式

仪表盘的设计模式能够让用户方便快捷的Get到他最需要的信息,而不需要点击进入下一个页面,通常在信息统计,数据对比等方面应用较为广泛,提高数据易读性。

优点:

1、使数据可视化,数据展示更加直观清晰,增加趣味性

2、表现形式多样,差异化区分明显

缺点:

1、页面空间耗费严重,不易把控

2、数据展示内容不易过多,易造成认知负担

五、陈列式

陈列式的设计模式主要通过直接显示内容项来实现导航,更多是展示彼此独立,没有层级关系的内容,例如:照片、视频等等。一般适用于经常更新,视觉效果直观的应用产品。

优点:

1、直接展示模块内容,信息传达明确

2、方便用户浏览,适用于经常更新的内容

缺点:

1、模块过多时容易造成页面混乱

2、设计形式略显单一

六、选项卡菜单式

选项卡菜单式更直观的展示出产品所包含的主要类别有哪些(这里指底部导航),用户可以直接从一个主类别切换到下一个主类别,但需要注意的是:确保选中的选项卡与非选中的选项卡之间要做出明确的区分,几乎大部分APP都会采用选项卡导航模式作为主导航,但是根据操作系统的不同,选项卡位置和设计也大不相同。

优点:

1、各个功能入口区分明显

2、明确显示用户当前所在位置,不易迷失

3、各个功能之间切换便捷

缺点:

1、展示数量受到限制(最多展示5个)

2、占用一定的高度空间

六 . 一、 固定选型卡

固定选项卡的位置和数量是固定的,同时显示多个顶级内容视图,方便浏览和切换,让用户知道有多个可供选择的视图,始终允许用户通过左/右滑动进行页面之间的切换,如果需要经常切换视图,内容视图有限或者需要让用户清楚地知道可供选择的视图,这几种情况下可以使用固定选项卡。

优点:

1、扁平化信息结构

2、各个视图之间切换便捷操作简单

缺点:

1、展示位置固定、展示数量受到限制

2、占用一定的高度空间,展示形式单一

六. 二、 折叠选项卡

用户在滚动屏幕或向下/向上滑动页面内容时把头部或底部导航隐藏或是收缩起来的形式,增大内容展示区域创建沉浸式体验,提高用户体验。

优点:

1、节省屏幕空间展示更多内容信息

缺点:

1、不易操作功能按钮需要滑动呼出

六. 三、 滚动选型卡

滚动选项卡不受数量限制,并且可以自定义选项卡的模块内容,可以左右滑动显示不同类别的视图,很好的解决了功能层级同等重要但限于数量问题无法展示的问题

优点:

1、可自定义展示模块内容

2、左右滑动让操作更加灵活

3、没有数量限制相比固定选项卡展示的同级内容更多

缺点:

1、选项卡数量过多时,各个功能入口之间的切换较为不便

总结

一款产品应该采用哪种导航更合适还得从产品的定位以及易用性的角度出发综合考虑,毕竟设计是来解决问题,而不是单纯从视觉层面觉得好看。以上是对全局导航的归纳梳理,可能有些地方写的不详细或者有遗漏,希望大家多多包涵,欢迎大家留言交流、别忘了点赞!哦!

UI中国

作者:王雨Fire_Vision

(0)

相关推荐

  • 移动端底部导航的用户体验

    图片来源:Behance 设计师都知道,设计不只是为了好看.设计也决定用户如何融入一个产品,无论是网站还是app.这是一种交谈.导航就是一种交谈.因为如果用户不明白使用方式,你的网站或app再漂亮都没 ...

  • 你真的懂什么是日系摄影吗?

    摄影,终究和美学脱不了干系.学习摄影,也是培养审美.每当你模仿他人,跟风拍摄一些喂养眼球的照片,是否也会偶尔停下来思考,这样做的意义是什么?美的提炼与创作,真的是这么简单的事吗?思考过后,难道不会想要 ...

  • 源文件 | Web、iOS和Android三端元件库下载

    阅读这篇文章你可以得到哪些?有关Web.iOS和Android三端元件库下载. 1. iOS.Material Design(简称MD)和Web端组件元件库下载 2. 通过源文件学习iOS.MD和We ...

  • 常见的移动端设计模式与案例分析

    良好的APP导航设计模式决策对整个app的核心体验起到关键作用.我们通过案例来对比和了解一些常用的APP导航设计模式. 在移动端,导航是APP最重要的区别.根据不同的内容,选择不同的导航方式.没有完美 ...

  • 最新高端游戏耳机十大品牌

    操作方法 01 高端游戏游戏耳机是相比于一般的游戏耳机而言,在技术以及设计上更加具有针对性,在性能和体验感上也更加优越.由于高端游戏耳机在产品价格较为昂贵,所以很多一般的游戏玩家并不能接受. 对于专业 ...

  • 谈经论道,高手说说对DIY的感觉

    先说说JS 在电脑城的大多装机JS,对行情也只是一般的了解,更不要谈什么超频性能或者游戏性能了。所以,只要能碰上真的懂行情的JS,就已经是万幸。(建立在不是忽悠你,侃侃而谈的情况下)所以去装机,首先最 ...

  • WORD各种快捷键神操作

    从会用电脑开始,Microsoft Office Word就是我们最常用的软件.靠着它,我们写论文.写方案.写情书.写故事- 但是,你真的懂Word吗? 其实,这个软件背后,还有一大批隐藏技能你不知道 ...

  • Word的那些神技巧神操作!

    从会用电脑开始,Microsoft Office Word就是我们最常用的软件.靠着它,我们写论文.写方案.写情书.写故事- 但是,你真的懂Word吗? 其实,这个软件背后,还有一大批隐藏技能你不知道 ...

  • 用户喜欢的APP是啥样?

    问问自己,你喜欢的app有哪些呢?肯定很多人都会说微信.QQ.支付宝.美团.微博等等常用的这些APP吧.其实你真的懂现在的用户吗?这里特别举2例子告诉大家,目前年轻人喜欢的APP. 当你去面试产品经理 ...