高效导航设计三原则 网页设计师必知

   2015-08-09 0
核心提示:每个网站由于其目标、需求、设计手法、运营等诸多因素导致它们在导航设计上千差万别,但是在最基本的设计思路和组织结构上,导航设计还是有基本的规律和原则,确保组织架构可靠,降低失败的机率

为网站设计导航就如同为房子打基础。如果地基不牢靠,再壮观的设计也无法掩盖建筑结构的潜在风险,其实网站也是如此,如果想让网站拥有优秀的用户体验,良好的转化率,可观的销售额,你需要花费相当的时间去了解你的用户需求,精心设计网站的内容,寻求可靠而直观有效的内容组织体系,而这些东西的外化体现,就是网站的导航设计。

什么是导航?

许多人对于网站导航设计的认知并不统一。有人认为,构成网站导航的是网页中的焦点元素,它们让用户清晰直观地找到他们想要的东西。同样的,还有人认为导航设计是一种方法,引导用户去寻找网站上最重要的信息,以达到销售或者查询等目的。这些说法都没问题,它们都是导航设计的一部分。

和设计领域的许多东西一样,导航设计并没有一个统一一致的“官方”的设计方法,或者说法,每个网站由于其目标、需求、设计手法、运营等诸多因素导致它们在导航设计上千差万别,但是在最基本的设计思路和组织结构上,导航设计还是有基本的规律和原则,确保组织架构可靠,降低失败的机率。

高效导航设计三原则 网页设计师必知

70percentpure 使用了最简单常见的垂直和水平导航来引导用户。

1、首先确定信息架构

规划一个大型网站,规划好内容是进行导航设计之前的第一要务。而我们此处所说的信息架构(IA,Information Architecture),是合理的组织信息的展现形式,支撑起网站内容的骨架。信息架构的主要任务是为信息与用户认知之间构建一座畅通的桥梁。

从更高的位置来看待网站内容有助于信息架构的搭建。更重要的是,你得学会从用户的角度来看待网站内容。这也就意味着,有的时候你得站在正反两个位置来看待同一个东西,不同视角下你会发现有的内容的呈现方式非常反人类。你可以通过下面的问题来完善整个架构:

·哪些页面是这个网站必不可少的?

·从宏观架构上来看是否每个页面都有其独立的目的,它们的存在是否影响整体的连续性和可靠性?

·有哪些内容是需要在将来持续提供并更新的?

·网站所需要涉及到的用户群有哪些?(登录用户、订阅用户、广告商等等)

·针对每种用户,网站所要达成的目标是什么?

思考这些问题能够帮助你更好的完善网站的信息架构,为导航设计做好准备。

2、保持简单

绝大多数的网站浏览者可能会一致的认同这一点:网站的导航区域要尽可能设计的简单。的确,复杂而拥挤的导航栏设计会严重阻碍网站的整体可用性。

高效导航设计三原则 网页设计师必知

彭博的网站就是这样做的,用简单的导航栏设计来掩盖网站的复杂性。

然而,简单的设计还是具有欺骗性的。用户在随后的操作中会发现复杂的信息被以一种看起来简单的方式包装了起来。这就是信息架构的作用。

以微软的首页为例,网站的导航栏被划分成四个项目,考虑到微软庞大的产品线,这几乎已经被简化到了极致。也正是因此,每个项目的下拉菜单都被巧妙地分割成为几段,这样一来,导航的层级就清晰了,用户可以更快地找到他们想要的东西,而微软也可以将复杂多样的产品和服务,整合到一个看似简单的导航栏里面。

高效导航设计三原则 网页设计师必知

类似迷你站的子页面中,导航栏也沿用了相同的设计。菜单的设置乍一看和首页很相似,实际上设计者加入了更多细节,更有针对性的功能和服务。

高效导航设计三原则 网页设计师必知

总的来说,这样的导航栏设计更加易用了,在保持一致的前提下,也具备更好的预测性。考虑到微软的产品体量,产品所需的页面数,微软官网的设计很明显是耗费了大量时间迭代开发的产物,殊为不易。官网在这样的组织架构之下,不仅让用户的体验更好了,而且对于微软而言也更加便于管理内容。这不仅保持简单,也简化了复杂。

3、谨慎选择方向

传统意义上的电脑屏幕方向是横向的,这也使得纵向下拉菜单,在很长的一段时间里面成为了导航栏设计的主流方向。这样的设计,平衡且少干扰,从设计的角度上来看是不错的选择。

高效导航设计三原则 网页设计师必知

作为虚拟现实设备制造商的Oculus,将导航设计成为横向的非常符合他们的设备的自然逻辑。

但是横向的导航并不一定符合所有的网站的需求,这也是为什么你会看到那么多纵向导航的网站,尤其是在电商领域。彩色的标签被用来标识不同的品类,纵向的导航设计,与现实世界中的导购图册暗合。这样的导航符合多品类,多内容的信息架构,横向导航用在此处会因为品类和文字内容而产生混乱。

一个良好的垂直方向的导航,要设计好并非易事,尤其是当你的网站内容非常多的时候。Jack Jones 的网站是一个很好的学习对象。

高效导航设计三原则 网页设计师必知

网站导航中的小图标拥有不错的可读性,简单的形状包含了可观的信息,整齐而有力。每点击一个类别,菜单展开,显示子类,逻辑清晰。

高效导航设计三原则 网页设计师必知

当然,你还可以在Squarepusher 的网站看到相对不同寻常一些的纵向菜单设计。导航被设计成标签页,访客可以通过滚动切换,这是一种更为线性的导航栏设计。

结语:规则正在改变

新工艺新技术的不断涌现,使得新的设计趋势和新的挑战源源不断呈现在我们面前。响应式网页设计使得桌面上传统的横向导航在移动端呈现的时候,更多是以纵向导航的形式表现出来。导航的设计不再被固定的方案所束缚,多种多样的表现手法都可以产生不俗的效果。但是,设计和测试的迭代方法,最好还是围绕着网站转化率和统计数据来进行。

作为驱动网站发展的引擎,导航设计的好坏是可预计的,精心布置又简单一致的。

 
标签: 导航 设计 原则
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React ProLayout组件自定义菜单导航menuDataRen
    如题:React ProLayout组件自定义菜单导航 menuDataRender 不显示问题解决方案解决方案:1、将ProLayout里面新增menu={{ loading }}     2、将config/defaulSettings.js中的menu给注释掉 const [loading, setLoading] = useState(true); const [menuDa
    03-08
  • 解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location
    解决Vue路由导航报错:NavigationDuplicated: A
    目录一、描述问题二、报错原因三、解决方法1、安装vue-router3.0以下版本2、为每一个Promise添加一个回调函数3、修改VueRouter原型对象上的push/replace方法四、原理分析五、额外补充1、路由导航方式2、Promise函数​总结点击vue路由跳转,控制台报错:Avoide
    03-08
  • 如何使用css、布局横向导航栏 如何使用css,布局
    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式。在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比。!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
    03-08
  • 纯CSS实现nav导航栏+jQuery实现article区DIV切换
    纯CSS实现nav导航栏+jQuery实现article区DIV切
    效果图: main.html 代码:1 !DOCTYPE html2 html3 head4 titleMyHomepage/title5 meta charset="utf-8" /6 link type="text/css" rel="stylesheet" href="css/reset.css" /7 link type="text/css" rel="stylesheet" h
    03-08
  • html5 jquery bootstrap table form input 导航
    !DOCTYPE HTMLhtml lang="zh-CN"headmeta charset="utf-8"/meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, us
    03-08
  • BSP:bootstrap导航栏:navbar,navbar-default,c
     默认的导航栏 创建一个默认的导航栏的步骤如下: 向 nav 标签添加 class .navbar、.navbar-default。向上面的元素添加 role="navigation",有助于增加可访问性。向 div 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 
    03-08
  • Bootstrap基础6(路径导航) bootstrap的导航栏
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"title路径导航/titlelink rel="stylesheet" href="css/b
    03-08
  • Bootstrap 输入框和导航组件(六)
    一、输入框组件div class="input-group input-group-lg"span class="input-group-addon"$/spaninput type="text" class="form-control"span class="input-group-addon"元/span/div div class="input-group"span class=&
    03-08
  • bootstrap导航条navbar高度改了后小屏幕情况下下拉的选项背景颜色变了
    bootstrap导航条navbar高度改了后小屏幕情况下
    在更改了navbar的高度后,代码如下:.navbar-inverse {background: #253438;border-color: #0490ad;height:50px;} 小分辨率情况下拉导航变成这样  可以添加代码.container{background: #303542;}  结果  
    03-08
  • bootstrap导航栏.nav与.navbar区别 bootstrap 导航
    bootstrap导航栏.nav与.navbar区别 bootstrap
     一、简单的ul,li组成的导航:ul class="nav nav-pills justify-content-center bg-dark nav-dark"li class="nav-item"a href="#" class="nav-link"1/a/lili class="nav-item"a href="#" class="nav-link"2/a/li
    03-08
点击排行