2.9 分割的设计阶段

　　原型设计阶段对大多数web设计人员来说是最有趣的，因为它开始让项目成型。在这个阶段，应该同时开发外观和技术上的原型系统。无论如何，在建立原型系统之前，应该尽可能收集更多的内容。内容本身会影响站点并帮助指导它的形成。如果内容的基调非常严肃而外观却非常有趣和随意，站点对用户来说会非常奇怪。预先看内容有助于统一技术和内容。同时，也应该考虑到收集内容是站点设计中最慢的一个方面。web项目的参与者很积极地参与集体会议，但一旦需要他们在内容方面上做工作时，却很难找到他们。缺少内容在web项目中绝对是个大问题。应该预先准备好处理这个问题。

建议：在设计之前尽可能收集站点的内容。

2.9.1 块的组合

　　设计应该自顶而下进行。首先考虑一下用户是如何访问站点，又如何结束访问站点的。在大多数情况下，这意味着首先设计主页，再设计子页，最后是内容网页。规则：外观设计应该采用自顶而下的方式，从主页到子页，最后是内容网页。首先在纸上创建以块形式存在的模拟网页，如图2 - 5所示。块的组合允许设计者专注于对象的类型，以及不必在网页上考虑精确的位置和细节的组织。块分区法能有助于设计者创建网页模板，它会使后来的实现更加容易。确信你所创建的合成块是满足web浏览器窗口的约束条件的。浏览器边界的影响是一个非常重要的因素。网页块的组合效果图在h t t p : / / w w w. web d e s i g n r e f . c o m . / c h a p t e r 2 /中可以找到。一旦网页块的组合设计好后，其他类型的网页也可以按同样的方式设计。如果完整的方案已经很详细，应确信到每个网页块的路径是合乎逻辑的。这样，就可以继续下一阶段。

2.9.2 屏幕和纸张的组合图

　　下一设计阶段就是纸张或屏幕原型阶段。在这个阶段，设计者应画出草图，或实现站点某个典型网页的组合。无论是在纸上或屏幕上，一定要确定考虑了浏览器窗口或者屏幕的尺寸。块组合阶段使用的带有浏览器窗口轮廓的纸张可以用来做草图。建议：在开发外观组合图时，一定要考虑浏览器窗口的边界效果。画出各种各样效果的按钮、标题以及特征网页的草图，如果可能，在网页中提供一些文本说明，即一些缩写文本，或者真实文本。注意很多设计者在屏幕组合中仅使用一些类似文本的东西。尽管这种方法更有利于设计者专注于设计网页的要素，但如果可以得到真实的文本，应尽量使用它，这样有助于模仿最终的效果。

　　组合阶段提供了很大的创造空间，但应该提醒设计者在web的可能限制下进行创作，并且同时考虑web规范说明书中的外观需求，考虑到文件的大小、颜色支持情况以及h t m l样式可能受限制，这可避免设计者提出外观极好但无法实现的网页。尤其是要防止为了追求艺术性而重新设计站点结构的行为。记住，站点规划会清楚地说明外观需求，包括市场营销的限制。第1章已讨论了在形式、功能、目标和内容之间进行平衡的困难，当设计者企图在web技术、用户能力和站点需求等约束条件下满足自己的创造欲望时，这种平衡的困难会变得更加明显。典型的网页组合图如图2 - 6所示。

　　在创建原型时，应创建一个显示整个屏幕包括按钮、图像和文本的单个图像。把这个图像保存为g i f或j p e g的图像格式，并用浏览器加载测试在典型环境下它的效果。在这个阶段，应该尽量避免完全用h t m l实现网页。你有可能不得不废弃设计，再次实现会很浪费。一旦纸上或屏幕上的原型完成，就应该和用户一起测试。问一些用户，为了完成特定任务哪些部分会被点击，哪些按钮会被选择。确信不只是向一个用户显示原型系统，因为个体的品位是决定原型的接受程度的重要因素。如果用户对网页有太多的负面评价，应该考虑重新返回原来的设计阶段。在原型阶段，不能太关注你的作品。如果是这样，站点就不会以用户为中心，而是以开发者为中心。记住以下的设计规则：

规则：和原型系统保持距离。倾听用户并提炼的设计。

　　一旦提出了一个可以接受的主页设计，就继续进行子页设计和内容网页设计。一个典型的子页组合图如图2 - 7所示。

　　对于高度交互的站点，可能必须为特定的任务如购买或下载的每一步骤设计原型网页。这种类型的网页必须设计得更加详细，应该包括如窗体输入框的标题等其他非常有用的细节。一个交互性更强的纸上组合物的例子如图2 - 8所示。

　　尽管不是所有的站点都需要技术原型，高度交互的站点不应该只考虑界面原型，应该包括显示诸如数据库查询、个性化、电子商务等如何运作的概念原型。不幸的是，大多数情况下，直到界面完成时才会考虑技术原型，这通常会导致工作的重复。

2.9.3 模拟站点

　　在完成所有原型后，就到了创建模拟站点或a l p h a站点的时候。模拟站点的实现始于把组合体拆分再用h t m l把网页组合在一起，也可能用层叠样式单。尽量用模板，这样整个站点的组合会快一点。尽量采用符号代替文本，除非有些地方需要用真实的文本测试方案。一旦模拟站点组合好，站点应该完全可以浏览，尽管虽然包含的只是一些空的内容和空洞的交互。一个模拟站点的例子可以在h t t p : / / w w w. web d e s i g n r e f . c o m / m o c k s i t e中找到。在这个意义上，让一些用户来试一试这个模拟站点是个好主意。看看站点是否易于浏览以及响应是否快。如果用户在完成一些任务时存在困难，最好考虑废弃设计并返回软件开发的前一阶段。一般来说，这种情况不会发生，除非站点超安全设计或站点很少接受用户的反馈信息。