【译点料】移动端常见的导航设计模式有哪些?

前言:嗨,这里是与时俱进走在前昂首挺胸不落伍的「交互坊」。今天的分享的是2014一系列的导航模式,这些导航大是以抽屉(汉堡)、九宫格、tab、溢出导航为基础衍生出的。还是那句话,万变不离其宗,希望这些基本导航的应用能给你带来一些灵感。


关于导航的设计模式,已经有很多了,网页设计自然不用说,即便是相对“新兴”的移动应用界面,可选择的导航设计模式也有很多。尽管移动端设计可谓限制重重,更小得空间意味着更小的尺寸,与此同时,还需要排列大量数据,因此,移动端的导航设计更加需要用心。

除了近期广泛使用的侧拉菜单,其实还有一种导航模式也很好用,不但可以提高用户体验,还可以提高应用的设计感。

1.列表式菜单

就让我们用标准的列表式菜单展开本文吧。这种方式在移动应用中也被广泛使用。这种导航设计解决方案主要是将链接逐条排列,让用户按照习惯,从顶部到底部导航。

GIF Aimation by Sergey Valiukh

这仅仅是一个概念设计。颜色结合精准的线图标,再加上加粗字体。用户使用导航变得非常方便。

Elevatr by Fueled

这是一款已经上线的应用,非常好用。帮助团队有序组织商业目标。也能作为会议记录。主屏幕的导航选项色彩如同彩虹一般绚丽。而背景画布取材图表纸,整体搭配很出挑。

HabitClock App by Kutan URAL

简约而又富有视觉吸引力,能够帮助你安排早晨时光,让你的生活更加有序。列表除了有导航额作用,还有待办事项通知的作用。

Instagrab for iOS by Davis Yeung

水平条纹,异常精致。不同链接的图标配色对比鲜明,辨识度很高。

2.矩阵/网格式菜单

网格式导航能占据整个屏幕,将界面的重点放在导航上,让导航更清晰明显。当导航项过多的时候,这种方法非常实用,然后通过等距的网格线整齐分割导航项。

Vectra, branding by Michal Galubinski and thoke design

非常引人注目,一屏6个导航项,扁平化图标显得非常出众。

Arrivo Mobile App by Marco La Mantia & Simone Lippolis

设计者布局能力非常出众,将一堆数据放到矩形网格中。而且,每个导航项底部都可以滑出小面板,色彩选择也不错。辨识度和信息量的一次平衡。

Abracadabra App by Sergey Valiukh

复古风格,中古色调。屏幕六等分,用于导航。扁平化图标结合加粗字体,提高可读性。

T R A V E R S E by Willis

草图风格的导航设计,强调功能性。背景采用了轻色调。因此,不用做明显的分割线,辨识度也很高。

3.底部导航菜单

这个,很常见,主要做功能区分。

Badoo concept by Jakub Antalík

导航放在屏幕底部,每个导航项还可向上扩展,承载更多功能。

Animated sliding tab bar by Virgil Pana

点击最下方的汉堡图标,即可拉出导航菜单,伟大的设计是隐形的,不占据屏幕空间,且提供更多的信息承载

4.顶部菜单

值得一提的是,顶部菜单不符合人机工程学——手会挡住屏幕。虽然更符合人阅读习惯,用户会最先发现导航,但移动端毕竟不是桌面端——用户要用手去操作。

Horner by Cüneyt ŞEN

导航菜单可隐藏。导航菜单和整体界面对照鲜明且不突兀,得益于明亮的色彩和纯实的图标

Discovery Channel by Enes Danış

一二级导航均位于顶部,招之则来,挥之则去,避免干扰用户。

Air flow calculation app for Bettertec by HAMZAQUE Designs

标签栏占据顶部,黑白对照感鲜明。

Shario App by MING Labs&Pierrick Calvez

清爽的矢量概念设计,导航放在顶部

5.扩展式导航菜单/侧拉菜单

目前最为常用,提供更多的信息,同时又不妨碍内容阅读。一般是左侧拉。

MuSeek by Al Power

音乐应用,音乐应用需要承载很多信息:专辑封面、歌名、歌曲序号。因此没有太多的空间留给导航菜单。因此设计者采用了侧边菜单。

Univit UI by Mohammed Alyousfi & Àlex Casabò

是一款非常简约的应用,采用了标准的侧拉菜单,简单地滑动手势即可调出。侧边菜单中,线图表大于字体。提供了非常清爽的用户体验。

SVOY app design by Alexandre Efimov

色彩绚丽,配上朴素的黑色背景,侧边菜单可扩展,再加上折叠动效,效果非常诱人。

Időkép by Attila Szabó

“拉开帷幕,惊喜展现”这就是这款应用的感受,侧拉玩的不错。

结论

想要一招吃遍天下那是不可能的,每一种解决方案都各有利弊。掌握多种导航设计模式,才能根据项目实际,变通的设计,提高用户体验。

来源:Designmodo

后语:有心的同学可以分析分析我们常用的软件都用了哪些导航,有什么优缺点,这样的分析对于自己的基本功很是有用。好啦,我们下次见。

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

推荐阅读更多精彩内容