创造力的利用

很多人都有过这样的经验，在宜家，小米公司，某宝这样的地方购买过需要通过自己动手组装成完整的商品。它们在详情介绍中会很大程度的渲染这个东西很好很坚固，加上说明书那些复杂的象形步骤图，吸引着我们去尝试。但，结果很少像你期望的那样坚固和耐用。在大学那会我也买过一个需要自己组装咖啡桌，用了几个月，桌子就开始摇晃，甚至有倾斜的现象，不管怎样，我都会尽力去做点补救措施。为什么我会那么执着的在这个坏桌子上再去投入精力修复它呢？这种事情并不是我一个人有体会。许多人都很坚持长时间使用自己亲手自制的东西，甚至超过自己的想像。

心理学家迈克•诺顿，丹尼尔•莫乔和达恩•艾瑞里在消费者心理学杂志上发表的新研究说明了这个现象。内容指出，“做一些事情，投入你自己的血液和汗水（包括自己的情绪和想法）到一个物理对象中，似乎会给它带来额外的价值，并且超过它固有的质量，研究人员将其称为“宜家效应”。“宜家效应”是一种认知偏差，可以在很大程度上影响产品的实际意义和感知价值，增强用户和产品之间的联系。

举个例子，在20世纪40年代，各种即时烘烤配料在美国兴起，美国食品制造商希望缩短制作蛋糕所需的时间和精力。他们简化了制作中需要添加水（或牛奶）和鸡蛋的过程。结果人们都不认可。为什么呢？一个名叫欧内斯特•迪克特的心理学家。他发现原因是这个配方使得人们在做蛋糕时所需的努力水平降低了！太容易了！显然，人们没有得到满意的烘焙蛋糕体验。然后制造商想出了解决办法，将干混合配置粉里的鸡蛋牛奶成份剥离出来，让人们自己在后期制作过程中添加。这样之后，神奇般的使得销售额再次上升。可见，把鸡蛋和牛奶加到蛋糕粉里这样最小的努力也能使我们从做蛋糕里获得成就！这说明啊定制不仅仅是个人的偏好，投资的努力也会增加用户对产品的好感！其实还有很多这样的例子，比如说旅游，从前更多都是跟团游，“付了钱，我享受”的思维。而现在现在各色各样的亲子团，游学行，自由行，加入更多在过程中需要投入劳动的体验场景，反而也让旅游变得更有意义，用户也为此买单。

对设计而言，宜家效应能给我们带来怎样的思路，它可以以什么样的形式融入设计中呢？

我们来看一个科学家桑德斯关于对消费水平的研究，从典型的购物体验中得到的所有东西，可以将它们分为：购物，购买，拥有和使用四个层次，而且，这四种层次的创造力，都是每天人类所需要的我们用一个表来阐述一下：

这个表格看到人的4个层次的创造力，在设计实践中是如何帮助到我们呢？当你考虑到不同的用户体验方法时，你可以回想起这些水平，并考虑你的目标用户的创造力水平。在你的目标受众中，定制和协同生产的需求越多，宜家效应的价值就会对你的产品影响就越大。当任务成功完成时，这种效果可以让产品的用户粘性提高。在我们生活中其实有很多这样的例子，折纸，十字绣，乐高，手作玩具，小米的组装路由器......它们都让粉丝们参与到产品输出的过程来，参与到其中进一步成为品牌的忠实粉丝。

谷歌出的一款网页游戏Interland，它通过一些有趣的方式让孩子参与进来，从而增强孩子对网络安全责任心和提升他们对网络信息安全的意识。每个关卡的设计，通过有趣的形式，（问答，计算，收集卡片，给予爱心关怀）让孩子思考，动手，通过他们的付出和完成任务，让他们不知不觉中学习到这些难以用言语去宣导学习的安全知识。在这个过程，“宜家效应”原则同样起着重要的作用。

那只是让用户参与到其中就能产生宜家效应了吗？答案是否定的。刚提到要任务成功完成的时候，效果才会出现。正如Anton Nikolov在设计原则Ikea Effect文中提出的，低投入，高贡献度价值，高回报的任务才能够让用户产生很好的宜家效应。无论是小米的组装路由器，手工还是谷歌的这个线上的游戏，都是让目标对象成功的完成任务的。而且这些是具有趣和情感付出的过程。是产品与用户的交互行为，也是产品模型与用户心理模型匹配的过程。

QQ运动中，跑步轨迹的设计就引入了“宜家效应”，充分把自由给予用户。用户可以在自己熟悉的跑步线路中创建DIY路线。让同行运动者共同加入一起跑这条路线。对优秀的UGC线路贡献者进行激励。这种PGC + UGC的模式，扩大运动跑者本来的炫耀需求，也解决了初级跑者不知去哪跑的问题。专业跑者对自己创建专属路线，会产生依恋和自豪感。同时线路粉丝的一同参与，增加有趣和被认同感。

1.“宜家效应”视角下的新运动观

我们通常会认为，运动是人们在自由时间内进行的非社会责任性活动。从劳动的疲倦，压力，和身体健康所需中解放出来，补充能量以再次投入生存的方式。从这点出发，绝大多数人会认为你教我如何健康运动，给我准确的运动数据就可以了。这样，虽然是得到了运动基本需求，却失去了更深的运动享受，所以，想得到更大的运动享受，有些地方自己多出点力还是值得的。

“宜家效应”促使我们对跑步运动与运动者之间的关系进行重新认识。跑步是出于自身爱好的创造性运动，可以使人产生长远和深刻的满足。因此在跑步中加入新玩法，不能破坏掉这个行为的产生，运动者固然需要解脱感自由感快乐感，这是基础感觉，让他们得到存在感，自主感，超越感，成就感更能把运动者对此项运动的持续归属感激发出来，从而提高跑者对平台的粘性。

2.创造在用户技能基础上的高价值体验

在跑步入口界面，用户对运动功能启动有一个直观的认识，可以启动跑步功能或者健走功能，再往后，继续挖掘“专属”的轨迹路线。地图上展示了各种各样的线路上面。还有坐标显示有多少人在跑。用户点开路线会看到该路线的参与人数以及他们的龙虎榜，对有着竞赛挑战和新功能的好奇，进一步促进用户去了解如何产生新线路，让自己成为新路线的第一人！当用户尝试的时候会发现，这个功能并不是只针对专业跑者而设立的，每位用户都可以发现一个新的地方，申报一个路线。降低用户这一执行的门槛，快速融入。

在创建路线轨迹 - 申报轨迹路线的过程中用户是能直接预见到这条线路被创建之后它所能产生的影响力，用户在原来被动使用功能变为自己主动参与到产品的开发中，满足运动跑者心里需求和精神体验需求。

3.由“参与互动式”向“创意式体验”转变

我们需要意识到一个事实，即用户在任何时候都没有处于同一水平的创造力。因此，我们需要迎合这些不同的层次。在QQ运动跑步的数据上看。跑步大多数的人都是持续跑者，我们需要这小部分人带动其他大部分初跑者。对于创建者来说，可以DIY自己的路线。做自己路线的代言人，路线吸引了一定数量的参与者后，会得到一定的激励。对于参与者来说，解决了他们不知道跑哪里的问题。还有同行者一起参与，还会有奖励。这对于一般的参与者来说。他在这里将得到比他高预期的回报。

从产出 - 创造体验点 - 创意者和参与者一同融入 - 创造运动价值更能让用户从单一的运动型向体验型运动转变！

最后

宜家效应作为一种认知偏差，是用户主观感受的体现，也为我们提升用户体验提供一种方法和思路。有时候我们的设计不是要为用户全盘设计好所有的东西。我们也应该让用户参与到设计中来，提高他们对产品的品牌忠诚度，这样我们的设计就会更受欢迎！

谢谢阅读〜

起因与结果

如果按照正常的解决问题流程，小孩子提出需求：“随便”。母亲对需求做出了回应，即，按自己的喜好随便做了几道，按理说，任务顺理成章地完成了，那为什么小孩子仍然不满意结果？

这个例子和我们工作中遇到的问题很相似，设计师辛辛苦苦依照需求方的要求输出了完美的解决方案，结果却不能达到对方预期，这是由于我们在沟通过程中，对需求理解产生了偏差。本文就和大家探讨下如何解决理解偏差这件事。

为什么会产生理解偏差

首先我们看下人是如何形成对事物的认知的，医学界研究认为：我们反复地通过感觉、知觉、注意、思维、语言等生理心理活动来形成对问题的认知。感觉和知觉作为接收信息的方式，吸收什么内容，就决定了思维，注意力，语言会有怎样的活动。这也就自然，影响一个人对问题的理解方式。

小孩子说出随便时，母亲接收到信息，感觉，知觉上对随便的历史记忆被唤醒，没有经验的母亲会认为随便=没要求，这也就造成了之后按自己喜好做小孩不满意的结果，导致对需求产生理解偏差。

如何解决理解偏差

之所以会这样，核心自在于没有抓到对方的深层动机。如何抓住动机呢？介绍一种方法：

步骤1. 明确深层动机链：先分清什么样的动机是深层动机，究竟有哪几类，再针对性地给出解决方案；

步骤2. 挖掘信息传递中的隐藏偏差：因为环境，利益背景等原因，可能会在交流过程中，产生不被注意的误解，心理学中将这种误解称为隐藏偏差，明确了对方动机属于哪一类后，也要避开隐藏偏差，才能最终给出有效的解决方案。

步骤1. 明确深层动机链

每个需求的背后都有深层动机，我们想要输出满意的解决方案，先确认对方需求的深层动机是什么。这里当然要回归到产品设计中，产品需求的深层动机链条上主要有以下几类动机：

以微云举例，我们一个一个来分解。

A. 竞争导向动机

通常这类需求的目的就是把握住市场走向，并赶在竞品前推出功能。是为了在市场变成红海前抢占第一批种子用户，通过新功能打击对手。

/ 如何应对：快速响应即可 /

因为此类需求通常产品形态，流程都比较清晰，设计师应对时，只需要把握住基本的设计原则，技巧，快速输出设计稿即可，同时可以尝试在微交互层面创新。

B. 驱动消费动机

用户的消费行为是受动机支配的，动机来源于需要，需要是客观刺激物作用于人脑所引起的某种缺乏状态。产品经理通常会与设计师讨论如何在产品内创造这种刺激物，我想重点讲下这一环，这也是设计师可以发挥最多的一部分。

/ 如何应对：动机细化拆解 /

我们不妨继续细化，消费心理学把驱动产生消费行为的动机分为了两类：情感动机，理智动机。

情感动机

什么是情感动机

这是种由于人的喜怒哀乐等情绪和道德，情操，群体，观念等情感因素所引发的购买动机，基于游戏设计中的Octalysis(八角分析法)，根据左脑，右脑，积极，负面划分成了以下几类：

我们一个一个来

1.好奇心理消费

好奇心理持续时间通常不会很久，很容易产生转移，所以要持续性地更新内容才能利用用户的好奇心理。并且，在寻找刺激物的过程中，十分依赖记忆，来判断刺激物是否足够熟悉。并且好奇心理会激发学习需求，反过来影响记忆。比如新奇的刺激物通常伴有不可预知的奖励属性，这种未知性能够刺激用户去学习探索，获得更好的记忆。

好奇心理的目的通常是获取奖励，奖励包含开心，快乐等积极的感觉。

在满足好奇心的过程中，大脑的神经传导物质将很多区域链接形成回路，刺激生成多巴胺，成瘾类物质，多巴胺就可以被算作奖励的一种。

现代人很多都患有FOMO（Fearing of Missing Out）病，生怕自己遗漏任何可以刺激产生多巴胺的消息，来回在app间跳转，刷信息流就是病症体现。如果希望利用用户好奇心理，除了依靠定期更新内容外，设计师也可以通过不同板块间，充满故事性的内容引导，利用故事本身所具备的未知性，剧情性，刺激用户产生多巴胺，就可以达到满足好奇心的目的。

2.炫耀心理消费

需求法则告诉我们，通常产品的价格越高，需求数量会相对减少。但炫耀型消费则正好相反，经济学家范伯伦通过”范勃伦商品”理论解释了炫耀消费的价格需求关系：炫耀性消费是为了展示财富和地位，所以商品价格会成为一个重要的衡量指标，价格越高，消费欲望反而更强，需求数量越多。

炫耀消费的产品特色是商品需求与商品价格成正向关系，正常需求法则呈现反向关系。炫耀心理已经作为经济学中的一种非常重要的经济原动力。

炫耀型消费的目的不是为了获取商品的实际使用价值，而是通过购买商品来显示或让他人感知到自己的社会地位。

设计师如果希望通过利用炫耀心理刺激付费，可以尝试制定多种价格的会员体系，例如我们在微云内尝试设计了普通会员和超级会员两种体系，价格递增，超级会员拥有更大容量和更多特权，但这不够，我们在一些社交曝光入口上通过铭牌样式体现身份，地位，就能抓住炫耀性消费的用户群。

3.社会比较心理消费

什么是社会比较心理

换句话说，就是我们常提的攀比，社会学家称之为“比照集团行为”，本质上是消费者基于自己所处的阶层，身份，以及地位的认同，从而选择所在人群为参照而表现出的消费行为。 社会心理学家Leon Festinger将比较心理分为了两层:

1) 向上社会比较

当人趋向于选择较为优秀的群体进行比较时，就是向上社会比较心理。这类心理的目的在于获取优秀群体的认同感，归属感。人们倾向于相信自己属于较为优秀的阶层中，也会通过比较心理产生自我驱动力。

向上社会比较可以用在冷启动中，通过营造一种优质的产品氛围（例如大V在用，内容精致）让更多的用户产生自我驱动力，在产品中寻找群体认同感。

2) 向下社会比较

当人趋向于选择较差的个体或环境比较，从而体现自我优越处境时，就是向下社会比较。第一眼看，似乎这属于消极心理，我们设计时不应该鼓励利用这种心理。但其实本质上，向下比较的目的在于在获取积极感受从而提升自我社会处境。设计师可以此为切入点。

所以如果设计师能够利用好向下社会比较去进行设计，也可以获取较好的效果。例如网速打败了全国xx位对手的案例，就利用了这个点突破（比较中获取积极感受）。

4.感受尊重心理消费

什么是感受尊重心理

用户在产生购买行为过程中，如果感受到了高度的尊重，权利，相对就会对产品价格的关注度降低。受尊重需求也是经典的马斯洛需求理论(Maslow’s Hierachy of needs)的第四层，属于较高级需求。心理学将感受尊重心理分为了两层：

初级：获得他人尊重。这类心理通常需要获得地位，他人认同，名誉，威望以及关注

高级：自我认同。自我认同属于尊重心理中较为高级的类型。比如，人们通常需要认识到自己拥有权利，竞争力，掌控感，自主感。

首先如何利用高级尊重心理，营销学中有三条建议：体现人文关爱；注意礼仪；给予更多权利给用户。从本质上来说，让用户感受到自己在app内处于一种高姿态，要给用户一种“产品是为我服务的”的感觉。

其次如何利用初级感受尊重心理，这里分享一个故事：

有一天，松下幸之助在一家餐厅招待客人，一行人都点了牛排。待他们都吃完主餐后，松下便让助理去请烹调牛排的主厨过来。

助理这才注意到，松下的牛排只吃了一半，心想过一会儿的场面可能会很尴尬。主厨很快就过来了，他的表情很紧张，因为他知道请自己来的人是大名鼎鼎的松下幸之助先生。

“有什么问题吗，先生？”主厨紧张地问。

“对你来说，烹调牛排也不成问题，”松下说，“但我只能吃一半。原因不在于厨艺，牛排真的很好吃，但我已80高龄了，胃口大不如以前。”

此时，大家都困惑得面面相觑，过了一会才明白这是怎么回事。

“我想当面和他谈，因为我担心他看到吃了一半的牛排被送回厨房，心里会很难过。”

松下先生其实是站在对方角度，利用同理心去满足了对方获得尊重的需要。在已发生的事件上，让自己进入他人的角色，体会他人因环境背景，自身生理，心理状态，更接近他人在本位上的感受与逻辑，让对方处于高姿态。

如果希望抓住用户感受尊重心理刺激消费，设计师要善用同理心，通过观察，分析，讨论，思考上述的几点。就能充分利用用户的初级感受尊重心理，从而达到刺激消费的目的。举例界面上复用的方式，比如：在不可撤销操作前，告知用户后果并二次询问用户；适当地控制push次数，对每次的打扰行为都要克制，制定好产品逻辑，在用户需要的时候下发push打扰用户 。

理智动机

什么是理智动机

消费者在对产品有了清醒的认知与了解后，所做出的理性抉择和购买行为。这种动机通常集中在有一定的生活阅历的人群中，此类人群在生活中养成了爱思考的习惯，并将这种习惯带入到了商品购买中。

消费者在比较多款云盘产品后，最终决定购买微云的容量，这种消费行为通常具有客观性，计划性以及自主控制的特点。

心理学中，理智动机的类型与产品本身属性具有强关联性，按照购买行为进行分类：

／产生购买动机前／

1. 追求实用：理智动机中，消费通常不会过多关注包装，品牌。要求产品本身的实用性。

工具类产品包装会员卖点时，要侧重于实用型的功能，并明确告知所带来的好处，让用户觉得物有所值；

2. 安全可靠：安全性会成为理智动机中的重要一环，产品有没有满足用户的安全感，理性用户在乎这点，设计师也需要把尊重用户隐私这件事情放在首位；

3. 美感：用户在进行理智决策前，视觉美感会成为很重要的一个影响点

／执行购买行为中／

4. 购买方便：在选择性较少的情况下，理智用户会倾向选择购买方便的产品。出方案时要尽可能多地侧重打磨支付场景。

弱网环境导致支付失败，有没有及时回退的操作，同时将支付流程缩到最短，不要让用户在这个环节中等待太久。

／购买行为结束后／

5. 售后服务：购买结束后，产品的售后服务也决定了用户是否下次会再来，体验并没有随着购买行为的结束而结束。

设计师要注意产品中的反馈，帮助模块，这些也是用户对产品体验感知的一部分。

C体验修复型动机

/ 如何应对：关键链拆解 /

此类动机想必各位设计师已经比较熟悉，每个版本迭代都会对应地修复一些体验。通常，体验修复是需要设计师主动驱动的，但如果产品有此类动机，是一个健康的现象。设计师可以先将动机拆解为局部功能和全局体验两类：

1. 局部体验：上一版本遗留问题。例如微云上个版本优化了预览页的体验，后期发现了一个操作按钮位置的问题，但由于实现时间紧张，没有在这个版本修改。这个问题就可以迭代解决。

2. 全局体验：历史遗留积累下来的问题。例如微云全局页面转场顺序，警示控件上有统一性较低的问题。这类问题与版本功能无关，属于基础体验，而且一旦修改，就需要梳理整个产品所有的场景。

每个版本根据需求疏密程度分情况跟进解决。项目管理学中，介绍了一种方法：Critical Chain Project Management（关键链项目管理），由Eliyahu M. Goldratt.提出，方法核心是要把最多的资源要利用在优先级最高的任务上。管理学科有研究发现，传统的按照时间先后管理项目的方法，通常会产生30%的时间资源浪费。规定一个时间节点完成，就容易产生学生症候群(student syndrome)，就是我们所说的拖延症。同时，只强调时间节点的项目安排方式，会增加多任务并行的风险，从而在高频的任务切换中间，浪费了资源和时间。

Critical Chain Project Management的核心在于：

1. 辨别出优先级最高的事项

有10个体验点要优化，下个版本做哪个？我们可以利用Eisenhower法则，将任务分解为四个象限：重要且紧急，重要不紧急，紧急不重要，不重要也不紧急。重要性的界定则和你的目标有关。例如：微云最近在办公侧有所发力，那么下个版本的体验点，和在线编辑，共享组相关的，都应该是被算作重要且紧急的象限内。

2. 列举出有多少可卷入的资源

每个体验点都需要哪些角色参与？相应的，有多少对应角色（设计师，重构，开发，测试等）可以被卷入进来？评估完需要参与的角色后，要将信息同步到所有角色中，并正式授权，如果对方接受，那么进入后续排期，研发工作；如果不接受，可以尝试回归到1，双方先达成优先级共识。

3. 缓冲管理

为项目提供一个简单，易用的项目健康视图，保证关键体验不会出现偏差。并且在出现较大偏差时，采取一些纠正的措施。

D探索试错型动机

此类动机产品经理通常没有很明确的目的或者需求，希望能试水市场，用户反映，当然，也不乏拍脑袋做的决定。

谈如何应对前，我们先分析下为什么会产生此类动机。行为学对探索试错型动机有另一个名词解释：尝试错误法。这种方法通常有以下几个特征：

1. 解决问题导向：试错法不会去探讨某个方法是否合理，只关注这个方法是否解决问题

2. 针对某个特定问题：试错法不会去寻找一种普适性的方法

3. 没有最佳化：试错法只找出某种解法，但不会寻找多个解法，亦不会找出最佳解法

4. 仅需要最低限度的知识：即使对目标领域只有少量知识，试错法仍然可以被拿来使用

/ 如何应对：问题导向 /

按照刚才提到的几个特征，我们会发现，试错型动机中，问题导向很明确，产品会更加关注有没有解决问题，相对地会弱化方案的细节。

例如在国内云盘市场对办公定位不是很明晰时，我们和产品经理定下了这个办公侧重点，并且尝试寻找微软作为合作商，最终定下了在线协同编辑这个切入点。当时面临的处境就是试水，最终对方案时，产品经理更加倾向于看整体流程是否能跑通，各个场景是否有覆盖全。相对地则会弱化按钮的位置，弹窗内的控件布局等细节。

所以，当拿到这类需求时，不要先调入纠结控件布局，按钮位置这种细节中，可以先将设计思路上升一个维度，思考以下几个问题：

1. 这个需求解决了用户什么问题（问题导向）

2. 这个需求给产品带来什么好处，例如收入，用户增长，行业方向推动（目的导向）

3. 这个需求是否围绕着现有用户画像制定的（不脱离用户群，减少对未知领域的不可掌控度）

从这几个思路入手，不要去试图寻找一种通用的解决方案，一期先搭好框架，收集用户反馈，试水后，根据反馈进行第二阶段的调整，细化。可以节省在纠结上耗费的时间。

小结：基于步骤1的方法，我们已经可以对需求背后的动机有个大致分类，并且能够有的放矢地应对。下面，我们继续讲如何解决沟通中产生的隐藏偏差。

步骤2. 挖掘信息传递中的隐藏偏差

什么是隐藏偏差

明确了动机类型后，我们还要确认信息传递过程中是否会产生隐藏偏差。平日沟通中，对话双方会因为利益站队，信息掌握度，以及信息处理能力的不同，导致沟通时对问题理解不一致，产生应激冲突。冲突过程中，大脑启动心理防卫机制，这种机制有自我欺骗性，会掩饰我们的真正动机，从而让对方产生理解偏差。但遗憾的是，我们通常不会注意到这个问题。在愤怒情绪下，会产生刻意否认，歪曲，转移等行为，也会增加达成共同认可的难度，形成越来越大的理解偏差。Simon Fisher称之隐藏偏差。也正是这个偏差，导致了上述双方不欢而散。

你呕心沥血做完了流程设计，发现某个页面可以加个有趣的小动画，于是加班加点赶了出来，拿到开发同学那边，惨遭白眼：“功能已经可以满足用户了，为什么要加这些有的没的动画，还浪费资源。”此时你的设计师尊严受挫，很生气，直接开始PK。最后双方不欢而散。

我们拆解下：

双方在动画的问题上的利益站队不同，开发同学偏向于实现功能，而设计师追求设计感，完美

双方信息掌握度不同，开发同学掌握技术，知道动画带来的工作量，设计师虽然可以勾画出动画样式，但对具体落地的开发难度不了解

双方对信息处理能力不同，开发同学的应激反应并不是不希望产品更有设计感，只是出于压力，时间关系的第一反应，设计师由于对方案的自尊心，第一时间误解对方，认为过激抵触其实是没有追求的表现。

/ 如何应对：目标求同 /

每个行为的背后都有目标，沟通是达到目标的一个手段，如果这个手段会使我们会产生偏差，那不妨回归到目标。两者目标达成一致，便能很好地解决问题。

根据Don Norman的反思，行为，本能三个层次，我们可以把对方目标分为商业目标，用户价值目标和可行性目标三种。

那回到上述例子，设计师希望在功能基础上增加一个动画，不难发现，商业目标和可行性目标上和开发同学出现偏差。从提高可行性角度考虑，可以通过使用更低成本的动画输出方式，lottie，origami等。

商业目标上，高质量的动画是可以带来优质体验的，但如果对方在这点没有达成一致，或许就是动画质量本身的问题了，找对方对齐信息，然后针对性地调整。切忌一昧地生气，PK。

挖掘隐藏偏差，方法就在于拿方案沟通时，不要急着否认，或着急下手做，先把对方的目标拆解，一个个地对齐，尽可能达到目标一致，这样偏差自然就解决了。

总结

本文和大家探讨了，为什么我们按照对方的要求出的解决方案，最终却不能让人满意。建议使用两个步骤去解决这个问题：

1. 首先明确在产品设计过程中，对方都会产生哪类的动机，针对性地采取不同应对方式；

2. 挖掘交流中的隐藏偏差，通过拆解目标，求同存异，达到双方目标一致。

希望每个设计师都能在工作中，有的放矢，一箭命中核心动机，输出高质量的设计方案。

前言导语

在响应式项目中，百分比的数值的应用越来越多，比如栅格化布局、背景定位、内边距等。以往对于这种数值，我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长，特别是除不尽的数值如23.33333333%。数据不美观不说，关键对于这种小数位的位数应该如何取舍，一直以来都没有理论依据。

为了解决这个问题，我们需要先了解浏览器是如何处理这些小数位的。对于小数位的处理，不同的浏览器有不同的处理方法，主要有三种：处理成整数、保留4位小数或保留15位小数。现代浏览器基本支持保留小数位的处理。由于显示器是由像素单元组成的，对于小于1像素的部分，是无法像像素级那样精确地处理的，而是采用亚像素渲染的方式进行处理（有兴趣了解亚像素渲染，可查看这篇文章“Subpixel rendering”）。这里我们借用 Alex Kilgour 的实验页面对常用的浏览器进行测试，具体实验页面见“带小数位的百分比、像素测试页面”。

一、测试实验

本次实验主要分为三组：

（一）第一组

第一组是测试页面中的例子1，本组主要测试浏览器对百分比小数位的值是如何处理的，方法是设置两个huge元素的百分比宽度为：

50.4234112897987342876343455%

50.56976128979878658763435365%

然后再重新获取浏览器渲染后的百分比数值。

浏览器对百分比小数位的处理主要是保留2位、4位、13位或15位，为了测试是通过四舍五入还是截断处理，第一个百分比的值在第3位、5位、14位小数位取小于5的值，而第二个则取大于5的值。

（二）第二组

第二组是测试页面中的例子2，本组主要测试当宽度的像素值有小于1像素的值，浏览器是如何处理的。方法是设置三个box元素的宽度值分别为：620.4px、620.5px、620.6px，然后再通过重新获取浏览器渲染的宽度值。

（三）第三组

第三组是测试页面中的例子3~6，本组主要测试设置了百分比宽度的box元素在浏览器渲染后的宽度值都保留了几位小数位。

实验原理如下：

1、设置一个宽为1200px 或 5120px 的container元素

在栅格化布局中，1200px的页面宽度是常见的宽度；而5120px是5K屏下的屏幕宽度，基本算是正常页面的极限宽度了。选取这两个值，可以测试在正常页面宽度与极限页面宽度时，浏览器的处理情况。

2、将子元素box的宽度设置成 50.423411289798736% 或 50.569761289798784%

3、计算container宽度与“原始百分比” 以及 “浏览器处理后的百分比” 各自相乘后的宽度值

4、直接获取浏览器渲染出来后box元素的宽度值

以container宽为1200px、box的百分比宽度为50.423411289798736%为例。

（1）box的原始百分比就是 50.423411289798736%，那么通过这个百分比换算后的像素宽度值就是：1200 * 50.423411289798736% = 605.0809354775848px

（2）在Chrome浏览器中，box的百分比宽度最终会被四舍五入成50.4234%。通过这个百分比换算后的像素宽度值是：1200 * 50.4234% = 605.0808px

（3）而浏览器渲染后宽度是605.078125px。

我们将第一组的渲染结果填入“宽度的百分比保留的小数位”、第三组的渲染结果填入“渲染后的宽度值保留的小数位”，最终可以得出以下测试结果。

从测试数据可以看出：

“宽度的百分比保留的小数位”方面，所有浏览器都支持小数位的百分比宽度值，其中最短为2位小数位，最长为15位小数位。其中保留15位小数位的浏览器，在最后一位数字的取舍上有一定的偏差，并不是四舍五入的处理。不过最后一位数值对计算后的宽度值的影响很小，所以可以忽略。

如在Safari 10浏览器中，设置了width: 50.423411289798734287634353465%的huge元素，其百分比最后处理成50.423411289798736%。原百分比的15、16位小数是42，但Safari最后处理成6。

“渲染后的宽度值保留的小数位”方面，除了IE8、9外，其他的浏览器都支持保留小数位的宽度值，支持6位或13位小数。与百分比的取舍有点不同的是，亚像素渲染的宽度值的在取舍上存在着一定的偏差，不过偏差基本不大于0.01px。

如在Safari 10浏览器中，设置了50.569761289798784%的box元素，基于container计算的宽度是606.8371354775854px，而实际渲染后的宽度值是606.828125px。

二、百分比位数的取舍

浏览器的渲染情况已经了解了，那小数位的位数上，我们又应该如何取舍呢。在第二组实验中（如下面的图1），我们虽然设置了三个各自相差0.1px的元素，但在亚像素渲染中有所偏差，box2-1与box2-2相差0.109375px，而box2-3与box2-2相差0.09375px。前者的差距仔细看还是能看得出来，但后者的差距小于0.1px肉眼基本看不出来。因此，我们只要控制计算后的误差小于0.1px即可。我们以5K屏的宽度5120作为宽度的极限值。那么可以得出以下结果：

0.1/5120*100 = 0.001953125

从这可以看出，只要保留3位小数，无论第4位以及后面的数值是哪个数，误差范围都不会超过0.1像素。

保留3位小数对于主流的浏览器是足够的，但IE系列只能保留2位小数位。如果舍弃的百分数是0.009999%的话，在极限范围内，其导致的误差将是：

5120*0.009999/100 = 0.5119488

如果在舍弃前宽度是620.8119488，那舍弃后的宽度就是620.3。IE8、IE9对小于1像素的部分是会进行取整处理的，因此舍弃前后的整数值是621和620，那将会出现1像素的误差。对于IE8、IE9，我们无法避免出现1像素的误差，因此我们在设置百分比宽度或背景定位时，需能兼容1像素的误差范围。

三、结论

综合以下情况，我们可以得出以下结论：

1、百分比数值只需保留3位小数即可

2、在兼容IE8、IE9的情况下，无法避免1像素的差距，因此百分比宽度或背景定位时，需能兼容1像素的误差范围。