移动端导航栏

可以作为应用主体导航

标签导航

标签导航是IOS系统中最常见的导航,它继承了桌面导航的样式,对图标进行了扁平化处理。在IOS系统原生页面中可以看到许多页面都使用了标签导航的设计,包括我们常用的微信、支付宝、微博等软件,都使用标签导航做为它们的一级导航。可以说标签导航是最符合IOS用户习惯的一种导航。

image

总结:标签导航适用于主导航各功能重要程度一致,并且主功能数量在3-5个之间,相互之间切换频繁的场景。

TAB导航(同时也可以作为页面导航)

TAB导航是IOS和安卓端都十分常见的导航,它和标签导航本质上其实相似,但是展现形式有很大区别。tab导航一般处于页面的顶部,在使用数量和形式上更加灵活。

image
image
image

总结:通过案例可以发现TAB导航在使用上十分灵活多变,外观简洁,能完美运用到各场景,是目前十分流行的导航模式。

舵式导航

舵式导航是标签导航的变体,也是比较常见的导航之一。因为外观看起来像船舵,所以取名舵式导航。和标签导航不同的是它将核心功能放在导航正中央,并用对比强烈的色彩来和其他导航进行区分,常用于发布按钮。

image

总结:舵式导航弥补了标签导航功能数量的限制,重点突出了核心功能,适用于发布功能下有多种同级分类选项的应用,常用+号表示,以及在功能型产品中核心功能的开关按钮。但是相比标签导航不足的是,舵式导航将核心功能全部隐藏在+号中,需要用户二次点击才能到达目标,增加了点击次数,藏在+号中的功能使用频率会比一级导航大大降低。

应用辅导航

抽屉式导航

抽屉式导航外观小巧,占用空间少,容量大。外观设计的像抽屉,可以自由伸缩,也是我们常说的汉堡菜单。它的核心目的是隐藏不常用的功能,减少主界面导航控件数量,让界面更加干净利落。这种设计模式曾经非常流行。但是正因为它的小巧,又处在页面左上方,是单手操作时非常不容易点击到的区域,这也导致藏在抽屉里的功能很少用户会使用。所以目前抽屉导航在市面上的使用量已经越来越少。但目前仍有一些主流软件在使用抽屉导航的设计,一般用来放置辅助功能。

总结:抽屉式导航适合作为产品的辅助导航,一般用来放置需要但是不常用到的功能,例如设置、当前用户等信息。

常见页面导航

宫格式导航

宫格式导航也是较为常见的一种,它的特点是占据空间大,入口扁平化,以平铺的形式展示所有功能,这一点和桌面类似,在使用上让功能一目了然,在设计上更加富有情感化。

image
image

总结:宫格导航常用在二级菜单,在使用上充分利用了页面空间,使页面更饱满,视觉更清晰。但缺点是不方便同级功能之间互相切换,必须退出到导航页面重新选择。常用作同级别下使用频率相近又彼此独立且功能之间切换频
率不高的场景。

列表式导航

列表导航是手机和网页端都十分常见的导航模式,主要用于展示文字信息。使用列表式导航的页面都十分干净,内容清晰,能快速定位到目标。APP中一般以图文结合的模式展示。

小结:

采用列表导航的页面内容多为左对齐,同时页面会产生大面积留白,使页面看起来干净整洁。使用上需根据具体需求来设计展示内容和高度,用户关注点在哪里,就展示哪些信息。适合功能之间互相独立,切换频率不高,以内容为主的信息或分类展示。

分段式导航

分段式导航也是IOS系统自带的标准控件,它体积小巧,可根据内容自由伸缩,能轻松融入界面,不占用空间,是目前IOS端使用频率较高的一种导航。

image

小结:

分段式导航IOS的标准控件,可以根据页面内容自由伸缩大小,使用上十分灵活,可以很轻松的融入页面。适合页面分类切换频率较高,导航数量在2-4个之间的场景,不适合安卓,和一级导航。

轮播式导航

轮播式导航是通过横向轮播面板衍生出的一种导航模式。通过横向列表把信息藏到页面之外,充分利用空间。只需滑动手指就能轻松的切换。配合大图背景,让用户同一时间专注一个目标,使用上体验更好。

image

小结:

通过案例,我们不难发现使用轮播式导航的页面整体十分干净整洁,配合大图的展示视觉冲击更强烈,体验更好。但缺点一次只能切换相邻的选项卡。用户也大多会选择优先出现的功能,藏在后面的功能使用频率会相对较少。适合功能之间不频繁跳转,内容经常更新,视觉效果直观,彼此独立的内容。在使用上注意需要在页面边缘给出提示,引导用户滑动。

悬浮按钮导航

悬浮按钮导航是将导航页面分层,无论你到达APP的哪个页面,悬浮图标永远悬浮在页面顶层,依靠悬浮层可以迅速对当前页面进行操作。悬浮按钮也是Material design的标准控件,同时在Android UI 交互中也是最常见的元素之一。常用来放置其核心功能,在用户流程中起到重要作用,常出现在页面右下方,并使用对比强烈的色彩突出,点击时弹出其功能。

image

小结:

通过案例可以发现浮动按钮在页面上十分突出,通常用来承载相关度最高、最常用、最重要的操作。并根据页面来显示隐藏以及切换不同状态,是非常实用的一种导航模式,一般出现在需要正向操作的页面。但是需要注意的是,悬浮icon会遮挡某些页面的操作,如上图Gmail页面中浮动按钮挡住了下面的收藏,用户需要额外的滑动页面才能点击。所以在设计时应该考虑进去,比如在悬浮按钮出现的页面为它留有位置。

复合式导航

随着应用功能越来越多,页面的分类也越来越细致,单一的导航模式已经无法满足信息的层级分类,这时就需要使用复合式导航能将多种导航组合到一起,使大量信息通过多层级分类有序的展示在一个页面,是目前最常见的导航模式。

image
image

小结:

复合式导航的设计随处可见,其优点是将多层级的信息有序的排列在一个页面,使信息分类更明确,页面更有活力。使用上多为一个主导航加两个辅助导航的设计,比较少有超过3种以上的设计,过多的导航会使用户失去焦点,在导航的层级搭配上也需要注意。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容