你走路的方式会透露出你的哪些性格？

为什么有些人竟然会回忆起不曾发生过的事情？

夏天出生的人和冬天出生的人谁运气更好？

真心的笑容和虚假的笑容都打着哪些难以掩饰的烙印？……

原文访问：娿九的博客《怪诞心理学》分享

首先，凭第一个感觉在你的额头上画一个“Q”,记住小尾巴的方向如下图（听过分享的同学请自动忽略）

一、时间心理学

现在都回来，我们来阅读下面这段文字：

你需要别人喜欢你和欣赏你，但你通常对自己要求苛刻。虽然你在个性上的确有一些弱点，但你通常能够设法加以弥补。你在某些方面的能力并没有得到充分的发挥，所以还未能变成你的优势。从外表来看，你是一个讲求自律和自制的人，但内心却常常焦虑不安。有时候，你会强烈地怀疑自己是不是做出了正确的决定或正确的事情。你倾向于让自己的生活有所改变和变得丰富多彩，在遇到约束和限制时你会感到不满。你很自豪自己是一个能够独立思考的人，如果没有令人满意的证据，你不会接受别人的观点和说法。不过，你也觉得在别人面前过于直言不讳并不是明智之举。有时候你很外向，比较容易亲近，也乐于与人交往，但有时候你却很内向，比较小心谨慎，而且沉默寡言。你有很多梦想，其中有一些看起来相当不切实际。

实验这里就不做了，简单说一下，曾经一个美国的教授在让自己的学生做了心里测试之后发给学生每人一样的性格描述后，百分80的学生在给准确性上打了满分，最低的也不低于3分（满分5分）。然而在教授告诉学生实情之后，学生在打分，就大部分只有1分2分了。

出生时的星象位置并不会对一个人的个性产生什么魔法效应。然后，的确有那么一些人，由于对占星学中的星座和性格之间的关系非常熟悉，竟然真的就变成了具有某种星座特质的人。

理学家伯特伦·福勒于1948年通过试验证明的一种心理学现象, 人们常常认为一种笼统的、一般性的人格描述十分准确地揭示了自己的特点，心理学上将这种倾向称为“巴纳姆效应”。

天生幸运儿

这是作者对40W志愿者做的一个调查成果，夏天出生的人比冬天出生的人更觉得幸运的比较多，关于这点原因的分析，可能是因为冬天的环境比较恶劣，所以父母相对比较保护婴孩，也就导致了独立性以及发现新事物的比例相对夏天出生的孩子要少，但是有一点毋庸置疑，幸运的人一定是性格外向，容易接受新的机遇。

为什么6月份的柱状要低一些，作者的解释原因是统计偏差。

二、撒谎和欺骗心理学

泛美式微笑

1852年，一位年轻的法国艺术家从巴黎一家宾馆的四层窗口纵身跃下，并留下一封遗书：多年来，她得微笑把我折磨得几近绝望，现在我宁愿选择结束生命

这个笑容大家应该第一反应就能知道，她是蒙娜丽莎的微笑

500年来，人们一直对《蒙娜丽莎》神秘的微笑莫衷一是。不同的观者或在不同的时间去看，感受似乎都不同。有时觉得她笑得舒畅温柔，有时又显得严肃，有时像是略含哀伤，有时甚至显出讥嘲和揶揄。在一幅画中，光线的变化不能像在雕塑中产生那样大的差别。但在蒙娜丽莎的脸上，微暗的阴影时隐时现，为她的双眼与唇部披上了一层面纱。而人的笑容主要表现在眼角和嘴角上，达 ·芬奇却偏把这些部位画得若隐若现，没有明确的界线，因此才会有这令人捉摸不定的“神秘的微笑”。 人们同样也把这种并不那么真实的微笑称为泛美式微笑。

杜胥内微笑

心理学家保罗·艾克曼说，只有能活动到特定肌肉的微笑，才是能感受到幸福的“真正的微笑”。他一共发现了19种微笑，而其中18种是假笑。而那种让我们确实感到幸福和快乐的微笑是：嘴角上翘，双眼稍微靠近，眼角起了皱纹，眼睛下面的脸颊上浮现的，是真正的微笑，它被命名为“杜胥内微笑”。对比上图中眼角皱纹的变化，判断哪一个是发自内心的微笑。

记忆可塑性

人类记忆的可塑性要比我们所能够想象的更为惊人。一旦某位权威人士指出我们有过某种经历，多数人都会觉得很难否认，随后就会用设想填补记忆中的空缺。经过一段时间之后，事实和虚构情节之间的界限就变得难以区分了，于是我们开始相信谎言。这种效果的力量是如此强大，以至于有时候我们并不需要权威的声音也能够愚弄自己。有时候，我们甚至完全有能力把自己骗得团团转。暗示的欺骗效果并不仅仅会让世界上的领导人把虚构的故事当作事实。职业骗子（或者魔术师）也会使用同样的技巧，并以此让人们相信他们曾经历过不可能发生的事情。

三、灵异心理学

回文

O，Draconian devil！（啊，严酷的魔王！）

        Oh，Lame Saint！（噢，瘸腿的圣徒！）

         重新排列就变成了：

         Leonardo da Vinci！（列昂纳多。达。芬奇！）

         The Mona Lisa！（蒙娜丽莎！）

       （以上片段取自书本《达芬奇密码》）

巧合

英国每天都有上百起巧合时间发生，曾经有一个球迷在球场上狂欢时候，随手抓了一张从天空中飘下的碎纸片，纸片上印的正式这位球迷自己家的电话号码。

四、幽默心理学

大脑半球与幽默

在拥挤的广场上，一名男子走到一位妇人旁边问：“抱歉，你看到这附近哪里有警察吗？” “对不起”，这位妇人说：“我找了好久也没有看到一个警察。”

可能的笑点：

1．那么好吧，你可以把自己的手表和项链交出来吗？

2．哦，没关系，我都找了半个小时了，连个警察的影子也没看见

3．棒球是我最喜欢的运动

你选哪个作为笑点，一般情况下，大部分的同学都会选1对不对，请问有没有同学觉得3是最好笑的笑点？

-

-

-

-

-

-

选3的同学，据实验论证的各位学者称是因为：大脑右半球受损，所以觉得3是最有笑点的。

五、决策心理学

小费的多少取决于？

服务态度，店家质量，地理环境，天气等是一些客观事物对当事人影响的因素，有时候有些行为细节，会是一些决定性的因素，例如：在客人吃饭结账时候，递过账单时候手微微轻触这样的细微接触会使小费加倍，这是经过怪诞心理学这本书的作者和伙伴们经过多次试验论证的结论。

消费打折

原价20英镑的计算器，售货员告诉你明天将会打折售价5英镑，你会选择今天买还是明天买？在换一个，售价999英镑的电脑，售货员同样告诉你，明天会便宜15英镑，你会选择今天买还是明天买？大部分的人在第一个计算器的选择上都会是明天来买，而电脑，大部分的人不会特地等到明天在来买，同样是便宜了15英镑，为什么会有不同的方式对待这两次购买行为？大多数人在购物并不是以绝对值来计算到底可以省下多少钱，而是以能够节省的金额在支出总额中所占的比例来衡量。

潜意识决定

在很多实验中都表明，潜意识可以决定购买行为，工作者们在电影中加入了可口可乐和爆米花的信息，这些信息展现的时间在千分之一秒左右，分别插入在不同的画面之间，事实上，观看电影的人并没有特别的感受，但是却导致这家电影院的爆米花和可乐的销量增加了一倍。

六、自私心理学

比较社会上人们最信任和最不信任的两类人在诚实度上的差异，这两类人分别是牧师和二手车商。最近的盖洛普民意调查结果显示，59％的人认为神职人员是诚实的，但只有50％的人觉得汽车销售员比较诚实。那么这种观念能够反映现实中诚实度的真实情况吗?为了找出问题的答案，研究团队成立了一家虚假的室内装饰公司，公司的名称就是“诚信”，他们从新成立的公司给一群牧师和二手车商寄了一封信，感谢他们最近购买公司的产品，并随信附上了一张10英镑的支票作为返款。所有收到信的人都应该很清楚他们并没有从这家公司买过任何东西，但其中会有多少人不诚实地把这张支票兑现呢?结果证明两组人的表现没有太大的区别，大约50％的牧师和50％的二手车商都将拿到的支票兑现了。

城市生活节奏

实验者们造访了23个国家的首都，丢了400多支钢笔，戴了500多次假腿支架，并丢了大约800个信封。丢信封技巧被证明在各种文化中都会是一场噩梦。在特拉维夫，放在地上或汽车挡风玻璃上的包裹和信封往往会被当成炸弹，因此所有人都会远离这些东西。在萨尔瓦多，这些信封会引起人们的怀疑，因为它们跟一种著名的诈骗伎俩有关。如果有人捡起了信封，就会发现自己身边站着一个人，后者会说信封是他的，而且信封里放着一些现金。但现在信封里的钱却不见了，所以他们要求捡信封的人把他们辛苦挣来的钱还给他们。有些国家根本就没有邮筒，或者就像阿尔巴尼亚一样，没有可以信赖的邮政系统。不过，尽管面临重重困难，研究人员还是坚持下来了，并最终绘出了国际助人为乐排行榜。

研究结果对于拉丁美洲人来说的确是个好消息，里约热内卢(巴西)和圣何塞(哥斯达黎加)排在了最乐于助人城市的前两位。位居第三的是非洲的利隆圭(马拉维)。排在倒数前三名的分别是新加坡(新加坡)、纽约(美国)和吉隆坡(马来西亚)。不同地区在助人为乐上的差异程度还不是一星半点。在里约热内卢和利隆圭，大街上的每一个“盲人”实验者都得到了帮助，然而，他们在新加坡和吉隆坡成功得到帮助的比例竟然只有50％。在圣何塞，95％的人都会帮装有假腿支架的实验者捡起掉在地上的杂志，但在纽约却只有28％的人愿意伸出援手。

对美国城市里助人为乐的情况做了进一步的深入分析后，莱文和他的同事们发现，人口的密集程度是预测助人为乐程度的最佳指标。人口密度越大，助人为乐的程度就越低，这又是为什么呢?依据米尔格兰姆的理论，在人口众多的城市里，人们会更有更多的“感觉超负荷”经历。来自他人、手机、交通和广告的各种信息一直在对人们狂轰乱炸。结果他们就只能和所有需要处理大量信息的系统一样工作，那就是给所有的信息排列优先顺序，花最少的时间应付各种分散其注意力的琐事。米尔格兰姆认为，正因如此，人们才会从需要帮助的人身边径直走过去，从而把帮助这些人的责任推到了别人身上。所有这一切导致了一种自相矛盾的现象：某一个空间里的人越多，人们的孤独和孤立感就会越强烈。

小结语

《怪诞心理学》这本书主要讲了6种心理学情况，时间心理，撒谎与欺骗心理，灵异心理，幽默心理，决策心理，自私心理，所举的例子互相之间都有从属关系，列如幽默心理中，对金发女郎的嘲笑笑话也是一种撒谎与欺骗心理等等…

在文章最开头的一个小实验，还记得那个小“Q”吗？现在公布结果：

Q的小尾巴，如果画好之后是左图，那就说明你比较在意别人眼中的你，行为决定也比较容易受人影响;右图，说明你比较独乐乐，并且相对而言，你比较自私一点。

有一个实验者在研究微笑的过程中有这么一段描述，打保龄球的选手，在投出满分后，有些人在转身前微笑，而有些人在转身后才对着朋友或者观众微笑，那牵着就是独乐乐人群，后者是比较在意别人眼中的自己了。。。

分享资料下载：（等待图片加载完成后另存为，可打印）

隐形的尺寸、边缘的思量、手势的语汇、动画的语法… 看得见的视觉，看不见的视觉背后的设计故事——阿里巴巴中国站无线产品经验总结…

原文链接：http://liuchenhuan.net/?p=1610

项目成员：刘宸寰（为一），夏明芬（夏夏）， 黄海 （黄黄），裴芸，邱燕维（维维）

如果我们想知道浏览某个页面的用户到底在看些什么？一般往有如下几种方法：1.查看点击流数据，如CTR（Click through rate，点击转化率/点选率）、点击热图（Heat Map，可用于测试不同的布局方式、配色方案等对整体效果造成的影响）；2.眼动测试，可得到用户的注视轨迹、某一区块的注视时间、注视点个数、回扫次数，及注视热图等。3.用户访谈和用户测试，定性了解用户的浏览行为及其背后的原因。

方法1属定量分析，方法2和方法3属于定性研究。针对于用户对页面信息关注度问题的研究，页面的点击数据并不是一切，我们无法准确分析那些不能产生有效点击的浏览行为，而定性研究虽然可以挖掘用户关注的信息及其原因，但是无法量化，说服力不足。所以一般采用定量和定性方法结合来研究。

本文要探讨的是基于定量与定性分析之间的灰色方案，即利用问卷的选择题来挖掘分析用户对页面信息的关注度。问卷调研既可以了解用户的行为和态度，又由于收集量较大，具有一定的说服力。问卷中，对于涉及点击行为的指标，可以结合点击数据进行验证分析；对于不涉及点击行为的指标，可先利用定性研究（如用户访谈）确定调研内容、设计选项，再利用问卷收集数据来量化用户观点。

选择题设计的注意点：

1.题型的选择。

题型可以有多选题、单选题、评分题。根据调研内容确定题型。如想知道用户比较关注的信息版块，而现有的信息版块个数较多，超过了5个（数据参考：渡劫  调研问卷中多选题的分析方法探讨（2）），就用多选题，如图1；如果小于5个，比如现有旺铺的产品版块分类基于4种常见方式，则可采用评分题，如图2。评分题与多选题的区别在于评分题让用户评价更为细腻，但填答成本较高，所以适用于选项较少（一般不超过5个）的题目。如果调研内容需要明确最为关注、最常使用等性质的信息，则应采用单选题迫选，以明确问题。

图1  多选题示例

图2  评分题示例

图3  单选题示例

2.选项设计

与访谈时的双向互动不同，用户填写问卷是单向的反馈行为，因此将选项内容清晰准确的传达给用户尤为重要。有几个注意点分享给大家：

1）选项设计基于定性调研结果，切忌调研人员主观猜想用户可能的行为。选项应尽可能包含所有可能的情况，选项的细分程度会直接影响到调研结论的推断。

2）选项的文案应尽量采用用户语言。调研人员平时可多留意用户在反馈中使用的措辞，调研中保持客观中立的态度才能收获更多用户的心理细节。

3）结合图片、文字补充说明选项内容。如图1的图片展示和图3选项中括号内文字的例举解释。

下面结合案例进行分析：

案例名称：服装买家对旺铺首页信息的关注度调研

一、调研目的

帮助卖家了解买家，打造优质旺铺首页。

二、调研思路

1.调研对象如何选取？

考虑到旺铺首页装修的行业差异性，决定先选取一个行业进行试点调研，由于服装行业的在线交易量较高，有利于后期测试旺铺首页转化率的变化，因而本次调研对象选定为服装行业买家。

2.调研方法如何选择？

本调研属定量验证用户的目标和观点，所以采用问卷调研，投放渠道为IM浮出。问卷中的题型有：

1） 多选题    如：在下图所展示的产品信息中，我较为关注的是（图1）

2） 量表题    如：请按您对下列几类产品的关注程度评分（图2）

此题需进行关注指数计算。关注指数表示用户对该信息的关注程度，介于0 ～1之间。关注指数越接近1，关注度程度越高。关注指数=（1 × 权值a+2 × 权值b+……+5 × 权值e）/5，权值为选择某个分值的人数占比。

3） 单选题    如：下述产品分类中，最便于我查找产品的是（图3）

3.调研内容

1）买家最关注哪些信息版块？

2）对于供应商信息、产品信息、公司信息的点点滴滴，买家最关注哪些？

3）什么样的产品分类最吸引买家，最便于他们的查找？

问卷中涉及的用户背景信息分类方式如下：

1）按购买行为分：典型买家（在阿里巴巴有过采购行为，只买不卖）、买卖都有（在阿里巴巴有过采购行为，买卖都有）、闲逛买家（在阿里巴巴没有采购行为，但有采购意愿）。

2）按性别分：男、女

3）按年龄分：18～25、26～35、36及以上（注：18周岁以下不允许开通旺铺）

背景信息是问卷统计分析中进行群体观点对比的重要划分维度。

4.调研说明

问卷有效回收332份。样本中买家与买卖都有人数之比与实际总体略有不同（见表1），这是网络调研经常会遇到的样本结构有偏问题，解决措施为比例加权，使样本的关键结构调整到与总体的关键结构相一致。权值=某类群体在总体占比/该类群体在样本占比，比例加权仅在本调研的样本总体统计中用到，不涉及按用户背景分类后的群体统计。

表1 比例加权的权值计算

 三、调研结果（列出部分）

1. 服装买家一到旺铺首页就直奔主题，最关注供应产品版块（80%）。在看产品的过程中也会按卖家对供应产品的分类进行查找（61%）。当然也少不了要审核下供应商信息（73%），还有联系方式（55%）也是买家们重点在查看的。

2.卖家在推广产品时，往往把产品分成若干大类，常见命名有：店主推荐产品、热销产品、促销产品、最新产品。根据本调研显示，买家其实最关注热销产品和最新产品。

3. 服装买家们最喜欢点击产品分类查看产品信息（59%），在众多杂乱的产品分类方式中，他们最习惯于按产品类型（如上衣、裙装、下装等）查找产品（44%）。

（省去部分结果）

四、调研总结

本调研是利用问卷中的选择题进行信息关注研究的案例，统计方法不涉及复杂的数学建模，方便统计初学者着手使用。且调研成本较低，调研周期较短，值得推荐给大家使用。

调研的注意点：

1.问卷题项的设计应以对调查内容定性了解为基础。本调研的选项设计来源与对阿里巴巴中国网站现有旺铺首页内容的定性总结和归类。其他可采用方法如：参考历史调研资料、用户访谈等。

2.当样本数量小于1000时，如果回收样本中关键结构有偏，建议进行加权修正。

3.调研步骤小结：

第一步，通过查看历史调研资料、访谈用户，设计问卷题目选项，确定用户背景信息内容。

第二步，投放问卷

第三步，收集、统计问卷数据

第四步，整理报告。报告中，对于涉及点击行为的指标，可以结合点击数据进行验证分析；对于不涉及点击行为的指标，则利用问卷收集数据来量化分析用户观点。

文末，谢谢阅读，欢迎批评指正：）

一、PhoneGap是什么？

PhoneGap是一个标准的开源框架，用PhoneGap开发移动应用是免费的，无论是商业或是开源；一个用基于HTML，CSS和JavaScript的，创建跨平台移动应用的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。

PhoneGap由Nitobi 公司创建，并于2011.10被Adobe收购，并捐赠给Apache基金组织，PhoneGap是唯一的一个支持7个平台的开源移动框架。框架提供了丰富接口用于访问移动设备本地API，能够让你用javascript轻松调用。当前最新版本：1.5。

目前开发移动程序框架选择很多，如PhoneGap、Titanium、MonoTouch、Native App，兼容性越强的技术，成本越低，性能越差；兼容性越差的技术，成本越高，性能越好。PhoneGap是目前最被看好的：

•  兼容性：完全做到了Written Once，Run Everywhere!
• 标准化：PhoneGap采用W3C标准，Web App直接运行！
• 采用普通web开发技术：JavaScript+HTM5+CSS3。

存在不足：

• 性能，正常操作速度流畅，频繁操作响应会变慢。
• 稳定性及资源占用方面，手动频繁操作会引起，响应速度变慢，webkit的WebView不能很好释放内存，导致内存占用上升，甚至会引起应用的crash。

二、PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：

• WebView组件实质是移动设备的内置浏览器

WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发。

• WebView提供Web和设备本地API双向通信的能力

PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

PhoneGap与设备本地API通信图

一个成熟的PhoneGap技术客户端运行状况：应用运行在WebView组件上 -> 通过PhoneGap在各平台的扩展 -> 最终访问设备本地资源。

PhoneGap架构图

三、API指南

四、参考资料

1、Javascript移动开发框架

• jQuery Mobile：http://jquerymobile.com/
• jQTouch：http://jqtouch.com
• Sencha Touch: http://mobile.51cto.com/Sencha-278623.htm

PhoneGap + 合适的javascript开发框架，轻松开发出原生风格的移动应用。选择哪种js框架，你可以通过:《三大移动Web开发框比较分析》一文，选择适合的框架。

2、PhoneGap社区

• PhoneGap官网：http://phonegap.com/
• PhoneGap中国社区： http://www.phonegap.cn
• PhoneGap中国： http://www.phonegapcn.com/
• 51CTO专题（跨平台移动web中间件PhoneGap开发入门） ：http://mobile.51cto.com/hot-273792.htm

一、常见视觉效果是如何实现的

关于文字效果

文字自身属性相关的效果css中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为ps中图层样式中的效果，css是无能为力的。但是css也在不断发展，在css3中已经新增了文字阴影的效果，可惜IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。

说说文字间距

在css中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道css中有相应的属性，并且需要使用文字间距的场景也不多，另一方面，浏览器解析文字间距的方式也令这一属性在某些场景下无法使用，比如在文字居中的时候，实际居中的区域是包含了文字间距的（如上图），使得在视觉效果上让人无法接受，所在当需要在文字中保留一定空间的时候（比如两个字的按钮），会直接用空格来代替。

不过多知道一种实现文字间距的方法总是好的，虽然目前来看应用场景很少，但是也许某天就派上用场了。比如12号的雅黑文本看上去会感觉密密麻麻的，但是加上一点文字间距，阅读效果就会好很多。

关于字体

网页里中文文本字体一般都是宋体，不建议使用其他字体，但是其实字体是可以上传到服务器，然后页面中引用该字体，就解决了用户电脑上没有相应字体的问题。不过很少有人会这么做，为什么呢？1.浏览器是可以设置忽略网页字体，改用用户设置的字体(IE:工具->Internet选项->辅助功能)。2.服务器上的字体是需要加载的，而一个字体一般都几兆，严重影响页面载入速度。所以对于特殊字体，通常都是做成图片。

关于背景

看看通常一个按钮是怎么拼出来。

产品类的按钮我们一般都是像A这样设计（中间段是横向的重复图案），而不是像B这样，因为产品类的按钮一般都是复用的，可以用两段拼出来一个按钮，而B这个宽度就限死了。

关于渐变、圆角、投影

在css3中终于实现了渐变、圆角和投影，不过可惜的是IE6、7、8均不支持，但是已经可以在越来越多的网站中看到新css的应用，尤其是按钮，淡淡的渐变，hover上去有点淡淡的阴影，效果很好，对于不支持的浏览器，设置一个颜色近似的背景，看到的是单色、直角效果。

需要注意的是：代码实现的只能是线性渐变，从某个颜色均匀的渐变到另外一个颜色，所以高光什么的只能舍弃了。css3中还有径向渐变，不过暂时应用场景不多。

互联网发展速度很快，大大小小的新技术很多，多和前端交流吧。

关于对齐

主要是表单中文字的上下居中对齐，在ps里很简单，但是实现出来却如上图所示的，很难看，要想对齐，真是件麻烦的事情，没有好的办法。所以不是特别关键的地方，建议就随它去了。

二、前端是如何切图的

第一步 拼图

为了加快页面加载速度，会把多张图片拼在一张图片上。

第二步 保存为Web所用格式

网页上的图片，照片、banner类一般保存为jpg，其他的，通常都是保存为png-8或gif（除了动态图片需要用到gif，其他场景png-8完全可以替代gif），png-8和gif的透明都是只有全透明和全不透明，不像png-24有半透明，而IE6又不支持png-24，所以半透明的图片一般都是保存为png-8或者gif。
保存为png-8或者gif的时候，会有一个杂边的问题，即保存的时候图片的半透明部分会与杂边的颜色混合。

杂边的颜色会选择图片应用场景的背景色，而产品类的图片，像icon，会应用在很多场景，所以只能选用一个通用的背景色，比如基本浅色底为主的会选用白色为杂边的颜色。
遇到深色底，杂边会很明显。

这种情景，只能是再为深色底重新保存一张相应杂边的图片。
对于保存为png-8或者gif的图片，有时候会看到图片呈现带状感（如下图右侧），失真很严重。

有两个办法，一是增加颜色的数量，但是增加数量会导致图片变大，需要在颜色数量和图片大小之间取一个平衡，而且如果图片上颜色太多，就算颜色数量增到最大256，依旧会有明显的带状感，这时候可以把图片拆开，把颜色类似的图片拼在一张图上。

三、页面布局相关

元素叠加的效果

通过外补丁(margin)、绝对定位(position:absolute)可以实现多个元素互相叠加的效果，使得设计上不受布局的局限。

固定屏幕的效果

某些特殊场景使用（如上图的“回顶部”），解决跟随的问题。

了解前端知识，不仅在沟通上更顺畅,设计上更合理，对于设计过程也有一定的帮助，比如在设计控件的时候，ps里看hover样式始终不够直观，这时可以把控件实现出来，直观的去感受，调整你的设计稿直到满意为止。虽然成本比较大，但是对于需要仔细推敲的控件来说还是值得的。

某人曾说过，好的技术能带来设计上的突破，而好的设计也能促进前端技术的发展。css3、在线编辑头像，很多技术的出现改变了设计的方式，向后多走一步吧！

没错，在这个信息爆炸的时代，借助图形化的手段，高效和清晰的交流信息是数据可视化的目的所在，作为一种信息载体，她拥有对数据的多种表现形式，可以是美丽的且带有趣味性的，以前对于数据在图形上表现只是停留在饼图、柱状图和直方图等简单的视觉表现形式上，为了更加有效的传达数据信息，帮助用户理解引起共鸣，依附与目前多媒体的科技手段，可视化的表现形式从平面到三维，媒介形式从纸张到网络以及视频，在互动性及时效性上都不断发生着变化。

当然，之所以将数据的外衣称之为美，也并不意味这对于她的表现仅仅只是拥有华丽的视觉外观而已，而更重要的是能把握好外观与信息本身功能之间的平衡关系。有学者认为这是理性与感性、“美”与“用”结合的一种设计方式，我很赞同这样的说法，如果对于可视化的设计只是为了漂亮而绘制出图形复杂内容空洞的数据图形是没有任何意义的。

上图为David Mccandless在Informationisbeatiful上发布的《怎么样做出好的可视化设计》

曾看过不少的相关类型设计文章，都对于可视化的设计方式拥有一个比较同一的说法——关注视觉上的信噪比，这也许是所有视觉传达设计共有的一个核心概念，将其衍生到数据可视化的设计领域应该就是将文字，图表、图形等核心的关键元素予以强调并清晰表达在媒介之上，弱化或者去除没有必要的符号，线条，列表等，而后再对信息根据不同的纬度(平面或者立体)划分并重组，逐步对数据进行视觉化的呈现。

对于数据的可视化并不是很新的一种设计表现思路，在史前时期的洞穴壁画中的体现到土耳其地区公元前7500年出现的地图再到1786年威廉普莱费尔《The Commercial and Political Atlas》数据型图表、1861年卡尔斯拿破仑东征（征俄）的信息图表等都表现出了可视化设计的雏形，历史的沿革一直带动着此类设计的发展，到了现代随着科技日新月异，对于各类设计的划分及定位也逐渐细致，可视化以其美丽雅致的外型、对于特定人群所关注的信息清晰定位才再一次成为了众设计师们关注的焦点，我们也才可以通过更加多的设计手段对于这类设计进行更好的呈现。

上图为商代甲骨文象形文字

上图为经典的卡尔斯拿破仑东征（征俄）信息图

说了那么多可视化的好处，难道到她就没什么弊端吗？？答案是否定的，可视化的优势在我看来是图形语言的传播速度比较快，而且范围广, 一般的语言文字无法相比，但对于相对复杂的可视化数据图表，必须要针对特定人群绘制才能降低理解的成本，而在这一点上语言文字相对而言更具有普遍的适配性，(这跟咱们平时的icon绘制很相似，如果绘制的图形不能很好的映射当前功能的操作，那不如用文字来清楚明白)，并且数据可视化是一门综合的学科，并不是单纯靠视觉上的表现能解决所有问题的，她涉及数据采集、统计学、动画、三维建模、制图学，影象学等等，一旦要立项所涉及的成本还是挺高的，在项目的任何一个环节都需要比较高的专业度去完成，才可以拿出一个比较好的作品。

数据的可视化是一种让人痛并快乐着的设计形式，作为一个视觉动物，我一直为其漂亮的外部表现形式所折服，网上也找一些案例，根据不同的表现形式及自己的个人的理解进行了归纳和分类与大家分享。

动态视频的数据可视化案例：图形阐释音乐

互动型的数据可视化案例：与电脑玩剪刀石头布

http://www.nytimes.com/interactive/science/rock-paper-scissors.html(有兴趣的同学可以去玩一下)此类设计形式重在突出用户参与性、娱乐性及信息的实时性

静态的数据可视化案例:根据视觉呈现的样式进行划分

(极区图)：视觉上的特点是以中心为基点，向外发散，构成图形好像花朵也称为玫瑰图

(桑基图)：视觉上的特点是图的始末端两端连线的宽度相等又称为能量平衡图

(矩形式图):顾名思义都是方块状的格子，在大小色彩上对信息进行区分

(热力图)：这类图是一种使用冷暖色来映射二维变量，以便于做出聚类分析的图像，擅长用于体现频率、密度等

(树状图)：感官上比较象树根的分支，可以描述事件的进程或者数据的流程等

(HyperbolicTree图)：美国施乐公司的专利，可用Java和JavaScript的实现，上图为阿里巴巴中国站首页HTML的结构图表现。(蓝色：链接A标记，红色：表、TR和TD标签，绿色：DIV标记，紫：图像IMG标记，黄：表格、输入、文本区域、选择和选项标记，橙色：换行符和引用文字BR、P和BLOCKQUOTE标签，黑色： 源码所有其他标记的HTML标记，灰色：根节点)

(气泡图)：使用点形的设计元素，以大小色彩密度的变化描述数据状态

(地图)：最根本的设计元素是地图，常与气泡图一起以组合的出现，描述地址位置、交通及人口分布、收入分配等

本文对于可视化案例整理及分类只是冰山一角，根据不同的信息纬度去划分还有非常多的设计形式，比如按时间线、情感化的因素或数据内在关联性等等。(欢迎同学们组队拍砖)

写在最后，一直很喜欢日本的一位设计大师-原研哉，用他的一段话与各位设计的同学共勉：设计师的任务就是提高信息的品质，增强传播的力量。技术的进步并不能直接带来信息品质的提高。“如何更容易了解？如何令人更加舒适？如何更为简单的传达?如何才能让人感动？”这些才是衡量设计师的信息处理能力的尺度。创意并不是要让人惊异它崭新的形式和素材，而应该让人惊异于它居然来自于看似平凡的日常生活。不断的开发出这些创意才是真正的设计。

身为一个业余摄影爱好者，平时有机会总喜欢拍点照片，今天和大家分享一下我的一点心得体会。
为什么要摄影？
摄影更像是生命的图像日记，比文字更真实，具体，迅速。当“咔嚓”的一瞬间，这一秒钟已经成为历史，但记录的图片却成了留给未来的一份珍贵礼物。所以，拿起相机，拍照吧！把美好的瞬间和事物记录下来。

怎么样能拍出更有表现力的照片？

1.合理的构图

2.对比的运用

• 大小的对比

通过这种强烈的对比，使画面更具视觉冲击力，小的更小，大的更大。下图如果没有人物的对比，可能不能更好的表现海天一色的开阔场景，整个画面也会死板无趣。

• 色彩的对比

摄影中对于色彩的对比运用场景很多，在元素纷杂的情况下，往往主体会通过色彩的对比突显出来，画面并不会显得凌乱，就是“万绿丛中一点红”的道理，下面有两个例子。

• 明暗的对比

摄影也是一门光影的艺术，通过明暗对比，光影的配合，有时能使整个画面营造特别的氛围，表达出作品想要表现的情绪。下面剪影的瓦力和拍摄绘画作品的女孩都有体现明暗对比的效果，主体对象的轮廓更为明显。

• 虚实的对比

3 .视觉的引导

在构图时给观众一个视觉的引导，更好的表现空间的变化，事物的运动趋势，甚至让画面更有张力和动感。

比如下图鸭妈妈要带孩子们去哪里？观众的视线会随着它们游动的路线看到前方的环境，所以采用竖向构图给它们要去的方向留有必要的空间，知道这是在西湖拍的一张照片，整体有了一种流动感，空间上相对开放。因为比较仓促，只考虑了构图，光线上还是有些过曝的小遗憾。

这张图片是选用曹方的一张宣传海报，也有视觉引导的运用，从画面上能看到女孩从哪里走来，很好的增加纵深感和很强的层次感。

图片中人物视线的方向也是一种视觉引导，那么所看方向的位置就应给一些空间。

4.拍有趣的照片

相对于合理的构图，一张照片的趣味性也尤为重要。为了让照片更为生动、有趣，在拍人物时可以设计别出心裁的表情动作，这一定比一张“到此一游”式的摆平更出彩。现在网络上很流行的“浮游照”，“ 趴街照”都是别出心裁的照片，大大增强了趣味性。另外，就是需要一双善于发现美的眼睛（这话怎么这么耳熟？），有时甚至需要抓拍捕捉住有趣的瞬间。

5.实践与学习

想要提高摄影水平，了解基础知识还是不够的，更多的还是需要实践练习，在不知道如何构图最好的情况下，不妨多按几次快门，多换几个角度，先把画面“记录”下来，后面可以再优化，在电脑中选择最好的一张，构图和光线等不理想的地方，可以通过ps裁切和处理，改善照片最终的效果，照片的后期处理其实对我而言，也是很享受的一个过程。除此自外，更重要的是平时多看一下高手的摄影作品，会有不错的收获的。

以上都是个人一些粗浅的观点，欢迎大家批评指正，多多交流。

现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的“长大”产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品或公司的战略计划相适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一个全面细致的考虑了。

我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从2005年 Adobe 收购了原最大的竞争对手Macromedia公司后，它的产品线得到了极大丰富， 而后在2002年Adobe确立了 Creative Suite概念后，后续的新产品持续推出，庞大的产品线以一种什么样的展现方式呈现在用户面前便成为了一项非常重要的课题。下图中我大致的列了一下Adobe产品logo的一个进化转变过程：

产品阵容强大的Adobe帝国在CreativeSuite 3发布的时候为旗下全部产品Logo进行一个色环划分图，很好的呈现出各产品logo的色彩关系和一个完整的用色体系。

我们再看一个例子，Apple公司在2010年和2011年先后将itunes与App store的Logo作出了比较重大的调整，到Max OS Lion版本时，两大平台级的产品新形象同时展现在用户Mac的Dock上。虽无准确的官方答案，但从一个是整个Apple产品资源应用来源和一个是娱乐内容来源的的两个具有类似性质的商业平台产品来看，它们显然是被Apple寄予相当大期望，在感观上看来，它们在被赋予更厚重、大气的形象这一改变，能够很好的服务于其公司的商业战略。

另外itunes 10的发布后侧栏的图标全部变成了单色，这一变化我认为是为了突出Store的资源核心区域，强调产品的平台性，和上述的分析一样，这个视觉表现层面的调整同样是为了整个产品的资源商业战略服务的。

那现在回到我们自己的产品，现在“我的阿里”作为一个网商用户的得力助手，用户的家，“我的阿里”内容与应用在日益的增长，系统越来越庞大，同样网站的视觉的图形语言的整理，解决原来积累已久的视觉表现“乱象”也日益的紧迫。

在“我的阿里”视觉元素整理的第一步，众多应用图标是头一个切入点，我们从图标的含义，分类，尺寸规格、设计规则，风格表现等几个方面进行一个整体方向的规划，总结一套设计指南。

■ 在图标的分类上，我们将网站图标分为以下三类：

一  产品图标 （Logo）

它是一款产品在品牌层面上的定义，指一个产品系统形象、定位和诉求的集中图形化表现，产品图标（Logo）起到产品或公司识别推广作用，通过形象的图形标识让用户认识、记住并熟识一个产品。

产品图标设计原则：

1 能很好的诠释出该产品所承载的功能 和 所要向用户传达的产品价值和形象；

2 图形容易被用户所记忆、熟知，而且有较强的排它性（不易和其它图标混淆）。

二  产品界面中的功能、工具图标

在一个产品界面中，用概括精炼的形象来表示某一类功能或操作集合的功能性图形标识，常会有成组有规律的在某一功能模块中出现。色彩造型表现可以精致富有表现力，也可以简洁明了，质感单纯。

功能、工具图标设计原则：

1 表意清晰明了，采用大家均已接受的特定含义的元素图形；

2 视觉体验统一，视觉语言自成体系；

一个功能模块里面的图标尺寸要有较好的视觉平衡性；

一功能模块内甚至整个产品的图标的质感、色彩饱和度要统一；

成套的多个图标内，图形语义要有较好的一致性。

3 需要注意图标各层面意义上的继承性问题，避免让用户造成识别上的困难。

三  图形符号

一般表现为直接的操作按钮或标明该操作的辅助标识符号，图形表现为简洁明了，用色简洁、扁平。

■ 在整站图标尺寸规格方面，虽然Web 页面的图标不需要像操作系统或者客户端软件那样，对图标尺寸有着

严格的尺寸限制，但为了网站的视觉体验的规范性和统一性，“我的阿里”图标规范中根据以往图标各尺寸的使

用情况来约定3种常用尺寸：48×48 pix 、32×32 pix 、16×16 pix，

以后整站的图标根据各自的位置和需要，将有序的根据规则加上相应尺寸的图标，这样网站在图标符号展示层

面上将会给用户留下一个规范、专业的印象。

■ 在图标的设计过程中还需要注意下面这些问题：

上图第一排蓝色的4个图标看起来会显得大小尺寸参差不齐，这是因为虽然觉得尺寸可以是一样的，但是外轮廓饱满的实心图形在给人的视觉感受上会产生放大效应，而第二排深色的4个图标大小看起来则会更加协调一些。在下图可以看到，外轮廓饱满的图形进行了一定的边缘收缩，来与其它图形达到视觉均衡。

这要求设计图标在符合约定的图标尺寸的同时，需要注意多个图标的视觉均衡问题，在制作成套图标的时候，根据这个规律来选择留白的空间比例。

此外单个图标要很好的把握外轮廓与图形形状的均衡关系，构成图标的图形需要尽量的接近一个正方块，使得图形饱满、平衡。

■ 在我的阿里应用图标风格表现方面为了使原来的各业务、应用图标和将来新增的图标能够实现非常好的统一性，我们做出了包括图标视角、构成元素、光源质感、倒角这些方面的约束：

图标的绘制视角为所组成物体的正前视角，在必要情况下可以有一定角度的俯视角。这样是既在大原则上保证了整体的统一性，但规则也不至于太过僵硬，仍有相当的空间让设计师去发挥创意。

整个 icon 元素为  3个以下，最多为3个元素构成 ，组合方式以一个主体元素  配合一个（最多两个）辅助元素。避免众多的图标，各自的图形符号多寡不一，避免在图形组合方式上造成的不统一。

图标的光源方向是正上方，图标颜色渐变方向是垂直方向的线性渐变，颜色从上到下由浅到深。图标的颜色渐变幅度较小，偏扁平感，渐变幅度不要太大以至质感过重。

应用图标约定的三种不同尺寸icon 的倒角的大小，以便在集中展示的时候在细节支出依然有良好的一致性。

经过以上这样一套设计指南的规范、约定能尽可能的保证原来老图标和后期新增加的都能有一个规则可寻，对整个网站整个产品的品质方面，用户友好性方面能起到一个积极的作用。

这里只从应用图标这一切入点介绍了产品视觉元素统一性的解决方案，当然网站还有其它各类控件模块，同样也需要实现类似的标准化统一体验，后面仍有许多工作需要开展。