UI界面设计 ·

案例分析:app导航设计的11种类型

App导航的设计对于突出产品核心功能,扁平化指导用户操作有着极为重要的作用。常见的导航设计类型有:标签式导航(底部Tab)、点聚式导航、选项卡式导航(顶部Tab)、宫格式导航、列表式导航、幻灯片式导航、抽屉式导航、侧边栏导航、下拉菜单导航、瀑布式导航及陈列式导航11种。下面以几款APP来分析各种导航类型的优劣。

京东金融APP:

一.底部标签导航+顶部滑动选项卡+内容列表式导航

评价:这种混合导航的方式,既对核心功能作了明确分类,又通过3个分类选项卡实现了主要功能的切换,配合内容列表式呈现,入口可见性较高,整体用户体验较好。

底部标签导航:分为首页、资讯、服务应用、我4类,清晰将其核心功能分类,这种导航设计将同级重要的功能放置在最核心地方,方便用户频繁切换,操作不容易迷失。对于核心功能突出且功能繁多的APP而言,这种设计十分合理便捷。缺点是,图标+文字的标签导航会占据较大的空间,页面可视范围会缩减,而且标签最多只能放置5个。

顶部滑动选项卡导航:将整个app功能分为3大版块,理财、白条、支付,左右滑动即可快速切换内容。因为只有3个标签所以可见性较好,操作方便。后面将对多标签选项卡进行分析。

内容采用列表式导航:这种类型导航清晰可见、排列规整、辨识度极高,既可以展示较多功能入口,本身也可显示较长的1、2级标题内容,右侧还可配合展示次级内容,对用户做出一些指向性说明。缺点是,这种类型导航灵活性不高,只能通过简单排序方式展现或配合色块来区分重要性,如果排列较多,容易产生视觉疲劳。

二.1级宫格式导航+2级:下拉菜单式导航/滑动选项卡导航/陈列式导航/瀑布流式导航

评价:服务中将常用功能入口作了分类展示,且以宫格导航方式呈现,分类清晰,易于寻找。但因功能较多,又形成了多层级的页面跳转。2级导航使用了多样的导航方式,以适应不同内容的呈现,整体层级感较强,但入口太多,层级页面嵌套也较多,功能选项设置繁多,操作起来稍感繁琐。

宫格式导航:扩展性较好,可以展示较多的功能入口,甚至可以通过左右滑动来展示更多功能。缺点是入口间无法跳转,不能直接展示入口内容,如入口太多会产生眼花缭乱的感觉。

下拉菜单式导航:不占空间,容易嵌套在其它导航中使用。缺点是可见性较差,操作步骤较多。这种导航方式常常被滑动式选项卡所代替,但在其它位置被占用时,就只能使用下拉菜单了。

 

上图1-瀑布式导航:这种导航也可以看作是一种布局方式,常用来展示图片,下拉自动加载,有较好的浏览体验,且能营造一种氛围感,给人一种沉浸感。排版方式可规整也可随意布置营造错落感。但不适合层级复杂的结构,且内容较多时容易产生疲劳感。

上图2-陈列式导航:也可以作为一种布局方式,对同类进行聚合,直接排列展示,作为入口吸引用户点击。缺点是有数量限制,不宜太多。

上图3-2级标签导航+顶部滑动选项卡导航:京东APP中有很多2级页面叠加采用了底部标签导航,因为采用的是Web的开发方式,切换流畅度不比原生方式流畅,需要等待网络加载。在结构上通过分类形成了明晰的功能区别,但也会造成层级关系复杂,页面跳转繁琐。此处顶部滑动选项卡极具代表性,这种导航方式占据空间小,类别数量不受限制,左右滑动的操作非常方便。但致命的缺点在于,数量太多,越往后的选项因为可见性差,点击量会很低。混合底部的2级标签导航,造成整个页面结构复杂、内容繁乱。建议是将“购物车、我的”全部集合到1级“我的-订单管理”里。从用户角度来说更为便捷,符合操作心理。

 

天气:幻灯片式导航      

QQ:抽屉式导航      

大众点评:侧边栏式导航

上图1-幻灯片式导航:适用于图片或整块内容的并列展示,左右滑动切换内容。单页面内容简洁、整体性强,浏览流畅,方向感好。但不适合展示太多内容,一般数量不宜过大,最好在7、8个以内,否则会产生操作疲劳。

上图2-抽屉式导航:节省页面空间,让用户注意力集中到内容上,可扩展性好,导航数量不限。缺点是隐藏栏可见性差,渗透率低,不适合频繁切换的应用。因为QQ软件的特殊性,导航较少,且以固定在左上角,用户相对容易找到唤起。

上图3-侧边栏式导航:因大众点评产品类别多样化、细分种类繁多,这种侧边栏导航,容易呈现整个结构。相对于抽屉式隐藏的特性,直接显示出来,便于用户发现寻找,扩展性好。但会挤占较大空间,无法显示次级内容。大众点评二级菜单采用图标+小标题的展现方式,增强了趣味性,更直观。这种导航类型适用于分层结构复杂,且分类重要的产品。

 

综上10种常用导航方式,在实际设计使用中,应该根据产品的特性来混合使用,单一导航肯定无法满足丰富多变的产品需求。但也不能因为追求展示形式的多样化,造成导航搭配混乱的感觉。适合自己产品的才是最好的。

参与评论