网页导航的视觉设计与其可用行分析.docx
《网页导航的视觉设计与其可用行分析.docx》由会员分享，可在线阅读，更多相关《网页导航的视觉设计与其可用行分析.docx（12页珍藏版）》请在冰豆网上搜索。
网页导航的视觉设计与其可用行分析
网页导航的视觉设计与其可用行分析
摘要
导航系统是一个网站的路标，我们可以通过它来找寻我们需要的信息，因此好的导航能让用户有舒适的体验，增加对你的网站好感度，乐于再次光临。
但是导航系统千篇一律的模式显然让人厌倦。
于是很多网页设计师突破以往的模式，设计出了新颖的网站，新颖的导航，这样的确给人们带来了新的视觉冲击，但是有时也会让用户迷惑，网站很新奇却不知道如何开始。
本文通过对目前网站导航现状的分析，探索网站的导航如何能兼具视觉设计和可用性。
关键词：
导航、视觉设计、可用性
Abstract
Theguidancesystemisawebsiteguidepost,wemaypursuetheinformationthroughitwhichweneed,thereforethegoodnavigationcanlettheuserhavethecomfortableexperience,increasesthegoodsensitivitytoyourwebsite,isgladoncemorethepresence.Buttheguidancesystemstereotypedpatternletsthehumanbewearyofobviously.Thereforetheverymanyhomepagedesignerbrokethroughtheformerpatterntodesignthenovelwebsite,thenovelnavigation,likethisindeedhasbroughtthenewvisualimpacttothepeople,butsometimesalsocouldlettheuserconfuse,thewebsitewasverynoveldidnotknowactuallyhowstarted.Doesthisarticlethroughtothepresentwebsitenavigationpresentsituationanalysis,howexplorethewebsitethenavigationtobeabletheconcurrentlyvisualdesignandtheusability.
Keyword:
Navigation，Visualdesign,usability
目录
封面﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
（1）
中文摘要﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
（2）
英文摘要﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
（2）
目录﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（3）
绪论﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（4）
1网页导航的可用性分析﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（4-6）
1.1网页导航的概况﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（5-6）
1.2网页导航的可用性分析﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（6-7）
2网页导航的视觉设计﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（7-11）
2.1网页导航的新形式﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（7-10）
2.2新式导航存在的问题﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（10-11）
3如何兼顾网页导航的可用性和视觉设计﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（11）
4结论﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（11-12）
致谢﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（12）
主要参考文献﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍（12）
绪论
对浏览者来说，导航是一个网站的目录。
当我们进入一家网站首先会寻找导航，以此来判断这家网站的价值，或者是否有我们想要阅读的部分。
因此导航的首要目的就是可用性强，便于用户轻松找到他们需要的信息。
但是，当你进入的每家网站都拥有类似的导航条，即使它们的可用性相当的高，我想用户也会对它感到失望。
所以那些新颖的不同于以往的网站往往会给人以惊喜，但是它们在带来惊喜的同时往往也给用户来许多的烦恼：
这些新颖的导航可能运用图片和flash等技术，导致加载网页的速度变慢，导航无法显示等问题；导航的布局不同于人们以往的使用习惯，用户需要猜测设计者的意图等。
这些问题会磨光用户的耐性，在失败了多次仍没找到需要的信息后，他们就会离开网站。
好的导航要兼顾可用性和视觉设计，网页如何在追求视觉效果的同时也能让用户轻松的找到想要的信息是一个需要研究的课题。
1网页导航的可用性分析
1.1网页导航的概况
网页导航的形式：
1纯文字
在功能上，文字导航就已经完成了任务。
但从视觉的角度来说，纯文字的导航远远达不到用户的期望值。
2文字加装饰
相对于纯文字的导航，“文字加装饰”的形式更体现出了网络传播的灵活性和趣味性，它不仅可以通过装饰性的图标图片更准确的表达栏目的信息特征，还可以通过导航条的装饰效果，对网页风格及整体网站形式设计做出强有力的补充。
3Flash导航
Flash导航被广泛的应用在各类信息类内容的网站里，Flash导航可以增加页面设计的灵活性和信息处理的趣味性。
Flash导航可以让读者找到浏览网站的乐趣。
4隐藏文字信息的导航
Flash技术的发展，使很多富有创意的设计师，把导航设计成隐藏的。
有的需要点击某个区域，才会显示出来，而有的导航则是跟随鼠标的移动的，只有在单击鼠标右键时，才能显现。
这些效果确实让我们的网站显得新鲜而又创意。
5信息抽屉
信息抽屉式的导航会根据打开的信息位置挪动。
6多导航系统
多导航的形成与设计是由信息结构与欲求目的来决定的。
7无导航——“信息域”导航
如果网站的页面上的信息域十分清楚的摆放了相关的信息内容，每个信息域的信息似乎无法与其他域的信息合并为一个栏目，同时单独的一类信息，其信息量大小也不足以形成一个栏目。
设计设计师的处理方式，是让页面上的每个信息域本身作为“导航”，这种情况叫做信息域导航。
；浏览者在首页上就看到了网站所有可能包含的内容，并可直接点击深层级的信息连接。
网页导航的排列方式：
1横排导航
占用页面空间最少，经常被使用在网站信息内容非常多的门户网站、资讯网站中。
除了面积小的特点外，另一视觉优点是横排导航很大气。
2竖排导航
相对横排导航而言，竖排导航占用的页面空间较多，通常位于页面居左的位置。
居右导航给排版带来一定的难度，而且也不同于人们的阅读习惯，但也有极少数优秀的作品。
由于从浏览者的心理考虑，居左导航更容易让用户接受。
3倾斜导航
倾斜导航的个性特征太过明显，因此不时所有的网站都适用的。
当网页的信息量大小合适，需要营造个性的网站风格时，可以尝试采用倾斜排版的方式。
以上是目前存在的一些网站导航形式，这些导航各有优势，网页设计者可以通过对自己网站的结构和布局的分析合理的使用不同形式的导航。
1.2网页导航的可用性分析
可用性是一个与任何需要用户使用的产品都有关的术语。
从最基本的层面上说，可用性是指产品和用户之间的关系，直接与产品是否有用有关。
同样的标准也适用于web站点，网站的导航应该以用户的目的、需求、期望来判断是否可用性强。
导航帮助我们找到任何想要的东西；告诉我们现在身在何处；给我们一种固定的感觉；通过层次结构的可视化告诉我们当前的位置；告诉我们如何使用网站；当网站的导航清楚、规划得当，会当用户对网站建设者有信心。
当人们进入一家新的网站后，首先感知到的是这个网站的视觉风格。
然后当网站给人的感觉不错时，人们开始想要深入这家网站。
人们的第一反应就是寻找导航系统，以此来决定该如何开始。
一般来说，用户会逐个察看导航的栏目清单，然后点击一个看起来还不错的栏目。
然后从进入下级菜单，再进行选择，如果运气不错的话，再点击一两下，你将得到一份清单，大约就是你在寻找的目标。
然后分别点击这些清单的链接来查看它们的详细信息，阅读详细内容。
但是如确信找不到你需要的信息，或者你已经厌烦了，不想再寻找，你会离开。
从自己做为web用户的体会来说，如果到了一家网站那，却找不到你学要的内容或者不知道这个网站是怎么组织的，你不可能在那里待太长时间，或者下次不会再光顾这家网站。
那么导航需要创建得“明确”、“简单”、“一致”。
导航有一些习惯的用法，如同我们在看书时有一些传统的阅读习惯一样。
我们习惯从左到右的阅读，在书的前几页会有目录，在页边的某个地方会有页码。
如果打破这些习惯用法，我们会有多失望。
Web导航的习惯用法大部分来自已有的印刷品习惯用法。
他们会继续演化下去，但是有一些基本的元素，如网站的ID、栏目的划分、实用工具、“你在那里”的指示器、页面的名称、页面导航、底端导航等。
持久导航的使用，可以描述出现在网站每个页面上的一组导航元素。
让导航在每一页以一致的外观出现在同样的位置，会让用户立即确认自己仍然呆在这个网站上，而且用户只需要了解它一次。
但是在主页和表单页不必使用持久导航。
持久导航最重要的元素之一就是把我们送回主页的按钮或链接。
让一个返回主页的按钮始终可见，会给用户一种安全感，无论怎么点击最后都可以回到主页重新开始。
导航的栏目名称要和点击的链接一致。
当用户点击“关于我们”的栏目，结果出来的是公司产品的介绍，那么用户可能会觉得迷惑，对网站的建设者的组织能力产生怀疑。
导航的栏目名称和链接内容的匹配会让用户有一个愉快的体验，让他们轻松找到他们需要的信息。
用户希望知道自己在那里。
信息内容少的网站可以通过“你在这里”指示器来了解。
信息量大的网站会可以通过和“面包屑”来告诉用户所处的方位。
这些都是可以作为辅助导航。
当我们点击当前栏目时我们希望它和其他的栏目有所区别，让我们知道我们在浏览当前栏目。
一般会用颜色、形状、空间位置等来区分当前页和其他的栏目。
这样可以让用户知道正在阅读的是什么内容。
以上这些做法可以让导航变得可用性强，可以使用户在浏览网站时有舒适的体验。
2网页导航的视觉设计
2.1网页导航的新形式
传统的导航多是tab导航，长长的一条或多条，设计时只能在颜色和质感上做变化。
虽然在信息量大的门户类网站它还说相当实用的，但是在这个追求新奇和趣味的网络时代，这种千篇一律的导航已经不能满足人们的视觉需求了。
如下图（图一）的一个网站为例（
图片一（a）图片一（b）
图片一（c）
下图二的网站（http:
//www.hybridworks.jp/）导航做得相当的精致，从导航的质感到菜单的切换特效到切换菜单的声音都设计得相当的细致。
精细的特效设计让用户在点击时有一种新奇，从而记住这个网站。
图二（a）图二（b）
图三的网站是一个生产葡萄酒的企（。
flash技术的使用让网站的页面突破了格局的限制，在导航设计上也相当的新颖。
吧台上的酒瓶就充当了导航的角色，点击酒瓶就会出现酒的介绍和与之匹配的酒杯。
网页的整个效果制作的相当真实，而且很有趣味性。
图三
上面的三个例子只是简单的介绍了网站导航在形式上的创新，给人带来的一些惊喜。
但是并不是所有的创新都带来了好的结果，有些新的形式可能让网页的可用性降低。
2.2新式导航存在的问题
设计师往往会只追求形式上的美感，有时会只关注字体大小和位子摆放如何美观的问题，让视觉元素变得模糊部清。
设计师的眼中形式美是占主导地位的。
而且在想在这个充满个性的时代，设计师往往会希望通过很强的视觉冲击、和与众不同的新式来夺人眼球。
一个制作很精彩的网站，有漂亮的大块图片、甚至是声色俱佳的Flash，很好的动态效果，这些可能需要很久的时间来加载。
经过长时间的等待用户在进入时可能会觉得很惊喜。
它导航可能新奇的不同已往的，甚至没有导航。
用户都要费一番脑筋来猜想建站者的意图，网站是如何组织的。
让人琢磨半天也没有头绪的话，用户会选择离开。
这就是新式导航的问题，设计者往往会把形式感作为建站的首要考量。
没有考虑到用户在使用时的方便性、快捷性。
而让用户有挫败感，从而放弃浏览他的网站。
设计者往往只是站在设计师的角度来建设一个网站，没有从用户的角度来考虑浏览网站时的舒适程度。
这不是一个好的网站设计所应该有的。
3如何兼顾网页导航的可用性和视觉设计
好的网页导航要兼顾可用性和视觉设计两方面。
如何才能兼顾网站导航的可用性和视觉性是一个需要权衡的问题。
首先网站导航的设计，要以“如何有效地进行信息结构的展示”作为参考。
网站的导航要根据网站的信息结构来划分。
信息架构决定了我们是用几级分类，一个项目是否可以属于两个或多个分类，等等。
信息架构里面，有很大一部分工作是分类。
分类，就是对已有的项目、内容，通过已知的共同属性，进行分组、归类。
然后根据有序的分类再来考虑使用什么样的形式。
可能设计人员觉得这样会限制了他们的思路，不能创造出新颖的网站。
但是即使是纯文字的网站也能通过文字大小、位子、字体、颜色的不同而创作出相当出色的网站。
好的信息分类会两网站变得井井有条，为网站加分。
根据网站信息架构分析得出网站的分类。
然后更具这样一个架构来设计网站的导航。
这样的导航是合理的也是易用的。
在视觉设计上可以改变导航的形状、颜色、质感、增加特效和声音。
更重要的是加入新鲜的元素来增加趣味性，也可以运用新的技术来实现它的多样性。
但是在视觉设计的同时能然要遵循可用性的原则，以用户的舒适阅读为大前提。
如导航的左右放置是否符合用户的阅读习惯，而不是为了设计而不关用户的体验。
这样导航即具有可用新又具有视觉的冲击力。
结论
导航是网站不可或却的页面元素，是浏览这进入网站的第一搜寻目标，无论进入到哪个页面，人们都会再次寻找它，不断的点击它，再点击它，来找到我们需要的信息。
设计人员往往希望在导航上做出更多的新奇效果，不同以往的布局。
这些视觉效果和新奇的尝试给用户带来了不一样的体验，往往让人耳目一新，如同得到一个新奇的玩具一样。
但是视觉效果的冲击通常要一牺牲下载速度或是可用性为代价的。
遇到网站内出现过多的图片和动画，那么在加载网站时速度肯定要变慢，这样就会磨光用户的耐性，从而离开。
当你把玩半天不知道玩具该如何玩时，你也会对它失去兴趣。
如同无用的导航，在多次点击之后能然没有让用户到达想去的地方，找到有用的信息，用户就会失望离开一样。
要协调好导航的视觉设计和可用性是一个好的网站导航所必须的。
设计师的创作，要以“如何有效的进行信息结构的展示”作为参考。
导航的视觉设计对网站的整体风格其着不可忽视的作用；导航的可用性关系到网站的易用性和高效性。
网页设计师要根据网站的框架来分析网站的结构，然后来划分导航的栏目。
然后通过视觉的手段去创作新颖的导航。
当遇到可以承载特殊导航设计的网站也应该打破常规去设计。
新的技术可以让导航的视觉效果变的更加的新奇有趣，让网页导航的可用性和视觉效果结合得更好。
致谢
感谢指导老师对我的辅导，感谢他们对我毕业设计和论文的悉心知道。
感谢大学期间给我上过课的老师的教授，他们让我在大学四年学到了丰富的知识。
感谢学校领导的教导和帮助。
主要参考文献
<>粱景红编著——北京：
电子工业出版社2006.7第一版
<>SteveKrug著/机械工业出版社2006.8第一版
升级会员 