网站设计中的导航理论与实践

2016-02-19 13:28 1 1 收藏

图老师小编精心整理的网站设计中的导航理论与实践希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

  导航是科学,是艺术。它让人们从一个地方到另外一个地方。我们从家里到超市购物时,我们是在真实世界里航行。而WEB则是一个虚拟世界里。在实际生活当中人们从A点到B点,以最短的时间和距离到达目的地,这就是导航的焦点,导航就是帮助人们找到他们的路。在航行时人们经常问下面的问题:

  1. 我在哪?

  2. 我怎样才能到达我要去的地方?

  3. 如迷路的人经常问自己:我以前到过这里吗?或我能返回我以前某地吗?

  4. 还有多久时间到达那里?

  等等所有的问题都是正常的,遗憾的是在WEB中很难有准确的回答。

  我在哪?

  由于一些设计师的疏忽,往往会将“所在位置”忘记,而使用户要知道他们自己在站点中的位置是很困难的。而URL将会给你一个精确的位置,但URL不能被大多数用户所理解,然而,也不要期望URL总能帮助人们解决我在哪的问题,目前绝大多数的网站都是通过动态产生的URL,如:http://www.52design.com/cwd/index.asp?page=2&sample_class= 等…这不能保证用户能通过上面的URL直接知道准确的位置。因为URL显示的是位置除非你要尽力的去避免用户知道URL,或者避免深层次的链接/松散的网站架构那样,否则不要隐藏。毕竟URL能给用户一个确切的定位。

  一个高级的网页标签形式加入了关于位置的许多信息,这就是我们常说的所在位置,这种类型我们也可以称深度测量,因为它直接显示了用户在站点中的位置,如下所示:

  首页 作品展示 网站设计 作品1

  注:在这种情况下,在所在位置里前面三个都可以链接,而在第四个时字体是加粗的,表明了我们现在所处的位置。这种方式能够很直接明了的提示用户我在哪?而它一般都放在主导航条的下方。

  我怎样才能到达我要去的地方?

  除了网址的确切定位外,用户还可以通过网页的标签用户的目的地。最明显的就是网站的主导航条了,所以我们在做导航条的时候,必须要考虑以下几个特点,1.突出/明显2.有吸引力3.扩展性也必须考虑在内,这一点是关系用和我能去哪的重要因数。当然,用户还可以通过网页中其它的小标签到达。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  我以前到过这里吗?或我能返回我以前某地吗?

  在网上查看信息的时候总会出现一个这样的问题,我们经常会看到重复看的信息!才发现我以前来过这里,如何有效的避免这种情况?我们可以采用颜色来区分,未被点击的是一种颜色,点击过后的又是另外一种颜色,用站点样式来实现。现在大多数网站都采用这种形式,我在这里就不多说了!

  如果有完整的“所在位置”返回以前某地的问题都已经大致解决了,但一般还有几项可别忘了哟!

  1. 标志/Logo

  通常我们在网页的制作当中,会把Logo做上链接链接到首页方便用户在迷失方向的时候及时的返回。如我们出外旅游时迷路了,我们可以直接回到旅馆重新开始。

  2. 返回

  在我们阅读信息或者查看产品的时候常会看到一些莫名其妙的“返回”按钮,我都不知道它要把我返回到哪里去?如果是这样还不如不要这个按钮,让人觉得很繁琐,所以我建议有必要的多打上几个字,清晰提示用户返回到哪里,如:返回产品大厅等…

  一些其它细节因数在此不一一指出了!

  还有多久时间到达那里?

  关于这方面的因数以下4点都可以直接影响到网页的下载速度:

  1. 网速

  2. 程序

  3. 服务器

  4. 页面的表结构

  5. 图片大小

  6. 外在其它因数

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  当然在前面的3点设计师无法直接有效的控制,但后第4、5点完全是设计师的控制范围之内,关于这两点我在《行业网站设计心得》一文里面已经提到,在表格方面设计师们要尽量避免使用大型表格、减少表格的深度、表格复杂化,可以直接提高网页的浏览速度。而在图片方面我就更不用多说了!

来源:https://www.tulaoshi.com/n/20160219/1604396.html

延伸阅读
这个世界上到底没有设计的法则?上个世纪初,奥地利及德国的心理学家创立了格式塔理论(Gestalt),该理论旨在解释人类的行为是如何与视觉经验产生关联的。格式塔理论解释了我们的眼睛对一个事物及对象的理解是一个综合的体验,而不仅仅是我们所见的简单叠加,它还包括我们以前对该事物及对象曾经有过的感受。我们不是心理学家,但作为一个设计者...
设计背景 先看看最终效果图 第一步建立新文件,设置如下图 下一步设置前景色为#e6e0d5,背景色为#cec5af 制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩! 开始设计导航按钮,新建图层,使用矩形工具,制作如下图形 再次新建图层,制作#ac2a2a颜色矩形 再用单行选区工具制作按钮鼠标移动上后的...
对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。 然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组...
标签: Web开发
大部分时候我们讲导航,讲的是导航对内容和结构的一种表现。就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看。但是导航,不仅仅局限于交互方式和视觉形式。 被狭义化的导航 回想一下我们是如何设计导航的?难道不正是根据内容、根据内容的结构去设计?最终,导航可能包含了三方面的功劳:交互设计、视觉设计,别...
在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现。 导航直接影响到公司的财政收入 导航会给我们带来哪些好处?导航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入。下面我们看一个例子(以下内容来自alibaba李凡的《设计师的商业意识》): alibaba大致的广告价格 上图反映了...

经验教程

839

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部