如何用手绘草图+头脑风暴进行移动Web设计

 

如何用手绘草图+头脑风暴进行移动Web设计

 

编者按：前段时间在微博上流传过一张名为“外国设计师VS国内设计师：精采PK”的趣图，在图中我们可以看到老外设计师在做设计前先签好合同，按合同进行设计，然后很快可以完成工作，尽情享受生活；而国内设计师往往被客户需求牵着鼻子走，不断改稿，最终要么成为“设计尸”，要么成为“设计屎”。外国设计师和国内设计师到底还有什么不同？以下是SmashingMagazine刊登的一篇关于如何与客户一起用草图+头脑风暴的方式进行移动Web设计的文章，看了以下详细的各个步骤，或许你会感觉，老外设计师在干起活来轻松，完全是因为准备工作做得好。让我们一起来看看这篇文章吧：

 

一直以来，移动Web的处境尴尬，要么在台式机的阴影下，要么就是Native app旁边的丑角儿。现在，“决定未来趋势，移动优先的敏捷设计”可以帮助咱们弄出和Native app高度一致，未来又受欢迎的移动Web。这是好消息吧？可坏消息呢？呵呵，要是你没正确的方法，得不到别人的支持，也是一文不值的。

如何让他人接受移动Web？大多数时候最牵制设计师的，是他们面对的用户以及所要接触的概念模型，如果想让用户真正认可移动Web的潜力，那么就得让他们真正可以脱离台式机和App。

移动Web的承诺很难实现

我们得承认，敏捷的设计开发需要时间和开销。

在受到不同大小的屏幕，不同分辨率，不同设备性能限制的时候，我们的设计需要考虑更多。例如，要考虑更多排版的线框图，不同的交互，还有不同硬件的不同支撑范围，这些还需要专门的测试。但有些阻碍比起时间和投入更大，那就是“改变”。

要改变用户习惯是很难的，我们天生就对改变抵触。甚至，“没时间就没钱”的说法，在投资那些需要彻底改变我们对网站的感性概念的超前理念面前，都显得没那么重要了。我们所要打破的是我们自己一直给用户灌输的对Web的概念。

随便问一个人，他们心目中的网络长得什么样子？他们会给你一幅960宽屏，舒适又享受的台式机网站画面；如果问他们心目中的移动网络是什么样，他们会说是App那样，有限的内容，简单的交互，最小化的导航和华丽的页面切换。台式机和手机，完全不同的概念。

那么，应该如何让客户作出选择？

激励用户在传统PC网络和移动设备网络做出选择

作为设计师，我们得拿掉我们自己和客户的包袱，这些包袱就来源于想象，因为客户的想象和你要说的可能天差地别，所以我们还得平衡过时的客户习惯。说着容易做着难，首先得搞清楚迎头是什么问题，接着我会分享如何改变用户对移动网络的陈旧观念，OK，到底怎样能帮助用户摆脱固有的概念呢？

用手绘图来辅助说明

只要你一张口描述项目是什么样的，听的人就会根据他们的经验产生想象。你讲得越多，客户脑海中的画面就越发清晰，最终你可能会被客户牵着鼻子走：你设计的就是客户脑海中的，而不是你最初计划的、也不是用户真正需要的。要想让他们摆脱这种状态，这就需要手绘来帮忙。我们一直觉得手绘只是一个概要性的交流方法，但我们也可以将它作为斩掉客户想象的办法。草图的目的并不是为了展示成品的样子，更不会代替常规的UX过程，目的只是腾出客户脑海的固有思想给新的东西。

举办研讨会

下面列出的步骤看似互不相干，但是以结合的眼光来看，它会试着从不同的角度来设计，让团队从以往要求凝聚的（被同化的）思维向摸索的（扩散性的）思维转变。这样做自然会引起思维的碰撞，但你需要接受这种不和谐的感觉，因为这是打破旧有模式的必经之路。这一过程分为5步：

1. 确立好目标：先确定好要做的，建立一系列讨论和评估问题的规则和标准。
2. 画连环草图：准备好背景，给别人一个设计的世界。
3. 移动优先：交代团队成员们要关注信息的层次和用户的目的，让他们脑子里对小屏幕的想法（特别是那些难搞的，以App为核心的）直接反映在纸上。
4. 六度模版：引出矛盾，类似你画个手机的应用却让它在PC机上运行，尽可能多地让参与人找出这种极端差异。
5. 概念草图：别管屏幕大小，将所有想法整合进新的概念模型。

以下则是具体说明：

1）确定网站商业目标和用户需求：

成员：客户

时间：30分钟——1小时

a. 确立目标并设置优先级。

着手画图之前，我们要整理好各方面因素，首先确立好可以牢牢拴住股东期望的商业目标，其中，具体的特点和功能要阐释清楚。“快速链接”和“循环幻灯片”都不能叫做商业目标。尽肯可能多地在白纸或白板上清晰地列好每一项，并标好优先级。

b. 确立嘉宾和用户的需求。

接下来，我们要列出用户的需求，这些需求必须来源于真是的调研和采访。如果你得不到任何调研反馈，你就要依据你对用户的理解和观察获取他们会想要什么。或者想想在座的嘉宾在看到网站的时候会产生的问题：他们为什么会出席这个会？什么信息是他们会觉得有价值的？

c. 灌输移动Web带来的机会。

说完Web的需求后，就可以将话题引入到移动网络的前景上。我们的目的是，让人们的印象，从移动Web只是普通Web的一个增值服务或只是普通Web的弱化体验挣脱出来。让他们领悟假若人们不再约束在桌子面前后，移动Web将带来的巨大商机：假设他们是躺在沙发上，亦或在工作，更或者仅仅是在某处站着？不同移动设备能提供什么样的不同以往的体验？我们要整合出大量不同的理念，就算他们有些觉得难以置信，只是让他们接受移动Web各式各样的可能性而不是意在代替普通Web。

这一部分并不是重头戏，所以最多花1个小时说明就好。

2）画草图

上一部分结束后，就万事俱备只欠东风了。随着我们接触的股东会的规模不同，草图也会随着做出些改变。我们希望两者兼顾，所以就要尽量将研讨会的人数控制在10个人或更少，这样才能确保每个人获得的信息质量最好，但另一方面也要让他的人数足够大，这样才能确保合理分组。股东会的影响越大越好，草图也要尽量简单，最重要的是要有趣，这样我们才可以达到第一个分水岭：展示连环草图。

3）展示连环草图

成员：一组或两组
时间：30分钟外加讨论

其实手绘草图并不难，你把team分成两组，每个组都给上面画好方形面板的纸，叫他们画上吸引观众来网站又完成任务的草图。最近和Wisconsin的Marian大学合作时经常用到这方法。我们用“以代表你目标用户的人的特征来说，在什么情况下，会有一个push的力量让他们去你的网站？他们又会在那做些什么操作？用的是什么设备？”，作为我们连环草图的导语。

例如，大学的研讨会中，有个team描述一个青少年，他很依恋朋友和家乡，也不想离开学校；喜欢运动却少一点天赋，没在更大的学校里展示过；他很开心这所大学提供展示运动的机会，还提供很棒的住宿条件；他将可以开一小段路程就能去享受校园生活。这幅草图展示了主人公带着希望来到网站，和不同页面产生交互动作的情景。

（画连环画是一个很有趣的展示方法，就算你要展示的东西的天马行空很难想像的。）

这种故事板的形式很不错，因为人们通过它可以将枯燥的需求列表和对象生动地以叙述形态展示。抽象的表单烟消云散，与参与者直接相关的情景说明代替之，为他们营造具体的网站使用情景。如果在右方加上生动的对话，就能让股东们真切感受到你的网站本身之外所带来的对人们生活的影响。

4）3度手机优先模版

内容：草图Solo
时间：30分钟外加讨论

我们顺利让人们感受到上网的场景之后，接下来的重点就要放在网站的接口上，我会用到白板，上面写满各种关于用户和商业目标的草稿，这些东西在一个页面里不会用到。详细阐述完“手机优先”的趋势后，我们将向现场的嘉宾发放三级移动模板，再决定哪一个页面是重点。这一part其实有点难度，因为要假设用户使用的是小屏设备，没有太大的交互范围，你还要限制展示空间。而你要在页面上show些什么呢？这要取决于你着重想让用户知道的内容。

草图的solo要把重点放在讲内容而不是载体的适应性上。

虽然种种信息冲击和故事板为每个人开拓了很宽的思维，但实际的模板却限制了思维。页面模版的限制需要他们更专注于那些重要的想法和页面元素上，许多草图看上去仍然很像app，不过这是自然现象也是可以预知的结果。结束草图勾画后，请嘉宾为其它人展示自己的创作和创作理念。

（手机模版可以让嘉宾却专注于重要的内容和交互上）

5）6度快速反应模板

内容：草图solo
时间：30分钟（无讨论）

如果我们真的可以丝毫不受习惯影响地画出设计手稿，就太棒了，可就算我们想出了许多新点子，也很难逃脱沉睡的旧习惯影子。 “网站该是什么样的”已经在我们脑子里根深蒂固，频频出现。

这一阶段，嘉宾需要将3度的点子运用到不同的屏幕大小上，需要合乎目标用户和商业目标的理由，才能添加新元素。我们稍稍修改了下传统的6度试验，使它不同模块的比例存在不一致性，同时它们还是很小，画出的画原保粗糙，不脱离草图的本质。 我很喜欢这试验，它鼓励参与者从内在固有的思维挣脱出来，找到新的想法，不然你不会看到别人仅仅为了个上方导航条或者右边图片播放器绞尽脑汁了，也看不到他们利用自己的冲动，把现有的标准组件整合到种种正处的期望和故事场景里了。所有的试验里，这个实验是最有挑战性的。

（6度模版试验鼓励参与者从内在固有的思维挣脱出来，找到新的想法，甚至十分错综复杂。）

10分钟内大多数人都可以轻易完成，通常我会拿着牢记要点四处寻走，提醒他们画出来的东西要符合当初的目的，结束之后，直接跨到概念图形部分而不讨论。

6）一度概念图形

成员：两三个组
时间：30分钟外加讨论

进展到这里，人们已经会耐不住想要开口提问了，他们原本勾勒的网站画面现在将是个巨大疑团，相对来说，这是好事。就像春季大扫除的时候房间比开始脏乱得多。解开疑团的方法是重组，让人们回到之前的团队，拼凑各自的想法，每个团队总结出一个有适应能力的方案。接着就是挂上一张大大的白纸，让他们把自己的图纸钉在上面，让他们交流自己的设计过程。甚至你自己要反向思考比起你原有的设想差别在哪。图纸旁的背景上记录下哪些是引起强烈共鸣，哪些是需要再争议的设计，这些都可以等一切结束后把它们整个图板卷回去再和你的团队商议。

（概念草图是3度草图阶段的进化，因为3度草图考虑和适应不同大小的画布。）

结队画图的技巧

• 用一个包来专门装钢笔、记号笔、铅笔、纸和其它必要物品。
• 每个步骤都给出示范。
• 即便你是毕加索，示范的画也要尽量粗糙，才能保证参与者也有信心自己也能画。
• 放音乐。安静会让人尴尬，也会让人觉得自己在做个测验。“Chutes Too Naroow by The Shins”和“The Kinks are the Village Green Preservation Society”都是不错的选择。
• 使用铭记备忘。我很认可给画画的人铭记备忘，还要给那些能把这些“铭记”的东西融进设计的人奖励。
• 没人画草图是很糟的情况。草图的质量可尚且不提，图既是思想，应该推崇思想产出的光荣，激励大家努力思考。
• 组织team的时候，别把Bert和Ernie这种太有默契的搭档放在一起，因为会互相影响，尽量把会独立工作，不互相影响的放一起。
• 如果有些人不想参加画画，拿现成的给他们或者直接让他们参加讨论就好。
• 尽量缩小草图到高保真线框图、设计稿或随便其它什么的改变时间，时间拖得越久，越不能保证他们思想集中。

收尾

研讨会尾声，大家都会感到疲乏，脑子里的想法也殆尽了，最后的展示不会强调谁是谁的，毕竟每个人都有出一份力。虽然这些草图并不会直接用到最终的设计稿，但他们也会知道他们有所贡献，更重要的是，你解决了不同层级围绕着适应性和未知设备的种种抽象难理解的谜团，之前一团迷雾的问题也逐渐明晰，你之前觉得充满荆棘的思维也在用户的脑海里再次浮出水面，尽管晚了些。聚众描绘草图，为人们提供了一条通向未知的线索，逐渐知道真正地移动设备如何延伸的，无边界的，我们又怎样和这些设备产生交互动作。 这个之后，将会点燃它们对于“友好的未知”的接受和认可，并蔓延至整个组织。假如你曾经看到了某个机会却因为种种原因没有坚持下去，你会深深感受到这种实验的魔力。

想要改变人们对现有状态的依赖和思维没有捷径，说到底，就是和他们性格里顽固抗争，这些顽固使他们宁愿害怕也不愿轻易改变的原因。好消息是，这种多方位的聚众画画研讨会，会让你在今后赢更多场硬仗。你用的又是什么方法呢？

Via Smashingmagazine