移动APP中各种类型的导航设计

即使是移动应用界面原型设计,导航的形式也可以多种多样。尽管尺寸小,又必须紧凑排列大量数据,它们似乎受到了紧密的约束,但依然有着形形色色的选择。
人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航,即侧边栏。尽管如此,还有其他可以提升用户体验的形式,会让用户浏览你的APP变成小菜一碟。

列表型菜单

让我们从一种基于列表的标准型导航开始论述,它在移动APP作者中得到广泛使用。这种解决方式建议逐一展示链接,让用户遵循从上到下的常规流程。

20140706073840563

Sergey Valiukh的GIF动画设计只是一件概念设计,却完美地反映出列表型导航的实用性。结合了多种色彩和精细的线形图标,还有稍显粗重的字体,让用户轻松浏览APP,并且不会感到屏幕局限导致的不适。

移动APP中各种类型的导航设计

Fueled的Elevatr是一个时尚的APP,帮助企业家管理和跟进商业会议。主屏的特点是彩虹色的菜单,清晰地逐行展现出控制面板的各个项目。背景图受到坐标纸的启发,与这种菜单完美搭配。

20140706074028575

Kutan URAL 的HabitClock App是个简洁且有视觉感染力的APP,帮助你管理早晨的闹钟。尽管屏幕上的重点是顶部和底部的控制面板,但列表型导航(同时也是非常棒的通知工具)才是吸引注意力的核心。

20140706074140140

横条状的布局方式,用来展现简易侧滑菜单上的一系列链接,这是多数设计师的人气选择,也是Davis Yeung设计的iOS版Instagrab主要组成。通常每一项都配有一枚易懂的小图标,很好地区分每个链接。

矩阵或网格型菜单

占据全屏的网格型导航有助于强调导航,使它清晰易懂、显而易见。当你需要展示很多链接时,这种方式也很管用,一系列同样的网格,有效地将每一项与其他区分开来。

20140706074211925

Michal Galubinskiand thoke design的Vectra,有着不容忽视的导航。设计师不仅把菜单的6个项目伸展至全屏,还利用了巨大的扁平风格图标,很明显是为了大部分在线用户考虑。

20140706074227937

Marco La Mantia & Simone Lippolis的移动APP设计,Arrivo,巧妙地在严格的方形网格中组织大量数据。每个格子都扮演着功能性的作用;因为它不仅仅是显示数据,也让 你通过底部滑出的一个小型控制面板调整它。颜色选择也非常明智,因为热烈的背景色调有助于有效地分配内容和区分网格。

移动APP中各种类型的导航设计

Abracadabra,这个APP肯定是依照Sergey Valiukh心中的复古风格来设计的,让这个APP有种明显的年代感。在此,设计师干练地将屏幕划分成6个相等的网格,非常易于浏览。扁平风格图标结合粗重的非正式字体,有助于提升易用性。

20140706074253870

手绘风贯穿了Willis设计的T R A V E R S E的每一个界面。这个APP基于明亮的单色背景和线形图标,因此主菜单看不到任何分隔线,却做到了井然有序,使得用户相当轻松顺手地浏览这款APP。

底部菜单

底部菜单主要是作为导航的辅助,用来区分内部的功能区块或独立组件。

20140706074316656

Jakub Antalík的Badoo概念设计有着位于屏幕底部的导航。它也包含了一组扩展菜单,每一项都有它自己的控制面板。

20140706074334152

Virgil Pana设计的动态滑动标签,为重度信息展示型应用提出了一个完美的解决方法,能够包含大量统计数据,或者通过图表展现数据,并仍然保持简洁。常规大小的菜单从屏幕底部滑出,显示出一个小型控制中心。

顶部菜单

既然我们习惯于从上到下浏览手机屏幕,放在屏幕顶部自然有一定优势。标签页和每个控制中心独有的图标,是这种布局最重要的代表。

20140706074350500

Cüneyt ŞEN的Horner包含了可隐藏菜单,不过它能很妙地从顶部出现。由于明亮的颜色和有关联性的巨大图标,它与整个界面内容形成了鲜明对比。

20140706074412263

Enes Danış设计的Discovery Channel将所有的基本导航和二级导航放在顶部,通过固定的位置来打消用户的困惑。

20140706074426962

HAMZAQUE Designs为Bettertec设计的气流计算APP,巧妙地运用了占据顶部的标签页。此外,它们被设计成黑白对比的色调,和屏幕中其余部分相同。

\

MING Labs&Pierrick Calvez的Shario APP,透露着简洁的矢量风格概念。整个导航通过顶部的几个按钮运转起来。

展开式菜单

对于处理大信息量APP和喜欢创作简洁紧凑界面的设计师而言,展开式菜单确实是一项至宝。这种方案允许你把菜单图标放在任何地方,不过它通常是在左上角。

20140706074453576

Al Powerd的MuSeek是个音乐APP,需要为用户提供大量可视化信息:专辑封面、描述、歌曲名称、曲目列表等等,所以没有空间来放置全屏菜单。在这个例子中,左上角的小图标就是一根救命稻草,平滑地展现出一列相当巨大的菜单。

20140706074504864

Mohammed Alyousfi & Àlex Casabò的Univit UI设计,这是一款优雅的扁平风格APP,使用了一个标准的滑出菜单,通过简单的滑动操作触发。菜单采用了易懂且时尚的轮廓型图标,比各自的标题都大许 多。这种方式使得菜单可以很自然地在设计中发挥作用,同时也提供更好的用户体验

20140706074515551

Alexandre Efimov设计的SVOY APP基于一套艳丽的配色方案,与深色的背景有效搭配。设计师让菜单从左侧展开。吸引眼球且逼真的折叠动画,也给设计增添了一些趣味。

20140706074527143

Attila Szabó的Időkép又是展开式菜单的一个变种设计,利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势,这就是为什么每个项目都提倡它独有的导航类型,可以有效地应对任务,并对用户体验有帮助。

本文转自《独创意网》

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/1204/

(0)
iouedioued
上一篇 2014-11-06 14:59
下一篇 2014-11-06

相关推荐

  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06
  • APPLE WATCH 中文手册:WatchKit Apps--App概要

    原文:Apple Watch Programming Guide:App Essentials Xcode支持用storyboard来创建Watch app的界面。当你在工程中新建一个Watch app,Xcode提供会提供一个storyboard来实现你的UI。这个Storyboard至少有一个Watch…

    2015-06-15
  • 澳洲科学家完成时间旅行模拟

    2009 年 6 月 28 号,世界闻名的物理学家史蒂芬霍金在剑桥举办了一场趴体,香槟美酒应有尽有。霍金邀请了每一个人却无人出席。对此,霍金并不意外,因为他在趴体结束后才寄出邀请函。他说,那是 " 对未来时间旅行者…

    2014-09-05
  • 2018’IIDC信息与交互设计教学研修班开始报名了!

    点击信息与交互设计关注我们!资深教授的专业教学指导+行业专家的实际案例分享力求打造最有深度的课程培训5.10-5.12信息与交互设计专业委员会联合广州美术学院定于5月10日~12日在广州美术学院举办"信息与交互设计教学研修班"。本次研修班将特别邀请清华大学美术学院基础部主任、国家社科基金重大项目首席专家邱松教授就国家社科基金项目申报工作进行详细的解析与交流,同时邀请广州美术学院工业设计学院院长陈江教授;武汉理工大学艺术与设计学院副院长方...

    2018-04-20
  • H5可能会死,但总有人用它带来惊喜

    天猫这个双11邀请函能够让圈内人产生好感,是不是也从侧面印证了这个H5的体内是具有爆发能量的?

    2017-05-16
  • 【交互大讲堂】当交互设计遇到装置艺术

    之前我们讲到的交互设计都是偏重于传统交互,与艺术的互动性没有这么强,通过现在媒体和交互设计,交互装置的互动性也会越来越强。上图这个工作室是日本的一个叫Teamlab工作室,他们致力于新媒体的装置艺术的设计的第一个作品。当用户进入这个身边周围都是球的环境的时候,触碰那个球,球会发出不同的声音。小孩子对绘画都是十分感兴趣的,当孩子进入这个工作室,画上一副自己喜爱的画,用打印投影仪把这些画全部扫描,扫描之后,会形成3D影响投放到媒体上面,这就...

    2018-05-03
  • Banner设计之平面构成的奥秘

    我之前说过要写一系列专门针对电商的三大构成的文章的,而在上篇文章中我已经给大家梳理了一篇关于色彩的文章:六个步骤细说电商banner图设计之色彩的奥秘,那么今天呢,我就接着要给大家讲一篇关于平面构成的文章好了。

    2017-05-19
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 《用户体验草图设计工具手册》丨NOTES

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HappyPharrell Williams - Happy [From "Despicable Me 2"]本书讲了什么本书将指导你如何一步一步地用草图来表达你的设计理念,并介绍了多种草图方法。适合于所有设计行业的从业人员参考阅读,设计组织的领导者也可以参考阅读,包括设计师、可用性专家、人机交互界人士、产品经理人及商业高管等。作者什么来头Bill Buxton,微软首席用户体验...

    2018-05-08