翼狐> 设计资讯> 设计访谈>

如何快速掌握各种移动导航设计方式?

如何快速掌握各种移动导航设计方式?
3051人浏览
2016-12-23

摘要:平常我们去商场或者景点逛的时候,通常会看到整个景区或者整个商场的导游图,能让我们知道身处何地并且快速的找到目的地。投射到一个虚拟的产品上面,同样是一个“商场”或“景点”,为了让用户能够顺利的在产品中畅行,则必须为用户提供一个有效的导航系统,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。产品的导航系统,是产品的信息结构在用户界面上的展现方式。


  介绍APP导航设计的文章中至少会提到数十种导航方式,种类名称繁多,不是很容易理得清。那么问题来了,怎样才能更加更快速、系统地掌握各种导航设计方式呢?在本篇,按照结构化思维对各种APP导航设计进行分类整理,最终形成三个大类:分层结构、扁平化结构以及内容或体验驱动型,提供另外一种认识APP导航设计方式的思路


  一、层次结构导航


  从杜威十进制分类法到动物界的门纲目科属,庞大的信息通常都会被分类到类别,以及子类别、子子类别...中去,这就是层级结构。层级结构模型是人们最容易理解的分类结构模型,层级导航也是APP中最常用的导航模型之一,本篇将列表式导航、宫格式导航(跳板式导航)、陈列馆式导航归为层级导航结构,它们有共性也有细微的不同:


  1、列表式导航


  列表式导航中的每一个列表项(注:iOS设计指南中成列表为表格视图)都是进入子功能的入口,用户通过在每个页面选择一次进行导航,直至到达目标位置,并且模块之间的切换必须返回至列表主页当中。列表相当于一个一行一列的表格,列表项中既可以填充文字图片,也可以填充按钮或者展开某一项。


  iOS中设置是经典的利用列表导航的应用,QQ邮箱是为数不多用列表式设计做主导航的应用


iOS设置 & QQ邮箱


  列表中可以填充更多的列表项,来扩展有限的屏幕空间上能够容纳的入口数量,可以用来展示信息记录/联系人列表等某一类别下的列表项记录


mono 中的小组列表 & 一直播中粉丝列表


  列表式导航也是最常见的导航方式之一,更多被用来做次级导航,多用在个人中心、设置、内容/信息列表中


简书  & 美团,“我的”用列表导航做次级导航


  2、宫格式导航(跳板式导航)


  宫格式导航可以看做列表式导航的变形,同样属于层级结构导航,不同于列表导航地方在于宫格式导航是以N行N列的表格来呈现,同时表格中元素以图片为主。宫格中一个格子代表一个功能/模块入口,从一个模块到另一个模块用户必须原路返回几步(或者从头开始),然后做出不同的选择。宫格式导航曾经在APP中非常流行,主要是因为它能容纳更多的功能入口,同时跨平台不受平台限制(移动互联网刚兴起的时候,每个平台的交互规范有很大的区别)



  早期的Facebook与 LinkedIn就是采用宫格式导航做主导航(2011年)


  美图秀秀、微店是现在位数不多的仍旧用宫格式导航做主导航的应用之一,微软识花这款小工具首页也是用宫格式导航产品设计,美图秀秀与微软识花都是工具型产品,而微店中采用宫格式设计展示最常用的功能入口


美图秀秀 & 微软识花 & 微店


  当前,很少有产品会用宫格式导航做主导航,主要是利用宫格式导航的扩展功能来做次级导航,与标签式导航以及其他类型的导航模式共同构成整个应用的导航系统


支付宝 & 豌豆荚一览


  3、陈列馆式导航


  陈列馆式导航可用来呈现实时内容,比如新闻、菜谱、文章或照片,可以采用网格布局(比如一直播和ins)或轮盘布局(比如格瓦拉电影),还可以采用幻灯片模式进行展示。陈列馆式导航本质上也是另外一种层级导航结构,进入另外一个内容详情之前,必须先回到主界面重新点击进入。相较于列表导航、宫格式导航的不同在于,陈列馆式导航有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式)


  一直播(网格布局展示主播信息) & 格瓦拉电影(采用轮播布局展示电影信息)


  相较于列表导航、宫格式导航,陈列馆式设计展示了彼此独立、内容之间无层级关系的内容项


ins & 开眼


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


LOFTER和厨房故事都采用瀑布流网格布局展示内容信息


  注意:宫格式导航与陈列馆式、列表导航的区别是后两种形式的导航中一个宫格/列表为菜单/功能入口,而陈列馆式导航中展示的更多为彼此独立的实时内容


  层级导航的优缺点:


  优点:能应变大量的类别、功能和项目;组织方式常见,容易理解,可直接对内容进行交互;直观且占用屏幕空间小;列表展示很适合用户自定义分类


  缺点:主功能只有在最顶层页面才会被显示出来,不像标签栏,每个页面都可以看见;主功能和分类以及内容之间的切换有些麻烦。必须要先回到顶层页面,然后再依次点入


  二、扁平结构导航


  在扁平信息架构的应用中,用户可以从首页目录直接切换到另一个类目视图,因为所有的分类都可以从主屏直接访问。iOS与Android中分别提供标签栏以及选项卡作为支撑扁平导航的控件,越来越多的应用结合两者进行整体导航的设计


  1、标签式导航


  标签式导航对应iOS中的标签栏,是现在最常见的主导航模式。最大的好处就是扁平化整个应用的导航结构,所有主类别视图都可以在顶层视图进行切换,用户可以直接从一个类别的视图切换到另一个类别的视图,利于用户在视图之间的频繁切换,而不需要像层级导航那样回到主页面重新进入,直观清晰、易于用户理解


iOS版网易云音乐和Instagram都用标签栏做主导航


  标签栏标签最好不多于5个,当多余四个时,将剩下的功能全部置于“更多/我的/个人”中


网易严选 & 知乎


  标签导航的变形:标签栏中加入功能按钮,一般是一个应用中最核心功能的功能入口或功能入口集(点聚式),多为发布类按钮,例如:Instagram、LOFTER、微博、QQ空间等可以快速发布内容


  nice(快速发布功能入口) &  新浪微博 (子功能集入口)


  2、固定选项卡


  固定选项卡是安卓系统提供的三种顶级导航方式之一,与iOS系统中的标签栏相似,同样的它能够扁平化整个信息结构,并且支持左右滑动切换到不同的视图。随着移动端交互设计的发展,Android与iOS两大阵营的相互借鉴、完善,交互设计规范越趋于相似,你会看到大量安卓应用也采用标签栏作为主导航,iOS应用中采用顶部选项卡式导航作为次级导航


  Android版网易云音乐以及iOS版QQ音乐都用固定选项式导航做主导航

1 2

收藏 | 20

设计教程
;