App 移动应用中九种导航设计总结及其优缺点分析

在各平台设计越来越规范的今天,产品设计越来越看重 app 的易用性,越来越多的 app 都使用 Tab Bar(标签栏)设计, 但是还是有一些 app 因为场景、功能需求会选择其他导航方式。先放上一本公认的 UI 入门书籍,就是下面这货,丁丁曾经头脑发热看完了,也写过读书笔记,虽然移动应用发展太快,里面很多截图的设计都挺旧了,但是不妨碍它的启蒙作用。今天主要是跟大家聊聊应用导航有哪些设计以及优缺点。


一、标签式导航
毋庸置疑,这种导航方式是目前的主流。如果细分还可以分为底部 tab 式导航、顶部tab式导航、底部 tab 的扩展导航三种方式,而随着设计的规范以及智能手机的屏幕越来越大,顶部 tab 式导航方式逐渐被淘汰,而底部 tab 的扩展导航方式多用于超级按钮,而超级按钮一般用于快速发图片、发文章等动作,所以这里我们主要讨论底部 tab 式导航。


优点
1、虽然设计不出彩但不会犯错
2、清楚当前所在的入口位置3、轻松在各入口间频繁跳转且不会迷失方向4、直接展现最重要入口的内容信息
缺点
1、功能入口过多时,该模式显得笨重不实用(最多不超过 5 个)

二、抽屉式导航
抽屉式导航最初出现在安卓端,后来 iOS 端也开始使用这种导航方式,经常和底部 tab 式导航结合使用的抽屉式导航,我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。(手 Q 自去年改版用抽屉式跟 tab 式结合就一直没改)

优点
1、兼容多种模式
2、扩展性好
缺点
1、隐藏框架中其他入口
2、对入口交互的功能可见性要求高
3、大频幕时代单手持握时属于操作盲区
4、对排版要求高

三、跳板式(宫格式)导航
宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。


优点
1、清晰展现各入口
2、容易记住各入口位置,方便快速找到
缺点
1、无法在多入口间灵活跳转,不适合多任务操作
2、容易形成更深的路径
3、不能直接展现入口内容
4、不能显示太多入口次级内容

四、列表式导航
如果说标签式导航是 APP 中最普遍的导航方式,那么列表式导航就是最必不可少的一种信息承载模式,这种导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。


优点
1、层次展示清晰
2、可展示内容较长的标题
3、可展示标题的次级内容
缺点
1、同级内容过多时,用户浏览容易产生疲劳
2、排版灵活性不是很高
3、只能通过排列顺序、颜色来区分各入口重要

五、陈列馆式导航
陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示。


优点
1、直观展现各项内容
2、方便浏览经常更新的内容
缺点
1、不适合展现顶层入口框架
2、容易形成界面内容过多,显得杂乱
3、设计效果容易呆板

六、超级菜单式导航
移动设备上的超级菜单式导航与网站所用的超级菜单导航类似,它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。


这种导航模式在现在的 app 设计中使用的比较少,而且一般会用做分类检索的次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

七、点聚式导航

说到点聚式导航必然会想到 path 这个 app,当年刚出来时新颖的交互方式让人眼前一亮,它的方式是:将用户最频繁使用的多个核心功能汇聚在主界面中一个按钮上,通过点击按钮呼出功能菜单的导航。


优点
1、灵活
2、展示方式有趣
3、使界面更开阔
缺点
1、隐藏框架中其他入口

八、页面转盘式导航

图片或者整块内容并列展示,用户通过左右手势滑动来切换当前内容,形似转盘的导航,多用于陌生人社交软件(都懂的~)。


优点
1、单页面内容整体性强
2、线性的浏览方式有顺畅感、方向感
缺点
1、不适合展示过多页面
2、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面
3、由于各页面内容结构相似,容易忽略后面的内容

九、仪表式导航
采用圆形布局具有指针或计数器类似仪表盘的导航。提供了一种度量 KPI (关键绩效指标)是否达到要求的方法。每一项度量都可以显示出额外的信息,这种模式对商业应用、分析工具、销售和市场应用非常有用。


优点
1、使数据更加生动直观易读,增加APP趣味性
2、工具类、数据分析类、数据可视化类应用

丨总结
移动互联网高速发展的今天,各个平台的设计已经越来越规范,未来的趋势中是淡化各个平台的差异,尽量通过一套设计来无缝的连接各个应用在不同设备上的体验,同时也节省了人力和物力。虽然因为手机屏幕越来越大导致底部 tab 式导航成为主流,但是在不同的场景还是需要其他导航方式去支撑设计,所以在选择导航时不应该只局限在「标准设计」中,而是应当本着以「内容」为先的思想来考虑。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容