用户体验保卫战!这5种新型导航菜单样式会超出你的预期

发布日期:2017-09-08
浏览次数:40
  
 
网站中的导航菜单样式总是层出不穷,但是能够同时兼顾可用性、易用性且提供舒适体验的导航模式就没有多少了。导航菜单在整个网页的信息架构中一直扮演着骨架的角色,对网站的体验设计发挥着重要作用,一个清晰明确的导航菜单往往可以帮助用户快速获取内容,有效提升页面转化率,反之,一个设计不合理的导航菜单则会减缓用户查找网站信息的速度,妨碍用户体验。那么,在网站设计中我们究竟应该选用什么样的导航样式呢?其实这有一些经过实践反复验证的优秀导航菜单样式,小飞今天就整理了其中最突出的5种,供大家参考选择。
 
 
 

1. 悬浮动效的下拉菜单

作为UI设计中最常见的设计元素之一,下拉菜单一直以良好的扩展性著称,点击触动下拉菜单即可看见更多的菜单项。在目前导航菜单主要条目控制在4~6个选项的情况下,使用下拉菜单来承载二级导航元素既能节省网站空间,还可以让信息层级更加清晰。下拉菜单在不断的发展过程中还衍生出了不少形式。不过在传统的下拉菜单中,菜单项都是需要点击才能显示出来的。悬浮动效的出现则很好的解决了这个问题,当用户将光标悬浮在导航元素之上,二级菜单项就会出现,这种方式省时省力。
所以说,带有悬浮动效的下拉菜单能在很大程度上提升用户的浏览体验。不过我们在设计悬浮动效的下拉菜单时一定要注意,网站动效应该足够微妙,减少不必要的突兀感。
 
undefined
 
 
 

2. 汉堡图标+侧边栏

汉堡图标+侧边栏是一种十分适合响应式网站的导航菜单样式。用户点击汉堡图标,导航栏即从侧边滑出显示,Android平台的Gmail官方应用,YouTube和Facebook等网站都沿用了这样的设计方式。可能一些站长会提出质疑说这种隐藏的侧边栏导航在打开率上不如常见的可见式导航。这点小飞并不否认,但汉堡图标+侧边栏在用户体验上有自己独特的优势,它可以让整个网站更加简约、整洁,可以减少不必要的干扰,让用户更加专注于网站核心内容。
 
undefined
 
 
 

3. 悬浮固定式导航菜单

相信大家对悬浮固定式导航菜单并不陌生,当用户滚动页面向下浏览时,导航菜单会一直悬浮出现在页面顶部,它们在整个浏览过程中都是可见的。目前,悬浮固定式导航菜单已经成为常见的设计手法了,尤其是电商、产品类网站经常选择这样的导航设计,这种设计的优势在于快速、便捷,用户可以随时实现不同页面之间的快速跳转。有研究表明,70%的线上用户在遭遇糟糕的浏览和导航体验之后就会直接离开,所以说在网页中设置快速、便捷的导航菜单十分有必要,悬浮固定式的导航菜单就是一个不错的选择哦!
 
undefined
 
 
 

4. 定制化的超大导航菜单

此处我们所说的定制化导航菜单样式更接近于选项卡的设计,它们大多分为两个层级,不同的选项被组织到不同的选项卡中,选项卡承载的导航选项很大,视觉上更加吸引人,也更易于用户点击选取。有的选项中甚至会包含文本和说明,便于用户进行选择。
定制化的超大导航菜单和我们前面所提到下拉菜单有点类似,当用户将光标悬浮在标签上,会自动显示下面的选项,不过这种形式的导航菜单所容纳的导航条目相对更多。定制化超大导航菜单比较适合对可访问性要求比较高的网页,它对有视力障碍的用户足够友好,还给设计师提供了更多发挥的空间。
 
undefined
 
 
 

5. 响应式卡片栅格导航

响应式的概念小飞在这里就不多介绍了,但卡片栅格式导航无疑是从移动端网站衍生出来的。在这,导航菜单项被放在导航栏的卡片栅格中,当屏幕的尺寸发生改变时,导航中的小卡片会随着自适应的栅格重新排列,以匹配整个布局。在这种导航样式中,每个菜单项易于光标点击,在移动端上也十分适合手指点击,可以算得上响应式设计的首选导航菜单了。目前使用这种导航样式的知名网站也不在少数,比如图片分享平台Pinterest和音乐服务平台Spotify。
 
undefined
 
关于优秀的导航菜单样式小飞今天就先介绍到这里了,各位站长大大可以根据自己的实际情况选择导航样式,希望大家都能做出自己满意的网站。
 
起飞页自助建站平台采取真正的响应式引擎,提供众多精美的艺术品级模板,将传统的编码工作转化为直观的拖拽操作和文字录入,让您只需花上几分钟就可以搭建好属于自己的网站。强大的可视化编辑器可以实现所见即所得,修改起来十分方便。一次编辑,网站即可在多个设备上智能显示出最佳效果。这么好用的建站平台,赶紧来试试吧!

登录后即可发表评论,立即登录.