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. 做大求大同、存小异,有共性又有特性。这样的企业网站对于访问者而言更易于识别和使用。