Dreamweaver网页制作与色彩搭配全攻略学习笔记

Dreamweaver网页制作与色彩搭配全攻略学习笔记

白色在访问者的心理潜意识中是最没有压力的色彩。
IBM的深蓝色、肯德基的红色条型、新浪的橘黄色都使我们觉得很贴切、很和谐。

方太厨房专家网站：白色、浅蓝色和灰色，清爽干净
雪花啤酒俱乐部：绿色与橙色，表现出啤酒的自然甘醇。

 

1.代表科技与服务的蓝色企业网站（IBM：深蓝色与浅蓝色搭配，黑色的导航区醒目有序，很适合高科技企业。还有微软公司）
使用蓝色作为企业网站的标准色彩时，通常需要与白色或灰色等中性色彩搭配使用，从而突出蓝色色彩内涵，不至于过于沉闷。
白色与灰色能很好地反衬出蓝色的质感，作为辅助色，白色的干净与灰色的中庸都能很好地降低蓝色的厚重感。

2.代表环保与通信的绿色企业网站（食品，人文社会和健康医疗）
以绿色作为页面基础色，配以白色和灰色为辅色。页面风格清新自然，非常有亲和力。

3.代表简洁与大气的白色企业网站
常与灰色、红色、黑色等色彩搭配使用。这样可以中和大面积白色所带来的空洞感，使页面视觉生动多元化。（用友软件）

4.代表品质与活力的红色企业网站
黑色与红色搭配能表现出一种质感，突出企业的品质和信誉。
同样的还有橘黄色、灰色等色彩，都是常与红色搭配作为辅助的色彩。（SHARP公司，好丽友食品。）

 

资讯类网站  橙色+灰色
机构类网站  白色为底色，顶部为红色，左右两侧为沉稳的蓝色。   白色+金属灰色配橙色。   白色、蓝色等较为稳妥。
       在白色的基础上搭配以绿色和中性灰色。   蓝色为背景色，宁静和谐，是一个简单而不失气度的设计。
娱乐类网站  蓝色与白色（卡通网站）   橙色与黄绿色（音乐网站）
             游戏网站：蓝色主色调，深浅不一的蓝色呈现出变幻莫测的神秘感。  蓝白配色，视觉效果舒缓和谐。
                       蓝灰色和黑色    橘黄色
             电影网站：蓝白  粉红色和橙色同属暖色中的相邻色，搭配在一起整体页面氛围温暖协调。
                       同色系的深浅色搭配
生活类网站  服装：棕灰色的背景，渐变过渡自然。 粉色 玫瑰红  暖色的红  酒红色与金色搭配，使页面奢华低调，似有暗香浮动。
             家居网站：银灰色到白色的渐变
文化类网站  宗教历史网站：土黄色与咖啡色   黄绿色  橘红色  灰色
电子商务网站 抢眼的颜色块突出新产品、热销产品和打折产品（如红色） 绿色与白色的搭配   白色背景，金属灰和银色的搭配。感觉奢华却不张扬。
              深蓝与银灰
企业网站  百事可乐（充满爆发力的蓝色与热情奔放的红色）  明亮的色彩（蓝色、绿色、白色）
           代表智慧和诚信的蓝色是网站的主色调，背景色采用大气庄重的白色，视觉效果非常精美，透露出很强的科技感。
           雀巢（淡咖啡色） 牙齿护理（蓝白两色） 家电（高雅的酒红色与时尚的银灰色）

 

 

电信与IT行业
意大利电信公司：页面色彩感觉庄重、沉稳，热情的红色与沉稳的黑色的对比色彩运用得当，白色背景缓和了页面的厚重感，具有很好的高科技氛围。
http://www.telecomitalia.it/
西班牙电信公司：深沉的蓝与柔和的黄绿色形成视觉对比，大面积的白色和细节的浅色系运用中和了整体色调，形成一种奇妙的平衡。
http://www.telefonica.com/en/home/jsp/home.jsp
Intel公司：蓝色与白色
http://www.intel.com/?zh_CN_01
IBM：蓝色与黑色
http://www.ibm.com/us/en/
HP：蓝色与灰黑色
http://www8.hp.com/cn/zh/home.html
微软：蓝色主色调+白色搭配+灰色辅助色
http://www.microsoft.com/en-us/default.aspx
Cisco：冷色调的绿与白搭配
http://www.cisco.com/

 

航空运输业
波音公司 一架翱翔蓝天的飞机直观生动的传递出网站主题，弧形导航条别致实用。
http://www.boeing.com/
德国汉莎航空公司 橘黄作为主色调显得温暖热情，搭配形象宣传图片。
http://www.lufthansa.com/cn/mi/Homepage

 

汽车工业
大众汽车 白与灰显得冷静充满科技感
http://www.vw.com.cn/zh.html
通用汽车 白色与蓝色的搭配科技感十足，彩色细条的区域分割则丰富了页面视觉。
http://www.shanghaigm.com/www/
丰田 清淡的灰色与蓝色
http://www.toyota.com.cn/
菲亚特 中性的灰色能很好的衬托出汽车的颜色与质感，采用深浅不同的灰色区分功能区域，显得整齐合理。
http://www.fiat.com.cn/
宝马  醒目的Banner条彰显出宝马品牌的贵族风范，大面积的白色则传递出智慧与科技感。
http://www.bmw.com.cn/cn/zh/index.html
Volvo  代表工业的蓝色与代表科技的白色搭配使用，显得理智而含蓄。
http://www.volvocars.com/zh-CN/Pages/default.aspx
奔驰  灰色+白色
http://www.mercedes-benz.com.cn/content/china/mpc/mpc_china_website/zhng/home_mpc/passengercars.flash.html

 
能源与工业  能源与信息、材料一起，构成现代文明的三大支柱。
壳牌集团网站  彩色分割条区分开LOGO与内容区域，是页面的视觉亮点。
http://www.shell.com/
AXA（法国安盛集团） 白色的网站色调明快简约，整体的内容区域则显得实用方便。
http://www.axa.com/en/
通用电气公司  清爽的白色具有极强的科技感。
http://www.ge.com/cn/
埃克森石油公司 红与白的色彩搭配。
http://www.exxonmobilchemical.com.cn/Chem-Chinese/default.aspx
中国中石化集团公司  很好的传递出能源、化工企业与自然的和谐统一。
http://www.sinopecgroup.com/Pages/index.aspx
墨西哥石油公司  蓝色与白色
http://www.pemex.com/
三菱公司  红色的分割条形成主次分明的设计，色彩上采用白色与灰色。
http://www.meach.cn/
韩国电力公司  延续了韩国网站一贯的柔美精致风格，蓝天白云背景使得页面具有立体效果，淡雅的色调使网站具有很强的亲和力。
http://www.kepco.co.kr/

 
银行与金融业
第一银行公司  深蓝色的稳重与白色的神圣，传递出网站的理智与严谨，很贴合银行形象。同色系的分割条使页面形成和谐的整体，美观大方。
https://www.firstbank.com.tw/index.action
花旗集团  蓝色和白色作为页面主色调，显得专业而智慧，很容易带给访问者信任感，有助于提高可信度。
http://www.citibank.com.cn/
中国工商银行  红色与灰色的搭配，遵循企业LOGO标准色的缘故，使页面具有和谐的一致性。
http://www.icbc.com.cn/icbc/
三菱东京UFJ银行  红色与白色
http://www.bk.mufg.jp/
因特撒银行网站  白与灰的经典搭配。 意大利联合商业银行（Banca Intesa），也译为“因特撒银行”
http://www.intesasanpaolo.com/scriptIbve/retail20/RetailIntesaSanpaolo/ita/home/ita_home.jsp
伊陶萨投资公司 蓝色与橘黄色这两种互补色搭配，视觉效果非常醒目，采用黄色的文字缓和蓝色的沉重。
http://www.itau.com.br/itaucard/

生产制造业   多会使用蓝色、白色、灰色等与企业生产制造相关的色彩。
西门子公司  蓝色与白色、灰色的搭配显得科技感十足，平衡的三分栏结构美观实用。
http://www.siemens.com/answers/cn/zh/
韩国LG集团电器网站   设计和配色都采用温馨柔美的风格
http://www.lg.com/cn/index.jsp
ERICSSON公司网站  纯度不同的蓝色系和谐统一   爱立信
http://www.ericsson.com/
MOTOROLA公司网站  银灰色
http://www.motorola.com/Consumers/CN-ZH/Home
Canon公司网站  但页面Banner条却使人眼前一亮，很好的传递出该品牌的质感，用感性诉求传递出理性观点。
http://www.canon.com.cn/index.html
惠而浦公司网站  浅蓝色与白色搭配清爽整洁
http://www.whirlpool.com.cn/
国际造纸集团公司网站  自然色的绿色与蓝色也更好的辅助页面环保与健康氛围的形成。（美国国际纸业公司（International Paper）官方网站网址:http://www.
internationalpaper.com/）
http://www.internationalpaper.com/CHINA/CN/index.html

 
其他行业
强生  专业生产婴幼儿产品的企业，清新粉嫩的紫色与孩子天真的面庞相当益彰。同色系的蓝色区域分隔条整齐地区分开不同区域，显得合理有序。
http://www.jnj.com.cn/
德国汉高公司网站  白色与灰棕色搭配，点题图片突出日化产品这一网站主题，唯一不足的是页面内容稍嫌空洞。
http://www.henkel.cn/cps/rde/xchg/henkel_cnc/hs.xsl/index.htm
华盛顿共同基金组织的网站  宁静的蓝色和神圣的白色，清新祥和，细节图片的搭配很好的体现出网站救死扶伤的人道主义精神理念。
https://www.chase.com/wamuwelcome3/
国际新闻公司  不同纯度蓝色的搭配，深邃而具有空间感，表现出专业与敬业品质，很好地树立了新闻公司形象。
http://www.aig.com/home_346_85929.html
 美国国际集团（American International Group）——美国历史上最大的金融拯救计划
 美国国际集团网站:http://www.aig.com/
纽约人寿保险公司   自然健康的浅蓝色与浅绿、浅橘等搭配，视觉效果安静温馨，具有亲和力，白色背景传递纯洁、幸福的内容
http://www.newyorklife.com/

 
总结：

1. 因此在创作时应该撇弃那些华而不实的花哨设计，去繁杂留简约，这样才能更好地把握网站的定位风格，明确页面设计理念。

2. 设计来源于生活。对于网页设计师而言，作品就是一面镜子，在其中可以折射出设计者自身的素质。因此提高自身的文化修养是非常重要的，需要在平时的生活中点点滴滴地积累。

3. --韩国网站的精美，欧洲网站的实用。--

4. 做大求大同、存小异，有共性又有特性。这样的企业网站对于访问者而言更易于识别和使用。