APP导航设计的对比总结

纵观应用市场上的APP,导航设计的模式总是几种的组合使用。

导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。

产品的导航系统,是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说,只有最合适,根据你的产品采取最合适的导航设计。

纵观应用市场上的APP,导航设计的模式总是几种的组合使用。下面我们来看一下常见的几种导航设计模式。

01 底部标签(Tab)导航


描述:

1、当产品的整个体验流中是以几个常用功能模块(一般不超过5个)贯穿的,意味着用户需要在多个标签入口之间来回切换;为了保证切换的效率,将贯穿产品整个体验的流的模块平铺在Tab Bar位置,保证了用户任务路径的扁平。

2、iOS原装App Podcast,5Tab。


标签导航

优点:

1、可见性好,位置明显,易于发现,它能让用户直观了解到APP的核心功能;

2、操作性好,用户很方便就能触及到这个区域,并可在几个标签中快速切换且不会迷失方向,简单而高效;

3、符合习惯、ios原生控件,开发简单;

4、优先级较高、用户使用频繁,彼此之间相互独立。

缺点:

1、容纳个数有限,一般最多五个(不然需要结合其他方式,运用层级和收放)。

2、占据高度空间略大,一般都是文字+图标的形式。


02 顶部标签(Tab)导航


描述:

顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。

实际项目中,顶部与底部配合使用的挺多。其实就是holo条。


优点:

扩展性好:标签的个数没有上限,不过太多的话,越是后面的页面渗透率会越低;

占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。

手势操作非常方便。

缺点:

可见性略逊:这是空间占据的区域变小之后的后果。


03 舵式导航

描述:

1、点聚式它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。会搭载其他导航样式出现(如标签式)成为舵式导航。

2、与标签导航类似,就点聚工导航与标签导航的结合体,其中一个导航标签蕴含更多的操作选项,也可以理解为标签中蕴含更多二级导航标签。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。

优点:

1、把类似生产内容的主功能按钮放在中间,标签更加突出醒目;

2、同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。

缺点:

1、占据高度空间略大,一般都是文字+图标的形式。


04 轮播导航

描述:

当你的应用信息足够扁平,可以尝试轮播导航;

优点:

能够最大程度的保证应用的页面简洁性,操作也是最方便;

缺点:

不能够快速的定位对应的分页内容;


05 宫格导航

描述:

1、宫格式导航被广泛应用于各平台系统的中心页面;

2、用在二级页作为内容列表的一种图形化形式呈现,或作为一系列工具入口的聚合;

3、用户频繁切换的概率是比较低;

4、在不同的文章中可能被称作:跳板(图标卡片式)、磁贴式。

优点:

1、扩展性非常好,便于组合不同的信息类型(运营位、广告位、内容块、设置等);

2、视野范围内可以展示的功能入口多,能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务;

3、静态、动态结合可以展示出丰富的信息,同时保持视觉统一;

4、跨平台不受平台限制。

缺点:

1、每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通;

2、当排布过多的时候,用户容易眼花缭乱,选择压力较大;


06  陈列馆式导航

描述:

1、宫格导航的变式吧,可用来呈现实时内容,比如新闻、菜谱、文章或照片,可以采用网格布局(比如一直播和ins)或轮盘布局(比如格瓦拉电影),还可以采用幻灯片模式进行展示。

2、陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

优点:

1、相较于列表导航、宫格式导航的不同在于,陈列馆式导航有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式);

2、直观展现各项内容。

缺点:

1、不适合展现顶层入口框架;

2、容易形成界面内容过多,显得杂乱;

3、设计效果容易呆板。


07 抽屉导航

描述:

1、抽屉式也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在安卓上使用底部Tab会造成双底栏,视觉观感不佳;

2、一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏;

3、更多的被应用于信息流产品设计中,这类产品注重核心内容的展示,用户的任务路径较为单一,几乎都是用于浏览产品的核心内容;至于其他比较低频的模块入口则会隐藏在当前界面后方,避免冗余的模块抢夺用户的眼球;

4、在不同的地方可能被称为:扩展菜单、侧边导航、汉堡导航;

5、“2/8”法则告诉我们,80%的用户只用那些20%功能,这20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用着最重要的位置,那么用户就会被打扰,产生臃肿感,甚至会放弃使用产品。

优点:

1、节省页面展示空间,让用户将更多的注意力聚焦到当前页面;

2、由于导航界面是隐藏在屏幕之外,展开之后整一页面都是导航菜单内容,所以可扩展和个性化的空间很大;

3、扩展性好,导航的个数没上限。

缺点:

1、用户不易发现,使用次功能需要二次点击,给用户在切换功能带来了操作成本;

2、可见性太差,用户还没能把汉堡菜单按钮和侧边栏联系起来,所以,侧边栏的渗透率很低;

3、不直观、不适用于主导航、如遇频繁操作的功能,用户不断开关抽屉体验不好。


08 下拉导航/菜单导航

描述:

1、与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单;

2、通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转 ;

3、Android中对应的控件为spinner控件,但该控件用于同一类别下不同视图之间的切换,而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换;

4、下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。

优点:

1、菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置;

缺点:

2、位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用;

3、考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。


09 列表导航

描述:

1、作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。

2、适合用来显示较长或拥有次级文字内容的标题,每行可以融入较多信息。

3、与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在首页使用它;

4、无论ios开发和android 都有现成的列表布局插件和模板。

优点:

1、由上至下查看符合习惯;

5、结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。

缺点:

1、条目太多或分布不合理会导致用户查找困难;

2、不适合需要频繁切换任务的情况。

总结

导航可能不单单只有这几种,可能大家的叫法也不同,而且每种导航都有其存在的意义,不是它不够好,而是它可能不适用于你的产品。真正在实际项目中,还是得根据产品的实际情况综合去运用。

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

推荐阅读更多精彩内容