倾听色彩的声音 轻松驾驭网页与产品配色

时间:2014-09-14

  3.色彩与营销、品牌

  每种特定的行业,都有相似的产品色彩倾向性

  大部分知名品牌的logo倾向于用色彩相近的色调

  三、色彩搭配

  以下以banner为例,简单剖析下色彩的搭配技巧及色彩搭配组合方式以及搭配呈现的视觉效果。

  单色搭配:由一种色相的不同明度组成的搭配,这种搭配很好的体验了明暗的层次感。

  近似色搭配:相邻的两到三个颜色称职为近似色。如下图(橙色/褐色/黄色),这种搭配比较让人赏心悦目,低对比度,较和谐。

  补色搭配:色环中相对的两个色相搭配。颜色对比强烈,传达能量、活力、兴奋等意思,补色中最好让一个颜色多,一个颜色少。如下图(紫色和黄色)。

  分裂补色搭配:同时用补色及类比色的方法确定颜色关系,就称为分裂补色。这种搭配,既有类比色的低对比度,又有补色的力量感,形成一种即和谐又有重点的颜色关系,如下图,红色文字就显得特别的铿锵有力,特别突出。

  原色的搭配:大部分是在儿童产品上,色彩明快,这样的搭配在欧美也非常流行,如蓝红搭配,frickr的logo以及 麦当劳的logo色与主色调红黄色搭配等。

  四、如何准确定位你的色彩

  前面分析的是通过颜色去感觉情绪。这里简单写,如何根据产品去捕捉色彩,也就是所谓的MOOD BOARD(情绪版)。

  情绪版是指对要设计的产品以及相关主题方向的的色彩,影像,图片等其他材料的收集,从而引起某些情绪反应, 以此作为设计方向或者是形式的参考。(具体请参考情绪版(Mood board)操作流程的新思考——晓千)

  1.原生关键词选择

  首先,通过对产品的理解与认识,以及用户调研等得出体验关键词(Experience Keywords)。

  2.衍生关键词

  针对所得到的关键词,扩容信息,通过头脑风暴画出关键词的思维导图,寻找扩展关键词。

  3. 收集相关图片,提取图片生成情绪版

  通过“原生关键词”和“衍生关键词”,通过网络渠道,收集了大量的对应的素材图并配合定性访谈。

  4. 衍生关键词的分析——分维诠释

  5. 对情绪版进行“色彩分析”和“质感分析”

  色彩提取工具:http://kuler.adobe.com/#create/fromanimage

  总结

  色彩是种感觉,当我们学会读懂色彩,听到他们的声音,就可以做到熟能生巧,跟随着流行的趋势去游刃有余的驾驭它。我的见解大多也是基于前人的分享总结,同时结合了自我的一些观点。总之,多看,多想以及多临摹,都可以帮助设计师在色彩感觉训练上事半功倍。成功的配色方案,一定是理性+感性的结合,所以设计师要做个感情细致,情感丰富的感性之人,题外话:)。

  教程来源:阿里巴巴UED

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:阿里巴巴UED:Alibaba国际站首页改版小结 下一篇:UI设计中的包容性设计

    相关文章

    最新文章