找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 794|回复: 0
打印 上一主题 下一主题

浅析网页色彩应用

[复制链接]

2588

主题

2588

帖子

7694

积分

论坛元老

Rank: 8Rank: 8

积分
7694
跳转到指定楼层
楼主
发表于 2018-2-18 04:50:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

                    在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出几个配色与“关键词”相匹配了。网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用。
  色彩是我们接触事物的第一直观认知,在浏览一个新的网页时,第一认知的不是页面的具体结构和信息内容,而且是页面色彩搭配的视觉效果。色彩对于每个人、地域或国家都有不同的情感认知和联想意义,从某种程度看,大多数人对色彩认知和联想是一致的,如红色,人们感觉得喜庆,热闹…再具体到事物会联想到红心桃、草莓等等。在这里简单介绍色彩的情感联想。
 
色彩的情感联想
  色彩的情感联想,主要从具体联想和抽象联想两个维度划分:
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-01.jpg" width="730" height="285" />
  色彩的情感联想是人们对事物的不断的积累和认知,了解这些不但对网页设计有帮助,还对市场营销有帮助。如设计一个环保教育类网站,“环保教育”首先联想到生命、自然、绿色生态,而这些联想的事物共同色系是绿色,如果网站采用人们已认知的色彩会让人们在初次访问网站时,会对网站的主题产生共鸣和信赖感。
  那设计师就凭自己“经验和色彩原理”就对网页进行色彩设计?我们先慢镜头往回看整个网站的设计流程–设计师在着手视觉设计的前期流程:
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-02.jpg" width="730" height="264" />
  如果视觉设计师忽视前期的工作,网站最后视觉设计输出或许会与客户期望存在出入的风险。所以视觉设计师需要先了解和参与网站的定位、目标用户、内容规划的基础上才能更好把握页面的视觉设计。
 
各类网站的色彩应用
  网站的类型很多,按照分类,其各自的目的和侧重点不同,对用户的情感诉求心理也会不同。下面主要从网站的类型层面上来简单探讨色彩在网页上的应用:
  1.门户类:其主要需求是如何方便用户在堆砌的信息中有效、快速进行目标选择,而页面色彩可倾向于清爽,简洁。
  腾讯网,雅虎,网易等门户采用清爽简洁的浅色调来降低信息快速获取时的视觉干扰。同性质的同类网站主要是沿用自己公司主色系或logo来做区分,便于用户对品牌的识别。
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-03.jpg" width="730" height="645" />
  2. 产品类:主要目的需求展示产品的特性,促进浏览者消费欲望,页面色彩可根据具体产品定位做多样化设计。
  细化产品具体定位,如apple,韩国手机iriver高科技电子产品,其简洁灰白色调给网站带来科技感和现代感。
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-04.jpg" width="730" height="674" />
  http://www.apple.com/
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-05.jpg" width="730" height="490" />
  http://www.iriver.co.kr/
  3.社区类:其需求是操作简单易用,长时间使用的舒适度,页面色彩也倾向清爽,简洁。
  主要以分享、交流信息为主的社区网,有如上面门户网信息获取性质,所以配色上比较简洁清爽。但各社区网又各自有自己的核心目标用户群,所以在配色方面带有各自的特点。如校友核心用户是在校学生,页面顶端上的banner运用活泼的绿色调来渲染青春朝气的氛围.
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-06.jpg" width="730" height="450" />
  http://xiaoyou.qq.com/
  http://facebook.com/
  4. 公司、企业类:展示企业形象,加深提高品牌印象,可应用logo的主色系设计,达到品牌统一。
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-07.jpg" width="730" height="379" />
  http://www.tencent.com
  5. 电子商务类:其目的在满足方便快捷地查看商品和进行交易,同时运暖色调渲染气氛,让用户感受到网站整体的活跃氛围和愉悦感。
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-08.jpg" width="730" height="467" />
  http://www.fashionis.co.kr/
  当然,黑色调的电子商务网站同样给让人时尚、炫酷的潮流感
600)makesmallpic(this,600,1800);' src="http://cdc.tencent.com/wp-content/uploads/2009/12/web-color-09.jpg" width="730" height="410" />
  http://www.yoho.cn/
  6. 个人类:满足用户的自我个性展示和驾驭能力的需求,页面色彩设计更是多样化和个性化。现在有很多网站设置了换肤、自定义装扮等功能来满足用户需求,如个人空间、博客、社区等等,就连门户类网站也开始满足用户的色彩喜好设置护肤。所以各类网站的色彩应用没有固定的模式,以按自身定位来灵活设计网页色彩。
  7.其他类:工具类、活动类等.这里就不一一展开了,原理同上:目的、目标用户…

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

用户反馈
客户端