更多课程 选择中心


UI培训

400-111-8989

达内ui培训老师介绍导航设计的七种模式


导航在网站设计中的地位举足轻重,它引导着用户进行浏览和查找,一个良好的导航系统能让用户在离开网站时感觉享受了一次愉快的旅程。

导航的功能是为了让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,也能对用户起到很好的引导作用。

一个有吸引力的导航能够吸引用户去浏览更多的网站内容,增加用户在网站的停留时间。

UI导航七种比较常用的模式:

1、 顶部水平栏导航

顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。

它最常用于网站的主导航菜单,且通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这种设计模式可以支持更多的链接。所有重要的信息都会固定在顶部,对于用户来说这样使用起来会更简便舒适。

2、抽屉式导航设计

默认情况下,导航菜单根本就不显示,只有当触摸到右上角指定的小图标时,第一个内容层才会打开。当触摸到其中一个栏目时,第二个内容层才会逐渐展开,给用户一个非常清晰明了的内容导航。使用抽屉式导航来组织复杂内容是一个非常方便和流行的方式。

3、固定式侧边栏导航

侧边栏导航菜单可以兼容不同的屏幕尺寸。适合一个非常明亮干净的排版布局的网站,可以很好地做到了和用户之间的交互,让人一眼就把精力集中在导航栏上。侧边导航栏的优美之处主要表现在空间够大,大量的空白让用户感觉整个网站有呼吸之处,显得非常微妙而自由。通过拥有独特的设计,引起用户的注意。

4、隐藏式侧边栏导航

侧边导航给人的感觉就像是你在窥视页面背后或者是掀开了一个玩具盒的盖子看看里面到底有些什么。在需要的时候导航栏应该一直在那里,而当用户想要专注于某个特定的任务时,导航栏则应该优雅的隐藏起来。隐藏式侧边导航非常方便使用,鼠标悬停在浏览器左侧即可出现,主体部分即时出现的旋转效果也很带感,可以很好的引导用户的注意力。将导航隐藏起来同时也实现了界面的简洁。

使网站的浏览体验非常的愉悦,因为网站并没有留下太多无用的信息去分散用户的注意力。

5、图标式导航

图标式导航的好处是节省空间,让界面更简洁。图标也可用于细致的分类,提供更明显的视觉线索,而且图标具有直观的语义显示,每一个图标代表每一个不同的事件,吸引用户的注意,从而更好的引导用户操作。如果再加上优秀的动效转换能够吸引用户注意,让用户迅速找到导航菜单。

6.选项卡导航

选项卡导航可以随意设计成任何你想要的样式,从逼真的、有手感的标签到圆滑的标签,以及简单地方边的标签等。它存在于各种各样的网站里,并且可以纳入任何视觉效果。选项卡比起其它类别的导航有一个明显的优势:它们对用户有积极的心理效应。

7.响应式导航设计:响应式导航的设计遵循了响应式Web

设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验,达到更好的阅读效果。

响应式导航的优势是在不同的屏幕分辨率下保持相同的视觉和感觉。总之,网站导航各种各样的通用和大家熟知的设计模式,都可以用来作为为网站创建有效地信息架构的基础。

导航栏的设计可以是静态的、动态的、可扩展的等多种方式,甚至只是隐藏在一个微妙的符号里面。任何导航在网站里面都扮演者不可或缺的角色。

如果想让网站拥有优秀的用户体验,良好的转化率,可观的销售额,你需要花费相当的时间去了解你的用户需求,精心设计网站的内容,寻求可靠而直观有效的内容组织体系,而这些东西的外化体现,就是网站的导航设计。

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:ui初学者如何步入,ui进阶者如何深入 ui高阶者如何突破瓶颈
下一篇:学习UI设计,需要掌握什么基础能力

太全面了!UI设计师都需要知道的知识

B2B、SaaS等企业软件中的交互设计总结

平面设计与包装设计!

初学平面设计应该注意些什么?看哪些书?

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
贵州省

广西省

海南省