UI设计知识系列 四、界面中的“导航布局”
导航布局,是UI设计时需要重点考虑的部分。一款App的导航可以被设计成多种形式的,导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉,不假思索地去使用APP,并且完成用户想要完成的任务。
一款产品从初期架构到上线会经历无数次的改版。有可能是因为商业模式的改变,也可能是产品本身的架构不能满足业务需求…… 产品在不断的迭代和更新。每进行一次结构上的调成,成本都是非常大的。所以,在设计之初,我们就要慎重考虑app的导航框架设计。
单独说导航框架包含:标签、列表、网格、屏幕轮播、抽屉导航等等各种形式。但是,导航的设计与产品所在行业、产品的特点、产品的商业目标有着密不可分的关系,或者说导航是完全服务于应用的。所以本着服务于App的目的,我把导航总结分类成了三个类别:同级导航、层级导航和内容式导航。
这篇文章也会按照导航的目的去展开。
一、同级导航
同级导航,一般都是运用在软件的入口位置或者是一级界面上,方便用户在同级界面之间进行来回切换。
这一个类别的导航,是应用最为广泛的一种,它的优势在于所有的内容都是平面化的,铺开在用户面前。不论用户怎样切换,都能清楚的知道自己现在所处的界面层级,不会迷失方向。
- 标签导肮
日常所接触的App中,很多都使用的是标签导航。特点是,最底部的标签是固定不动的,通常是以图标或图文组合的形式出现。点击标签,界面的内容区会随之切换。而图标会呈现出颜色上的变化。
标签导航可以有效地减少界面的层级,不会给用户带来理解上的困难。直接显示入口,可以非常有效地提高产品的转化率。
由于App内容不断增加,也引申出来了另外一种动态的导航方式。当顶部的导航栏标签过多时,会进行部分隐藏,并支持左右滑动。
这样的导航方式常见于新闻资讯类的App,因为在这类应用上细分类别过多,信息量过大。
- Tab导航
Tab导航往往伴随着标签导航一起出现,位于界面的顶部。它可以针对当前的界面做一些调整,或者对于当前界面的内容进行分类浏览。
它的优势在于,在不必要增加层级的情况下,可以在一个界面放置更多的内容并且不会影响界面的整齐度,也不必改变用户的操作习惯。
- 网格导航
就是把应用图标、功能图标等入口平铺在视图中。
网格导航通常情况下是支持滚动屏幕浏览和用户自定义排版的。它的优势在于不同的入口都排列在同一个界面中,易于操作,对于服务型和工具型的应用非常的友好。但是缺点也是各个入口没有主次,对于用户提取信息有非常大的阻碍。
二、层级导航
与同级导航不同,同级导航将入口平铺在同一个平面上比之层级导航更加具有逻辑性。层级导航可以一直向下滚动页面,多数用来展示而不是作为主要入口出现。所以相比之下,同级导航需要将更加重要和高频行为的入口展示出来。
- 抽屉式导航
也称汉堡导航,把标签集合在一起,隐藏在抽屉中,会在点击抽屉图标时展示出来。和标签栏一样,被选中的图标会呈高亮状态。抽屉栏也有横向从左右两边拉出的,这种一般称之为侧边栏导航。
抽屉里的项目样式不限定,常见的是文字列表或者带图标的列表。
抽屉式导航的优势是可以节省更多的空间但是会将功能隐藏起来,需要多一步地操作,很多功能不明显,也或多或少影响了使用感。
ars
- 列表导航
列表导航是常用的导航之一,常见于功能比较单一的App。列表的长度没有任何限制,可以无限地通过滚动屏幕浏览,列表中的内容形式有:文字、图标和文字混合、图片、视频缩略图等等。遵循由上至下的阅读习惯方式,信息排布简单,易于用户理解与阅读。
三、内容式导航
这类导航倾向于直接将内容展示给用户,多数出现在资讯、社交类功能性不是非常强的软件之中。用户可以通过简单地浏览产生对于该应用或是内容的直观感受,它的二级页面多数是对于内容导航所展示的一个承接。
- 轮播式导航
用户可以通过左滑与右滑切换页面,适合页面层级少的应用。轮播导航的屏幕下方通常会有一组分页点,所处页面会呈现出高亮状态。
轮播的优点是交互层级低,一般不需要用户更多的点击操作同时可以保证界面的整洁度,可以提供非常流畅的使用感。但缺点是对于设计师的审美要求就比较高,如果构图和排版存在问题的话,会导致页面非常糟糕。
- 卡片导航
卡片导航包含一组聚合在一起的矩形,将他们通过不同方式排列。矩形内含有与产品相关的信息,比如,照片、文本、链接等等。常见的排列形式是列表、网格、轮播、泳道,不同的排列方式也展现出了不同的效果。
卡片的优势是清晰直观并且简单易懂,对于用户来说没有理解上的压力,可以非常轻松的操作。劣势就是卡片占据的空间很大,对于用户来说有一定的视觉压力,就需要设计师对于卡片有一个合理的安排。
由卡片导航引申出来了许多种不同的导航方式,例如接下来讲的泳道。
- 泳道导航
泳道是一组垂直排列的轮播式导航,每个轮播可以独立水平滚动。泳道的交互形式主要是水平滑动、垂直滑动和点击。
泳道的优势在于更加具有交互感也可以展示更多的内容,但是泳道的使用需要非常谨慎,因为被隐藏的内容难以被发现,需要进行一些引导,而且要考虑到内容的优先级。
- 陈列式导航
陈列式导航把同级的内容并列在同一个界面里,按照卡片的形式横向、纵向排列,可以向下无限延伸,用户可以滚动屏幕浏览。
优势是它可以很大限度地呈现内容,对于电商类App很友好。但缺点在于信息量大对于用户来说会产生一定的压力。
每一种导航都具有它自身的特质以及优缺点,在设计的过程中某一种导航的出现都不是固定的、死板的,要灵活地去组织各种导航,让它们发挥出来最大的功效。
联系我:nini868@163.com