Finger的博客

Finger说明：曾经想自己写一篇设计过程心理分析的文章，后来发现实在难度太大，并且也是因为自己比较懒，所以写作计划就搁置了。最近偶然在网上看到一篇国外设计师的文章，算是作者的自我心理剖析吧，Finger深有戚戚焉，因此翻译过来供大家参考，同时请大家看到后不吝赐教，在我的博文后积极跟帖，也算是帮我个小忙吧。bow~~

                         深浅灰色：作为思维装置的线框图

                                                                 [阅读原文]

“一张图胜过一千个文字，一个界面胜过一千张图。”

——Ben Shneiderman, 2003

    我的好朋友Russ Unger最近为Peachpit出版了一本名为“用户体验设计项目指南”的书。在有关线框图一章中他让我做一些设计，我也很高兴做这事。他向我提供了一些背景资料和要求，以便重新设计一个虚拟的邮轮操作员主页，并请我设计一些加注释的线框图以便可以在书中引用。当我完成了这个小练习后，他要我为整个过程写一个简短的解释。本文是我发给他的未经任何删节的详细解释，说明我在设计过程中使用线框图作为思维装置。毫无疑问它将被编辑以适应书籍的限制，但他很友好地让我在这里发表原文。

    在我看来，线框图可作为一种设定和探索某个特定问题空间的“思考装置”——在这个例子中是供邮轮操作员使用的主页。要理解线框图的作用，就必须理解设计的本质。我把设计看作是对未来可能性的探索。我使用素描和线框图等手段进行探索行动，并评估这些行动的后果。当探索问题空间时，我可以比较容易地在头脑中保持设计模型，但我的首要目标——在利益相关者、目标受众和我之间创建一个对话框架的努力很可能会失败。

    我认为对用户体验人员来说，把设计看作问题解决是非常正常的。对我来说，通过使用线框图进行设计就是搜索问题空间的可选择方案，既是问题设定的过程也是问题解决的过程，这就意味着我总是开始于上下文情境（context）。为了简化说明，我选择我的目标受众的一个活动，让他们快速、轻易、优美地达成一个目标。在这个例子中，目标受众想在合适的时间，以合适的价格轻易地找到最好的邮轮。在我用纸或者Omnigraffle描绘出一系列想法来探索这个主要目标之前，我甚至不看需求文档或竞争性分析。此刻我不是要寻求解决办法，因为第一轮线框图是为设计师提供一个与其他设计师，利益相关者，以及线框图本身进行对话的空间。

    我的设计过程可以最好地描述为从发散阶段，通过转换阶段，最终达到融合阶段。在每个阶段，线框图都要提交给利益相关者进行批判和讨论。

    “发散”阶段主要探讨设计情境的制约因素和各种可能性。我会尽力在设计情境中发现不变的事实并尽量贯彻整个过程。这一阶段的大部份活动是收集信息，尽力理解和详细阐述设计问题。通过画出许多线框图，我可以探索可供选择的方案。所有不可能的或者可想到的想法都被呈现、测试，在许多情况下还会被抛弃。

    我最初的设想是在这一阶段形成的。在邮轮练习中我重点关注“搜索的集中性”，作为设计的驱动目标。我已经知道我想设计最佳邮轮搜索界面的可能性，我希望这项活动在设计前被引入并处于设计的中心地位。我描绘出这样一个概念：在用户甚至还没有看到完整的搜索结果之前，就立即向其提供建议的邮轮。从主页上，用户就可以进入一个对话并开始寻找一个完美的邮轮。这种交互方式背后的概念是很多年前由Blast Radius公司的 Peter Hong首次提出的，他们的小组现在与我们一起在Kayakon做PinPoint Trave的新搜索界面。这个概念曾经建立但后来又死掉了，但是我认为这个想法是值得保留的。

    在“转换”阶段，我减少了可选择方案的数目，和我的线框图包括的设计范围。我开始抛弃一开始想到的确实糟糕的想法。通常在此时，我会去看需求文档，并尽力理解利益相关者和业务需求的整个生态系统，并在我的主要设计目标的上下文背景（我的核心受众的那个中心活动）中解决这些问题。也是在此时，我开始处理其他竞争性的需求。在邮轮操作员的例子中，我描绘了页眉，页脚和静态内容，并划出内容模块所在的区域，例如CTAs（Call to Action）和promotions。在这个阶段我会和关键利益相关者共享输出结果，但是也会带上视觉设计师，研发经理和质量保证工程师，以便他们能够有助于这一进程，并提供更多的想法，同时指出隐患和制约因素。

    最后，作为设计师，我必须作出决定来执行设计规范。在“融合”阶段，我创建了两到三个备选方案供最后审议。我给线框图加上注释，以便利益相关者和目标测试者能够明白。你在图1.a和1.b看到的线框图正处于这一阶段，此时设计改变已经很少了，主要是对细节进行完善。

    这里有两个基本细化过的线框图通过了这个阶段。它们绝不是完美的，但满足了本次练习的目的，并演示了我的线框图的样子。


Figure 1.a | Global Cruises Sample Wireframe


Figure 1.b | Global Cruises Wireframe


Mark Brooks, a friend of Russ Unger, and visual designer - was able to take those wireframes and rather quickly start exploring various visual designs including the screen below.

Global Cruises Homepage Comp v1


If you wish to see the complete set - or for the raw Omnigraffle files which I am happy to share - just ping me on twitter: semanticwill

You can download the PDF here: globalcruises_ixd_v1.51 (PDF)

Omnigraffle Files here: globalcruises_ixd_v1.51 graffle (ZIP)