网站设计风格及色彩搭配技巧

简介:

一个人拥有自己独特的风格,是一般人所没有的,就会让人注意到那个人的特别,若那个人的风格是正面的,甚至就会引起别人的羡慕与注意,或是赞赏。就如同一个网站,拥有别的网站所没有的风格,就会让浏览者愿意多停留些时间,细细品尝该站的内容,甚至该站会得到多人的鼓励与注目,粗略的说,网站风格可以从以下几个方向来探讨,而每一项都是有关联性的:


1. 色系:网页的底色、文字字型、图片的色系、颜色等等。
2. 排版:表格、框架的应用、文字缩排、段落等等。
3. 窗口:窗口效果,例如:全屏幕窗口、特效窗口等。
4. 程序:网页互动程序,例如:ASP . PHP . XML . CGI等等。
5. 特效:让网页看起来生动活泼的各种应用,如:Flash . Java script . Java applets . DHTML等等。
6. 架构:目录规划、层次浅显易懂、选单应用等等。
7. 内容:网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。
8. 走向:对于网站的未来规划、网站整体内容走向等。
以上这些项目都与网页风格有密切的关系,网页的风格不是某一项相同,网站就是有整体感,而是要各项目的配合应用,才能达到完美的网站风格设计。接下来的段落,将会为每个项目做简单的介绍。

一、色系
网站的色系是浏览者整体的视觉观感,若一个网站色系能有一致性,不仅会使网站看起来美观,更能让浏览者对内容不易混淆,增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题,若色系能与主题合理搭配,将会增加浏览者的易读性。
网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等,这不单只是将颜色搭配得当就算完美,还要配合每个内容,及网站主题。对于网站的色系,应该要在网站开始制作前,做好规划及设计,才不会到着手制作网站时,难以搭配,甚至造成混乱的设计。
网页的底色是整个网站风格的重要指针。举例来说,以黑色作为背景颜色的网页,因黑色本对人的视觉上会造成黯淡的感觉,若是拿来用作活泼的儿童网站,就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的,与黑色的沉稳、黯淡,很难联想在一起。
再举个例子,若是写一个有关于环保的网站,若用暗红色作为网页底色,决计不会有人联想到网页的内容是与环保有关。当然,每个人的审美观不同,可能也会对颜色的代表性看法不同,但既然网站不是只写给自己看的,就应该要注意到大部分人可能会有的观点,然后以众人居多的观点出发,来设计网页。
文字字型上的设计,最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型,才能达到最佳浏览效果,这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容,不可能会因为这种「为达最佳浏览效果」,而自行下载所需要的字型。
当所要求的字型若不下载,并不会影响到网站内容上的浏览与不便,那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来,对于网页设计者来说,无非是非常可惜的,因为当初的设计风格却未能让浏览者一窥全貌,岂不是白费心思的吗?
何谓图片的色系?以色彩学简单的区分,可分为冷色系与暖色系,再详细一点的区分,又可分出各种颜色的色系,而色系的区分,就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应,就是比较困难的地方了。对于网页初学者来说,要绘制一张图并非易事,要绘制一张符合自己网页风格的图,更是困难重重。大部分的网页制作者,并不大可能驾轻就熟的使用影像处理软件或绘图软件,于是乎,网页素材的网站就开始盛行了。当然,不会使用绘图软件并不代表网页就不能设计的很出色,若是能将网络上的素材资源妥善利用,网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片,就是门很大的学问了。
选择图片该以何作为标准呢?举例来说,若网站内容为科学探讨,当然不能以卡通图片来作为插图,试想,当您正在浏览一个有关天文学的网站,却满是皮卡丘的可爱图片,不是很不协调吗?再举个例子,如果一个教学网站,里头却尽是明星图片,看上去根本就不像是教学网站,而是大杂汇的明星相片网。
很多人喜欢将自己欣赏的明星照放上自己的网页中,如果仅是个人网站倒也还好,因为个人网站本就无主题居多,也就没有所谓的符不符合主题的顾虑,但若是有主题的网站,岂不糟糕?
以图片内容来说,能切合网站主题最好,若不能,也别差异太多。以颜色来说,若一个网页是蓝色的底色,但整个网页的图档却乱七八糟,各种颜色纷纷出笼,更糟的是,蓝色是属于冷色系的颜色,若以蓝色为底的网页,却尽都是大红色、橘色的图片,那将会使整张网页看起来就像垃圾堆,杂乱无章。所以,可以简单的归纳出,网页与图档的颜色,色系一致或是视觉效果一致,将会使网页看起来更为美观且有自己的风格。
网页的颜色,并非单一就图文件、文字颜色、或是底色为主,而是以浏览者的角度来观看,整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好,但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说,就是失了自己独到的风格。
因为使用粉色系的网站,不外乎都有相同的特点,文字颜色浅,底色也以浅色系为主,这样除了没有自己的风格外,看起来既不大方也难登大雅之堂。以各大搜寻网站来说,根本不会做这样的设计,因为文字颜色淡,加上底色浅,对浏览者来说,阅读上非常吃力,所以这样的设计风格也应尽量避免。
一个有自己风格,且阅读起来舒适大方的网页,并不可能一次就写好,而是需要经过不厌其烦的修正、调色,才能达到最佳浏览效果的,所以制作网页也一定要有相当大的耐心。


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2012/03/13/2393396.html,如需转载请自行联系原作者

相关文章
Dreamweaver网页色彩的搭配
Dreamweaver网页色彩的搭配
93 0
|
安全
网站色彩设计与搭配技术(上)
网页访客第一眼看到的网站,不是优美的版式或者美丽的图片,而是网页的色彩。
569 0
网站色彩设计与搭配技术(上)
|
机器人
网站色彩设计与搭配技术(下)
这篇文章是我总结出的关于网站色彩搭配的精华所在,供大家参考,希望你在建站这条路上少走弯路。
508 0
网站色彩设计与搭配技术(下)
|
机器学习/深度学习 安全 Android开发
搞颜色指南|巧用色彩搭配,制作吸睛网站。
建站|全网最系统的色彩搭配指南,教你制作吸睛网站
352 0
|
Web App开发
简单高效!25个漂亮的简约风格网站设计作品
  在过去几年里,网站设计领域发生了巨大变化。除了 RWD(响应式网页设计)和 Web 字体的革命,现代设计的发展趋势迅速流行扁平化的配色方案,网页排版变得更加重要,重点已放在内容第一。最后,页面加载速度已成为决定你的网站成功的关键因素。
978 0
|
Web App开发 UED
色彩运用:10个最新的黑色风格网站作品
  决定何时实用黑色可能会非常棘手,但决定应始终关注时候能够加强内容和用户体验。如果黑色颜色被正确使用,可以产生大胆的冲击视觉,抓住网站访问者的注意力。   在下面的展示中,你将看到在每个站点,黑色的运用都是恰到好处,值得借鉴。
814 0
|
前端开发 JavaScript 人工智能
Dripicons – 精美的扁平风格的免费矢量图标字体
  Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等。 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以作为网络字体。
1339 0
|
HTML5 移动开发 前端开发
另类设计:15个现代简约设计风格网站设计实例
  设计师在很多时候想通过使用很多的设计元素或复杂的调色板使一个网站脱颖而出,往往会导致一个网站过度设计,而忽视了最重要的内容。大多数时候,你会发现它更好的做法是采取简约的做法。因此,今天,我们收集了15个新鲜的简约设计的网站例子激发你的灵感。
901 0