可靠的导航设计需要帮助用户达成目标,提升页面的转化率

图片[1]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

导航设计千变万化,但能同时兼顾易用性、易用性和足够舒适体验的导航模式并不多。可靠的导航设计需要帮助用户实现目标、查找内容并增加页面转化率。设计不合理的导航对用户体验是灾难性的。最直接的影响是用户无法再快速轻松地找到想要的页面和内容,间接影响网站的转化率和用户的留存率。

精心设计的 UI 始于精心设计的导航。导航是用户从A点到B点的重要向导。在设计过程中,设计师不仅要保证路标足够清晰,还要让导航过程足够流畅和流畅。在整个设计过程中,导航设计应该具有一定的优先性,因为它不仅在整个网页的信息架构中起着近乎骨架的作用,而且在整个体验设计中也起着重要的作用。在原型制作阶段,导航的设计应该已经打磨清晰,需要的设计材料要集中,以确保从开发之初就可以完成导航。

在众多导航设计中,不乏经过反复设计和验证的优秀设计模式。在今天的文章中,我将选择其中最突出的 5 个供大家参考。

1、具有平滑运动的下拉导航菜单

图片[2]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

下一代菜单是UI设计中最常见的设计元素,作为一个扩展性很好的控件,被触发后展开显示更多选项和呈现更多内容。下拉菜单有许多不同的派生样式,在导航设计中也很常见。在很多传统导航中,导航元素的下拉菜单需要点击触发,但现在更多的设计师选择在光标悬停在导航元素上时触发,这样可以省去用户的省心和省力。

为了保证导航的干净明了,现在网页的主要导航类别通常不会太多,控制在4~6个选项中导航样式的自定义,并使用下拉菜单承载次要导航元素,节省了节省空间,让信息层次更清晰。

这种设计模式对用户来说并不陌生,导航起来也相当方便。非常适合多层次和大量选项的导航需求。值得注意的是,当光标悬停触发下拉菜单时,显示的动态效果应该足够微妙导航样式的自定义,以减少用户打开的突兀感,让体验更加出色。

2、汉堡菜单+侧边栏

图片[3]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

iOS 上的汉堡菜单加弹出侧边栏,是平台上非常常见的导航设计模式。虽然有数据显示,汉堡菜单和默认隐藏侧边栏导航的打开率不如常见的显式导航,但在体验上却有着得天独厚的优势,让整个界面更加简洁、干净、不那么突兀。用户点击汉堡菜单,侧边栏导航从侧面滑出,用户选择想要点击的选项。

汉堡菜单和侧边栏的结合特别适合响应式网页设计,比如平台的官方Gmail应用,和,都遵循这种设计。

隐藏的侧边栏导航,在很大程度上可以让用户更加专注于主界面内容,让界面更干净。虽然打开率不如显式导航,但很多时候这种隐藏式的设计更符合实际需求。

3、浮动固定网页导航菜单

图片[4]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

浮动固定导航菜单在越来越多的网页设计中出现,当用户滚动页面向下浏览时,浮动固定导航悬停在页面顶部,随着用户浏览,它们始终可见,并且用户无需滚动到顶部即可点击导航跳转。

目前,浮动的固定导航菜单已经成为一种常见的导航设计方式。电商和产品网站往往会选择这样的导航设计,方便用户快速跳转。这种导航设计的优点是快捷方便,用户在网站不同页面之间跳转的需求比较大,所以这种设计可以省去很多麻烦。根据 and 进行的研究,79% 的在线购物用户在遇到糟糕的浏览和导航体验后将永远不会返回。由此可见便捷导航的重要性。

4、深度定制的大型导航菜单

图片[5]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

这里我们称之为深度定制的大导航菜单,更贴近标签的设计,它们大多分为两个层次,不同的选项被组织到不同的标签中。选项卡中携带的导航选项比下拉菜单更大,设计更直观,更易于点击选择。有些选项甚至包括文字和说明,以便用户更轻松地选择。

这个超大导航菜单中的子选项尺寸够大,视觉设计也够突出,可见性很强,用户很难选错。

超大的导航菜单可以容纳更多的导航项,更直观。与开头提到的下拉菜单导航类似,当光标悬停在选项卡上时,会自动显示以下选项。根据研究,导航菜单越大,越受欢迎。

此导航菜单适用于可访问性要求较高的页面,对视障和高级用户都更加友好。另一方面,这种导航方式也为设计师提供了更多的发挥空间。

5、响应式卡片网格导航

图片[6]-可靠的导航设计需要帮助用户达成目标,提升页面的转化率-唐朝资源网

响应式设计无需赘述,但卡片网格格式的导航无疑是来自移动端的流行导航模式。在这里,导航选项设计为小卡片,放置在导航栏的网格中。当屏幕尺寸发生变化时,导航中的小卡片会用自适应网格重新排列,以匹配整个布局。这样的设计不仅视觉化程度高,还可以根据主题风格深度定制。

在这类导航中,每个选项不仅方便光标点击,也更适合移动端的手指点击。可以说是跨平台响应式设计的首选。目前很多网站都采用这种导航设计,比如和知名的音乐服务。

© 版权声明
THE END
喜欢就支持一下吧
点赞293 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片