Lean UX 第四章
第四章
协同设计
当你在思考自己的未来时，你应该以更开放的姿态与他人协作，因为他人的想法经常会好于你。在一个团队中，你经常会受到他人的挑战和激励，这样的话你将会有更大的作为。
AmyPoehler
精益用户体验是一个协作的过程，它要求设计师和其他成员一起共同创造，这样产生的想法要好于散兵作战。但是它并不是一种以委员会设计的形式，相反，它在项目早期就能收到很多意见以增加对项目的把控。在本章中，我们探索了这种密切的跨职能的协作方式所带来的益处。具体而言我们会关注以下几点：
- 为什么每个人都要参与设计
- 低保真原型如何促进协作
- 在团队中建立共识
我们也将深入到一系列让工作更加高效的技巧和方法，包括：
- 设计工作室——一次整个团队的协同素描练习
- 风格指南和模式库——产品中所有可见元素的规范
- 异地团队的协作技巧
在前面的章节中，我们讨论了产品功能假设（product feature hypotheses），产品功能假设的第一部分是阐述如何解决用户的痛点，其功能设计有多种方式。寻览这些痛点是很困难的，我们是否经常面对这样的设计选择困扰呢？
我发现最有效的方式是让整个团队围绕一个设计方向协同工作。从长远来看，协同设计远好于个人英雄式设计方式（让一个设计师或一个设计团队介入项目，提出一些漂亮的方案，然后离开参与到下一个项目）。英雄式的方式并不能带来团队的成长，相反，协同设计会提高整个团队的设计IQ。协同设计能让每个团队成员表达他（或她）的想法，这样在设计师定义用户体验时能获得更广泛更全面的想法。反过来，整个团队的协同设计能增加大家的主人翁精神。最后，协同设计建立了整个团队的共同认识，共同认识是精益用户体验的通行证。越多的共同认识，就越少需要文档来推进项目。
协同设计是一种让整个团队共同参与产品概念构想的方法，它帮助团队建立对于设计问题及方案的共同认识，它可以让大家一起决定哪些功能和界面元素能更好地实现产品功能设想中的功能。
协同设计仍是一个设计师主导的活动，设计师不仅要安排会议，还要尽量与人方便。有时候设计师需要和开发人员在白板上进行一对一的交流，有时候设计师召集大家一起进行设计工作室练习，其关键在于要和不同的团队成员协作。
在一个典型的团队协同设计会议上，团队在一起画草图，对工作进行探讨，直到提出一个大家认为最有可能成功的解决方案。设计师不仅要设计产品，同时也要引导团队进行一系列练习。
这些会议的输出物一般是低保真草图和框架图。保真度的水平决定了工作的可塑性，如果测试结果不如意，就可以很快的修正方案。如果你没有花过多的时间在费力的书写文档和定义细节上，那就会非常容易从一个失败的方案上转变过来。
交谈：你最有力的工具
精益用户体验提倡把交谈作为团队成员中的主要交流方式。这种方式和提倡“个人和交互高于过程和工具”的敏捷宣言（Agile Manifesto）非常一致。交谈使得团队围绕一个共识达成团结。它同时能更容易地把不同学科的知识带入到项目中。当新想法形成或者设计发生改变，团队成员的见解能快速挑战这些想法，而这些挑战可能是设计者自己所无法认知到的。
通过尽早及频繁的交谈，团队能更早地意识到每一个人想法并能够尽早开始自己的工作。举例来说，如果他们知道提出的解决方案需要特定的后台基础设施，那么团队的工程师们就能在设计修订和定稿时开始自己的工作了。软件开发和设计中的平行路径是达到真实体验的最快途径。
这些交谈在一开始可能会有些糟糕；毕竟，你在破坏学科间经由时间验证的围墙。但是，当交谈变得越来越好时，设计师可以提供开发者在实现某一功能点时所需要的帮助，确保他们开发的版本往正确的方向演化。这些交谈能让整个项目的进程更加透明。这种透明则能在团队成员间建立纽带。相信彼此的团队成员会更愿意共同工作，并产生高质量的作品。
协同设计实践
2010年时，我负责为TheLadders（https://www.theladders.com/，美国的一个招聘网站）的受众（招聘者和老板）做一个网页应用的控制面板，有非常多的信息需要放置在该界面上。我并没有独自一人在工位上堆像素，而是拿了一块白板找开发同事，将我如何布局内容和功能的最初的想法画给他看，接着再一起讨论，然后开发同事将他的想法补充在白板上。我们几个来回后，最终形成的布局和交互架构不仅是可用的，而且在接下来两周内就能看到是否是可行的（见图4-2）。在这2个小时的讨论会结束后，我们回到各自的工位开始工作，我在草图的基础上去做进一步的框架和流程，而开发同事就开始编写一些基础的代码以用于得到一些我们想要的基于表现层的数据。
通过协同设计讨论会，我们建立了一个共同的认识。我们双方都知道接下来要做什么，以及什么需要做，我们不需要等着文档出来才开始。这个方法能让我们在两周时间内就能看到我们方案的第一个版本。
设计工作室
当你的团队已是协同设计团队，那么上文说描述的非正式讨论会是经常会发生的。但有时候你需要将大家全部召集起来开一个正式的工作会议，设计工作室就是一个很好的方式，设计工作室（又称设计专家研讨会）让一个跨职能的团队在一起讨论设计问题，并可视化潜在方案。它打破了团队组织结构的阻碍，创造了一个大家集思广益的讨论会。将设计师、开发、学科专家、产品经理、业务分析师以及其他一些相关同事召集起来，共同面对同一个问题挑战，这样产生的结果会远远好于散兵作战的方式。设计工作室还有另一个好处，那就是建立团队间的信任，这使得大家在正式会议之后会能更加频繁的展开非正式的协同讨论。
开展一个设计工作室
接下来我将对该方法进行详细的讲解，你应该在情况和时间允许的情况下开展正式的设计工作室。具体的操作形式并不是最终目标，而是要和同事和客户一起解决问题。
过程
设计工作室的流程为：
- 定义问题
- 各自想法的产生（发散）
- 简介和评判
- 迭代和重新定义（出现）
- 团队想法产生（收敛）
工具
这里列举了需要准备的工具：
- 铅笔
- 钢笔
- 记号笔（多种颜色/宽度）
- 荧光笔（多种颜色）
- 素描模板（6格的模板或者是折成6格的11*17英寸的空白纸）
- 25*30.5英寸的贴纸架
- 小贴纸（便利贴）
最好只有5到8人参与，如果人数较多的时候，可以分为几组单独进行，然后在最后阶段比较其输出物。
定义问题（15-45分钟）
设计工作室的第一步是要确保每位成员都理解你们要解决的问题，你们说明的猜想（包括人物角色，在这一章节的其他部分中另有说明），你们形成的假设和工作所面对的限制。这一步可以是一个正式的PPT演讲或是一个群组讨论，只要团队接受就行。
各自想法的产生（10分钟）
在这一步，大家都各自完成。给每一个成员一张6格模板-------一张空白纸上有6个方格（见图4-3），你可以通过折叠11*17英寸的白纸，或者是使用已经准备好的模板。
可选方式：有时候，人们面对空白纸难以着手。如果遇到这种情况，可以尝试以下步骤（5分钟）：要求每一个人在每一个格子中填写一个人物角色，以及为该人物角色解决的具体痛点或问题，在每个格子的顶部写上人物角色的名字和痛点。每一个人可以多次填写相同人物角色和痛点以及针对该问题的不同解决方案，亦可以填写基于不同的人物角色和痛点。每一种组合都可以。
接下来，在空白的6格纸上，给每个人5分钟的时间去做一个针对人物角色和痛点的低保真草图，需要使用一些视觉化的表达方式，如界面草图、流程图、图表等，而不是文字。你可以鼓励你的团队，向他们展现交互设计的秘密，告诉他们这就和游戏一样：如果你会画圆、正方形和三角形，那你就能画出任何界面。我确信大家都能做到。
简介和评判（每人3分钟）
当上一阶段结束，就可以开始分享和评判你刚才的草图（见图4-4）。按照顺序，给每位参与者3分钟的时间来展示并陈述他们的草图。他应该明确说明他解决了哪个人物角色的问题，他基于哪个痛点，然后解释所画的草图。每一个成员都应该提出评判与反馈。评判应着眼于讲述人的意图。例如“这个功能如何解决人物角色的某个问题？”的问题是很有帮助的。另外一些评论如“我不太喜欢这个想法”就显得没有任何价值，也不能给予讲述者启发。
当然，请确保每一位团队成员都讲述了自己的方案并接收到评价。
迭代和重新定义（5-10分钟）
现在再一次地让大家单独进行。要求每一个参与者针对自己原来的6个想法，通过获得的评价来重新思考一个更大的想法，并画在一张11*17英寸的白纸上。这样做的目的是挑出最有价值的想法，并让它变成一个更进一步的想法。
时间到后，请让团队再重复一次陈述和评价环节。
团队想法产生（45分钟）
现在每一个人都获得了自己想法的反馈，团队需要将这些想法收敛为一个想法。在这一步中，团队将收敛出一个大家认为有最大成功机会的想法。这个想法将被用于精益用户体验过程中的下一步：创造一个最小可行性产品（MVP）并展开实验（这两部分都在下一章节中讲到）。
让团队使用2*3英寸的小贴纸支架板或直接在白板上画出这个想法的元素和流程图。这个阶段将会有很多的妥协与争论，直到达成共识，团队可能需要排定优先级并消减一些功能。鼓励你的团队去创造一个好想法的“停车场”，而不是直接删掉一些想法，这会更容易让好想法产生。
如果你有多个团队在做设计工作室，让每一个团队在获得最后一轮的评价和反馈后，陈述他们最终的想法。
设计工作室中产生的草图，现在可用于产生精细的线框图、原型和早期代码，这些将推动团队在证明自己的假设的道路上前进。
风格指南
风格指南让协同设计更加便捷。风格指南一般是一个被广泛接受的包含了交互、视觉、用户界面和系统复用元素的模式库。风格指南（也称为模式库）收集了用户可见的产品组件。如果它是由像素组成的，那么他就是处于风格指南的范围。头部、页脚、网格、表单、标签、按钮逻辑以及其他用户体验相关的产品元素都属于风格指南。
有些公司通过wiki来构建风格指南，这样每个团队成员都可以很方便的访问到。有些公司选择创造“有生命的“风格样式。这是一个由前端代码和设计组成的资源库，不仅能定义产品的外观和行为，还起到了底层标记和样式表的功能。如果你改变了风格指南，你也将改变产品。
风格指南更加高效，它提供了一个现成的资源库，以及用于绘制流程图的界面组件。最大限度的减少了在表格的呈现形式，按钮放左还是放右等问题上无休止的辩论。开发者可以开始创建一些核心的界面组件，而不需要等待设计师来定义和细化这些组件。这些组件已经被设计和定义好了，并且收集在一起。
交互设计师和视觉设计师同样受益，他们不再需要重新创造已存在的体验模式，他们将专注于新的设计挑战上，如新颖的交互问题、新的元素的视觉系统。因为重复元素的复用，让评审周期精简了，如全局导航就不再需要讨论了。核心的产品挑战和针对解决方案更广泛的意见将成为我们更要关注的东西。
创建一个风格指南
有两种基本的方法可以用来创建一个风格指南：
1）快的方式（Bigbang）
在这种方法中，团队需要在有限的时间内（1、2个星期或者几个月）脱离现有的工作去完成产品界面元素的风格指南。优点是可以在较短的时间内完成风格指南，缺点是在这一段时间内你的团队无法了解到关于产品的新信息。
2）慢的方式（Slowdrip）
在这种方法中，在项目中每产生一个新的界面元素或改变一个元素就将它添加到风格指南中。这样做最大的好处是在做该工作的时候能同时兼顾项目进展。但是，这样的方式缺点是很难得到完成风格指南，因此这就无法像完整的风格指南那样提供效率。
维护风格指南
当你在规划一个风格指南时，最重要的是考虑其维护问题。你需要制定一个流程并制定专门的人来更新风格指南。将风格指南看作是一个需要你构建并维护的动态的资源库，而不是静态的，不更新的。当你有了一个时时迭代并易于使用的风格指南，你应该让团队更容易地在现实中使用它——你的目标就是让风格指南更加易用，而不是去回避它。你希望它能更容易遵守！因此你需要投入专门的人和时间来维持风格指南的迭代。
案例学习
在案例学习中，我们将着眼于通用电气公司（GE）的用户体验团队是如何创建一个企业级的风格指南的。
当Greg Petroff在2011年末负责掌管GE的全球用户体验实践时，他传承了一支全球分布的团队来致力于为一个全球最大的组织来提供伟大的产品体验。事实上，GE是世界上排名第14的软件生产商，为监控，管理及理解他们所生产的工业设备创造系统。由于开发者和设计者的比例为500：1，这个团队发现要取得一个能满足组织大量需求的设计结果非常具有挑战。无法雇佣更多的设计师，大面积的用户体验设计方法倡导——包括流程，价值观，交流，态度和猜想——对于文化根基的改变也显得太过缓慢。除此之外，最新组建的用户体验中心很快发现他们被工作需求压的喘不过气。审查每一个来自公司的每一个用户体验项目让他们进入了一个很想突破的瓶颈。
一定会有一个更好的方法。这个团队一开始尝试通过社交平台来建立一个公司范围的用户体验社区。虽然这个方法一开始建立了一些友谊，但是它无法让一个完整的设计保持美观，或者让那些没有用户体验能力的开发团队完成一个好的作品。
当在一些业务线执行了几个关键项目后，Petroff的团队马上意识到可以重复使用案例，人物角色模型和设计框架。因为每一条业务线都关注于他们自己的业务需求而不是整体，自然有很多的重复工作在GE中发生，正如每个不同组织一遍又一遍创造着相似的元素。更糟糕的是，工作的质量无法满足智能手机用户的需求。GE的方法不仅仅是效率低下的，而且还增加了每个项目到达市场所需要的时间。当项目到达市场时，贯穿GE业务线的体验已经是分裂且不一致的了。
这个团队在一周的过程中不停地进行头脑风暴，建立了一个稻草人，来展现一致性用户体验指导下的社会环境。他们的目标受众是GE的8000名软件工程师。这个团队意识到，通过给予开发者模板，指导，资源和代码片段，开发者们能把用户体验抓到自己的手中，而不需要再等待设计辅助和支持。
伴随这一创新，工业互联网设计系统（IIDS）产生了。这个稻草人被管理层所批准，并在2012年的夏天开始实施。
IIDS基于现在的HTML5框架，比如Bootstrap，jQuery等等，但是看上去则不像他们（见图4-5和4-6）。它是一个有品牌的，功能性的UI设计样式库。它为GE的产品体验提供图片素材，代码片段和使用规则。这个团队还建立了一些应用范例来帮助其他团队。IIDS同时也指出了典型的人物角色模型，使得项目团队能明确他们的目标用户以及目标用户如何他们选择的设计样式。
Petroff的团队认识到了IIDS的两种不同受众。第一种是GE的开发者，他们需要一些资源来建立站点和产品。第二种由项目的管理者和拥有者组成，他们需要决定创建怎样的应用。IIDS能很好的为两者服务，它经常收到积极的反馈，使得可用性统计大幅上涨，而产品的成功指数也与日俱增。
IIDS使得团队变得更加敏捷，并踏足于精益创业中去。它让项目团队能更快的产出体验原型。这些原型到达测试阶段的时间比原先快上几个月，让团队在繁重的后台整合前就能测试他们的价值。产品平均生命周期被缩减了6个月，而大致估计的资源使用也减少了数百万每年。
最重要的是所有GE的团队现在都可以在几天之内得到一个可点击的体验版本，而不再像以前那样需要几个月。他们能在消耗更多资源前就把这些想法带给内部的持股人或者是外部的用户。除此之外，这些团队能更好地评判一个将要发布的产品的成功度。一度困扰着GE的产品设计流程的浪费也随着IIDS中不断增长的资源而被减少了。
图4-6 IIDS中的表格布局
什么东西应该放入风格指南？
如果它是由像素构成的，那么它就属于风格指南的范围。所有的交互设计元素都应该被定义和添加到风格指南，将设计模式作为产品的基础风格指南。表单字段、标签、下拉菜单、单选按钮的位置和行为、Ajax和jQuery事件、按钮——这些都应该包含在风格指南中。
为每一个交互设计元素提供3个数据：
1）元素看起来像什么
包括了元素最大和最小尺寸的细节，水平和垂直限制，以及形式要求。
2）它经常被放置在屏幕的位置
说清楚元素始终应该放置的屏幕区域，一旦有所更改将可能不再适用。
3）它在什么时候被使用
让你的团队知道什么时候使用下拉菜单而不是使用单选按钮或者是其他的控件是非常必要的。
接下来是视觉设计元素。首先是产品的颜色调色板，每一种颜色包括其互补色和辅助色，使用六位值进行标注。对于某些元素，如按钮，会有多个状态的颜色，这些都要包含在内。其他一些元素如logo、标题、页脚、网格结构和排版选择（例如，使用什么字号，字体）也应包含在内。另外就是提供给交互设计元素时，用什么，用在哪，何时用的属性也应该被包含。
最后，明确文案风格。确认符合产品个性的文案，哪些文字可以用，哪些不可以用，俗语是否可以使用，按钮用语（如OK、yes、go等）以及其他一些导航用语（如上一页/下一页、更多/更少，等）。
成功的风格指南的特点
成功的风格指南有3个重要的特点：1）可访问的 2）不断改进的 3）可操作的。
可访问的
可访问的意味着风格指南对每一个团队成员都是开放的。可访问的风格指南是指：
1）易于发现
使用一个好记的URL，让每一个人都记住。
2）易于访问
确保团队可以在任何场景下都能访问到（办公室、室外、或是手机等）。
3）易于搜索
全面和精准的搜索功能可以大大增加风格指南的使用。
4）易于使用
将风格指南作为你另一个设计项目来完成，如果他不易用，人们很快就会再也不使用它。
不断改进的
风格指南应该被看作是一个动态的文档。是的，我们要确保体验的一致性，但我们的产品和我们的用户是在不断演变的。这就要求风格指南需要易于更新。此外，对于设计师设计的新的元素，需要能容易的添加到风格指南中。
在这里我推荐wiki（维基百科），这是因为：
- 程序员非常熟悉wiki，这样他们就能轻易上手，并且不会认为是设计师专属的。
- Wiki能查看修改的历史记录。这点非常重要，因为有时候你要回滚到更新前的用户界面。修改历史能确保你不需要重新创建以前版本的风格指南。
- Wiki可以跟踪到谁进行了修改，并且提供了评论功能。这个功能可以很好地跟踪做出的决定，谁做了决定，甚至做出改变背后的逻辑和讨论。当你引入一个新的团队成员，这些历史能让他们更快地跟上进度。换句话说，wiki就是你的文档。
可操作的
风格指南不只是一个交互组件的库，它应该是一个“组件工厂”能产生出任何想要的界面元素。当一个新的元素被添加到了风格指南时，确保它能以团队所需要的任何格式被下载。确保不仅是代码是可用的，图形和线框图也是可用的。这样做能使得设计师在创造原型时拥有一个完整的界面元素调色板。
如何创建风格指南
创建风格指南包含两个部分：
- 创建一个内容表（TOC）
内容表是指风格指南的框架类目，你可以在其中放置你的设计元素。它可以细化到交互设计、视觉设计、文案、品牌指南、可访问需求以及其他高层次的部分。
- 填充内容
正如我们前面提到的，有两种创建风格指南的方法，一种是快速的，一种是慢慢来的。
快速的方法适用于新产品或相对简单的产品，在项目之初就创建好风格指南。
慢慢来的方式适用于过去的或者复杂的产品。
维护风格指南
如果你的风格指南是有用的话，那它就一定要保持更新，添加新创建的体验模式，去掉一些过时的功能。
指派一个人负责风格指南的维护，我们可以把他称为风格指南的馆长或者是编辑。他并不是单独一个人去负责创造风格指南内容本身，而是负责确保风格指南是最新的。他要让元素的创造者及时更新元素。他更像是一个模式库的编辑，这个位置并不是人人都愿意负责，所以一般都会3个月轮一次岗。
不只是为了设计师
风格指南并不只是包含与设计师相关的信息，他还需要包含代码片段。这样程序员就有了一个获得他们设计方向的一站式商店，这些基础的代码片段可以让他们相应的经验成倍增长。
原生风格指南漫谈
最近，在网络上工作的团队有了新的风格指南穿件的方法——原生风格指南。从本质上说，这种方式与基于WIKI建立的风格指南相同，但有一个根本的区别是：原生风格指南中的代码与产品中使用的代码是相同的。这种方式提高了团队效率，但需要增加一些额外的基础设施和流程负担。
原生风格指南基本上是你的产品的一部分，它包含了网站的每一个页面中呈现的所有样式和组件。它拥有一个优点，那就是更接近于自我维持。
当你更改了底层的HTML和CSS，风格指南也将随之改变。这种情况下，仍然需要指派人来留意这个网页，以确保及时解决一些冲突。但是，自动记载的应用风格指南仍然是令人兴奋的，并且具有很大的前景。
异地团队的协同
对于强协同来说，地理位置距离是一个很大的挑战。在本章中我们讨论过了一些防范——特别是设计工作室——当团队不在一起时就会变得非常的困难。但是你仍然可以找到一些协同合作的方法。
这里有一些技巧可以帮助异地团队架起桥梁，如Skype、Google Docs（包括Google Draw）、wiki以及带摄像头的手机，可以让跨区域的协同更加高效，并且让团队几乎全天都连接在一起。
全球范围的协同设计讨论会
异地协同是非常困难的，但是付出额外的努力是值得的。接下来让我们看一下我之前所在团队如何克服地域阻隔，并在一起完成设计解决方案的。
这个团队分布在两个城市，产品和用户体验团队在纽约，开发团队在温哥华。我的目标是要和整个团队开展设计工作室和关联映射会议。
启动
我们将两个城市的团队聚集在彼此的会议室中，分别使用Mac电脑登上Skype，进行连接，然后将影像投影到电视屏幕上，这样就感觉大家是在同一个会议室一般。
我们准备了一个非常简洁的ppt，大概10页左右，介绍一下我们正在解决的问题，包括用户推荐、数据以及用户需求，同时陈述一下解决方案的范围。
关联映射的执行（Priming thepump with affinity mapping）
我们做关联映射的练习，通常是使用便签纸和白板。在这种情况下，我们使用共享的Google docs的电子表格来进行这个活动。一般我们8个团队成员共同编辑一个电子文档。
我们要求每个成员拿出尽可能多的想法来解决他们提出的问题。每个团队成员都要写出自己的想法，并标记上自己的名字。这个过程大约持续5分钟。
为了让每个位置上的人都能看到所有提议，我们让每个人将自己的想法读出来，一些想法会很快跳过，一些想法会引起大家的讨论。
为了模拟同一地理环境下的团队，作为主持人的我会在笔记本电脑中打开第二张表格。我会在这张表格中根据自己听到的想法来反应一些主题（在表格的第一列中记录这些主题）。
之后，我会要求团队把每一个想法放入到匹配的主题中。如果某些想法无法匹配，我会让他们创建自己的主题。我同时也会鼓励他们改变主题的名字，如果他们觉得名字无法代表想法或者有误导性。
在这个过程的最后，我们拥有了一份根据主题分类的想法列表。一些主题可能只有两个想法，一些则有多达八个的想法。
远程团队的设计工作室
接下来的设计工作室讨论会，我们需要能尽量模拟在一起的场景。我们分发纸、笔到每一个人。我们使用了一个双显示器，一个显示草图，另一个通过skype连接后显示团队成员（见图4-10）。我们让每个人使用手机拍摄自己的草图，并通过电子邮件发给其他人。借助这些设备我们在一起了，并且可以进行草图交流。
做好这些设置之后，我们就可以像往常一样进行设计工作室。每个团队成员展示他的想法并且接受到评判。最终收敛为一个想法，并向前推进。
总结：协同设计
协同设计是用户体验的一种演变方式。在本章中，我们探讨了如何“开源”设计过程以帮助整个团队进入到项目中，我们谈到了如何在设计工作室讨论会中产生低保真草图帮助团队产生更多的想法，然后最终形成一个整体的方案。我们展示了一些实在的技巧来帮助团队建立共同认识。共同认识是精益用户体验的基础。通过使用风格指南、设计工作室和简单沟通等工具让团队建立共同认识，让大家以更快的步伐向前迈进。
现在我们申明了设想和创建了设计假说，这才真正地进入了学习的过程。下一章节中，我们将讲到最小可行性产品Minimum Viable Product (MVP)，以及如何用它来规划实验。我们将使用这些实验来检验我们的设想的有效性，并决定如何来推进我们的项目。
评论