如果你要设计一个界面，很明显开始画之前要先思考。但是，这是最好的方法么？有一次我想象了一下人机对话，写了出来，然后才开始画界面。
如果你要设计一个界面，很明显开始画之前要先思考。但是，这是最好的方法么？有一次我想象了一下人机对话，写了出来，然后才开始画界面。
这种新方法改变了我的思维方式，我再也不用原来的方式了。本文将解释做这个决定的原因。
我一直都崇拜 Basecamp 的设计师。前段时间我看到他们一个设计师 Jason Zimdars 发的一条推：
Jason Zimdars 的推特
（图中文字注解——我最喜欢的草图工具：iA Writer。不开玩笑，UI 设计从文字开始。）
译注：iA Writer 是 Mac 系统上最受欢迎的写作软件。
“UI 设计从文字开始”他不是在开玩笑。这条评论有很多人转推，很多人点赞。每个人都明白他说的意思——除了我。
当必需设计一个新的交互组件时，我会先画出可能的解决方案。（产品设计分很多层，这里我说的是交互层）
Intercom 对设计的分层
| 产 出 | 从预期结果开始。你设计的内容怎样才会更好、更易用？对结果没有明确的预期通常都不会有好的结果 |
| 结 构 | 下一步是设计系统。指定达成结果所需的组件，并一一对应组件和结果之间的关系 |
| 交 互 | 结果和系统定下来以后，设计交互的细节。更详细的交互都有哪些？行为与事件的顺序如何？UI组件是怎样的，人们如何与之交互，或者说人们怎样操作组件？重新审视系统，改进交互，持续迭代。 |
| 视 觉 | 一旦产出结果、结构和交互定下来，有了理想的原型。开始进行详细的视觉设计，让它看上去美丽、愉悦。现在是做漂亮的网格、颜色、排版、插图的时候。 |
以前我的设计模式都是，找到别人的解决方案，或者类似问题的解决方案，复制一下。比如要设计一个网站注册表单，你可以通过“偷”别的设计师的方案开始，或者你足够自信的话，阅读需求文档以后就开始画。
但是我都是直接开始画。
有一次我为一个电子商务网站设计购物车流程。当时不知道为什么，在找其他解决方案之前， 我想象了我在超市付款的流程，希望在网站上重现这种经历。我写下了在超市收银台发生的事：
收银员：嗨，你有会员卡么？
我：是的，谢谢。 （我递给她会员卡）
收银员：谢谢。
我：谢谢。
收银员：你需要袋子吗？
我：是的，两个。
……
我意识到想象对话过程比在白纸上作画更容易。有句话虽然不是很确定，但是应该对大多数人都成立：对话是人性内在的组成部分，我们已经进化成说话交流的物种。
而且，我想象的对话场景来自于现实世界的体验，抽象少，对设计更好。如果用户对电脑的交互过程能类似于现实生活中的场景。那么这个界面可以说是易用的，对不对？
此外，我写的时候比画的时候对遣词造句更加注意。好处就是等我开始画图的时候，文字错误更少了。这也是一个不错的附加好处。因为文案是界面上非常重要的部分。
想象一个对话很容易，想象一个对话的变化也不难。
回到上一个超市收银台的例子：我能很轻松地想象到，收银员问我有无会员卡之前先问我要不要购物袋，而且收银员会问不同的问题。这也可能不会改动界面草图。就算没有改动界面也没关系，重要的是，我已经把这种情况考虑进去了。考虑到的变化越多，我就会更自信，最终的设计没有错过任何东西。
我通常从产品需求开始，到一系列的用例去做原型（根据情况的不同来提供低保真草图，或者高保真线框图），这将成为HTML原型的基础。理想情况下，这个过程是线性的。在现实中是一个循环，其中任何一步都会收到反馈，对前一步做些改动。
我的设计步骤
因为写作让我看到更多变化，提高了用例到草稿过程中的效率。
现在从实际例子看一下这个步骤。下面的对话来自真实的项目，一个网页应用 Mediaddress。一个新闻办公软件，用来管理记者的地址。其中一个需求是用户能给一个或者多个收件人发送邮件。
我正在考虑的用例是：用户已经从100人的列表中选择了5人，忘记了取消选择，现在想发送邮件给全部的人，即100人。
用户：我想发一封邮件。
APP：只发送给5个已经选择的用户？
用户：全部用户。
APP：你想用自己的邮件客户端还是我的编辑器写邮件？
变化 1 的流程图
变化 1 的草图
用户：我想发一封邮件。
APP：好的，我会发送给5个你已经选择的地址。你想用自己的邮件客户端还是我的编辑器写邮件？
用户：不，等一下！我是想发给全部100个地址，不是已经选择的5个。
APP：好的，没问题，我会这么做的。你想用自己的邮件客户端还是我的编辑器写邮件？
变化 2 的流程图
变化 2 的草图
根据用例，我写下来的会话可以很容易地转换成流程图和草图。然后我想象会话的变化，产生不同的流程和草图。对比用例以后，就能理解哪种流程和草图设计更好。
从列表中选择 5 人，但希望发邮件给整个列表，这种情况是最常出现的么？我不这么认为，为真正想发给 5 个地址的用户优化是不是更有意义？
设计需要取舍。我们始终都需要在成本和收益之间做选择。我不想说这次选择的细节，怎样决定，哪个方案最好。我有很多的标准做权衡。这里想说明为什么写会话是很用的设计工具。
我在写会话、流程图和草稿之间来回。但是引导工具是写出来的会话，之后才有图标和草图或线框图。写字是帮助想象最简单的工具。写出来的会话引导我看清每个步骤，也是与开发者和相关人员沟通的好工具。
最后我有没有理解 Jason 发的推特？ 为什么不直接问他呢？我直接给他发邮件，请教这个方法的意见。他非常友好地回复了我：
我通读了你的文章，我认为你已经差不多明白了我那条推表达的意思。想象人机对话是个巧妙的方式。我自己的方法稍有不同。我完全没有想电脑，而是试着想象如何向朋友解释一个特性。这样更像对话，更清晰，更有帮助。特别是不去想电脑这一点非常有用，因为那样很容易掉入“与电脑对话”的陷阱。电脑对话更精简，没有文字和声音，一点都不像人们真实的对话。我希望我的 UI 读起来就像我在说一样，也就是说要有自然的语言和完整的句子。
当然我也会重写重做很多次草稿，整个过程也会不断改进。删减和优化文字比一开始只写几个字好多了。这也是我推崇这种方法的原因，画的时候会很快想到布局和可用空间，内容太长放不到按钮中。需要一次处理太多限制了。我觉得先把文字定下，然后再解决设计更好。
这里有个例子，先想计算机语言，会这样画：
“删除文件” [确定] [取消]而你会说出来的一个版本是：
“你确定删除这个文件吗？” [是的，永久删除] 或 [不，我想保留它]这只是编造的例子，我想你能明白我要表达的意思。一开始就画会很容易陷入计算机语言的陷阱。空间不足的时候我可以消减第二个版本，但为什么不一开始就从最好的版本开始，然后再考虑妥协呢？
“我认为完全不去想计算机非常有用，因为那样会很容易陷入我们以前都见过的模式：‘计算机语言’简略，省去了文字和声音，一点都不像人会说的话。”
“这就是我为什么喜欢这种方式。画的时候太快想到布局……一开始就画，很容易陷入计算机语言的陷阱。”
“修剪和优化比一开始只写很少的文字更好。”
我又问了 Jason 一个问题，这种方法有没有帮助他弄清流程，如果有的话，怎样做到的。我写到：
比方说，当你开始写一个功能，写的时候会想流程和特性，并且改变流程和特性吗，还是说流程和特性是独立的思考过程？我举个例子能表达得更清晰，比如一个书签应用。
第一个版本
我：保存这个网页地址。
计算机：好。
第二个版本
我：保存这个网页地址。
计算机：保存之前，你想修改页面标题吗？你想要给网页添加简短的描述吗？你想给页面加个标签吗（以后会更容易找到）？
第二个版本改变了流程。现在我要保存一个网页地址的时候，一个表单弹出来。而第一个版本，我只会看到一个确认框。
流程如何视情况而定。很多时候功能都不是孤立的，都可以融入现有的流程或界面——至少可以从现有的开始。所以我可能已经对流程有了一些想法，但是如果写作引导我发现另外的方向，我很愿意去改善它。甚至即使全新的东西，我也会从写作开始，这样能帮我理清流程。如果要很多步才能向你的朋友解释清楚，那也许它需要分解成更细小的， 字面意义上的步骤了。所以我理清流程时，典型的文字稿可能包含几份不同的副本。我认为这个练习最重要的部分是弄清楚你在现实世界中会怎样想，而不是简单地把它当作一个软件问题。这样能带来新的领悟。
这两封邮件证实我的方法，也给了我新的见解。来自卓越设计师的反馈，让我充满了喜悦。我以为有了一个原创的新点子，但是这可能只是来自 Basecamp 的聪明的家伙写的内容的一个附带作用。
更多资源
写好文案的5个原则: https://library.gv.com/five-principles-for-great-interface-copywriting-ff01af70e75a#.5hr45ngqr
文案的重要性: https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
Intercom 的设计分层: https://blog.intercom.io/the-dribbblisation-of-design/
Jesse James Garrett 的设计分层: http://www.jjg.net/elements/pdf/elements.pdf
Basecamp 导出功能的思考过程: https://public.basecamp.com/1679267/projects/343643-bcx-exporting/todos/5157955-design-the-ui-for
本文由Smashing Magazine独家授权异步社区发布简体中文版。版权所有 禁止转载或建立镜像。