国际用户体验设计（阿里国际站用户体验设计案例）

国际用户体验设计阿里国际站用户体验设计案例目录\h上篇专业设计师之路\h做好基础\h设计，你也可以\h互联网产品的骨骼与皮肤——产品+运营\h用体验解决商业问题，P4P后台改造\h设计需求分析及模板\h如何做好交互设计的专家评审\h理论到实践\h让你的界面有视觉层次\h用户难触及？数据帮你大胆假设，小心求证\h设计影响行为，行为决定结果\h像心理学家思考，提升设计效益\h精通细节\h跨屏体验设计\h如何设计一套优秀的响应式页面——A的响应式设计经验\h操作平台设计\h无线表单设计\h表单设计：简单设计背后的动机思考\h下篇国际化设计，专业与团队协作\h跨文化设计\h禅意设计——5分钟贯通国际化简洁设计——互联网简洁设计与文化审美之间的关系及视觉设计方法\h从数据到设计——多语言改版探索\h广告中的文字设计\h西文字体的差异化应用\h如何打造一款跨境电商B2BApp\hBC差异化研究——运营活动设计\h系统化协作\h给马云的一幅画\h敏捷设计\h从现在开始关心设计模式吧\h外包项目那些事儿\h14年的管理历程\h附录A：多语言国家研究成果上篇专业设计师之路做好基础设计，你也可以文/郑安婴阿里巴巴国际站（A）对一个普通人而言也许有点陌生，我们的理想是让天下没有难做的生意，让世界各地的生意人在这里相遇、发现商机、沟通、促成生意，建立起长久的合作关系。大型机械、电子产品、服装、医疗产品……你能想到的各个行业的生意人都在这儿有自己的线上店铺，来自世界各地的买家在这里大批量采购他们的商品。这里是一个商机四起的虚拟世界，促成的却是真金白银的真实交易。在未来，贸易将越来越脱离地域的局限和语言的障碍。甚至，不同地域就是商机本身所在。跨境贸易将成为贸易的趋势，生意人凭借聪明智慧玩转没有国界的生意场，让世界各地神奇的产品运转流通。为了让这个伟大的理想变成现实，我和一群充满热情和智慧的伙伴在一起奋斗。我们每天做的工作，就是发现这些神秘的生意人到底会遇到哪些困扰并帮助他们解决困扰，帮助他们成功，帮助他们成为更出色的生意人。美国、印度、澳大利亚、葡萄牙……他们来自世界各地，使用不同的语言，有着不同的文化，他们的习惯和思维方式和普通人一样吗？日理万机，使用互联网打开线上渠道的生意人都无比睿智，他们关注的事物和普通人关注的一样吗？他们做事的方式和普通人又相似吗？他们充满了神秘，这些扑朔迷离的问题也恰恰是我们感兴趣的。阿里巴巴有一条深入公司每位员工内心的原则——拥抱变化。因为我们都相信，机会隐藏在混乱中，成功萌芽于适应变化中。然而，热情只能成为源动力，只有科学的方法才能解决实际问题。我们的公司由各种职能的智囊团组成，市场部、产品部、运营部、销售部、法务部、设计部、测试部、技术开发部……如此丰富的职能造就了复杂的集体知识体系。在共同协作中，我们共同探索着最有效率的解决方法。这本书讲述的是作为一名优秀的设计师，怎样在复杂的业务环境下拆解问题、总结经验，为我们的用户创造最流畅的体验。设计部在阿里巴巴叫做用户体验部（UserExperienceDesign），也是与阿里巴巴“客户第一”原则关联最紧密的部门。如果对艺术设计稍有理解，你一定会好奇，作为通常是艺术创意背景出身的设计工作者，要如何在充满着“交易”、“合同”、“通关”、“退税”此类关键词的环境下发挥设计创意，从而巧妙地解决问题呢？事实上，所有设计师的灵魂就是称为“设计思维”的思维方式，一个设计师之所以可以胜任这个工作，也是因为他具备解决这些问题的能力。因此，我们不介意面对复杂的信息和环境，因为我们生来就是处理它们的。每个人面对问题的处理方法都不同，效率也不同。下文我会简单介绍一些我常用的思维模式，也许可以为你提供一些参考。我有信心向你承诺，只要形成自己解决问题的方法——设计，你也可以。一、发现问题一个好问题才会有一个好答案，想找到一个为你赚钱的好答案，你要先知道如何发现一个好问题。在阿里巴巴国际站，如何让带着大笔订单、犹犹豫豫的买家，和有着丰富产品、带着怀疑、同时时间极少的卖家，以最快的速度顺利沟通起来，进一步形成信任，最后达成越来越多的交易。这件事是我们产品团队最大的问题。甚至为了快速得到答案，比起普通人来说，我们的产品团队不惜进行多次尝试，直到获得正确答案。当我们遇到像上述这样无法简单解答的大问题时，第一个方法就是拆解、细分问题。最基本的方法就是按照以下维度拆分。1.发生问题的用户是谁？2.发生问题的时间和场景是怎样的？3.用户来到这个具体的场景要做什么？4.他在操作和遇到问题时的流程顺序是怎样的？这类似于6W1H原则，也是你认识一个具体问题的真正含义的最佳思考途径。这些问题只是一个良好的开始，你可以顺着这个拆解的思路层层深究，直到你清晰地了解了你的用户真正面临的事件的来龙去脉。举个例子，比如第一个问题：发生问题的用户是谁？这个相对宽泛的问题就可以被继续降解为更细的维度。（1）用户的国家、性别、年龄等基本背景是怎样的？（2）用户所在的公司和职位是怎样的？（3）用户从事这个职位的年限是怎样的？诸如此类。当你感到问题被降解到一个非常具体的程度时，恭喜你，你离提出一个真正的好问题也就不远了。一般而言，在阿里巴巴这样的大型互联网公司，或者任何一个重视大数据的公司，都会在产品不断上线迭代的过程中积累用户的行为数据。比如，一个页面一天有多少用户来访，有多少用户停留超过10分钟，有多少用户不足30秒就离开了，这些具体信息都可以通过数据部门获得。产品经理通常也就是通过挖掘这些数据来发现上述细分问题的初步答案，这些答案不一定就是绝对正确的，但是它们所提供的参考一定会提高产品的精确性。与此同时，你还可以从其他渠道获得问题的答案，比如服务部，他们每天都在面对用户的投诉和意见，这是最好的信息获得渠道。与服务部沟通，也可以为你提供一些答案。当你降解细分的问题收获到足够多的答案以后，你就可以重新回到你最初遇到的大问题上。这时候，原先的那个大问题就会因为细分问题的解答而产生很多边界，从而变得容易回答。举个例子，你想知道：苹果树为什么不结果子？这是一个非常宽泛而难以回答的问题，但是当你通过与各种各样的人沟通，了解了各种信息，这个问题就变成了：种在中国杭州阿里巴巴公司停车库旁边、晒不到太阳、热带品种、树龄3年的苹果树为什么不结果子？这时，你脑海中认为可能正确的答案是否一下就清晰起来了呢？所以，问题解决不了，是因为我们不了解这个问题的方方面面、来龙去脉。一个好问题才会获得一个好答案，而互联网人的基本技能就是发现问题。想要做一个好的设计师，先从你面临的问题开始。在阿里巴巴，我们通常把和产品经理一起讨论解决问题的过程叫作“聊产品需求”，产品需求通常已经落实到了一个产品经理推理出来的解决方案，但是我们会通过阅读他的解决方案，来进一步探讨他真正想解决的问题。这个过程，也就是我们通过设计思维来配合产品经理梳理思路的过程。二、做出假设种在中国杭州阿里巴巴公司停车库旁边、晒不到太阳、热带品种、树龄3年的苹果树为什么不结果子？对于这个问题的正确答案，你有什么猜测？可能是由于苹果树晒不到太阳，可能是由于停车库旁边废气太重，可能是由于苹果树本身还没成熟……这些猜测就可以成为你的假设，一个假设的提出形式通常是“假如我们这样做……，就可以……。”例如：假如我把这棵苹果树搬到太阳底下，它就会结果子了。所以你看，当你有了一个好问题，要做一个假设其实是很容易的。但是要做好这个假设并不容易，就以上的例子，很显然，就算把苹果树搬到太阳光下照射它也不会瞬间结出果子。有经验的人就会做更细致的假设，为这个假设设置更多细分条件。这个做法就和我们刚才降解问题的方法一样。什么时间、什么地点、什么具体情况下，假设我这样做，会获得结果A。另一种条件下，假设我这样做，会获得结果B。这些细致的、分类讨论的假设，最终能很好地回答一个很严谨的问题。面对一个严谨的问题，你要做同样严谨的假设。但其实做出严谨的假设只是最基本的能力，好的设计师需要做出极富创意的假设。比起苹果怎么结果子，我们平时的假设常常是假设某个图片、某个功能区块放在什么位置，使用什么颜色，就可以为用户带来怎样的体验。或者是假设我们为用户安排一系列的操作流程，就可以为用户解决某种具体的问题。这种假设比较复杂，通常会牵扯到各种事件间的相互关联与作用。这种情况下要想做出极富创意的假设，你就需要一个智囊团。他们可以是你的同事、朋友或者家人，挑选一些性格和你非常相似，以及截然相反的人，你能获得更丰富的建议。这些建议会引发你的思考，从而做出一个全面、严谨，同时又充满创意的假设。始终记住，写下假设的人是你，可以听取建议，但是不要随意被影响。尤其重要的是，当你强烈地感到一个假设非常具有可行性，但是遭遇了比较严重的打击时，保护好你的创意，不要轻易放弃它。后面我们会谈到如何科学地证明你的假设是否正确。在阿里巴巴国际站UED，我们很幸运有一支由50多人组成的专业且庞大的团队。通常，当我们了解一个产品经理希望和我们一起解决的问题时，我们会迅速拉上几个同事，然后一起头脑风暴，画一些概念稿。这些概念稿可以很大胆，充满想象，不受拘束，这也是设计师最喜爱的环节。有时候正确答案往往藏在你觉得最不可思议的方案中。三、大胆试错你有了一个严谨的问题，有了一个严谨的假设，但也不能保证你现在做的这个假设就是正确答案。在你的假设变成一个真正的解决方案，被验证成功或是失败之前，你可以先用你的假设去大胆试错，因为这时你犯错的成本是最小的。比起项目上线收益惨淡，现在听听别人对你方案的负面抨击，简直轻如鸿毛。可用性测试是我们喜爱用的一个方式，把你的设计稿做成一个仿真原型，交给你招募来的目标用户，听听他们的反馈。你会发现他们使用一个产品的方式和你设计它的思路完全不一样，你的用户会让你惊讶，给你灵感，他们的反馈是你最好的参考资料。在阿里巴巴，我们有专门的用研团队，他们经常提供给设计师一些访谈技巧的培训，也有很多招募用户的渠道、方法。用户体验设计师的职能也不仅仅局限于美学、艺术、排版、布局，我们更接近用户，我们需要对用户进行了解研究，我们设计的不是产品而是体验。我最近亲自组织了一次海外用户的访谈与测试，用户来自印度、新加坡、英国等地，亲自与使用着英语母语或非英语母语的真正国际用户交谈。他们彬彬有礼，他们吼叫发泄；他们条理清晰，他们喋喋不休；他们友好，他们不耐烦……他们甚至比你有更好的互联网产品思维。走进你的用户，你会发现这些用户带给你的不仅仅是对产品的重新思考，更重要的是为你带来了同理心。真正意识到你设计出来的作品是会被用户认真使用，这件事本身，比其他任何东西都更能促成你做出一个好的设计。当然，有时候我们也会遇到困难，比如：没有资源让我们把产品原型给用户来试错，找不到愿意来测试的国际用户，没有时间，没有人配合。各种各样的问题限制着我们严谨地完成一个项目的步伐。产品经理的催促永远像个定时闹钟一样环绕在耳边。你也一定会遇到一样的问题，想出了也许可以解决问题的办法，但来不及试错，立马就要拿出来用。这种时候我比较鼓励的是，在你的能力范围内尽可能地尝试试错，即使只是很小的尝试。你可以采取的最简单的办法，就是请和你一样了解问题的人就你的假设方案进行讨论。一个被讨论过5分钟的假设，也要胜过一个匆匆拿去实践的假设。我们做的所有努力，都是为了降低假设的出错率，哪怕只降低了0.01%也是成功的一步。四、实现构想说到这里你会发现我没有提过任何一句有关图形、美学、软件应用等方面的技能。当我们谈论到真正把你的构想落地为产出的时候，我们就要聊一聊这个话题了。其实实现手段只是一个设计师的多种能力之一，并不是掌握了图形处理就意味着你成为了一个设计师。技能只是帮助你把构想实现为现实的工具。假设你有很好的构想，又找得到可以为你实现的合作伙伴，你同样可以成功创作出漂亮的设计作品。当然，如果你想做一个具备独立创作能力的设计师，那么你就必须要去学习相关领域的专业知识。比如网页设计，你至少需要学习平面设计、界面设计等知识，掌握任何一项页面及设计软件工具作为起步。工具和专业知识是帮助你做得更好的最好战友，当你左手拥有缜密的设计思维，右手拥有熟练的技能时，你才可以有信心地说，你可以独当一面，为复杂的问题提供完整的解决方案。在阿里巴巴国际站UED，我们设计师的职能分为交互和视觉两种，这两种都只是职位名称，如果你愿意尝试学习更多的技能，通过同事之间互相交流学习、利用项目机会磨练技能，你就可以快速掌握。视觉可以学习交互技能，交互也可以学习视觉技能，甚至还可以向用研团队学习如何和你的用户访谈。在Facebook，设计师的职位名称叫作产品设计师，通常同时担任交互和视觉两种职能。所以，职位只是公司用来管理员工的类目，你并不需要因为职位为自己设定太多局限，最重要的是做你想做的事。说完这些，假设你已经具备了独立设计的能力，或者你已经找到了可以帮助你把构想实现的助手。在具体设计的时候，下面几个要素值得你在执行中特别注意。1.是否符合各项逻辑就像句子有语法，画作有构图与结构。你在完成一个设计的时候，也要从多种角度思考自己的产出物是否经得起推敲。我列举几个维度的逻辑作为参考。推导逻辑：设计产物的推导逻辑，其实就是我们整篇文章前半段一直讨论的——从发现问题、做出假设到大胆试错，这整个过程中你不断修正自己对问题的解决方案，获得了一系列对调整方案有价值的信息，判断筛选这些信息，从而完成对方案的修改，就已经具备了基本逻辑严谨的条件。在这个基础上，再审视每个细节决定，诸如每个页面之间的关系，每一段文字、图片、控件摆放的位置，每个动画效果出现的速度和时机，等等。大到网站架构，小到一个文字的色值，你安排他们的方式是否有切实可靠的原因。物理逻辑：你的设计产物会根据触发条件的不同，发生不同的改变，从而和用户产生交互。在互联网产品出现之前，人们每天打交道的都是自然世界中的实物。所谓物理逻辑，其实就是结构、色彩、材料、运动轨迹等这些你日常接触的物体的属性与规律。经常考量你的设计是否巧妙利用了一些物理隐喻，或者是否违背了一些基本物理逻辑，对你的设计会有很大的提升。举个例子，苹果产品中，iPhone电量不足时金属丝断裂的音效，MacBook删除文件时捏纸团的音效，就很好地模仿了自然环境中相应的声音，从而令用户毫不费力地理解自己当前的操作。行为逻辑：行为逻辑是最重要也是和用户最为相关的逻辑。在设计之前的具体推导过程中，我们就已经了解了用户的行为。这时有两种做法：第一种，在设计前就把所有类型用户的行为流程进行整理，根据他们行为的发生顺序和互相之间的联动来决定你之后的设计产出；第二种，在产出设计后，整理用户行为的流程，验证你的设计是否可靠，从而进行修改。2.是否符合人机交互原则由于我们是作为用户体验设计师在履行我们的职责，所以一定要时刻记得先考虑可用性和易用性，其次再考虑美学层面的视觉和谐。这里的可用性和易用性，都要从用户使用的终端出发。你的设计在手机、电脑或是手表等不同界面上展示，都将影响你最终产物的组合形式。因为用户和不同终端产生交互时遇到的情况是不同的。一个小窍门：虽然你是从可用性和易用性出发，但当你推敲获得的最终产物看上去不太美观的时候，通常是它本身有一定的不合理性。这个窍门并不总是正确，但是可以给你提供一些帮助。3.是否具有可拓展性这里我们只讨论界面设计，但其实可拓展性适用于一切产品。一般来说，软件或者互联网产品都会经过好几个版本的迭代，有些是彻底地改版，有些是做细微的调整。这时候控制好你设计的第一个版本是否具有可拓展性就十分重要。它意味着你之后做设计调整时会不会花费很多重复劳动，以及负责实现设计的前端工程师会不会付出更多修改成本。在阿里巴巴国际站UED，当我们正式进入开始实现构想的环节时，一般来说都有比较标准的执行流程来保障上述的要点。首先，我们把前期发现问题、做出假设以及大胆试错的内容都用规范格式记录下来，保证我们在向别人讲解设计时有足够充分的佐证。然后，我们开始整理用户的任务流程（TaskFlow）。例如，用户：小学生，任务：上学，任务流程：起床—整理书包—坐720路巴士—到达学校。通过这个任务流程的关键节点，又能推导出通过什么样的设计形式承载，比如“坐720路巴士”的行为需要“一辆巴士”承载，而一个“提交申请”的行为则需要“一个含有申请表单和提交按钮的页面”承载。这样一来，整个项目需要涉及多少个页面就一目了然了。进入页面内，就需要安排这个页面的信息层级，哪些是需要用户在第一时间了解的内容，哪些属于辅助类型的非重要信息。确定了信息层级后，再通过布局来根据优先级安排哪些信息放置在哪些位置。这样依次完成每个页面的布局，完成视觉层面润色的细节调整，再对各个页面上会发生的交互变化、视觉上的间距等细节做出标注，一份完整的设计文档就完成了。前端工程师根据这份文档，将我们的设计变成用户真正可以使用的网页。当然，这个过程因人而异，最后搭建出一个漂亮好用的网站，可以通过许多不同的方式来达成。你在构想一个设计时经过了最初设计，在实现的过程中又完成了第二次设计。坚持把你的构想做出来，这样才能发现它真正可能遇到的问题。五、事实验证这部分我不再赘述，因为牵涉到大数据、用户研究等专业领域。但是需要强调的是，你必须认识到，设计投入使用之后其实才是漫长的设计迭代过程的开始。你的用户真正和你的产品发生了交流，有了真正的看法，给你真实的反馈，你才会知道下一步设计怎么进行调整。在阿里巴巴，我们有数据团队和用户研究团队。在产品上线后，他们通过读取用户在网页上行动所产生的数据，或者回收用户反馈的问卷，或者主动访谈用户，获悉他们对上线产品的反馈，从而了解用户对我们的设计真正的看法。因此，要在用户体验这个领域成为一个出色的设计师，你还必须了解很多横向知识。包括如何从各种数据中提取出最能指导验证设计的指标，如何从访谈中了解用户对一个设计形式的真正看法。事实证明，你的设计可能不那么成功，看上去似乎之前的一切努力都白费了，但其实这才是最好的结果。我们知道了一种错误的可能，就获得了一条更清晰的界限。纸上谈兵不如立刻尝试，设计师的工作并不是那么不切实际的天马行空，而恰恰是实实在在地解决问题。即使你没有从事过任何设计相关的职业，但只要怀着一份把身边事物变得更好的热情，使用正确的方法和工具，最后为更多的人带来便利，你就是一个出色的设计师。我在从事设计工作的过程中获得了很多人生、自我上的启发，这份职业也带给我出人意料的惊喜和快乐。在之后的更多篇章里，你会看到我的那些充满智慧的同事们如何解决形形色色的复杂问题。跨境贸易或许是你的兴趣所在，又或许不是。但是无论如何，我们在阿里巴巴国际站这个产品生态中面临的复杂问题，就和我们面临的所有复杂问题一样，最终都有切入点，使我们可以迎难而上，让问题迎刃而解。最后赠送一句我最喜欢的美剧《Suits》中的台词：做律师就像做医生，在病人身上一直试探性地按压，直到病人喊痛（Youkeeppressinguntilithurts.Thenyouknowwheretolook）。做设计也是一样，掌握方法，你也可以。作者邮箱：amber.zheng@互联网产品的骨骼与皮肤——产品+运营文/骆芸众所周知，学有所长，在做过很多类型的设计工作后应该会有自己最擅长的东西。自己做设计也有7年了，从动漫设计、游戏设计、平面设计、运营设计，最终转为产品设计，其实笔者也有不少心得，希望通过此篇文章与大家分享。我身边有不少朋友都是设计师，但设计种类各有不同。那些没有接触过产品设计的朋友，还是会对产品设计这个名词感到一头雾水。普通的产品与互联网产品有什么区别？其实互联网产品的概念是从传统意义上的“产品”概念延伸而来的，是在互联网领域产生用于经营的商品，例如：阿里的“支付宝”、腾讯的“微信”。由于智能手机的普及，越来越多的互联网产品被人们熟知。从类型上来讲，互联网产品也分为PC端、无线端等。产品设计就好比一个人的骨架，好的产品架构能够给一个产品带来坚实的基础。一般产品设计主要有三个阶段——策划、开发、运营。细分来讲，先是有商业需求，然后做市场分析和用户调研，接下来出产品策划方案，正式投入产品设计和产品开发，最后进行产品的推广营销。我们以正式投入产品设计为切入点。1.设计准备由于笔者做的是视觉设计的工作，因此在接到设计需求时，通常已经接到了一份比较完整的交互设计稿。在了解产品的大致需求后，需要时间消化，并且对比市面上的同类产品。然而更多的灵感来源于平时的积累，可以是对各大设计网站及书籍的浏览，因为前人的经验是宝贵的财富，可以帮你解决很多问题。当然，灵感也来源于平日里对生活的捕捉和对美感的提炼。你也可以随手准备一个小本子，把平日里的小灵感全都记录进去，不局限于写写画画。另外，收集好图也是一个很好的习惯，各种素材都可以在接到新的需求时去查看，会给到自己带来新的灵感。然而B2B的产品大多使用场景都没有出现在我们的日常生活当中，因此了解更多专业类的知识对一个设计B2B产品的设计师来说显得尤为重要。2.开始动手设计在一个完整的产品设计过程中，交互框架与风格确定之后，就要开始着重于组件的统一以及视觉规范的遵守。这些都影响到这个产品最终的用户体验。在我们B2BUED有设计师们自己搭建的DPL平台（统一的控件与组件库），里面包含细化到每一个button的应用，大大地节省了设计页面的时间，提高了设计效率，并且也更方便前端与后端对产品进行开发。我们还有一个元素设计小组，不断产出统一的设计元素，可以简单方便地应用到页面设计中。认识到元素与视觉规范的重要性，提高自有产品的品牌感与统一性，设计师再发挥一些自己的创意，就能很好地搭配出风格相对一致的网页产品或移动端产品了。3.设计评审听取专业意见在设计完成后，我们会把自己的作品抄送到自己所在的专业组，听取小组内各位专业人士提出的意见，以便对自身设计的产品做出更完善的改动。要学会多聆听别人的意见，从不同的角度看待问题。4.最终输出稿整理规范的图层组。在我们把PSD提交给前端之前，记得养成整理一下自己的图层以及图层组的好习惯，那样会让下一个接手这个项目的人感到方便、快捷，也可以大大节约需求完成的时间。搭好了骨架之后我们该干什么呢？接下来就让我们来聊聊什么是运营设计吧。运营好比一个人的皮肤，没有好的运营，可能准备得很完善的产品也不一定会有很多用户。所以在产品发布新版本及重大的活动、节日时都需要优秀的运营设计，例如产品网站的Banner、活动专题页面、线下宣传海报等。有了好的产品设计加上好的运营设计，一个人的“骨骼”和“皮肤”才算完整！1.有故事内容的设计创意是关键。如果你仅仅只是在做一个Banner，图中没有内容，没有故事，可想而知，你打动不了你的用户。简单地来说，如果运营策划给的是一个方案，那么就要由设计师去完成那画龙点睛的一笔。2.提取核心关键词，找到合适的风格自己做的产品架构，肯定最清楚产品风格是怎样的。那么在做产品的运营设计时就要统一风格，尽可能让别人一眼就可以认出，类似于苹果、KFC。这里就要讲到品牌化，B2BUED也一直在努力实现品牌化。3.运营视觉规范运营设计也有相对的设计规范。当我们面对大批量的运营需求时，规范可以很好地节省时间，并且可以使杂乱无章的各类Banner、EDM、运营活动等都有很好的统一性。无论是小型项目还是大型项目，产品还是运营，视觉规范都有其存在的必要性。无论是对自己，还是对同事，都能起到很好的规范作用，避免不一致的设计。4.效果跟踪一次运营的结束并不是产品宣传的终止，要想下次还能获得好的宣传效果就必须总结经验。效果跟踪：观察用户的反馈，记录相关点击量，从中获知你的设计存在的问题。也许你原以为很满意的设计，实际获得的转化率却比其他时候少很多，那就要仔细分析原因了。效果跟踪可以作为自己阶段性工作的一种沉淀。规范沉淀：总结制定设计规范，这样下次运营设计的时候，就有很多元素可以复用，图片的尺寸也有统一的标准，可以大大提高效率，也能方便其他人使用。做好产品设计与运营，骨骼和皮肤都搭建好，那么这个产品离成功也不会太远了！作者邮箱：34334991@用体验解决商业问题，P4P后台改造文/向许源设计师能够给业务带来的，绝不仅仅只有界面层的优化。在一些以业务为导向的，或者以技术为导向的公司，用户体验或许很难从一开始就占据最高的优先级。作为阿里巴巴的设计师，我们不否认这种情况，毕竟，从短期来看，可以转化为利润的商业数据和可以明确计算的技术成本，更能左右项目的方向。一个很平常的场景：产品经理拿着一张草图，把商业目标和想要实现的功能告诉设计师，设计师进行思考后提出用户体验最好的方案。产品经理面露难色：“这个方案是很好，但是我们必须要让这个按钮出现在更醒目的位置。”因为可能这个按钮的背后，是某条业务线重要的商业利益。这种情况下，如果不是有严重的体验问题，设计师可能就要开始考虑拿出兼顾商业目标和用户体验的方案了。通常，这种方案的用户体验不会是最好的。这样的场景在项目过程中，时有发生，设计师会陷入用户体验和业务目标的抉择中，并且把产品经理、开发工程师当做对立方——为了达到最好的用户体验，需要说服他们。设计师很容易产生“为什么他们不懂用户体验”的感慨。但是，实际情况是，产品经理当然了解用户体验，甚至他们也知道，自己所需要的方案不能给用户带来最好的体验。而设计师看到的功能文档，很有可能是产品经理在权衡了商业利益、数据指标、技术难度之后，给出的他认为最平衡的方案。我们不能苛求他们把用户体验放在第一位，那应该是我们的工作。但是，理解不代表认同，用户体验除了为商业目标让步之外，还有另一条路可以尝试，那就是比现在更好地达到商业目标。国际UED中认为，设计师有能力提出让产品经理“无法拒绝”的方案。当然这需要一定的条件。设计师需要对业务非常熟悉，并且了解技术实现的相关知识，从而扩大自己的覆盖面，以更全局的方式参与项目——从项目流程上而不单纯是界面上，用体验解决商业问题。在阿里巴巴，一个普遍的流程是这样的：产品经理通过对效果数据、用户研究的分析，得出商业假设，根据商业假设提出功能需求；设计师根据需求设计出交互方案，制作成设计稿（包括交互设计稿和视觉设计稿）；前端工程师和后端工程师根据功能逻辑和界面逻辑，实现功能。如果设计师安于这样的流程，等待产品经理的功能需求文档，那么他很容易陷入之前所说的两难局面。但如果设计师尝试在流程上向前或者向后覆盖，那么可能会产生超出期望的效果。在国际UED中流传的两句话，可以代表我们的态度：“对于好的设计师，用户体验仅仅是下限”、“交互设计师是半个产品经理”。我们鼓励设计师多了解业务背景，补充商业方面的知识，参与到产品功能的决策中去。或许设计师不能像产品经理一样，随时保持着敏锐的商业嗅觉或者熟悉各种算法，但是设计师独特的体验视角，以及跳出单个业务看待产品的思考方式，有时候会令项目中的难点迎刃而解。我们曾完成过的一个项目体现了这一点。在阿里巴巴国际站中，P4P（PayForPerformance）是广告产品的重要形式。卖家通过竞价排名，购买产品在搜索List、行业专区中的展示位，而网站则根据广告的效果向用户收取费用（按照点击来收费）。卖家需要把自己的产品导入如图1所示的P4P后台，并给产品关联上买家在阿里巴巴上可能会搜索的关键词，不同的关键词的价格不同，卖家需要对这些关键词设置自己的出价（愿意为一次点击付出的价格）。在P4P业务中，用户后台的设计一直是难点。面对后台各式各样的操作，用户不知道哪些操作能够提升自己的排名，同时用户无法直观地感受到后台操作和前台效果之间的关系。这样，两方面问题互相影响、恶性循环，不利于建立P4P平台的权威性和培养用户操作的积极性。在P4P业务里，一个重要的商业目标就是要提升用户的操作数量。如果按照普遍的流程，设计师要做的应该是等待产品经理提出相关的需求，然后再开始行动，那么最终的产出，可能是一到两个更漂亮的运营活动页面（之前P4P后台一直以运营活动来提升用户操作，当然，这也是一个有效的办法）。而如果设计师想发挥更大的作用，用体验解决商业问题，应该怎么办呢？1.更了解业务、技术，在有限制的条件下设计用体验解决商业问题，首先就不能只从体验出发。设计师提出的方案，不能超越了商业和技术的承受范围。试想设计师在感慨产品经理“不懂用户体验”的时候，说不定产品经理也在抱怨设计师“不懂技术”。设计师常在提出一个美妙的方案后得到“这个没法做”的技术反馈，这时候设计师需要根据遇到的技术难题来修改设计方案。对于P4P，设计师尤其需要做出全面的考虑。首先，在P4P后台中，技术占到一个比较重要的位置，例如需要程序员开发计算众多关键词排名的算法。当一个用户调整对关键词的出价时，他是否能排上前5名或者前10名？或者当一个用户调整自己每日平均花费上线时，他的账户整体预期效果会不会提升？这些技术可能会影响到后台性能——如果用户每次都需要等待几秒钟才能得到效果数据，整体的用户体验就会大打折扣。因此，需要增加Loading状态以及相应的文案，让用户意识到系统正在处理他们的请求，并且禁用其他操作，预防多个操作同时出现，如图2所示（见下面）。在这种状况下，设计师要习惯由于技术和业务限制而“带着脚镣跳舞”，设计师不是艺术家，本来就应该在资源有限的情况下尽量满足各方的需求。2.以体验的方式实现商业目标前文已经提到，用户体验也许可以帮助实现商业目标。在这里需要引入的一个观点是，商业目标和用户体验其实本就是为了实现同一个目的：满足用户需求。无论是商业目标还是用户体验的目标，都必须尽量去满足用户需求。设计师要证明设计方案有价值，就不能单单告诉产品经理“用户体验更好”，而是进一步做到“设计更好地满足了用户需求，从而促进了商业目标”。在P4P产品中，我们给用户提供了产品选择、关键词选择、关键词调价、产品质量优化等各种功能，但是根据线上数据和实地调研结果显示，用户并没有按照我们所期望的频率去使用这些工具（涉及商业原因，数据未予展示）。如图3所示，有些用户对质量优化工具的作用有疑问。是因为这些工具不能帮助用户达到目标吗？显然不是。P4P产品中的各种优化工具，如果使用得当的话，能够帮助用户用最少的钱带来最好的广告效果。那是什么原因造成了这种现象呢？在网页调查的过程中，设计师发现，这些功能的使用方法、使用后的效果，并没有很好地传达给用户。在一次实地调研时，用户就因为无法理解产品质量在排名中的意义，在我们面前错误地使用了我们提供的一个工具。一方面，用户没有从页面上很好地了解工具的使用方法，我们也没有对功能和流程进行足够的优化让一切变得简便；另一方面，用户没有得到足够的数据效果反馈，无法对功能产生认同感，很难形成操作习惯。根据“新手用户、中间用户、专家用户”的理论，我们没能很好地引导用户从新手用户转变为中间用户。找到了问题所在，我们开始讨论解决方案。之前，P4P后台一直使用弹窗和Banner的形式来刺激用户使用功能，这两种方式也在数据上取得了比较好的效果。的确，刚进入网页就有一个弹窗提醒你使用功能，一旦不采纳，下次进入网页还会弹出来，这种情况下有一部分用户会选择点击那个醒目的橙色“确认”按钮。不过，采用这种方式，用户即使点击了确认，使用了功能，其实还是没有弄清楚到底P4P产品的各项功能分别是什么。这一点上，P4P后台没有做到“授人以渔”。我们发现，这似乎是一个可以用优化用户体验的方式解决的问题。如果我们能够让用户更了解P4P产品，那么用户的活跃度就会提升。基于这样一个假设，设计师提出了“游戏化”的用户培育模式。游戏化，简单来说是指用游戏机制来解决非游戏场景中的问题，让用户在交互中找到乐趣，包括的要素有：成就机制、奖励机制、任务机制等。例如百度贴吧的连续签到、支付宝的抢红包等，都是典型的游戏化设计。对于P4P后台，我们不能设计得过于“可爱”，但是这不妨碍我们用游戏化的方式调动用户的积极性。例如，用更夸张的成功反馈，提升用户完成任务时的愉悦度，这完全是可以做到的。我们的设计主要围绕“任务机制”和“奖励机制”，根据用户的不同级别，设计了不同的任务让用户去完成，并给予不同的任务奖励。如图4所示，用户在完成任务的过程中既熟悉了后台的各种操作，也获得了奖励。为了保证用户真正了解P4P产品，我们引用了引导游戏新手的做法——边学边做。在这里，新手引导不再是一段需要阅读的文字或者单纯地点击“下一步”就能略过的Tips。用户需要以完成任务为目的去主动学习P4P产品的使用方式，这样结合学与做，用户记忆和理解的效果会远胜于单纯的阅读说明（想想有多少用户在点击“我知道了”来关闭窗口时，是真正“知道”了呢？），如图5所示。关于用户等级和奖励的划分，产品经理比设计师更专业，因为他们对于产品的整体把控要强于设计师。众所周知，游戏的难度设计是一个重点，对于P4P产品而言更是如此，毕竟用户的心理预期是面对一款严肃的商业产品，一些调动积极性的互动会很有意思，但是如果任由游戏抢走了用户真实任务的地位，那么游戏化就会变成累赘，做得越好，越累赘。同样，尽管要推行游戏化的设计思路，但是由于用户都是比较务实的商务人员，我们也不能奢望一些荣誉成就，比如“冠军用户”或者“P4P专家”这样的头衔，能够打动用户，虽然这些在社交类产品中通常能够吸引到大批用户。我们应从始至终地贯彻“现金红包”的实惠奖励。确定好了方向，一些细节上的设计，可以让这个游戏更“耐玩”一些。因此，我们在设计时遵守了几条准则：确保任务线路要短，减少用户中途中断的可能性；在用户主动触发任务时才展示，而不是强制让用户参与；保证游戏化与P4P产品主要功能的独立性，即使用户不参与任务，也能完整地使用P4P产品。目前，游戏化的P4P培育模式已经上线，并取得了很好的效果。数据显示有效操作的用户人数提升了很多，客户服务端也表示用户反馈较好。运用设计思维解决商业问题，我们不敢断言一定会取得成功，但是这让我们看到了设计与业务合作的更多可能，正如文章开头所说，绝不仅仅只有界面层的优化。希望对您有所启发。作者邮箱：xuyuan.xiangxy@设计需求分析及模板文/姜俊科学的设计过程可以体现设计价值。在设计中，需求分析是重要且必需的，是对用户和商业深入理解的过程，只有弄清楚商业目标和用户诉求，才能形成正确的设计假设，定义用户需要的体验感受，就如KellyHoppen（凯丽赫本）所说：“我很擅长于想像人们可能希望在这个空间中感受什么，设计不只是放一个床垫或者放一把椅子那么简单，需要考虑整个空间会是怎样的，并且还要想象人们在那个空间中会有怎样的感觉，我认为这就是你确保设计成功的办法。”设计是理性的思考、感性的表达，设计的最终目的是解决问题，设计需要“超以象外，得其圆中”的思考。在商业设计活动中，设计要驱动业务增长，只有设计才能让100万增值到1000万。让设计产生溢价是设计的目标之一。好的设计要从科学的需求分析开始。本文向大家介绍一套设计模板，包括需求分析思路、模板结构等内容。我们从设计流程开始了解，它包括：Idea、ConceptualDesign、Kickoff、DetailedDesign、Development、Test、Release，如图1所示。图作者：王哲歆本文所讲的需求分析思路是在Idea和ConceptualDesign（Checkpoint1）阶段，设计文档模板应用在DetailedDesign阶段，其他节点内容不是本文重点。了解设计需求分析在设计流程中所处的位置，我们再看设计需求分析本身的思维框架。1.商业方面明确商业目标。明确商业目标要理解：需求来源（背景）、现状（定性定量）。2.用户方面明确用户目标（诉求）。用户目标得出过程是：找出目标用户，形成用户诉求。3.设计方面（1）形成设计假设。形成设计假设要理解：原始商业目标、原始商业假设、用户诉求。补充一下，为什么说是假设呢？因为在未被证明正确有效之前，我们都认为这是假设。（2）明确设计关键点。设计关键点得出过程：设计假设、所有使用场景、形成典型场景、分解用户任务、推导设计关键点。需要注意的是，设计关键点是优先考虑用户主任务，这也影响了视觉设计的层次表达。（3）明确产生的现象和指标。指标不仅是商业指标，还包括用户行为和态度指标，指标是量化可衡量的，它可设定为“目标类型+产生的现象+具体指标”，例如，易用性，提升发布表单填写完整率至90%；效率，提升用户填写表单用时从3分钟缩短至2分钟。以上就是设计需求分析思路，概括起来如图2所示。另外，评估指标方面，因不是本文的重点，只做简单描述，其评估的维度包括以下方面，如图3所示。●任务完成维度（Tasksuccess）●接受维度（Adoption）●留存维度（Retention）●情感愉悦维度（Happiness）●产品（品牌）认知维度（Identification）设计需求分析思路对应到设计文档结构，如图4所示。基于以上的分析思路和设计文档结构，现通过一个应用实例帮助大家更好地理解，不用太关注应用案例的细节，因为需要结合业务背景才能理解，如图5至图9所示。以上案例文档结构比较完整，比较适合一个大型的或新的业务项目，我们在日常工作中多数为快速迭代的中小型项目，为提高设计效率，我们通常会简明扼要地呈现设计分析过程，如图10所示。从简版设计文档中可以发现，只是呈现的简化，设计分析其实是完整的，其中包括：背景、目标、用户路径、设计关键点、页面框架、衡量指标、可能的风险。层层分解，层层关联，一页就能看明白分析的逻辑。需要说明一下，其中的“页面框架”和“可能的风险”，这两块其实不在设计需求分析环节内，它是具体设计阶段的工作，有些侧重呈现整体方案的要点。我们日常工作中经常遇到的是页面、频道改版类项目，侧重用户认知和行动转化率。这里也给大家展示一个页面浏览型案例的设计分析过程作为参考，新奇频道首页设计案例，如图11至图14所示。竞品分析。通过商业假设关键点和竞品分析，设计思考如图14所示。页面中这些模块是常见的，看似普通的背后却有着深入的思考和定义。这些设计分析思路需要多多实践，万变不离其宗。请记住，度的把握是不同设计师之间的变量。设计分析过程是方案的一部分，设计方案需要有文档格式，作为UED团队也有必要统一输出格式，我们制定了设计文档模板和标注规范，如图15至图21所示。最后，需求分析是设计思维的体现，我们需要有意识地练习并提升这种从具象到抽象的归纳能力，再从抽象到具象的应用能力，把握本质举一反三。我们在提升设计效率方面建立了DPL库，把基础通用和业务组件封装固化，这样就可以把具体“做”的时间减到最少，把更多精力放在设计分析和研究中，一起努力吧！特别感谢：谢孟庭、杨文波、曹逸、王哲歆、毛并楠，没有他们的案例和帮助本次分享不能形成，谢谢！作者邮箱：6116306@如何做好交互设计的专家评审文/曹逸无论身处哪一个UED团队之中，交互设计师在完成交互稿后都会面临各种各样的设计评审，有UED成员参与的内部评审，也有整个项目成员参与的外部评审等。一般来说，内部评审作为把控交互产出的第一道关卡，必须要能够高效、精准地给出评审意见。这样一方面可以提高交互稿的产出质量，增加外部评审的一次通过率；另一方面也可以帮助设计师们在评审中提高自身的专业水平。在阿里巴巴国际站UED的日常工作流程中，根据使用场景的不同，交互设计的组内评审会有不同方式：站内评审、邮件评审、专家评审……在本章节中，我们会着重介绍专家评审这种方式。作为组内评审的一种方式，专家评审拥有评审结果客观、精准等诸多优点。那么，该如何做好一场专家评审呢？一、什么是专家评审在进入专家评审的流程之前，首先要了解什么是专家评审。专家评审由“协作式启发性评估（CollaborativeHeuristicEvaluation）”的方法演变而来，它的核心目的是通过检查现有产品（或原型），找出用户在与之交互的过程中可能遇到的所有可用性问题。一般而言，该方法适用于所有中、大型项目，如果时间充裕，小型项目也可以采用。二、评审前的准备阶段在进行专家评审之前，被评审人需要提前准备好以下事项。1.采集并明确目标用户的相关信息。2.梳理出目标用户需要通过该产品（或原型）完成的相关任务。对于第一条而言，我们往往采用用户素描（Persona）的方式来对采集好的用户信息进行展示，在此就不做过多的展开；对于第二条，有多种方法可以选择，包括故事板（StoryBoard）、用例（UseCase）、情景板（ScenarioBoard）等。一般来说，如果用户通过产品（或原型）需要完成的任务不止一个，则按照任务的优先级来进行排序——优先考虑主要场景下的主要任务。三、评审中的进行阶段第一步，被评审人召集3～5个UED的小伙伴（包括被评审人自己）充当专家评审员，大家寻觅一个不受干扰的场所（如会议室等私密空间）进行接下来的评审工作。第二步，被评审人将准备阶段中准备好的目标用户信息及需要完成的相关任务告知每一位专家评审员，即“什么样的人”通过待评审的原型要完成“什么样的任务”。第三步，从除了被评审人以外的专业评审员中选出一位充当“驾驶员（Driver）”，负责将之前定义好的相关任务作为目标，来使用被评估的产品（或原型）。在执行所有任务的整个过程中，被评审人不能提示驾驶员如何完成任务或达成目标，但其他专家评审员可以要求驾驶员执行一些和达成任务相关的交互动作，比如“我觉得点击那个按钮可以进入下一步操作，请点一下试试”，如图1所示。第四步，在驾驶员使用产品的过程中，任何一位专家评审员都可以在任意时刻打断并提出一个他所发现的可用性问题，如：“我觉得这个按钮太不明显了，用户根本发觉不了”。问题提出以后评审员们需要商量一下应该如何恰当地描述该问题，然后由被评审人将这个问题记录下来。比如之前的例子，最终可能会以“详情页面上的主行动点太弱，用户无法感知”的形式被记录下来。第五步，记录完成后被评审人可以将所有问题按顺序标上序号，写成小卡片并粘在墙上，方便所有的评审员查看，如图2所示。在这之后即进入到打分环节，由每一位专家评审员结合目标用户的相关信息和需要完成的任务，对所有贴在墙上的可用性问题的严重性进行打分。这里需要注意的是，打分环节中每位专家评审员不要交头接耳，而是应该独立客观的对每一个问题的严重性进行打分，打分标准如下。0分：该问题无任何严重性，在打分者看来完全不存在可用性问题。1分：该问题有轻微的严重性，虽不影响用户完成预定任务，但无法实现效率最大化。2分：该问题有一定的严重性，虽不影响用户完成预定任务，但效率（或准确率）低下，用户体验不够良好。3分：该问题较严重，用户在某些情况或场景下无法顺利完成预定任务。4分：该问题非常严重，直接导致用户有极大的可能性无法顺利完成预定任务。打分完成后，由被评审人负责整理和记录所有问题的分数，如图3所示。如果有专家评审员打出了较高的分数（大于或等于2分），可以顺便写下针对该问题的解决方案（如果当时想到了的话）。四、评审后的统计和分析阶段当整个评审环节完成后，被评审人需要对专家评审员提出的所有的问题及严重性打分进行整理和分析，往往采用如下表所示的形式进行统计。其中的“序号”是所有记录下来的问题序号。“问题描述”就是被评审者对该问题的解释说明，通常将专家评审员较口语化的语言转换为更为书面的文字。“所在页面”指的是该问题在产品（或原型）中所处的位置，可以用诸如“首页”、“列表页”、“详情页”等进行说明。“独立打分”一般根据专家评审员的数量被纵向分割为若干列，如果一共有3位评审员，则分为3列，以此类推。每一列中的数字代表了每一位评审员的独立打分。“平均分”是将所有评审员的独立打分取均值。需要注意的是，如果使用Excel等工具来记录问题和分数，可以在“平均分”这一列加入计算公式，这样可以更高效地完成统计和分析工作。“方差”即通过计算，求得某一行所有独立打分的方差数值。和“平均分”类似，被评审员也可以通过在列表中加入公式的方法来高效完成计算工作。列表的最后一列是“建议的解决方案”，这一列并不是必填项，只有当提出问题的专家评审员恰好想到了解决问题的方案时，才会由被评审员记录下来，作为未来优化产品（或原型）的参考。完成了所有的统计工作后，开始进入列表的分析阶段。重点需要分析的数值有两个——“平均分”和“方差”。首先，所有平均分大于或等于2分的问题（高严重性问题），都需要被评审人特别关注，因为这类问题往往具有比较严重的可用性问题，需要进行优化或修改。其次，方差大于或等于2的问题需要由被评审人考虑是否需要进行重新评审，因为各评审员对该问题的严重性打分有着较大的分歧。重新评审时既可以由被评审人根据自己的经验并结合产品的实际情况来给该问题最终定性（低严重性或高严重性），也可以由被评审人和专家评审们再次沟通（通常由专家评审们阐述自己打分的原因及依据），重新确定这类问题的最终打分。五、优化设计根据上一环节中统计和分析的最终结果，被评审者制订出优化产品（或原型）的设计方案。该设计方案应该能够很好地解决所有高严重性的可用性问题，并应以邮件或其他形式通知到之前参加评审的其他专家评审员，确保该方案的合理性得到他们的认可。作者邮箱：caoyi.cy@理论到实践让你的界面有视觉层次文/陈雪梅人眼在观察外界事物时，并不是一次性完成的。比如图1中的两张图，（a）为相机拍摄的效果，（b）为人眼不移动时看到的效果。可以发现，人眼不能同时产生多个焦点，把视线停留在多个地方，所以设计师需要考虑的是让用户通过眼球移动，按照一定的顺序获取信息，帮助用户高效自然地获取和理解信息。要想让我们设计的界面能抓住用户眼球，让用户有兴趣了解更详细的内容，一步步递进，那么，界面本身需要有清晰的视觉层次，而不能凭感觉以漂亮为目的来进行设计。本文会分成两部分，一是做到界面有视觉层次不可缺少的前期分析环节，二是通过一个具体的项目来看看实践的过程。一、前期了解和分析在开始设计前，除了对项目本身的背景目标有所了解外，视觉设计师也需要了解一些具体的页面内容以把握后面设计的指导方向，包括页面定位、氛围营造、信息优先级和用户核心行为。1.页面定位页面定位是帮助分析页面信息优先级、核心行为的前提，通常包括以下几方面。●用户是谁？●用户来自哪里，即从什么渠道来到该页面？●页面内容定位，提供什么、不提供什么？●页面作用。举个例子：我们在设计网站一个服务的新首页时，虽然页面是给新老买家共用的，但我们通过分析当时平台用户对服务的熟知度，发现大部分新用户对服务本身还不太了解，而有一定熟知度的老用户一般会通过其他入口参与行为，所以确定了首页最核心的目标用户是新买家。明确了目标用户，就知道该提供什么内容给他们。对于新用户来说，让其了解服务的利益点，介绍并做出第一次行动来感知服务带来的效果，是核心的目标。这部分分析会有PD、更多的交互参与并给出分析的结论，但视觉也需要了解，并知道分析的过程。2.了解页面需要营造的氛围它能帮助我们判断哪些元素能达到目标。氛围可以通过内容本身来营造，也可以通过视觉元素设计来营造，但必须注意营造的氛围不应强过用户关注的内容本身。氛围可能有：●新年主题大促●低折扣●信息鲜活●用户活跃等图2是我们团队大促活动的正式页面，图2-a延续了预热期嘉年华的氛围，但到活动开始阶段氛围已经不是重点，用户更关心商品及折扣本身，图2-b为调整后将氛围的营造和类目图片相结合的效果，很好地解决了氛围和内容的关系问题。3.分析信息优先级（1）一级信息吸引用户。假设用户只会在这个页面停留3～5秒，最能够吸引用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示。（2）二级信息帮助理解。有了一级信息的吸引，用户进一步了解内容可能会停留3～5分钟，这时展示二级信息，即提炼的精华内容，帮助用户在尽量短的时间内理解信息。（3）三级信息详细了解。前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转。信息分级如图3所示。4.分析用户核心行为不同类型用户会在不同阶段产生行为，需要在适当的阶段出现合适的内容，最终导向的都应该是核心行为，如图4所示。（1）第一类用户已经非常了解产品，来到页面后不需要查看主体内容也会产生行为，这个行为可以称为该页面的核心行为，针对它设计的入口必须能被快速找到，如商品详细页面的购买按钮。（2）第二类用户属于有一定意愿的，他会先看一些提炼的信息，然后产生核心行为。（3）第三类用户会对详细的信息进行全面了解后再决定是否行动，如用户在决定购买商品前会查看评价、查看历史交易等行为，但这些行为最终是为了导向“购买”这个核心行为。有了这些分析，视觉设计前我们会先确定大模块的信息优先级和用户行为优先级，如图5所示。在进行细节设计前，视觉还需要对每个模块内的具体内容进行优先级的分析，产出如图6所示的示意图并和交互设计师及业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。二、MyAlibaba后台导航改版实例2012年第三季度时，我们有个项目是对海外卖家版MyAlibaba（以下简称MA）首页进行改版，当时MA后台的视觉已有规范，但很陈旧，如图7所示。如果按照原来的规范进行设计，也能顺利地完成需求，但我们的前台页面经过2012年轰轰烈烈地改版已经有了全新的面貌，风格也趋向于平面、宽松、简约，后台还是多年未变的样式，体验相对陈旧而且不统一，同时集团提出workinAlibaba的概念，也是时候对后台进行一些改版优化了。当然统一视觉风格不是发起一个改版项目的唯一目的，最根本的目的是要分析目前界面存在的问题，通过解决问题对界面进行优化。我把当前的MA后台的大多数页面分为两个模块：一级二级导航区、内容操作区。从缩略图可以看出，目前的设计导航区的视觉层级高于内容操作区，如图8所示。为了重新确定界面视觉层级，先问自己三个问题并回答：从以上问题的解答可初步得出结论：MA后台的导航并不是用户来到后台首要关注的元素，它是可以弱化的，但要固定导航的位置，同时清晰表达当前的位置。为了验证这个分析思路的合理性，我们还需要看看其他网站的做法。1.支付宝首页的改版。如图9所示，老版的支付宝首页视觉层级最高的是导航及推广的活动。但是，来到支付宝首页最常用的功能是什么？作为老用户，我们主要是进行登录操作。新版首页针对新用户强调了支付宝的核心价值，针对老用户强调登录操作，而原先视觉层级很高的导航被弱化，但仍然不失导航的作用。2.Google+界面。Google+界面是典型的以内容为中心，导航在左侧被弱化，但用户需要切换时也能快速找到，同时也清晰地表明了当前的位置，如图10所示。经过前面的界面分析及竞品分析，后面就可以根据得出的结论进行设计了。在设计过程中，视觉需要解决的主要问题是：导航被弱化后，如何才能做到内容和导航的分离，使用户来到MA后台后，能快速定位到自己关注的内容模块。我们也前后尝试了好几种方案来达到这个目的。版本1：将一级导航和页头统一用灰色底，形成一个整体，和内容分离，如图11所示。版本2：将导航弱化成灰色，100%通栏设计，如图12所示。最后，我们考虑到MA首页及子页面的适用性，得出设计终稿，如图13所示。在项目推进过程中，因为后台涉及多个业务方，而且导航的视觉层级从原来最高降到较低，变化很大，大家虽然觉得前面的分析很有道理，但还是不免担心因为视觉层级降低，用户找不到导航。基于业务方及用户的接受度，我们借助用研团队的在线调研工具来验证哪个设计更优。用研同事选取了上千名海外用户，将新老版本图片平均分别发给用户，并设置了两项任务：1.首先看到的是MA首页，需要对自己的产品进行管理，让用户点击图片上的区域（验证一级导航）。2.进入产品管理页面，用户需要发布新产品，再次点击（验证二级导航）。从调研结果看：在内容定位上，新版本导航用户点击率高于老版本，如图14所示。用户寻找导航的速度，新版本也大大快于老版本，如图15所示。用研的数据，验证了新设计的体验更优于老版本，对之后我们推进这个设计方案落地执行并上线，给予了很大的帮助。这个项目整个过程比较完整，我同时扮演了一次项目经理的角色，从项目发起到最终上线全程牵头，受益很多，让我看到如何从视觉专业角度想办法促进产品体验。我们的设计是可被衡量的，我们也可以主导发起需求，来提升用户体验甚至促进业务目标达成。同时，视觉设计师的价值不仅仅是把界面做得漂亮，更重要的是通过视觉设计引导用户的浏览路径，提高用户获取和理解信息的效率，这样才能对用户、对业务有可衡量的作用。作者邮箱：42261647@用户难触及？数据帮你大胆假设，小心求证文/王中在时间人力成本都有限的前提下，如何快速抓准海外用户的真实诉求？在前期无法充分验证设计提案的情况下，如何保证设计的有效性？在每日上百万访问量的压力下，如何降低设计改版带来的体验过渡风险？希望通过A网站的产品详情页面的一次改版设计，来解答上述问题，总结“有效的数据分析”，给设计师宝贵的指引。一、为何改版——数据大胆假设用户痛点在做任何一次产品改版之前，业务方和设计方需要共同明确改版的目标和方式。我们往往会碰到一些改版动机不清晰的情况，甚至还会有为了改版而改版的极端案例。因此，在投入具体改版设计之前，我们需要有理有据地分析确定改版需要解决哪些问题。而互联网产品快速迭代的特性，往往容不得我们在前期投入大量时间、人力成本，来针对市场和用户进行的大量的调研和分析验证，特别是针对海外用户的产品，直接接触用户的成本更高，如何在最短的时间抓准用户的诉求和痛点是设计师在真正设计前要思考的重中之重。好在对于单页面的设计，数据往往是我们的利器。单页面的数据获取成本低，且能反映的用户行为情况较为全面，能快速帮助我们识别用户在使用产品时碰到的痛点。在这个阶段，设计师需要基于用户在该页面的诉求目标（快速找到自己中意的产品）梳理出用户核心的行为路径，再对应找出能反映这些行为路径使用情况的数据指标。例如在产品详情页面改版前期，我们会和业务方一起将页面沉淀的所有数据梳理出来，如图1所示。从目标用户出发，将用户初步划分为两种，一种是在网站其他场景，如产品列表页，初步筛选了一轮产品的用户，另一种是未初步筛选产品的用户，如SEO直接Landing到产品详情页的用户。两种用户到达该页面的动机和行动都不相同，我们将不同的行为总结成用例（UserCase），并将能反映用例情况的页面内容和功能的点击率、转化率以及上下游页面等各方面的数据列举出来，推断出现在页面的主要问题以及可能的原因，比如从数据上发现，页面底部的推荐模块点击率很高，如图2所示，而SEO渠道的用户首屏蹦失率偏高，因此可以做出假设——首次Landing用户（特别是SEO渠道用户），对当前产品不满意的情况很多并无法快速找到其他产品。基于这些分析假设，我们接下来就可以和业务方一起讨论如何解决这些痛点。二、如何改版——数据小心求证，修正设计明确了改版的目标和基本解决方案，落到具体设计层面，设计师的个人经验为我们提供了有效预测的能力，但我们也要时常保持怀疑态度，特别是面对百万访问量的产品，一个设计判断失误对用户体验的负面影响不可估量。因此我们需要借助小量数据迭代验证的方法来保证设计的最终质量。我们在这次改版的设计初期，由于忽略了用户习惯的力量，就遇到了类似的经验判断不准的情况。为了让用户更清晰地获取供货信息，也为了日后的拓展性，我们尝试打破现在的页面框架，采用类似Amazon的框架结构，将信息和行动区左右分隔，如图3所示。但因为这种设计的变动很大，作为设计师必须提高警惕，避免判断错误，因此我们没有全量上线而是选取了很小部分的流量来进行A/B测试，监控用户在页面中核心行为的数据变化。数据的真实情况出乎我们的意料。新的结构让老用户和新用户的正向行动率都有所下降。而当我们恢复回原来的页面结构时，行动率也随之上升。回过头来反思，这大概就是用户习惯的威力。我们对海外主要电商网站的页面结构进行了竞争分析，如图4所示。两种页面结构都存在，但还是前一种结构占主流。这也许就是为什么我们结构的调整会让用户难以接受，甚至新用户的接受度更低。除了大框架设计的数据验证，设计细节的数据验证也是必不可少的，往往能帮助设计，起到四两拨千斤的作用。通过一轮A/B测试，我们能清晰地对比不同设计细节在数据表现上的差异，特别是页面上可交互的元素，其点击或hover率的变化能指导我们调整对应的设计细节。例如，在图5左图中，我们发现整个区域的点击率下降，且StartOrder等灰色链接的点击率下降比较明显，因此我们初步判断，视觉上的弱化影响到了用户，部分用户可能未发现这些链接。因此我们立即响应，做了一轮快速调整，即将字体颜色从灰色变为了蓝色，如图5右图，点击率立刻回升。这种多次A/B测试识别设计问题并迭代验证的数据验证方法能指导设计师快速修正设计方案细节，使产品有好的体验和商业效果。基于不同产品，数据验证的策略会有所不同，但基本原则是一致的，即排除可能的干扰因素，建立具有可比性的产品验证环境，迭代调整设计变量来达到满意的设计效果。但值得注意的是，我们在针对设计细节进行数据分析假设时，不能一叶蔽目，需要从整理数据变化出发，判断细节数据的变化是否合理，并不是某个链接的点击率下降就一定是坏事，而要分析这个链接的点击下降是否牵动了其他更重要的行动。总而言之，用户好才是真的好，如果点击率的下降能让用户更好地通过产品满足其诉求，我们无须一味追求点击率的提升。三、改版之外——设计师的科学精神互联网信息时代作为双刃剑，一方面让人与人之间的面对面交流变少，另一方面却又沉淀收获了海量用户的全方位数据信息。设计师应该抓住这个契机，利用数据触及数据背后代表的一个个真实的用户，用科学的精神，大胆假设、小心求证用户的每一个潜在诉求。同样，数据也是双刃剑，不同的解读可能南辕北辙，作为集感性和理性于一身的设计师，不能让数据来决定设计，而应不忘初心回归用户，通过科学地解读数据来指导佐证设计，让数据真正成为设计师的利器。作者邮箱：chuan33@设计影响行为，行为决定结果文/董志舟做交互已有几年了，在做互联网交互设计之前，在华为做了一段时间的工业设计，虽说领域不同，但设计理念都一样——以人文本、解决问题、以用户为中心。无论是工业设计还是交互设计，在工作中都会看到设计师与业务方之间的的各种抱怨、交锋。设计师认为业务方不从用户角度考虑，肆意践踏用户体验，业务方觉得设计师没有商业sense，观点过于偏执，总是用一个空洞的“体验”来说事，是不懂商业和需求的小朋友。两拨人暗自争得面红耳赤谁也说服不了谁，当然之前这种事情在我自己身上也发生过。后来工作久了，有了更为深刻的认识，所以想对设计师和业务方说一句：“本是同根生，相煎何太急”。“根”是什么？很多同学会说“用户需求”。其实我认为还应该有更深层次的理解——商业成功。说出这四个字的时候，我心里其实已经准备好接受大家的质疑了。不过，先听我给你讲述一个几个月前我经历的项目。在这个项目中我和业务方合作得非常愉快，既提升了体验又拿到了业务结果，皆大欢喜。项目做完之后，自我总结了一下，有一些关于设计和商业之间的思考，说出来给大家听听。这个项目是对某个产品的搜索结果列表页（简称List）进行改版。对于电商网站，首页、列表页、详情页、购物车、订单、支付、物流、评价，这些就是基本流程。列表页在这条链路中负责的就是帮助用户高效查找、对比产品，最终体现在衡量标准上，业务上的核心指标就是L-D（List-Detail，列表页到详情页）的转化率，实际的意义就是让更多的用户去看某一个的产品的详细情况，从而决定购买或其他交易行为。我是怎么做的呢？之前的一些需求和背景分析、数据分析、设计目标在这里就不多说了，最终设计方案如下。一、优化关键词输入，提高关键词输入效率。解决方案是关键词自动填充、智能联想、相关搜索等。改进前：没有优化关键词输入，如图1所示。改进后：优化关键词输入，如图2所示。二、提高筛选项的使用率。解决方案是将下拉式调整为平铺式，排序规则选项更为显性化。改进前：下拉式筛选项，如图3所示。改进后：平铺式筛选项，如图4所示。三、调整Item信息的内容及展现方式，突出核心信息展示。解决方案是增加对买家有吸引的内容及视觉要素，并且将默认的大图模式（Gallery）改为列表模式（List），便于用户对比产品，听起来是不是很有逻辑？先记住它，这是个伏笔。以一个产品为例。改进前：默认大图模式（Gallery），如图5所示。改进后：列表模式（List），如图6所示。在这里还通过视觉样式去引导用户点击关键行动点，比如整个Item添加鼠标hover时的阴影、鼠标hover在标题上会出现下画线、产品图片尺寸加大，等等。四、类目及属性筛选优化，因为这是用户最常用的。解决方案是将类目筛选与属性筛选做明显的视觉区分，让用户更容易注意并使用类目筛选。改进前：类目及属性筛选不明显，如图7所示。改进后：把用户使用频率最高的类目区域强化，如图8所示。五、改进推荐产品规则，加强推荐的精准性（这个是业务范畴，在此不做详细阐述）。六、其他一些改进。产品功能做了这么多改进，每个都能对用户体验有所提升。那么理论上L-D（列表页到详情页）的转化率一定会大幅上升。但是上线后，转化率居然并没有明显提升！这是为什么呢？我和业务方的产品经理都感到很诧异，找来上线后几天的数据仔细分析，发现了以下几个现象。1.筛选、排序等功能的使用率提升了5～6倍。2.改版前后第一页的产品数量没有变化，但是从前到后（从第1个到第30个）产品点击率的衰减趋势有很大不同。如图9所示，具体数据不方便在此披露，仅仅用示意图来展示一下趋势。通过图9可以看出，相比大图模式来讲，列表模式下流量会更多地集中在前边几个产品上。总体来讲，用户看的产品少了，看到感兴趣的产品的几率变小了，转化率自然就降低了。但是为什么列表模式下用户看的产品更少？我们仔细对比了两种不同排版的页面，如图10所示。稍微观察一下不难发现，在相同的屏幕尺寸下，大图模式比列表模式展示的产品更多，难道是因为这个原因吗？有问题不可怕，可怕的是不知道问题是什么。有了假设，我们就来验证一下。为了谨慎，我们选择了3C类目做了测试，恢复为默认大图模式，别的功能都没更改。几天后，3C类的转化率果然上升了，比原来的老版本还高了不少。问题找到了，原来虽然别的改进点都促进了转化率，但是列表模式拉低了转化率，导致整体转化率变低。原来用户连滚动鼠标滚轮这点成本都不愿意付出。这时候又出现一个疑问，如果是这样，那其他网站（淘宝、天猫、亚马逊）为什么默认为列表模式呢？因为是别人的产品，所以没法用数据来验证。但是我猜想，原因可能有两个。一、产品搜索结果相关性是影响转化率的因素里最重要的一个，而我们这个探索型业务中相关性还做得不够，在这个条件下，其他的因素就可能比较重要了。这个猜想，需要改进搜索算法提升相关性后才能验证。二、这块业务新用户比较多，用户本身的留存也不高。这个看一下不同访客类型的点击数据可以验证，尤其是新老用户的对比。出于资源和时间考虑，后续没有针对猜想做验证。但是把每页产品数量增加到45个之后，转化率又上升了一些，更佐证了前边的结论——“滚动鼠标滚轮也是成本”。好了，案例看完了，回到刚开始我的观点，设计师和业务方那个共同的“根”其实应该是“商业目标”。回顾这个项目，你看出来交互和产品经理存在明显的职责划分了吗？是不是很多都融合到一起了？我和产品经理的关注点都是一致的，提升转化率。只不过我侧重用优化体验的方式，比如筛选的可用性、信息的层级突显、不同的信息框架。产品经理侧重于功能，比如搜索相关性的提高。作为交互设计师，我没有纠结于筛选项用下拉列表是否更简洁，也没有纠结于产品信息用列表从逻辑上是否更符合用户的对比需求。因为这都是逻辑推断，可能用户并不在意，所以我从结果数据去分析用户的行为，然后通过设计的手段去改进，这种方法有理有据，不管是内部设计师、产品还是运营，大家都能明白是怎么一回事。在和产品经理的合作过程中没有常见的“争论”，有的只是对同一个目标的追求，遇到问题互相讨论解决，合作得很愉快，并且最终商业目标也达成了，用户的体验也得到了改善。看似没什么，其实我是有自己的一套理念的，大概的表述如图11所示。用一句话解读这个图：功能、设计、性能这些都有会影响产品的具体形态，产品的具体形态进一步影响了用户怎么去使用产品，用户的行为决定了产品的成败，最终，影响到公司愿景的实现。看懂了这张图，你就知道了设计师的价值在哪儿，也可以解决很多工作中的疑问。下面再来深度解读一下这张图。首先，体验和商业根本不冲突。一家成功的公司，一款成功的产品，用户的需求和公司的需求从来就不曾有过矛盾，公司都是通过满足用户的需求来实现自己的目标的。产品能提供用户所需之物，这本身就是一种良好的用户体验，即使产品本身界面不是很好用也不够漂亮，比如早期的快的打车和滴滴打车，只顾当前数据漂亮而诱导用户去使用，也是只完成了自己的KPI，跟公司要满足的需求还相去甚远。优秀的体验也可以让更多用户使用产品并