五种移动应用导航设计总结

   下图是《移动应用UI设计模式》一书的截图,截图中列出的是一些适合做主导航的导航模式。


  其中跳板式导航、列表式导航和选项卡式导航最为常见,仪表式导航和隐喻式导航一般在拟物化设计或者是工具类的app中比较常见,超级菜单式现在会用到的比较少。由于这个行业发展速度很快,还出现了一些书中没有列出,但是在现在也很常见的导航模式,例如,出现于Android的侧边抽屉式设计,现在在ios中也得到了广泛的应用。下拉式菜单也会作为主导航出现。

  下图是书中列出的一些只适合做次级导航的模式:


  例如:页面轮盘式、图片轮盘式和列表式中的行内扩展式,还有一些超级菜单式导航也被用作次级导航。

  一 :跳板式导航

  跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点。对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为”快速启动板”(Launchpad)。

  一般用做主导航,常用的布局模式3*3(常说的九宫格布局)2*3、2*2和2*1网格。但也不一定要拘泥于网格,也可以按照不同的优先级顺序,放大或者缩小网格,以突显出内容的层次感。


  美图秀秀采用的就是2*3的跳板式导航模式,通过上下、分页来突出优先级。


  ASM采用的是不规则网格的跳板式导航,以突出内容的优先级。

  在跳板式导航和其他导航搭配使用中,一般会被用作次级导航,常见搭配模式:选项卡式+跳板式


  携程的首页中就是使用了以选项卡为主导航搭配跳板式导航的模式

  二 :列表式导航

  最常见的主导航模式之一,又可分为分组列表、个性化列表、行内扩展式列表(这个一般用做次级导航)和增强性列表(是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的)

  列表菜单很适合用来显示较长或拥有次级文字内容的标题。


  ios设置中使用的就是分组列表。


  photo sticker中首页采用了个性化列表的方式


  印象笔记的ios版中使用了列表式导航混合跳板式导航的设计,其中列表式导航中又使用了分组列表和扩展列表。


  Pinterest在搜索中的次级导航采用的就是增强性列表。

  三 :选项卡式导航

  几乎大部分的app都采用的是这种导航模式作为主导航。根据操作系统不同,选项卡位置和设计也不相同。ios的选项卡是在底部 ,Android的则是在顶部。

  其他导航模式和选项卡式导航搭配使用时一般都会用做次级导航。


  Polyvore的ios版, 使用的是底部选项卡导航:


  keep的ios也使用的是底部选项卡式导航。


  Flickr的Android版使用的就是标准的Android的选项卡在顶部的设计。


  Forever 21中使用了选项卡式导航搭配图片轮盘式导航。其中图片轮盘式导航为次级导航。


  Wanelo中使用的是选项卡式导航搭配选项卡式导航,一般这种搭配模式在app中也非常见。


  Snapette采用的主导航为选项卡式导航搭配下拉式导航。


  Snapette采用的次导航为下拉式,其中下拉式导航又以列表的方式排列。


  The Hunt中使用了主导航为选项卡式导航搭配轮盘式导航的模式。


  RIVER ISLAND中采用了主导航为选项卡式导航搭配陈列馆式和抽屉式。

  四 :陈列馆式导航

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


  BBC News的首页导航模式


  淘宝二手中的主导航采用了陈列馆式导航,次导航采用的是抽屉式导航。


  淘宝二手中使用的次级导航是抽屉式导航,在抽屉式导航中又采取了跳板式导航2*3的设计。

  五 :抽屉式导航

  起源于Android的一种导航模式,后在ios中也常见到。一般在Android中用做主导航,在ios中往往会搭配其他的主导航模式做次级导航使用。


  印象笔记的Android版就是采用了侧抽屉的导航模式。


  Foursquare的ios版采用的侧抽屉式导航模式。

  六 仪表式导航

  仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。


  完美衣橱的统计中在次级导航中采用了仪表式导航。


  Mint 和Ego 应用中的仪表式导航(书中的例子)

  七 隐喻式

  这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍等),并对其进行分类的应用中也能看到。


  Candy Crush中的选关采用的就是隐喻式。

  八 超级菜单式导航

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


  这个app中就采用了超级菜单式导航做为次级导航使用。(不好意思忘记这个app的名称啦*……(☆_☆))

  九 下拉式导航

  这种导航模式在手机网站中比较常见,在app中做为唯一性的导航不是很常见。


  Iivingsocial中的ios版首页采用下拉式导航作为唯一的导航。

  总结:

  在未来的趋势中个人认为是淡化各个平台的差异,尽量通过一套设计来无缝的连接各个应用在不同设备上的体验,同时也节省了人力和物力。通过上述的总结也不难发现两个系统的设计差异在日渐融合缩小。所以在选择导航时不应该只局限在”标准设计”中,而是应当本着以”内容”为先的思想来考虑。

时间: 2025-01-23 19:18:38

五种移动应用导航设计总结的相关文章

网页设计指导:五种常用精美网页风格

在浏览精美的网页时,我们都会发现许多网站的风格的有一些共性,总结这些网站风格特点可以为网页设计师提供更精准的设计趋势方向.同时能为我们的网页设计起到指导作用,比如下面的这五种网页风格就经常在许多网站中见到,我们可以看到虽然使用的元素和风格相近,不过每个网站都有自己独特的特性. 使用大标题的网站设计 使用大图片的网站设计 受大自然启发的网站设计 使用素描/插画的网站设计 使用滑动效果的网站

网页设计中常见的五种交互设计错误

  交互设计从来都不是简单的事情.可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划.可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了. 其实大家遭遇的困境都很相似,用户已经很难被单纯炫酷的图片.流畅的悬停效果和出人意料的动效所打动,真正能让他们露出微笑的是持久.令人愉悦的交互设计和用户体验.如果你对于日常的设计中的常见的误区有所了解,自然会有意识地绕过这些坑. 为了更好的设计,我们为你简单总结了一下最常见的5种交互设计的误区. 1.过度的创意 网页设计师绝对不

c语言-只出现C,A,S,T,B五种字符,它们出现的频率依次是2,4,2,3,3,试设计哈夫曼编码

问题描述 只出现C,A,S,T,B五种字符,它们出现的频率依次是2,4,2,3,3,试设计哈夫曼编码 已知某系统在通讯时,只出现C,A,S,T,B五种字符,它们出现的频率依次是2,4,2,3,3,试设计哈夫曼编码 求C语言代码,谢大神帮助 解决方案 这是答案,但代码需要自己编写 解决方案二: 可参考 http://wenku.baidu.com/link?url=I6i3SKAdz4-e56zOCBwzdRvXAv4ERrXA47b9-eVwKCQFexD2pT6AUIGTd3QE6jXqiF1

从网站优化的角度,描述网站导航设计的五个要点

摘要: 清晰的网站导航,是网站设计中一个重要的组成部分,可以更好的降低网站跳出率,使访问网站的用户更完整的了解网站结构.那么,如何打造完美的网站导航,本文从网站优化的角度 清晰的网站导航,是网站设计中一个重要的组成部分,可以更好的降低网站跳出率,使访问网站的用户更完整的了解网站结构.那么,如何打造完美的网站导航,本文从网站优化的角度,描述网站导航设计的五个要点. 第一.导航使用文字编辑 分析:导航栏使用文字编辑,一个最主要的目的就是可以让搜索引擎蜘蛛更容易爬行,使其更清楚的明白网站的结构,及当前

Linux操作系统之rpm五种基本操作分享

  Linux操作系统现在已经成为流行的操作系统,很多的人都开始学习,Linux操作系统包括了很多的专业知识,今天和大家讲讲Linux操作系统中的rpm基本操作.希望你学会本文中提到rpm的五种基本操作知识,会对你有所帮助.rpm有五种基本的操作方式(不包括创建软件包): 安装, 卸载, 升级, 查询,和验证. 下面我们就来逐一的讲解吧. 一. 安装rpm包 rpm 软件包通常具有类似foo-1.0-1.i386.rpm 的文件名.其中包括软件包的名称(foo),版本号(1.0),发行号(1),

网站运营:大型网站常用的五种推广方法

推广|网站运营 大型网站常用的五种推广方法   不同类型的网站,其推广方法的选择也是不同的,对于大型网站而言,那几种方法是最有效的呢?     1.搜索引擎优化:     由于大型网站的信息量非常的大,它的页面可能是上百万个页面,其每个页面都包含有相应得关键词,所以如果这些页面都能够从搜索引擎优化的角度来设计的话,将会帮助网站从搜索引擎中获得非常大的流量.比如IT.com.cn网站,目前每天能够从搜索引擎中获得几十万IP的流量.     平均而言,搜索引擎给网站带来的流量,占其新流量的75%左右

移动APP设计:优秀的APP导航设计形式

文章描述:导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户. [导读]为了在手机屏幕给定的范围内展示出更多内容,优秀的导航栏设计将起到关键性作用,对于不同的操作也当因地制宜地选则不同的设计方案. 导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让

网页导航设计:网页页面导航设计原则

文章描述:设计师的创意是无限的,但是用户的导航需求是固定的,任何样式,只要能够符合导航原则的几点要求,就可以完成用户的导航任务.更加简便的方法就是只要能在页面元素中找到这个页面的页面路径,就相当于满足了导航原则.这样的原则和方法既可以用来检验我们的设计是否达标 著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划,将面包屑撒在来时的路上,虽然当月亮升起时,面包屑被鸟吃掉了,但是现在的互联网设计师们从这个故事中找到了灵感,设计出不会被鸟吃掉的固定"面包屑". 图1:互

网页导航设计:让你的网站导航更扎实更清晰

文章描述:Web导航设计二三事. 导航在Web中扮演一个回答用户"我是谁?""我从哪里来?""我到哪里去"的角色.好的导航是一个网站的主要基石.而在开始设计一个网站或者改版一个网页时,它往往是设计师第一个面临的挑战. 01 导航设计之信息架构 信息架构决定了导航的定性,在设计之前整理清楚内容的信息架构,才能最大程度发挥导航的梳理网站结构.有效传递信息功能.网页结构一共有多少层级关系?是否存在上下层关系?各类别标签之间的关系是并列关系还是相关联的?