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中找到。在这个意义上,让一些用户来试一试这个模拟站点是个好主意。看看站点是否易于浏览以及响应是否快。如果用户在完成一些任务时存在困难,最好考虑废弃设计并返回软件开发的前一阶段。一般来说,这种情况不会发生,除非站点超安全设计或站点很少接受用户的反馈信息。