厦门UI培训
达内厦门UI培训中心

15268258619

热门课程

设计师应该如何设计导航栏?

  • 时间:2018-07-31 16:37
  • 发布:转载
  • 来源:网络

设计师应该如何设计导航栏?我们先了解一下导航栏的定义。

一、导航栏定义

导航栏对于用户而言,最大的意义是帮助用户快速找到自己想要的“东西”;对于产品目标,可以通过“信息架构设计”去引导说服用户。好的导航设计符合用户的心智模型,能帮助用户快速了解产品的核心功能以及组织架构,而差的导航设计简直就一场噩梦!

二、Tab 导航栏

Tab导航栏是我们最常见的导航设计,由于功能架构清晰,内容暴露,保证页面内容突出,所以适用场景非常广泛。由于功能和使用场景不同,所以 Tab 导航栏分为底部导航栏和顶部导航。

底部导航栏底部导航栏是“产品信息功能架构“的体现,从内容和功能需求的角度上来讲,底部导航栏是通过对内容和需求的层层筛选以及分类归纳得到,所以基本都用于“一级导航”,选项内容通常在3~5个之间。从交互的角度上来讲,底部导航栏处于用户点击的最佳位置,方便用户操作。从设计的角度来讲,为了帮助用户快速识别一般是 icon 加文字信息的组合方式。

三、抽屉式导航栏

曾经抽屉式导航风靡一时,由于将菜单栏的隐藏,显得画面干净整洁,所以受到了广大设计师的青睐,就连 Facebook 也曾为它做过 A/B test 测试,但最终测试结果是:用户的周平均使用率大幅度下降。这是因为抽屉式侧边栏从交互的角度上来讲,需要进行二级点击,导致信息不足够暴露,使得用户不容易发现,提高了用户的使用成本。

所以用户会经常“懒得点击”或“忘了点击”;而且从交互的角度上,抽屉式导航的内容基本都会采用列表的形式,屏幕上半部分的选项单手的操作的时候比较难点到。

从使用场景的角度上来讲,作为一级导航的话,抽屉式侧边栏导航虽然不够突出,但是可以突出app 的沉浸感,例如“单读”这一类注重内容的 app,或者像“滴滴”这类功能目的比较强的 app。

我们以单读和滴滴为例,单读为了提升沉浸感,侧边栏导航选用了全屏弹出的设计样式,而“滴滴”的功能目的性较强,所以在设计上只弹出屏幕的3/2的位置,让用户看到当前所操作的页面,提醒用户当前的任务和目的。

将侧边栏导航应用在二级导航中,则不需要像一级导航栏一样进行隐藏,所以在信息展现上充分暴露,从使用场景的角度来讲,侧边栏在二级导航中适用于内容品类丰富的页面;

而从交互的角度上来讲,由于展示的信息较多,部分产品会添加上下手势滑动来辅助用户切换内容。设计上一般适用纯文字标签的形式,提高用户的信息获取率。

四、宫格式导航栏

宫格导航优势在于可以展示较多的信息展示而且信息相对独立,所以它的使用场景更加适用于内容信息架构丰富的页面。当内容较多的是也会一定程度上带来选择上的困难,所以这里我们需要对宫格导航里的内容再次进行分类,我们以今日头条和熊猫直播两个 app 为例。

在设计展现形式上,不同的类型的 app 会根据实际的功能业务进行调整,例如今日头条为了能让用户快速选择自己的感兴趣的频道,减少其他因素的干扰,所以选择了纯文字标签的形式。

五、列表导航栏

列表导航由于条目清晰、层级明确被广泛应用,一般应用在二级页面,而在一部分功能性较强的的 app 中也担任着以及导航的作用,例如有 QQ邮箱:

由于所要展示的信息较多,所以会对其内容进行分组断开,帮助提高用户的操作效率,防止用户选择困难。在设计上列表导航的设计特点一般是自左到右 icon 加文字的组合,符合人们的阅读习惯,通常页面内容的优先级排列是由功能的重要性和用户的使用频率决定的。

通过上述的相关内容介绍,想必你已经了解了用户体验设计师该如何设计航航栏的思路。我们通过对主流的 Tab 导航和抽屉式侧边栏导航、宫格式导航栏以及列表式导航的分析,导航设计作为产品或页面中重要的组成部分,设计工作中我们需要从产品的功能信息架构来确定导航栏的等级,结合用户需求以及产品业务目标来选择适用那种导航栏的设计,同时从交互和设计的角度来兼顾用户体验。

上一篇:看似简单的UI设计为何薪资那么高?
下一篇:视觉设计如何才能做到“一稿就过”?

UI设计师如何做到让用户满意的界面设计?

UI新花样:解剖APP图片设计

UI设计师面试题之UI、UE、UID、UED有何区别

UI设计之重创层次结构改善网页视觉效果

选择城市和中心
贵州省

广西省

海南省