Archive for 三月, 2010

读《每天懂一点色彩心理学》

三月 28th, 2010

在互联网项目实施过程中,作为担任项目负责人角色的如策划、产品经理、项目经理等都需要将需求建立原型,将原型转化文档,作为UI和开发的交付物。其中最容易而引起口舌之争的则是界面元素的风格、色调、用色等统称UI设计上,引起这类纷争一方面各项目相关人在产品出炉之前都会在大脑中各有不同的理想定型,千人千界面;而另一方面则是由于项目负责人向UI设计师风格表述不清晰而引起的。因此项目负责人多了解点颜色,学会向项目各相关人正确表达传播颜色,以此减少多方磨合提高迭代效率是大有裨益的。带着这个目的阿石读了日本原田玲仁写的《每天懂一点色彩心理学》 ,并将其列入“产品策划与设计”的豆列当中作为项目负责人的参考读物。下面是我对这本书的梳理和心得体会,给大家做个分享。

从中学的物理知识我们知道了三原色或三基色(红、绿、蓝),这只是千千万万之三的颜色基本品种,大多数人包括自己对色彩的究竟是什么、色彩有哪些要素组成的这些问题若是刨根问底来也会是解释的不清不楚。从亚里士多德的“非白光则不纯净”的哲学观到牛顿的“三棱镜实验”了解光的七色光谱组成、再到芒塞尔对色彩建立体系兵对色彩赋以数值定义,人类对色彩的认识与运用也是从朴素的哲学思想走向现代大规模工业化的进程。

1、色彩的三要素

色相:通常所说的“红色、蓝色、黄色、绿色”,说的其实是色彩的色相,一种颜色区别于另一种颜色的表象特征

明度:色彩的明亮的程度,明度最高的是白色(亮)、最低的是黑色(暗)。

彩度:色彩的鲜艳程度,彩度最高的是纯色,最低是灰色

著名的芒塞尔值( munsell value )就是用上面的色彩三要素加以数值表达的,即

芒塞尔值=  色相 明度/彩度  Hue Value / Chrome( H V / C )

在项目碰头会、头脑风暴会上,色调是出现机率最高的词汇。色调其实是色彩明度和彩度的综合用语。例如某某需求人说“色调太艳了,调暗些”,其实他所表达的完整意思是“把色彩的彩度降低、把色彩的明度调暗些”,我们不能强求需求人完美表达色彩的具体,但作为项目负责人则有责任将需求人的意思细化并记录下来。

2、色彩的衍生属性

由于人类接收信息源最大的通道是眼睛视觉,人类通过视觉观察外界物体、自然现象,至少有80%以上的外界信息经视觉获得,而色觉是视觉的重要组成 ,人们对一个物件颜色的感知甚至会对扭曲物件的其他固有属性。

1)   色彩使时间变得更快或变慢

爱因斯坦在解释他的相对论时曾举例美女使时间变快,我们在页面设计时也可以将其应用到色彩当中来,如果希望页面吸引用户浏览、希望用户多在页面停留哪怕一秒钟,可以用让人冷静清爽的蓝色调作为主背景,这一般见于电子商务网站的首页,因为首页是网站页面最大的导航和信息架构图,我们希望用户冷静的通过一个页面就可以了解我们网站的业务和服务;如果希望用户快进快走、希望用户跳转到目的页面,建议实用让人热血沸腾的红色调作为主背景,这一般见于电子商务网站的营销广告页,因为我们希望用户看到广告页后点击进入产品详情页迅速下单;

2)色彩使物体变得更重或更轻

色彩本身是没有重量的,只是不同的颜色会扭曲人们对物件重量的预期,如同等大小的箱子,在未搬动之前,黑色的箱子预期就是比白色的箱子重些。网页是总会有头重脚轻的感觉,因为网站的设计者总是考虑第一印象是很重要的,所以会在网页首屏对色彩的色相、明度、彩度用的强一些以此来吸引用户,而对页面最底部页脚部分色彩就会低一些,甚至只是一些文字链。

3)色彩使得空间变得更大或更小

同一块物件的面积、体积也会不同的因为颜色的不同而表现各异。色彩的明度影响面积大小的感知,色彩的彩度影响体积胖瘦的感知。这一点表现在网站组件交互设计中。QQ会员“开通会员按钮”鼠标划过前是暗红色背景,鼠标停留时将明度提高,暗红色变为鲜红色,按钮变亮面积变大的同时,突兀的按钮因为鼠标停留待点击变得更加矮小,这种感觉暗合了平时用户生活习惯(例如电脑开机电源开关)。而豆瓣对文字链的交互处理更为细腻,鼠标划过前是无底蓝色,鼠标停留时是蓝底白字、点击时是橙底白字,点击后是渐变为无底黑字。

3 、色彩心理学与用户偏好

由于世界各地的纬度不同而阳光照射不一样、各自文化历史宗教发展各异以及空气散射程度不同,影响了每个民族、地区乃至国家代表颜色的偏好。细化到个人、企业,每个人都会有自己喜好的颜色,而且随着年龄增长、环境变迁还换更换自己的偏好色;每个企业都会注重企业形象的视觉表达,而且随着业务拓展、战略定位重新规定自己的品牌色(例如苹果这样的工业化设计产品)。色彩的选择与用户的性格总是有种某种对应关系,因此通过调查色彩偏好我们就会了解用户偏好、需求取舍,乃至企业文化。

1)喜欢那些暖色调的用户性格

红色:外向型、热情而正义,红色因为其在中国历史、政治的特殊地位更更具有象征意义,如喜庆、革命,例如京东、红孩子

橙色:有竞争力、活动力强,从不认输,淘宝倒立者赢

黄色:幽默、工作能力强,黄帝老子的专享色,QQ黄钻尊贵特权

2 )中意那些冷色调的用户性格

绿色:自然、和平、有社会责任感,环保意识强,到安居客找房、大家应该见识豆瓣豆油愤青、拍砖的厉害吧

蓝色:礼貌、谦虚、协调能力强,给人以稳重、可靠的感觉,例如财付通

灰色:有教养、知识丰富,苹果官网所要塑造的气氛

4、色彩学习小结

以上是结合《每天懂一点色彩心理学》知识与平时网站策划工作经验所作的一个整理,作为项目的推动角色或产品设计的灵魂人物,对产品不能光有骨架式的产品原型设计,还应有赋予产品血与肉的设想、乃至规定。其实色彩心理学的应用范围远远不止与网站,例如着装打扮、会议交际、甚至减肥都有色彩心理学应用的实践案例,如有兴趣就请进入这本书的讲解吧,每天哪怕懂一点。

美团式社会化媒体营销

三月 19th, 2010

团上线也有一段时间了,今天意外发现美团8元的咖啡玉米达到了3006个订单、近30%的订单转化率,虽然是低价值产品。熟悉电子商务的同学知道30%的转化率对一个电商网站来说是个相当了不起的数字,虽然不排除美团团队的测试成分。我们不禁要问美团是如何达到了呢?下面是对美团的页面设计和营销做些分析,分享给大家。

一  美团测试用户价值

只要邮件订阅美团的团购信息的同学,都会在凌晨(注意是凌晨,已经有同学抱怨过这种扰民行为)收到美团的当天的团购活动电子邮件,对比最近一周的营销邮件主题,我们会发现,美团在测试用户对团购价格的敏感性。如下图,从3月11号35元逐渐增加到3月15日的188元,然后又减到最近的38元,团购物件范围设计年轻人中意的美食、娱乐,美团在试图探索团购价格的中间值,以此来锁定美团的目标用户价值。

二 、美团对电子邮件页面关键区点击监控

除了对每期团购活动建立不同的campaign营销主题,通过运用Google分析的链接生成器(链接生成器的地址是 http://www.google.com/support/analytics/bin/answer.py?hl=cn&answer=55578 )生成监控链接,分别对导航logo、查看button、邀请referral文字链、查看更多readmore分别建立utm,这样可以对每天的营销主题的进行监控,甚至通过后台分析邮件页面那块点击次数最多和更有吸引力~

如下图

http://www.meituan.com/?utm_campaign=bakeluo&utm_medium=email&utm_source=newsletter&utm_content=logo

B    http://www.meituan.com/deal/bakeluo.html?utm_campaign=bakeluo&utm_medium=email&utm_source=newsletter&utm_content=button

C    http://www.meituan.com/account/referrals?utm_campaign=bakeluo&utm_medium=email&utm_source=newsletter&utm_content=referral

将上面的链接翻译为汉字,其所表达的意思如下:

  • 营销主题:bakeluo巴克洛
  • 营销媒介:email电子邮件
  • 流量来源:newsletter(注:个人认为此处美团没做细致,对邮件群发可以细分邮箱来源,如QQ邮箱、网易邮箱等,可以统计各自邮件的转化率但这里 一概而过了)
  • 点击位置:导航logo/查看今日团购button/邀请购买refferal

三 美团的社会化营销

美团从一开始诞生就注重了社会化营销的页面设计,并注重通过时下兴起的各类微博、转帖进行社会化营销。

例如美团网首页分享到:对于dancingheaven每天根据不同营销主题确定链接

QQ/MSN

http://www.meituan.com/deal/dancingheaven.html?utm_campaign=VisitorReferral&utm_medium=im&utm_source=visitor

新浪围脖:

http://www.meituan.com/deal/dancingheaven.html?utm_campaign=VisitorReferral&utm_medium=sinat&utm_source=visitor

将上面的链接翻译为汉字,其所表达的意思如下:

  • 营销主题:访问型(Visitor)推荐
  • 营销媒介:有IM工具、开心网、人人、豆瓣、新浪微博、邮件
  • 流量来源:访问型用户

而登录后根据用户名在这里对应为u234来监测登录用户的推荐量

QQ/MSN

http://www.meituan.com/deal/kafeiyumi.html?utm_campaign=UserReferral&utm_medium=im&utm_source=u234

新浪围脖:

http://www.meituan.com/deal/kafeiyumi.html?utm_campaign=UserReferral&utm_medium=sinat&utm_source=u234

将上面的链接翻译为汉字,其所表达的意思如下:

  • 营销主题:用户(User)推荐
  • 营销媒介:有IM工具、开心网、人人、豆瓣、新浪微博、邮件
  • 流量来源:某具体用户

综合上面分析,美团式社会化营销不仅在针对于营销,更在于社会化上,社会化式的页面设计,另外加再上社会化式的监控分析,给网站营销插上网站分析的利器,带来的订单必定精准而高效。另外从链接分析得知或许我是美团的第234个用户,: ),顺便埋个伏笔:怎样知道美团最新的用户数呢? 详情可F我的新浪微博

豆瓣变脸记

三月 13th, 2010

豆瓣又一如既然在变形着,不过这次变在是未登录豆瓣首页,是portal页面,更是脸面,今天阿北们或许又是在搞豆瓣式昙花一现测试法,在深圳本机上用chrome可以显示出来,ie则不行,显示的是老豆瓣首页。和旧版对比,UI干净、清爽,留白也恰到好处;页面信息分布则头轻脚重,页面高度也有原来的两屏半变为三屏半。
分析如下:
A区:导航依然强调了豆瓣改版的战略改变,读书、电影、音乐、九点等产品独立发展,其中读书、电影、音乐中各嵌入一个搜索小图标,以示豆瓣“发现生活”的目标定位。只不过三个小图标在色调上没有啥差异性

B区:注册登录也做了一些调整,除了展示多彩多姿的豆瓣城市小资生活背景外,更加突出注册功能,显示豆瓣对用户数增长的  痴迷,依然是吸星大法式拉取,想必下一步豆瓣依然在老用户与新用户的取舍上更加偏向新用户口味。

C区:“同城、小组、正在发生”告诉人们豆瓣线下生活的丰富多样,社区概念得到加强,更加强调同城设计生活

D区:“电台、迷你站、线上活动”体现了豆瓣线上生活也有特色。

通过以上分析,豆瓣这次变脸强调各产品独立发展的战略转变,同时试图注重加人的情况下,对用户提供更丰富更有实际意义线上、线下“双线”生活服务。给豆瓣的建议是:

一 B与CD区的那条分横线实在让人看这别扭,加之与A区与B区的分割,分明让人看到两条横线映在眼帘,硬生生的把登录区域夹在中间

二 CD区的信息密度较大,适当做些删减,更能体现豆瓣简洁的特色

Related Posts with Thumbnails