读后总结(第12篇 - APP导航设计)

如果没有导航,你产品中的内容和功能就相当于一盘散沙,不成体系,用户会在里面迷路,不知所措。一个好的导航,能够扁平化用户的任务路径,减少用户操作成本,从而提高用户体验。

下面来列举APP导航类型。

分别有:1.标签导航;2.抽屉式导航;3.菜单式导航;4.平铺式导航;5.列表式导航;6.网格式导航


1.标签导航

用于:操作频率高的导航

优点:常见的底部标签导航,无论用户单手还是双手操作都能轻松点击,从而实现各功能模块之间的快速跳转

缺点:根据手机屏幕大小,底部标签导航最多可放5个icon,可拓展性不强


底部标签导航(微信&支付宝)

底部导航常用于全局导航。


舵式导航(Lofter&微博)

其实就是底部标签导航,只不过为了突出中间的功能,将中间标签图标设计的比较突出,鼓励用户多使用该功能。


顶部标签导航(滴滴出行&网易乐音乐)

顶部导航常用于二级导航。


特殊情况:当标签导航包含“更多”选项的选项卡时

当标签数量超过5个时,不妨考虑把最优先的前4个标签显示出来,而多出来的其它标签则统一放置到“更多”选项下。


“更多”选项则可以或链接向一个新的导航页面或作为一个下拉菜单项。

针对上述方案,一个更精致的做法是使菜单选项适应屏幕宽度来显示,尽可能显示更多的选项,多余的部分则放到一个“更多”选项下。这种做法显然要比上述更加灵活,尤其在屏幕尺寸不大不小的时候。


如果程序中有不少导航项,而各项之间的优先级却并没有大的差别,此时使用“更多”选项的做法就不再合适了,一个取代的方法是使用一个可滚动的视图将所有导航项显示出来。 


缺点:在不滚动的情况下用户依然只能看到前面几项,其他项还处于隐藏状态。

需要注意的是,在视觉设计上,你需要确保能提供足够的视觉线索来引导用户横向滚动后还能看到更多的元素。

 

2.抽屉式导航

抽屉,是整理收起的意思,就是把除了核心功能以外的低频操作都放到一个抽屉里,使得用户获得沉浸式的体验,而且能够集中用户的注意力,让用户去更好的完成核心功能,不被打扰。

用于:当某个产品只有一个核心功能,其他功能都很低频。

优点:使得用户获得沉浸式的体验,而且能够集中用户的注意力,让用户去更好的完成核心功能,不被打扰;拓展性高

缺点:可见性不足


抽屉式导航(最美应用&Uber)


3.菜单式导航

用于:这种导航形式一般不会用于全局导航,多用于浏览类的APP的二级导航,用户一般每次只浏览一种类型的内容,这种下拉的设计能有效的表明其列表项或指向当前页的同级页或指向当前页的子页面。

优点:节省屏幕空间,它用一个展开的图标,将几个甚至几十个分类都集合在一起。


菜单式导航(微博&花瓣)


4.平铺式导航

打开iOS的自带天气应用,你发现整个页面都是关于某个地域的天气形式,想查看其它地区的天气就左右滑动来切换,这种导航形式就是平铺式导航。

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

用于:整个APP只有一种内容展示,或者某个模块功能里只有一种内容展示。


平铺式导航(天气APP&最美应用)


5.列表式导航

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


列表式导航(QQ&新浪新闻)


6.网格式导航

网格式导航有两种,一种是作为内容的展示,像网易云音乐用来展示歌单,音悦台用来展示MV。它们都是以图片为主的内容展示,具有较强的视觉冲击力。另一种是作为功能的入口,像美团首页banner下的美食、电影、酒店等入口。它们以图表加文字说明的形式呈现,这种排布能够节省屏幕空间,在有限的空间就能排下四个甚至是八个的功能入口。

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


网易云音乐(作为内容展示)& 美团(作为功能入口)& 微店(作为主导航) 


参考文献:APP导航设计,看这篇就够了...

评论
热度(10)

© 土豆妹儿 | Powered by LOFTER