电子商务网站的页面设计
电子商务网站的页面设计
1.网页的版面布局设计
虽然网页技术的发展使得我们开始趋向于学习场景的编剧,但是固定网页版面设计基础依然是必须学习和掌握的。它们的基本原理是相通的。你可以领会要点,举一反三。版面指的是通过浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同,所以同一个页面的大小可能出现640×480像素、800×600像素、1024×768像素等不同尺寸。布局则指的是以适合用户浏览的方式将图片和文字排放在页面中。
(1)版面布局的重要性。具体到网站的每一个网页,其排版布局达到一种和谐的状态才算是一种成功的网页设计,同样的图像和文字,用不同的方式将其组合起来,很可能产生截然不同的效果。网页的内容和页面的形式都是网站设计者必须考虑的,只考虑内容,不重视其形式,会影响用户浏览时的情绪;只顾页面的排版形式,不顾内容,用户也不会欢迎。二者缺一不可,少了任何一个,都是设计的失败。
(2)版面布局的步骤。
1)草案。属于创造阶段,不讲究细腻工整,也不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张,后选定一幅较满意的作为继续创作的脚本。
2)粗略布局。在草案的基础上,将需要放置的功能模块安排到页面上。功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器和版权信息等。注意,这里必须遵循突出重点、平衡协调的原则,将网站标志、主菜单等重要的模块放在显眼、突出的位置,然后再考虑次要模块的排放。
3)定案。将粗略布局精细化、具体化,后达到满意定案。
(3)常见的版面布局形式。
·“T”型布局。所谓“T”型就是指页面顶部为“横条网站标志+广告条”,下方左面为主菜单,右面显示内容的布局。因为菜单条背景较深,整体效果类似英文字母“T”,所以称为“T”型布局,这是网页设计中使用广泛的一种布局方式。这种布局的优点是页面结构清晰、主次分明,且是初学者容易掌握的布局方法。缺点是规矩呆板,如果色彩细节上再不注意,很容易让人看后乏味。
·“口”型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面、信息量大;缺点是页面拥挤、不够灵活。也有将四边突出,只用中间的窗口型设计。
·“三”型布局。这种布局多用于国外站点,国内使用得不多。特点是页面上横向有两条色块将页面整体分割为3部分,色块中大多放广告条。
·对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,另一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机地结合起来比较困难。以上总结了目前上常见的布局,此外还有许多别具一格的布局,关键在于网站本身的创意和设计。
(3)页面版面布局应遵循的原则。
·正常平衡。亦称“匀称”,多指左右、上下对照的形式,主要强调秩序,能达到安定、诚实、信赖的效果。
·异常平衡。即非对照形式,但也要平衡和韵律,当然都是不均衡的,这种布局能达到强调性、高注目性的效果。
·对比。所谓对比,是指不仅利用色彩、色调等技巧来表现,在内容上也可涉及古与今、新与旧的对比。
·空白。空白有两种作用,一方面表示网站的突出卓越,另一方面也表示网页品位的优越感,这种表现方法对体现网页的格调十分有效。
·尽量用图片解说。此法对不能用语言说服或用语言无法表达的情感,特别有效。图片解说的内容可以传达给浏览者更多的感性认识。
以上的设计原则,虽然有些枯燥,但是如果网页设计人员能领会并活用到网页布局里,效果就大不一样了。比如,网页的白色背景太虚,则可以加些色块;版面零散,可以用线条和符号串来分隔;左面文字太多,则右面可以插一张图片以保持平衡;表格太过规矩,则可以改用倒角。
2.页面中图片和文字的处理
用户在网上一般四处漫游,必须设法吸引他们对企业站点的注意力,所以企业电子商务网站的设计中要善于利用一些特色的效果,页面上好有醒目的图像、新颖的画面、美观的字体,使其别具特色,令人过目不忘。
(1)图片的使用。
图像的内容应有一定的实际作用,切忌虚饰浮夸,佳的图像应集美观与信息内容于一体。图像总是为页面的使用服务的,一幅大而漂亮的图片,如果妨碍了页面所要进行的工作,就会降低页面的整体质量。在这种情况下,使用小图像甚至不使用图像将是更好的选择。一个页面的好坏在于它是否提供了有用的信息,所以不管图像如何漂亮或标新立异,也不能随意将它加入页面中。
图像可以弥补文字的不足,但并不能完全取代文字。很多用户把浏览软件设定为略去图像,只看文字以求节省时间。因此,制作页面时,必须注意将图像所包含的重要信息或链接指示用文字替代功能重新表达一次。
(2)网站字体。
1)不要用太大或太小的文字。因为版面是宝贵而有限的,粗陋的大字不能给浏览者更多的信息。文字太小,用户读起来难受;文字太大,或者文字视觉效果变化频繁,用户看起来很不舒服。另外,按当代中文的阅读习惯,文本大都是居左的,所以好是让文本左对齐,而不是居中。当然,标题一般应该居中,因为这符合浏览者的阅读习惯。
2)避免过多使用不停闪烁的文字。闪烁的文字看起来好玩,但它可能使用户分心,好避免过多地使用它。有的网页设计者想通过闪烁的文字引起浏览者的注意,但一个页面中多不要超过三处闪烁的文字,太多则给用户一种眼花缭乱的感觉,影响用户去访问该网站的其他内容。
3)不要使用不常用的字体。网站中应该使用常用的字体,如“宋体”、“楷体”等。如果使用不常用的字体制作网页,就会使客户端所访问的网页达不到理想的效果。
3.网页的色彩效果设计
网页的色彩也是树立网站形象的一个要素。色彩搭配看似简单,实际上却是网页设计中很难处理的问题之一。如何运用简单的色彩表达丰富的含义是网页设计人员应认真思考的问题。在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。色调及黑、自、灰的三色空间关系无论是在设计上,还是在绘画上都起着重要的作用。但是需要注意,每个网站都应该有自己的主色调,不可为追求视觉效果而滥用颜色。例如号称蓝色巨人的IBM就用蓝色作为自己网站的主色调。此外,色彩还会对人们的心理产生影响,应合理地加以运用。按照色彩的记忆性原则,一般暖色较冷色的记忆性强。另外,色彩还具有联想与象征的特性,例如,红色象征火、血、太阳,蓝色象征大海、天空和水面等。例如设计出售冷食的虚拟店面,可使用清凉而沉静的颜色,使人心理上感觉凉爽一些。
在色彩的运用过程中,还应注意的一个问题是:由于国家和种族的不同,宗教信仰、地理位置以及文化修养的差异,不同的人群对色彩的喜恶程度有很大的差别;生活在闹市中的人们喜欢淡雅的颜色;生活在沙漠中的人们喜欢绿色。在设计中要考虑各企业的主要读者群的背景和构成。
另外,在网页色彩的处理上,要注意以下两点:一方面色彩的使用要与众不同,有自己的个性,这样网页才能引人注目,并给用户留下深刻的印象;另一方面色彩的使用要和网站的内容保持一致,例如用绿色来作为一个无公害蔬菜连锁超市站点的主色调。