网页设计师联盟

--- 学习、交流、展示、资源

招聘精英个人求职网站发布网友作品网页特效动画欣赏网页素材免费资源源码下载设计软件
作品欣赏       域名申请       虚拟主机
网页设计师

  • 新闻资讯
  • 网页教程
  • 平面教程
  • 程序设计
  • 视频教程
  • Flash教程

网页设计师站提供网页设计程序设计服务 E-mail:liangfeng0526@qq.com

 您当前的位置:首页 > 阅读文章
网页设计师联盟(www.wysjs.cn)欢迎您!
 标题:

网页设计——选择正确的配色方案

 

网页设计——选择正确的配色方案

挑选正确的配色方案是设计过程中比较困难的阶段。配色方案可决定网站的成败。您选择的颜色需表达网站的整体氛围,您的配色方案也将引起读者对页面关键区域的注意。网站设计需花大量时间在配色方案上,确保能按以下提示和工具选用最合适的配色方案。

根据文字配色

文字是网页最重要的元素。如果读者看不懂您的网站,那就没有任何意义,他们会关闭您的网站。不管是出现在导航条还是正文的文字,都应选择合适的颜色,使文字易于辨认。标准的选择就是用浅色背景搭配深色文字。大多数人已习惯这样因为平面媒体已有悠久的历史。当然,网页设计中我们不必拘泥于平面媒体的式样,只要适合您的网页,可以任意选择深色搭配方案。

下例是暗色设计。导航元素以低对比度在背景中衬托白色文字。红色形成反差,也指出此网页的焦点。

下例是导航条和文本区域的禁忌。瓶身上的字不统一且难以辨认。正文采用两种最不合适的背景颜色。黄色的文本与背景图片中的瓶子很不搭配。

图片1 蓝色背景搭配不合适的文本颜色

选择颜色

以前,网页设计限制使用 216 种网络安全颜色的调色板,但现在浏览者几乎允许使用所有颜色。任意搭配颜色不代表您就可以尝试浅色背景搭配深色前景色。背景颜色至少占据网页的50%,将确定网页基调。但只要它适合您的网页定位,也可以大胆颠覆这种传统的颜色搭配方案。

根据标志选颜色

您的标志是选择网页颜色的起点。试用反差较大的颜色突出显示标志,也可使标志颜色成为网页中新的色彩元素。以下图片来自联邦快递,是个很好的例子。标志中的紫色突出显示灵活的导航条,网页的服务部分指出消费者可获得的主要服务。浅灰色也具有装饰作用,灵活地运用于导航条和滚动条。

2 联通快递突出标志色彩

挑选颜色工具:

颜色搭配方法无数。经验表明如果网页运用的色彩超过 5 种,那就太多了。像 Color Scheme Designer Adobe’s Kuler project 这两款工具让您可运用以下原则试用色彩搭配方案。

§                    互补原则——调色板上相对的颜色

§                    模拟原则——调色板上相邻的颜色

§                    单色原则——不同深浅的同种颜色

§                    三分体或四分体原则——调色板上等距的三种或四种颜色

除了上列举例,还有多种色彩搭配理论原则,但上述原则是最流行的搭配。

这两款工具让您与其他设计者的方案对比,还可将调色导出到调色板,作为GIMPPhotoshop中备用的样式。Adobes Kuler Web 应用程序也在色彩选择方案里添加了许多社会定位的方案。

有许多种 Web 应用程序用于创造适用所有平台的色彩搭配方案。这只是两个最流行的例子。我再多列举几个,以便大家探索。

§                    颜色策划(http://www.colorschemer.com/)---设计师的线画板和论坛

§                    色彩混合器(http://colorblender.com/)--RGB/HSV 曲线工具,具备简单的导出功能

§                    可用色彩实验室(http://www.visibone.com/colorlab/)----只选用216 种网络安全色彩调色板的基色选取工具

§                     色彩理论(http://colortheory.liquisoft.com/)-不同于其他工具,是一个帮助理解上文所述色彩理论的网址

此文由 go-gulf的社区经理 Lawrence Hall 撰写。Go-Gulf是一家迪拜网页设计公司,在中东地区提供网页开发解决方案。详情请参看公司中文网站: http://cn.go-globe.com

 

  • (刊登方式:转载   来源:--   作者:   添加:Goglobe123   关键词:)
  • 您已阅读:网页设计——选择正确的配色方案 您还可以继续阅读↓  或 回到首页看看>>>
  • 上一篇CSS代码水平或垂直反转图片

    方法非常简单,只需要在图片代码前加上一组滤镜代码即可: 语法:FILTER:FlipV 说明:垂直翻转对象内容。 使用代码:style="FILTER:FlipV" FILTER:FlipH 说明:水平翻转对象内容。 使用代码:style="FILTER:FlipH" ..

  • 下一篇: 没有下一篇