1.5 用户体验设计的一般流程

决定用户体验的要素有很多，合理应用这些要素可以设计出完美的网站页面。但实际的设计工作中包含了太多未知的因素，这些因素直接或间接地影响设计师的设计。所以我们在设计时需要按照一定的流程进行，每完成一步都需要对其进行完善和检测，从而尽可能保证最终的产品能够获得良好的用户体验。

1.原型

设计的第一个阶段，我们称为原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等。如果你觉得这些概念听上去都比较抽象，也可以简单地理解为：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都画出来，让人可以直观地看到。

技巧点拨

至于怎么画原型，那就有很多的方法可供选择。用纸笔画，用Photoshop画，用Visio画，或者使用专业的原型创建软件Axure画，都是可以的。只要把上面提到的这些都事无巨细地在原型中表达出来。

在原型的交付物中，最重要也是最常见的就是线框图，这在本章前面的内容中已经进行了介绍。

在画线框图的时候，要把握好细节的刻画程度。有些元素只要画个框就可以了，而有些元素需要把文案都设计好，以免被老板或需求方揪住诸如角落里的广告banner该有多大等细节问题与你纠缠不休，而忽视了最重要的页面主体部分。

此外，还需要牢记：原型就是用来让人修改的，它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。

2.模型

在原型被大家接受之后，就该关心产品长得好不好看了，我们以“模型”这个词来统称该步骤的交付物。和原型相比，模型关注产品的视觉设计，包括色彩、风格、图标、插图等。

要清楚的是，这不是一种由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对交互设计和尚未进行的HTML、CSS和JavaScript的代码都要有充分的了解。如果不能从全局的角度来做视觉设计，则对产品本身没有任何价值。

例如通过原型，大家一致认为页面中A元素比B元素重要，那么视觉设计师的脑海中就要有十七八种可以表现A元素比B元素重要的视觉语言可供选择，这是对设计原型的视觉设计师的基本要求。

更高一些的要求才是视觉设计的原始功能，“到底使用什么样的设计风格？”“这个按钮使用什么颜色好？”等，这一类的思考和选择，应该着眼于产品的气质、品牌等，在各种企业的各种产品间保持一定的特色，在用户心里打下视觉的烙印。

进一步的更高的要求，有些问题用交互设计是很难解决的，这时就需要一个有创造力的视觉设计师，可以从视觉设计的角度来创造性地解决问题。

总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来看视觉设计的人并不多，大多还停留在效果、风格等表面上。

3.演示版

演示版就是按照原型和模型，使用HTML、CSS、JavaScript等前端技术将网站实现出来，以便后端的开发工程师可以接手功能的开发。这个过程比较复杂，前端开发从很大程度来说是对用户体验的提升和保证，开发只是它的一个形式和手段。

4.中间步骤

居然还有很多个中间步骤？是的，这是我们的用户研究过程。在各个阶段的前后，可以根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由，可以采用多种方式对用户进行调研，听取用户的意见。关键是，用户研究的结果如何表现到产品上？如何吸收少数用户的意见来服务所有用户？

最后……

关于流程，要注意：

设计流程的目标在于保证“无论谁来做这个产品的设计，都能达到80分”；

100分的完美作品，很有可能没有遵循流程，而是天才融合了创新、传承和执行力的作品；

“流程”这种东西，只有与环境相匹配才能够带来正面的作用。