东莞网页设计：你如何设计互动？

如果你必须设计一个界面，那么考虑通过绘图来开始这个过程几乎是显而易见的。但这是最好的方法吗？我曾经偶然开始写一个想象中的人机对话，然后我继续画画。

这改变了我的思维方式，我再也没有回过头画。本文将解释我的决定背后的原因。东莞网页设计

我一直是Basecamp球员的崇拜者。前段时间，我正在阅读其设计师之一Jason Zimdars的推文：

Zimdar的推文

“UI设计始于单词。”他不是在开玩笑。评论得到了很多转发，很多收藏。每个人都明白他的意思 - 除了我。

写对话

当我不得不设计一个界面交互组件时，我曾经开始绘制可能的解决方案。（产品设计由多层组成。例如，参见Jesse James Garrett的图层（PDF）和Intercom's。这里，我指的是交互层。）

我曾经开始使用我所知道的模式，或者通过复制其他人的解决方案来解决问题或类似的问题。想象一下，你必须设计一个网站的注册表格。您可以从“窃取”其他设计师的解决方案开始。或者，如果您有信心，可以阅读要求并开始绘制。

但我从画画开始。

我曾经不得不为电子商务网站设计购物车流程。我不知道为什么，但当时，在研究可能的解决方案之前，我想象着当我去超市买单时我会做什么。我希望在网络上重现类似的体验，可能通过利用网络的数字功能来改善它。我写下了超市结账柜台发生的事情：

收银员：嗨，你有会员卡吗？

我：好的，拜托。[我把它交给她。]

收银员：谢谢。

我：谢谢。

收银员：你需要一些行李吗？

我：是的，请两个。

[等等。]

我意识到想象对话比在白色画布上画画要容易得多。我不确定，但我认为对大多数人来说都是如此：对话是人性的内在组成部分。我们已经发展成为一个有说服力的物种。

此外，当我想象一个对话时，我从我的现实生活经验中汲取经验，这对设计有益 - 少抽象。如果用户与计算机的交互类似于真实体验，那么界面可能会被认为易于使用，不是吗？

而且，在我写作时，我比在画画时更注重词汇及其含义。好处是，当我开始草绘时，我会减少副本中的错误。因为副本是一个极其重要的任何接口的一部分，这是写出对话的一大副作用。

一个真实的例子

虽然想象对话很容易，但想象一下对话的变化也很容易。回到超市的例子：我很容易想象收银员在询问我的会员卡之前问我是否需要行李。很容易想象收银员问我一个不同的问题。这可能会也可能不会改变界面的草图。如果不改变任何东西都没关系 - 重要的是我已经考虑到了这一点。我能想到的变化越多，我就会越自信，在最终的设计中我没有错过任何东西。

我通常从产品需求到用例列表到模型（即低保真草图或高保真线框，具体取决于具体情况），这将成为HTML原型的基础。理想情况下，这个过程是线性的; 实际上，它是一个循环，其中每个步骤都为我提供反馈，以便在之前的步骤中更改某些内容。

因为写作使我能够看到更多的变化，它提高了“用例”和“草图”之间循环的有效性。

我们在一个例子中看到这一点。以下对话来自一个实际项目，一个名为Mediaddress的网络应用程序，一个新闻办公软件。这是记者地址的档案。该项目的一个要求是人们应该能够向一个或多个收件人发送电子邮件。

我正在考虑的用例是这样的：用户错误地从100个列表中选择了5个人并且忘记取消选择它们而是想要发送电子邮件到100个完整列表。

变化1

人：我想发一封电子邮件。

应用程序：刚刚选择的五个或所有这些？ 人类：所有人。

应用：要编写电子邮件，您是否希望使用电子邮件程序或编辑器？

变化2

人：我想发一封电子邮件。

应用：好的，我会发送一封电子邮件给您选择的5。要编写电子邮件，您是否希望使用电子邮件程序或编辑器？ 人类：不，等等！我的意思是向所有100个人发送一封电子邮件，而不仅仅是我选择的5个 应用程序：好的，没问题，我会这样做的。要编写电子邮件，您是否希望使用电子邮件程序或编辑器？

根据用例，我编写了一个可以轻松转换为流程和草图的对话。然后，我想象了一个对话的变化，产生了不同的流程和草图。为了更好地理解哪个流程和草图，我比较了用例。

我以用户从列表中选择5个人但希望通过电子邮件发送整个列表为例。这是最常见的情况吗？我不这么认为。对于真正想要通过电子邮件发送这5个人的用户来说，更优化会更有意义吗？

设计包括权衡。我们必须始终权衡我们的选择的成本和收益。但我不想深入了解我如何确定哪种解决方案最佳。我遵循许多标准。我的观点是说明为什么书面对话是一种有用的设计工具。

我在书面对话和流程图和草图之间来回跳转。但指导工具是书面对话。我发现它是想象互动的最简单的工具。随后是图表和草图（或线框）。他们创建订单并帮助我清楚地看到步骤。它们也是与开发人员和其他利益相关者进行沟通的更好工具。

总结一下我的观点：

• 想象一下人机对话然后草绘它比直接绘制界面更容易。

• 想象的对话来自现实生活体验，而直接素描则更多地来自于记忆设计。

• 复制是任何界面的基础，先编写和稍后绘制草图使您能够在正确的时间专注于它。

• 想象不同的对话比想象不同的草图更容易，这使得更容易提出更多的设计选项。

• 当我写作时，我更有创意（因为我可以想象更多的变化），而且我倾向于更少地复制其他人的解决方案。

杰森的意思怎么样？

最后，我了解杰森的推文是什么意思吗？为什么不直接问他？我写了一封电子邮件，询问他对我所提出的方法的看法。他非常友好地回答我：

所以，我仔细阅读了这篇文章，并且我认为你已经弄明白我想用推文说些什么了。设想用户和计算机之间的对话是一种巧妙的方式来思考它。我在自己的工作中做了一些略微不同的事情。我试着想象一下如何向朋友解释这个功能，而不是考虑计算机。这具有会话，清晰和有用的效果。我认为不考虑计算机特别有用，因为它很容易陷入我们以前见过的模式中; “电脑说话”，这是简洁的，没有任何人真正说出的话语和声音。我希望我的UI能像我说的那样阅读，这意味着自然语言和完整的句子。

我肯定会以草图的形式多次重写，并在整个过程中不断完善。修剪和优化单词比开始太少更好。这就是为什么我更喜欢这种方法来绘画。当你画画时，你会想到布局和可用空间太快以及什么太长而无法放在按钮上。这些限制太多，无法立即处理。我觉得最好把话说得恰到好处，然后弄清楚视觉设计。

这是一个简单的例子。首先是您可能会使用的计算机语言版本：

“删除文件”

[确定] [取消]

现在你可能会说一个版本：

“你确定要删除这个文件吗？”

[是的，永久删除]或[不，我想保留]

这有点人为，但你明白了。当你先画画时，我觉得电脑说话的版本很容易陷入困境。如果空间非常有限，我当然可以减少第二个，但为什么不从你最好的版本开始，然后考虑任何妥协呢？

以下是我注意到的课程：

• “我认为不考虑计算机特别有用，因为它很容易陷入我们以前见过的模式中; “电脑说话”，这是一种简洁，不会留下任何人们实际说的话语和声音。“

• “这就是为什么我更喜欢这种方法来绘画。当你画画时，你会想到布局太快......我觉得当你先画画时，电脑说话的版本很容易陷入困境。“

• “修剪和优化这些词比用太少的词开头要好得多。”

我跟着另外一个问题，问Jason这个方法如何帮助他找出流量，如果有的话。我写：

假设你有一个功能，你开始写。写作是否会让您考虑流程或功能，因此您可以更改流程或功能？或者流程或功能是一个单独的思考过程？也许我会用一个例子让自己更清楚。想象一下书签应用程序：

我：保存这个网址。

电脑：好的。

第二个版本：

我：保存这个网址。

电脑：在我保存之前，你想改变页面的标题吗？您想要添加页面内容的简短描述吗？你想标记页面（以便以后检索它）吗？

第二个版本改变了流程。现在，当我想保存网址时，会弹出一个表单。在第一个版本中，我只会看到确认反馈。

以下是杰森的回答：

那么，流动因素如何取决于具体情况。很多时候功能并不是完全孤立的。它们适合现有的流量和屏幕 - 或者至少从那里开始。所以，我可能已经想到了流程。但如果写作引导我走向另一个方向，我总是乐于改进。但即使它是全新的东西，我也会从写作开始，因为这有助于我弄清楚流程。如果需要很多步骤来向朋友解释流程，那么可能需要将其分解为软件中的类似文字步骤。因此，当我弄清楚流程时，典型的写作草图可能包含几个副本块。我认为这个练习的重要部分是弄清楚如何在现实世界中思考它，而不是简单地将其视为软件问题。这导致了新的见解。

这两封电子邮件似乎验证了我的方法。他们也给了我新的见解。来自一位优秀的设计师，反馈给我带来了快乐。我认为我有一个独到的想法，但也许只是仔细阅读Basecamp的聪明人写的东西的副作用。我也不是在开玩笑。

东莞网页设计