WEB设计流程

进行WEB网页的设计是一项创造性的活动。为了得到更好的效果，通常来说网页设计会遵循一定的工作流程。在成熟工作流程指导下，能尽可能减少开发过程中的重复劳动和返工。

通过互联网，我学习到的工作流程通常如下：

内容分析

内容分析环节应仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

内容分析的过程实际上是对要设计的网页内容进行深入了解的过程。通过内容分析，通常要回答以下问题：

• 网站向用户提供的信息是出于什么目的？
• 网站的主要用户（访问者）是谁？
• 希望向网站的主要用户表达的情绪/感觉是什么？

网站向用户提供信息的目的

建设一个网站一定是为了某种目的：做网店的页面设计和个人博客的页面设计一定不同。政府或行业主管部门的页面设计与公司的页面设计一定会有不同。因此，了解网站设计目的是进行网页设计的第一步。

举例来说，设计一个个人博客页面可以有以下目的：

• 展示个性，向外界展示自己的某种特长、个性、喜好等，获得同好者的认可等
• 共享和传播个人生活、学习、工作的经验，并从到访者回复的信息中获取反馈信息，以得到进一步的提升
• 记录个人成长的轨迹。
• 与个人相关的其他内容。

一般来说，一个成功的个人博客，通常会聚焦于一些具体的专题。并在与人共享知识、经验的同时获得认可。因此，个人博客的页面设计通常与个人性格、生活经验、喜好、愿意共享的内容相关。

网站的主要用户是谁

网站的主要用户是指网站的主要访问者。通常而言，每一个网站都有设定的访问用户群。例如政府网站的用户群是社会大众；公司网站的用户群是对本公司服务、产品有兴趣的客户；个人博客网站的用户群是与个人工作领域、兴趣爱好相近的人群；不同的人群对设计具有不同的认知感受。因此设计页面时必须考虑网站受众的偏好才能得到良好的设计效果。

希望向网站的主要用户表达的情绪/感觉是什么

通常网站是带有“味道”的。在进行页面设计的时候，可以考虑希望想用户传达的“味道”是什么。这些味道可以使“时尚”、“传统”、“活泼”、“热烈”、“专业”、“沉默”、“阳光”等等。

页面的设计需要与网站的内容相匹配。两者相合，常常会有突出的效果，两者相悖，则可能会让页面无法留住用户。

原型设计

原型设计是为了将在“内容分析”阶段捕获的用户需求、灵感等内容快速转换成可以与用户沟通的模型。用以验证原始设计是否可以满足页面设计需要。

在原型设计阶段，设计师通常会使用一些纸笔工具进行快速建模。搭建页面的原始组织架构。同时标注页面各部分的主要内容。为了更好的模拟用户感知，通常设计师会设计多套不同的页面，用来模拟用户在不同页面间跳转的过程。

原型设计目前有很多工具可供使用，例如：

• Balsamiq Mockups：基于AIR的具有手绘风格的原型设计软件。具有网页版可供体验使用
• AXure RP：有名的原型设计工具。是可以快速实现、准确表达、带有交互效果且易于上手的原型设计利器。
• 纸和笔：著名的原型设计工具。设计师的最爱：）

视觉设计

效果图是最终页面的终极模拟。通常能代表用户访问网站的过程中所的视觉感受，因此效果图设计有时也会被叫做视觉设计。效果图是进行网站前端编码的实施依据。通常设计师的主要工作到提供效果图为止。后续会交给前端开发工程师将完成的PSD文件转换成HTML及图片文件。

效果图设计会强烈的将网站的“味道”表达出来。因此有时也存在多套不同的效果图设计供选择。

转换源代码

转换源代码是将视觉设计的成果转换成可供继续开发使用的HTML、Javascript、图片等一系列文件的集合。一般来说，前端源代码着重于“呈现层”的功能。后端程序则着重于网站功能的实现。前端代码的完成，只是网站设计过程中的一部分工作。后端系统功能实现的过程中需要前端代码不断的调整配合。

转换源代码的过程，是将图像向具体计算机语言实现转换的过程。因此前端源代码不可避免的将与网站开发语言向结合。因此前端设计工程师通常需要具有以下技能：

• 熟练的Photoshop等软件操作技能：可以完成效果图的切片操作等
• 深入了解HTML语言，具有使用HTML编写结构化页面文档的能力
• 深入了解CSS，可以使用CSS完成页面装饰
• 熟练使用Javascript等语言，能够使用JQuery等库实现Ajax操作。
• 了解后端程序开发语言，并能够使用相应的语言完成前端开发。