ui设计中导航形式和导航设计技巧

作者: Mooooon_n | 来源:发表于2017-07-17 18:25 被阅读510次

导航是页面结构和界面设计的重要一部分，它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径，下面举一些案例浅谈一下常见的导航形式和一些导航设计的技巧。

七种常见的导航形式

七种常见的导航形式：标签式导航（底部和顶部）；抽屉式导航；菜单式导航；平铺式导航；点聚式导航；列表式导航；网格式导航。

1. 标签式导航（底部和顶部）

标签导航是目前最常见的导航形式，也是最不容易出错的导航信息。标签式导航有底部导航和顶部导航两种，底部导航用于全局导航，顶部导航用于二级导航；还有一种底部导航的变种，就是突出一个中心功能的舵式导航。

这个大家都很熟悉，不再举例。

2.抽屉式导航

当某个产品只有一个核心功能，其他功能相比都相当的低频，这个时候采用标签式导航就会分散用户的注意力，所以产品的结构形态决定了抽屉式导航是最佳形态。

例如，滴滴的导航系统设计。

3.菜单式导航

这种导航形式一般不会用于全局导航，多用于浏览类的APP的二级导航。

用户一般每次只浏览一种类型的内容，像刷微博，女生们刷美妆时就会一直刷下去。

菜单式导航还有一个好处就是节省屏幕空间，它用一个展开的图标，将几个甚至几十个分类都集合在一起，在寸土寸金的移动端屏幕显得尤为重要。

滴滴的地区选择页面，微博和花瓣的二级导航都采用菜单式导航的形式。

4.平铺式导航

打开iOS的自带天气应用，你发现整个页面都是关于某个地域的天气形式，想查看其它地区的天气就左右滑动来切换，这种导航形式就是平铺式导航。平铺式的我们用天气APP去倒推什么情况下该使用平铺式导航：①只有一个维度的区别，像天气应用的地域；②整个APP只有一种内容展示，或者某个模块功能里只有一种内容展示，天气APP只用来展示天气。

为了暗示用户可以左右滑动，一般会在页面底部放在页面控制器，或者采用堆叠的设计。

除了天气应用，还有前段时间很火的左右滑动来筛选好友的社交软件，用的都是平铺式导航。

5.点聚式导航

点聚式导航一般会作为辅助导航，多用于UGC（用户原创内容）的APP，像微博、path...。它将多个功能聚合在一个图标里，节省屏幕空间。

6.列表式导航

几乎所有的APP都有这种类型的导航，列表式，从上到下的展现，符合移动端瀑布流式的浏览方式。这种类型的导航设计形式比较多样，可以是纯文本、可以是图标加文、纯图片、左图右文、右文左图。几乎满足了所有内容的展现形式。

好奇心日报采用图标加文字的形式，多用于个人中心。一个APP的电影模块采用了纯图片形式，这种多用于富媒体内容的展示；QQ音乐采用了左图右文的形式；腾讯新闻采用了左文右图的形式。根据不同的情景和内容，要采用不同形式的列表时导航。

7.网格式导航

网格式导航有两种，一种是作为内容的展示，像网易云音乐用来展示歌单，音悦台用来展示MV。它们都是以图片为主的内容展示，具有较强的视觉冲击力。

另一种是作为功能的入口，像美团首页banner下的美食、电影、酒店等入口。它们以图表加文字说明的形式呈现，这种排布能够节省屏幕空间，在有限的空间就能排下四个甚至是八个的功能入口。

网格式导航多用于二级导航，很少见于全局导航，因为用户使用完一个功能必须跳回到首页才能继续使用其他功能，这样会加重操作成本，不符合扁平化用户任务路径的原则。凡是都不是绝对，如果每个功能之间独立性比较高，用户每次只会使用其中的一个功能，这时候将网格式导航最为主导航就没有问题，像美图秀秀就采用网格式导航作为主导航。