导航是页面结构和界面设计的重要一部分,它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径,下面举一些案例浅谈一下常见的导航形式和一些导航设计的技巧。
七种常见的导航形式
七种常见的导航形式:标签式导航(底部和顶部);抽屉式导航;菜单式导航;平铺式导航;点聚式导航;列表式导航;网格式导航。
1. 标签式导航(底部和顶部)
标签导航是目前最常见的导航形式,也是最不容易出错的导航信息。标签式导航有底部导航和顶部导航两种,底部导航用于全局导航,顶部导航用于二级导航;还有一种底部导航的变种,就是突出一个中心功能的舵式导航。
这个大家都很熟悉,不再举例。
2.抽屉式导航
当某个产品只有一个核心功能,其他功能相比都相当的低频,这个时候采用标签式导航就会分散用户的注意力,所以产品的结构形态决定了抽屉式导航是最佳形态。
例如,滴滴的导航系统设计。
3.菜单式导航
这种导航形式一般不会用于全局导航,多用于浏览类的APP的二级导航。
用户一般每次只浏览一种类型的内容,像刷微博,女生们刷美妆时就会一直刷下去。
菜单式导航还有一个好处就是节省屏幕空间,它用一个展开的图标,将几个甚至几十个分类都集合在一起,在寸土寸金的移动端屏幕显得尤为重要。
滴滴的地区选择页面,微博和花瓣的二级导航都采用菜单式导航的形式。
4.平铺式导航
打开iOS的自带天气应用,你发现整个页面都是关于某个地域的天气形式,想查看其它地区的天气就左右滑动来切换,这种导航形式就是平铺式导航。平铺式的我们用天气APP去倒推什么情况下该使用平铺式导航:①只有一个维度的区别,像天气应用的地域;②整个APP只有一种内容展示,或者某个模块功能里只有一种内容展示,天气APP只用来展示天气。
为了暗示用户可以左右滑动,一般会在页面底部放在页面控制器,或者采用堆叠的设计。
除了天气应用,还有前段时间很火的左右滑动来筛选好友的社交软件,用的都是平铺式导航。
5.点聚式导航
点聚式导航一般会作为辅助导航,多用于UGC(用户原创内容)的APP,像微博、path...。它将多个功能聚合在一个图标里,节省屏幕空间。
6.列表式导航
几乎所有的APP都有这种类型的导航,列表式,从上到下的展现,符合移动端瀑布流式的浏览方式。这种类型的导航设计形式比较多样,可以是纯文本、可以是图标加文、纯图片、左图右文、右文左图。几乎满足了所有内容的展现形式。
好奇心日报采用图标加文字的形式,多用于个人中心。一个APP的电影模块采用了纯图片形式,这种多用于富媒体内容的展示;QQ音乐采用了左图右文的形式;腾讯新闻采用了左文右图的形式。根据不同的情景和内容,要采用不同形式的列表时导航。
7.网格式导航
网格式导航有两种,一种是作为内容的展示,像网易云音乐用来展示歌单,音悦台用来展示MV。它们都是以图片为主的内容展示,具有较强的视觉冲击力。
另一种是作为功能的入口,像美团首页banner下的美食、电影、酒店等入口。它们以图表加文字说明的形式呈现,这种排布能够节省屏幕空间,在有限的空间就能排下四个甚至是八个的功能入口。
网格式导航多用于二级导航,很少见于全局导航,因为用户使用完一个功能必须跳回到首页才能继续使用其他功能,这样会加重操作成本,不符合扁平化用户任务路径的原则。凡是都不是绝对,如果每个功能之间独立性比较高,用户每次只会使用其中的一个功能,这时候将网格式导航最为主导航就没有问题,像美图秀秀就采用网格式导航作为主导航。
导航栏设计技巧
1.超大导航栏
适用于功能单一、强导航功能的界面
优点是:视觉集中、功能突出
缺点:浪费首页面空间、内容展示区域变小
举例:回家吃饭app,大的导航栏占据屏幕三分之一的空间,突出了产品分为营造出一种人情味
2、加入显眼的搜索框
适用于强搜索功能的界面
优点是:搜索功能突出、可操作性强
缺点:占据视觉焦点,影响内容区域的展示
举例:亚马逊app,搜索框突出展示
3、限制导航内条目数量
适用于功能单一、强导航功能的界面
优点是:简化导航标签数量,可读性强,配合贴近用户的文案,简洁清晰、操作便捷;将最关键、最重要的导航类目让用户看到,才是导航所应该做到的事情,换句话来说,就是关键内容驱动导航分类。
缺点:不能展示完全导航标签
举例:youtube app
4、动态导航机制
在这个用户体验高度个性化的时代,导航的玩法可以更加多样。登录了之后,会发现导航开始围绕着你的信息进行了调整,导航栏从通用的条目变为更贴近你的个人情况的样式,目前淘宝做到了根据用户的搜索记录匹配相关的商品推荐。
5、长滚动页面上使用悬浮导航
对于长滚动页面而言,导航设计是否可靠是一件颇为重要的事情,无论导航是在顶部、侧边栏还是在底部,它最好能够悬浮置顶,不论用户滚动到哪个地方都时刻存在于界面上。让用户尽量轻松自然地同你的网站进行交互,而不需要费力。交互越是方便,用户便越是会在app中四处探索,自然而然的,用户在网站中停留的时间就越长。
举例:回家吃饭app、美团外卖app,严选app...比较常见
6、卡片导航
适用于产品功能集的app
举例:艺龙app
7、导航动效
在导航点击后出现呼吸感的动效,刺激点击欲望,例如陌陌直播功能导航