网站界面设计应遵循的几个原则

网站用户界面(Website User Interface)是指网站用于和用户交流的外观、部件和程序等等。如果你经常上网的话,会看到很多网站设计很朴素,看起来给人一种很舒服的感觉;有点网站很有创意,能给人带来意外的惊喜和视觉的冲击;而相当多的网站页面上充斥着怪异的字体,花哨的色彩和图片,给人网页制作粗劣的感觉。网站界面的设计,既要从外观上进行创意以到达吸引眼球的目的,还要结合图形和版面设计的相关原理,从而使得网站设计变成了一门独特的艺术。通常的讲,企业网站用户界面的设计应遵循以下几个基本原则:
1.用户导向(User oriented)原则
设计网页首先要明确到底谁是使用者,要站在用户的观点和立场上来考虑设计网站。要作到这一点,必须要和用户来沟通,了解他们的需求、目标、期望和偏好等。网页的设计者要清楚,用户之间差别很大,他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺(如色盲),对很多的颜色分辨不清;有的用户的听觉也会有障碍,对于网站的语音提示反映迟钝;而且相当一部分用户的计算机使用经验很初级,对于复杂一点的操作会感觉到很费力。另外,用户使用的计算机机器配置也是千差万别,包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别,设计出的网页在不同的机器上显示就会造成混乱。
2.KISS(Keep It Simple And Stupid)原则
KISS原则就是"Keep It Sample And Stupid"的缩写,简洁和易于操作是网页设计的最重要的原则。毕竟,网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作,堆集上很多复杂和花哨的图片。该原则一般的要求,网页的下载不要超过10秒钟(普通的拨号用户56 Kbps网速);尽量使用文本链接,而减少大幅图片和动画的使用;操作设计尽量简单,并且有明确的操作提示;网站所有的内容和服务都在显眼处向用户予以说明等。
3.布局控制
关于网页排版布局方面,很多网页设计者重视不够,网页排版设计的过于死板,甚至照抄他人。如果网页的布局凌乱,仅仅把大量的信息堆集在页面上,会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有:
(1)Miller公式。根据心理学家George A.Miller的研究表明,人一次性接受的信息量在7个比特左右为宜。总结一个公式为:一个人一次所接受的信息量为 7±2 比特。这一原理被广泛应用于网站建设中,一般网页上面的栏目选择最佳在5~9个之间,如果网站所提供给浏览者选择的内容链接超过这个区间,人在心理上就会烦躁,压抑,会让人感觉到信息太密集,看不过来,很累。例如Aol.com的栏目设置:Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。Msn.com的栏目设置:MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而很多国内的网站在栏目的设置远远超出这个区间。
(2)分组处理。上面提到,对于信息的分类,不能超过9个栏目。但如果你的内容实在是多,超出了9个,需要进行分组处理。如果,你的网页上提供几十篇文章的链接,需要每隔7篇加一个空行或平行线做以分组。如果你的网站内容栏目超出9个,如微软公司的网站,共有11个栏目,超过了9个。为了不破坏Miller公式,在设计时使用蓝黑两种颜色分开,具体可以访问www.microsoft.com
4.视觉平衡
网页设计时,也要各种元素(如图形、文字、空白)都会有视觉作用。根据视觉原理,图形与一块文字相比较,图形的视觉作用要大一些。所以,为了达到视觉平衡,在设计网页时需要以更多的文字来平衡一幅图片。另外,按照中国人的阅读习惯是从左到右,从上到下,因此视觉平衡也要遵循这个这个道理。例如,你的很多的文字是采用左对齐〈Align=left〉,需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下,每张网页都会设置一个页眉部分和一个页脚部分,页眉部分常放置一些Banner广告或导航条,而页脚部分通常放置联系方式和版权信息等,页眉和页脚在设计上也要注重视觉平衡。同时,也决不能低估空白的价值。如果你的网页上所显示的信息非常密集,这样不但不利于读者阅读,甚至会引起读者反感,破坏该网站的形象。在网页设计上,适当增加一些空白,精炼你的网页,使得页面变的简洁。
5.色彩的搭配和文字的可阅读性
颜色是影响网页的重要因素,不同的颜色对人的感觉有不同的影响,例如:红色和橙色使人兴奋并使得心跳加速;黄色使人联想到阳光,是一种快活的颜色;黑颜色显得比较庄重,考虑到你希望对浏览者产生什么影响,为网页设计选择合适的颜色(包括背景色、元素颜色、文字颜色、链节颜色等)。

合作伙伴

网站备案:豫ICP备15023476号-1 唯特科技