倾听色彩的声音 网页与产品的配色研究

所属分类: 网页制作 / CSS 阅读数: 1033
收藏 0 赞 0 分享
倾听色彩的声音 轻松驾驭网页与产品配色 脚本之家
  前言
  色彩是一个网站的情绪表达方式或者说是性格特征的体现,每种颜色都有着属于自己的声音。作为一种视觉元素,色彩是很难被量化被衡量的,也很难用理性的角度去分析和阐述它,我现在试着用另外一个角度去试图衡量网页的色彩,一种尝试。从最基础的色彩本质、色彩搭配形式、及色彩对用户的潜在影响和心理暗示等着手,去分析色彩,读懂色彩,让色彩帮设计师说话。
  一、色彩的基础知识
  色彩的三大要素
  1.色相
  我们最常见的色谱“虹”就是把颜色按照“ 红 橙 黄 绿 青 蓝 紫 ”依次过渡渐变,色相两端分别是暖色、冷色中间为中间色或中型色。
  2.明度
  明度就是色彩的明暗差别,如深红、大红以及粉红等。
  3.饱和度
  饱和度是指色彩的鲜艳程度,也称色彩的纯度。
  二、不可思议的色彩魔力
  1.色彩有魔力,选色需谨慎!
  快餐店给我们的印象一般是座位很多,效率很高,顾客吃完就走,不会停留很长时间。有人喜欢和朋友约在快餐店碰面,但其实快餐店并不适合等人。这是因为很多快餐店的装潢以桔黄色或红色为主,这两种颜色虽然有使人心情愉悦、兴奋以及增进食欲的作用,但也会使人感觉时间漫长。如果在这样的环境中等人,会越来越烦躁。
  请两个人做一个实验,让其中一人进入粉红色壁纸、深红色地毯的红色系房间,让另外一人进入蓝色壁纸、蓝色地毯的蓝色系房间。不给他们任何计时器,让他们凭感觉在一小时后从房间中出来。结果,在红色系房间中的人在40~50分钟后便出来了,而蓝色系房间中的人在70~80分钟后还没有出来。有人说,这是因为红色的房间让人觉得不舒服,所以感觉时间特别漫长。确实有这个原因,但也不尽然。最主要的原因是人的时间感会被周围的颜色扰乱。同样道理,高血压的人忌红色。
  再举个例子,在时下非常流行的休闲运动潜水中,人需要携带氧气瓶。一个氧气瓶大约可以持续40~50分钟供氧,但是大多数潜水者将一个氧气瓶的氧气用光后,却感觉在水中只下潜了20分钟左右。海洋里的各色鱼类和漂亮珊瑚可以吸引潜水者的注意力,因此会感觉时间过得很快,这是原因之一。更重要的是,海底是被海水包围的一个蓝色世界。正是蓝色麻痹了潜水者对时间的感觉,使他感觉到的时间比实际的时间短。(部分资料来自-《每天懂点色彩心理学》)
  2.听见色彩的声音
  以上故事和实验都证明了,颜色是可以左右用户的情绪,也可以影响用户判断的。既然色彩潜意识在影响这着我们,那设计师必须学会善用色彩,在设计的时候,用色彩去正确传达产品的本质和内涵。当色彩被正确传达后,便能与用户产生心灵共鸣,产品也就能更深入人心。
  黄色:青春、乐观、豁达。常被作为点睛之笔。
  红色:活力、速度、紧迫感,常用于促销打折甩卖等。
  蓝色:信任、安全、有底蕴,常用于企业、银行、安全中心等行业机构。
  绿色:生命力、轻松、天然、无污染,常用于保健品等行业。
  橙色:积极、进取、活力,阿里巴巴色也是橙色,常用于唤起行动,如button的颜色也常用橙色。
  粉色:浪漫、女人,常用于女性消费行业,女性产品等。
  黑色:影响力、时髦、严肃,常用于奢侈品营销等。
  紫色:安抚、冷静、神秘,常用于美妆或抗老的女性产品设计中等。
  当我们了解了颜色后,就能更加准确的掌握我们的页面风格的定位,用颜色去阐述你的产品。经常做“脑部运动”,联想游戏等。
  3.色彩与营销、品牌
  每种特定的行业,都有相似的产品色彩倾向性
  大部分知名品牌的logo倾向于用色彩相近的色调
  三、色彩搭配
  以下以banner为例,简单剖析下色彩的搭配技巧及色彩搭配组合方式以及搭配呈现的视觉效果。
  单色搭配:由一种色相的不同明度组成的搭配,这种搭配很好的体验了明暗的层次感。
  近似色搭配:相邻的两到三个颜色称职为近似色。如下图(橙色/褐色/黄色),这种搭配比较让人赏心悦目,低对比度,较和谐。
  补色搭配:色环中相对的两个色相搭配。颜色对比强烈,传达能量、活力、兴奋等意思,补色中最好让一个颜色多,一个颜色少。如下图(紫色和黄色)。
  分裂补色搭配:同时用补色及类比色的方法确定颜色关系,就称为分裂补色。这种搭配,既有类比色的低对比度,又有补色的力量感,形成一种即和谐又有重点的颜色关系,如下图,红色文字就显得特别的铿锵有力,特别突出。
  原色的搭配:大部分是在儿童产品上,色彩明快,这样的搭配在欧美也非常流行,如蓝红搭配,frickr的logo以及 麦当劳的logo色与主色调红黄色搭配等。
  四、如何准确定位你的色彩
  前面分析的是通过颜色去感觉情绪。这里简单写,如何根据产品去捕捉色彩,也就是所谓的MOOD BOARD(情绪版)。
  情绪版是指对要设计的产品以及相关主题方向的的色彩,影像,图片等其他材料的收集,从而引起某些情绪反应, 以此作为设计方向或者是形式的参考。(具体请参考情绪版(Mood board)操作流程的新思考——晓千)
  1.原生关键词选择
  首先,通过对产品的理解与认识,以及用户调研等得出体验关键词(Experience Keywords)。
  2.衍生关键词
  针对所得到的关键词,扩容信息,通过头脑风暴画出关键词的思维导图,寻找扩展关键词。
  3. 收集相关图片,提取图片生成情绪版
  通过“原生关键词”和“衍生关键词”,通过网络渠道,收集了大量的对应的素材图并配合定性访谈。
  4. 衍生关键词的分析——分维诠释
  5. 对情绪版进行“色彩分析”和“质感分析”
  总结
  色彩是种感觉,当我们学会读懂色彩,听到他们的声音,就可以做到熟能生巧,跟随着流行的趋势去游刃有余的驾驭它。我的见解大多也是基于前人的分享总结,同时结合了自我的一些观点。总之,多看,多想以及多临摹,都可以帮助设计师在色彩感觉训练上事半功倍。成功的配色方案,一定是理性+感性的结合,所以设计师要做个感情细致,情感丰富的感性之人,题外话:)。
  教程来源:阿里巴巴UED
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多