网页导航的视觉设计与其可用行分析

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