UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

用户体验设计师该如何设计航航栏?

  • 发布:小叮当
  • 来源:设计教程
  • 时间:2018-09-05 18:39

导航设计在产品或者页面中担任重要的角色,用户体验设计师该如何设计航航栏?设计师在不同的场景下帮助用户快速找到自己想要的东西。如何区分在什么样的场景中使用那种导航设计是我们作为设计师必须要了解的,接下来我们会讲到我们经常用的 Tab 导航栏、抽屉式侧边导航栏、宫格式导航栏以及列表式导航栏。

用户体验设计师该如何设计航航栏

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

一、导航栏定义

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

二、Tab 导航栏

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

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

三、抽屉式导航栏

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

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

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

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

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

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

四、宫格式导航栏

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

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

五、列表导航栏

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

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

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

以上就是关于“用户体验设计师该如何设计航航栏”的相关介绍希望能帮到您。想了解更多培训课程请关注达内ued培训机构

免责声明:以上内容仅作为信息传播,文中部分信息来源于互联网,仅供阅读参考。

预约申请免费试听课

上一篇:用户界面设计包含什么内容?
下一篇:如何制作人物小场景插画?

掌握UED设计团队设计流程提高工作效率

零基础如何学习好ued设计?能学会吗?

设计师告诉你LOGO设计有哪些技巧?

设计创意海报的10个技巧

选择城市和中心
贵州省

广西省

海南省