浅析网页色彩应用

  在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出几个配色与“关键词”相匹配了。网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用。

  色彩是我们接触事物的第一直观认知,在浏览一个新的网页时,第一认知的不是页面的具体结构和信息内容,而且是页面色彩搭配的视觉效果。色彩对于每个人、地域或国家都有不同的情感认知和联想意义,从某种程度看,大多数人对色彩认知和联想是一致的,如红色,人们感觉得喜庆,热闹…再具体到事物会联想到红心桃、草莓等等。在这里简单介绍色彩的情感联想。

 

色彩的情感联想

  色彩的情感联想,主要从具体联想和抽象联想两个维度划分:

  色彩的情感联想是人们对事物的不断的积累和认知,了解这些不但对网页设计有帮助,还对市场营销有帮助。如设计一个环保教育类网站,“环保教育”首先联想到生命、自然、绿色生态,而这些联想的事物共同色系是绿色,如果网站采用人们已认知的色彩会让人们在初次访问网站时,会对网站的主题产生共鸣和信赖感。

  那设计师就凭自己“经验和色彩原理”就对网页进行色彩设计?我们先慢镜头往回看整个网站的设计流程–设计师在着手视觉设计的前期流程:

  如果视觉设计师忽视前期的工作,网站最后视觉设计输出或许会与客户期望存在出入的风险。所以视觉设计师需要先了解和参与网站的定位、目标用户、内容规划的基础上才能更好把握页面的视觉设计。

 

各类网站的色彩应用

  网站的类型很多,按照分类,其各自的目的和侧重点不同,对用户的情感诉求心理也会不同。下面主要从网站的类型层面上来简单探讨色彩在网页上的应用:

  1.门户类:其主要需求是如何方便用户在堆砌的信息中有效、快速进行目标选择,而页面色彩可倾向于清爽,简洁。

  腾讯网,雅虎,网易等门户采用清爽简洁的浅色调来降低信息快速获取时的视觉干扰。同性质的同类网站主要是沿用自己公司主色系或logo来做区分,便于用户对品牌的识别。

  2. 产品类:主要目的需求展示产品的特性,促进浏览者消费欲望,页面色彩可根据具体产品定位做多样化设计。

  细化产品具体定位,如apple,韩国手机iriver高科技电子产品,其简洁灰白色调给网站带来科技感和现代感。

  http://www.apple.com/

  http://www.iriver.co.kr/

  3.社区类:其需求是操作简单易用,长时间使用的舒适度,页面色彩也倾向清爽,简洁。

  主要以分享、交流信息为主的社区网,有如上面门户网信息获取性质,所以配色上比较简洁清爽。但各社区网又各自有自己的核心目标用户群,所以在配色方面带有各自的特点。如校友核心用户是在校学生,页面顶端上的banner运用活泼的绿色调来渲染青春朝气的氛围.

  http://xiaoyou.qq.com/

  http://facebook.com/

  4. 公司、企业类:展示企业形象,加深提高品牌印象,可应用logo的主色系设计,达到品牌统一。

  http://www.tencent.com

  5. 电子商务类:其目的在满足方便快捷地查看商品和进行交易,同时运暖色调渲染气氛,让用户感受到网站整体的活跃氛围和愉悦感。

  http://www.fashionis.co.kr/

  当然,黑色调的电子商务网站同样给让人时尚、炫酷的潮流感

  http://www.yoho.cn/

  6. 个人类:满足用户的自我个性展示和驾驭能力的需求,页面色彩设计更是多样化和个性化。现在有很多网站设置了换肤、自定义装扮等功能来满足用户需求,如个人空间、博客、社区等等,就连门户类网站也开始满足用户的色彩喜好设置护肤。所以各类网站的色彩应用没有固定的模式,以按自身定位来灵活设计网页色彩。

  7.其他类:工具类、活动类等.这里就不一一展开了,原理同上:目的、目标用户…

时间: 2025-01-29 18:16:38

浅析网页色彩应用的相关文章

设计理论:浅析网页色彩应用

在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃.大气.稳重.信赖.都市化-.. 设计师一听到关键词或许很自然地在心里蹦出几个配色与"关键词"相匹配了.网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用. 色彩是我们接触事物的第一直观认知,在浏览一个新的网页时,第一认知的不是页面的具体结构和信息内容,而且是页面色彩搭配的视觉效果.色彩对于每个人.地域或国家都有不同的情感认知和联想意义,从某种程

浅析网页界面设计——首页设计

杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来

浅析网页挂马原理及实现方式

一.网页挂马介绍 (1).挂马与网马 1.挂马 Ø从"挂马"这个词中就知道,它和"木马"脱离不了关系,的确,挂马的目的就是将木马传播出去 Ø黑客入侵了一些网站之后,将自己编定的网页木马嵌入到其网站的页面(能常是在网站主页)中,利用该网站的流量将自己的网页木马传播出去从页达到自己的目的 2.网马 Ø网马,即"网页木马",就是将木马和网页结合在一起,当打开网页的时候就会自动下载并运行其木马程序 (2).网页木马运行原理 Ø最初的网页木马就是利用了IE

浅析网页色彩搭配的内涵

网页的色彩搭配往往是网友们感到头疼的问题,尤其是那些完全没有美术基础的网友.到底用什么色彩搭配好看呢?让我们来看看网友54雨寒的高见吧! 一.红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色.红色容易引起人的注意,也容易使人兴奋.激动.紧张.冲动.还是一种容易造成人视觉疲劳的色. 1.在红色中加入少量的黄,会使其热力强盛,趋于躁动.不安. 2.在红色中加入少量的蓝,会使其热性减弱,趋于文雅.柔和. 3.在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重.朴实. 4.在红中加入少量的白,会

浅析网页初学者的6大困惑

摘要: 2013我有幸被聘为安阳工学院的网页设计老师.10月份,我给大三视觉传达班的学生上课,给我的感觉是,学生对网页了解甚少.在这个电子商务时代,网页已经变成非常热门的职业,部 2013我有幸被聘为安阳工学院的网页设计老师.10月份,我给大三视觉传达班的学生上课,给我的感觉是,学生对网页了解甚少.在这个电子商务时代,网页已经变成非常热门的职业,部分在校大学生还不知网页设计有什么用? 这是学校问题?还是学生问题? 为什么有些学生,还不知道网页设计是什么的时候,另外一些学生已经学会网页开始工作了呢

浅析网页设计中的“马云式”风格

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 马云作为中国的电子商务教父,说话形象生动有感染力很容易让人记住,做事稳健迅速风格显著,甚至连长相也很有特点,非常容易被别人记住.旗下的阿里巴巴网站设计风格也是非常有特点的.我称之为"马云式"风格.如何让一个不太熟悉网页的人迅速知道你这张网页要表达什么东西,这非常重要.马云在一次访谈中自称自己只会发邮件,打字速度也很慢,也不

浅析网页收录无常是百度神经还是网站运营问题

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信很多站长朋友在运营网站的时候,会发现自己发布的文章能够很快就被百度收录,可能半个小时不到这个内容又被删除,或者一天以后又会被删除,很多站长可能悻悻的说百度在发神经病,而不认为自己的网站的经营遇到了什么问题,而经过笔者的了解,造成这种情况,更多的时候是因为网站运营出现了问题,而且笔者还为此总结了一些原因,一并写出来跟广大的站长朋友们分享一下

网页设计技巧:网页图片的巧妙设计方法

文章描述:浅析网页设计中图片的使用基本原则. @MartinRGB 设计师都知道,行业的核心追求便是打造优秀的视觉效果.实际上,之所以能够成为设计师,是因为我们具备一种技艺,能够满足用户的视觉感受和视觉需求.我们可以听.读.想,我们可以想象出概念.物体以及人:但是这些感受都很抽象,只有实实在在地看到,印象才能定型. 你遇到过从来没见过雪的人吗?可能你也从来没见过雪花飘洒在天空的景象.所以这些人无法理解,到底什么是雪?他们可能会知道原理是因为寒冷而凝结了空气中的水分,落下便形成了雪,可是他们无法真

微信公众号OAuth2.0网页授权问题浅析

根据需求,我今天完成的是微信的网页授权然后拉取用户的一些基本信息的问题. 1.修改网页授权的基本信息.打开微信公众平台. 在这个地方写要授权的页面的网址. 2.我这边只是测试这个功能,所以我页面直接写了个测试页面,我在要测试的这个网站的根目录新建了一个ceshi.html 然后在他的控制器里面对其进行操作. 1)首先是分享的也就是授权的网页的链接要写的正确 然后url: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx444