网站设计（开发）流程周期表（Periodic Table of Web Design Process）

很多企业计划搭建一个新网站或改版原网站时，通常会交由专业的网站设计和开发机构代理制作。网站可以是简单的，也可以是复杂的，这取决于网站设计开发的项目需求文档。当网络开发公司预估搭建新网站的项目时间表时，某些客户可能会持怀疑态度，一个新网站不会一夜之间就诞生，任何一个新网站的创建均需遵循有序、清晰的网页设计过程，这有利于需求方与代理公司之间顺畅、深入的交流。如果企业有一个Web设计开发团队，为规避网站设计师和开发人员工作中产生过多摩擦，规范流程的重要性更不言而喻了。无论如何，最终交付的网站必须对吸引新客户、销售转化起到关键作用。

New Design Group制作的这张「网页设计开发流程周期表」，涵盖了前期网站的规划、如何洞悉客户需求、最终版本网站的上线启用，以及网站后期的运营和维护等每个步骤。作者一共从6大维度（步骤）整合了42个流程元素，以下为具体解读，enjoy。

（中文版「网站设计开发周期表」可加微信-huiruizhang获取）

步骤1：摘要

摘要包括：项目定义、目标受众、网站目标、技术规格、内容清单、资源、项目时间表以及预算等内容。

对Web设计开发代理商（国内通俗称为：建站公司）而言，项目摘要通常是他们与网站甚至与网站需求方（企业）的第一次接触，也是双方最重要的一环。企业必须向Web设计开发代理商传达准确的项目定义，必须讲清楚公司业务、目标受众和网站目标等关键信息，这样Web设计开发代理商就可以与企业沟通一些具体的事情，例如：是否要用令人兴奋的图像和视频吸引年轻的访问者？或者网站是否需要满足父母群体网上购物的需求？等等。

同样，企业也应该定义清楚网站的一些技术规格，例如网站是否应针对特定分辨率或浏览器进行优化？需要哪种移动版本？响应式设计是否足够好？在简介中，企业也要说明在网站其余设计流程中可供Web设计开发代理商使用的内容和资源，资源包括但不限于字体、图片，而内容包括从产品描述到文章、视频等。

基于以上这些信息，Web设计开发代理商可以预估出网站项目进度和交付时间表，以及满足企业所有需求的预算。摘要，是至关重要的一步，它构成了网站后续所有设计和开发工作的基础。简短的或不完整的摘要可能会导致交付的网站不令人满意，进而导致因修改调整造成的延迟及预算波动。

步骤2：规划

规划同样至关重要，诸如：头脑风暴、功能架构、页面布局、可用性、原型图等。

有了第一步摘要中的信息，Web设计开发代理商就一目了然地明确了目标和预期结果，也有益于提高效率和专注力。接下来，就是团队通过研讨会和头脑风暴，概括出适合企业（客户）要求的网站初代构想和概念。

网站功能架构基本上定义了整个网站的内容结构以及用户如何访问它，这很大程度上取决于企业提供的一些数据。例如：用户是否喜欢无限下滑滚动，还是更喜欢网页内容极简的设计？Web设计开发代理商需要适度平衡两者。功能架构创建好之后，就要开始考虑每个页面的内容布局了。这将与规划网站任何功能（例如：在线预订表单、在线支付系统等）一起，确保网站的可用性。

Web设计开发代理商有责任向企业（客户）清楚地陈述一些导航建议和内容布局背后的逻辑。反之，企业（客户）也必须负责仔细审查这些建议。如果在此阶段双方互动不力，则可能导致后期Web设计开发过程的诸多问题。如果需要更改与调整，则一开始便尽快进行，否则，后期做了大量工作之后，再推倒重新调整基础框架和布局，浪费的时间和成本将是倍增的。

完成上述步骤后，就可以创建第一版网站原型图了。

步骤3：设计

进行网页设计时，重点必须放在配色方案、徽标、艺术品、视觉元素、富媒体、用户体验，与跨设备的兼容性上。

一旦网站设计项目开始，将正式进入设计、开发和不断反馈的紧张时期，但后续的任何工作过程中请一定不要遗忘上述重要信息：网站目标是什么？网站的受众是谁？用户在寻找什么信息？希望网站访问者采取什么行动？……

第一批设计任务，是选择合适的配色方案。调色板非常重要，因为它会立即向网站访问者传达信息：鲜艳的彩色设计对于儿童受众而言效果很好，但是金融机构如果希望对用户灌输信任感，应该选择更精致、稳重的颜色。徽标和配色方案的组合构成了公司视觉形象的基础，并影响了访客对品牌的看法。此外，无论图像出现在标题、滑块还是背景中，最佳的网页设计都使用精心选择的图形和艺术品图像来提升品牌的感官认知。

此外，还需要设计一些辅助视觉元素，例如字体、按钮、信息框和菜单栏等，以补充网站的整体风格。目前，网页设计越来越流行的一个点就是视频和其他富媒体：这是访客无需阅读大量文字即可了解更多企业或其产品/服务的最简单方法，还可以引用动画、动效设计、产品的3D旋转模型以及许多其他富媒体视觉效果。Web设计开发代理商还要确保提供最佳的用户体验，不仅使页面美观，而且方便访客快速找到所需内容，还要考虑跨设备（智能手机、平板、台式机等）的兼容性。

在整个过程中，Web设计开发代理商要与企业（客户）就上述流程多番沟通、一起分析，以确认继续前进的最佳选择。

步骤4：开发

网站开发过程中，重点要放在可访问性和Web标准、框架、数据库存储、功能、内容、站点性能、标记/埋点和安全性上。

开发，是在幕后为网站提供各种“感觉”的技术力量，旨在满足网站制作计划确定的所有需求。开发团队关注的重要问题之一是：确保网站的构建符合所有相关的可访问性和Web标准，例如HTML、CSS、XML和XSL标准。

开发网站的基础是选择正确的框架。框架即用于创建自定义网站的预模板，由多种计算机语言提供，包括PHP和JavaScript。当然，你也可以使用内容管理系统（CMS）——界面更高级的框架类型，这几乎是不需要自定义创建的最佳方案。例如适用于演示型网站的WordPress，以及适用于电子商务企业的Drupal或Magento。但无论选择哪种方式，Web开发人员都将专注于配置数据库，它构成了网站的骨干。

下一步是确保网站的所有按钮、滑块、过滤器、购物车等都能正常运行，并保证访客在页面之间自由切换，可以在线购买。然后，便是将企业（客户）所要呈现的内容整合到网站中，如服务信息、产品类别/标题、描述和功能、文章、视频以及其他类型的内容。网站功能如果过于庞杂，有时可能会对访问速度和性能产生负面影响，从而对潜在客户的吸引乃至销售转化产生负面影响，因此开发团队还将不断注意站点的性能，如遇问题必须予以解决。

开发过程的另一个重要因素是安全性。网站的私人数据（例如密码、用户信息和私人内容）必须确保安全。这是通过确保基础代码不允许任何漏洞或弱点（例如XSS）来完成的。最后一个工作是在网站页面上添加某些标记（或埋点）。这通常不会直接影响用户，但是对于SEO-搜索引擎优化（例如使用schema.org结构化数据）或社交媒体用途（例如Facebook链接共享描述和图像标签）都非常重要。

步骤5：启用

在网站正式启用上线前，你需要为测试、实时服务器传输、质量保证、Web分析、可交付成果、培训和文档做好准备。

网站进入测试的最后阶段，这基本意味着它几乎可以上线了。随着Web设计开发代理商准备交付最终产品，测试通常侧重于功能、性能和安全性。接下来，就是将项目转移和传输到客户端的实时服务器上，并测试使用客户端的域名访问该网站。启用阶段还有一项质量保证测试，查看网站的用户体验如何。企业（客户）通常会让其员工登陆测试网站，查看是否发现缺少或存在不正确的内容，链接断开（或无法访问），并检查在线提交表单后是否投递到了正确的电子邮件收件箱中。网站上线后，企业（客户）还会提供用于集成其网络分析服务（例如Google Analytics或网站站长工具）的必要代码段。在大多数情况下，这只能在实时服务器上完成，以便将服务与域关联，并进行必要的检查。

随着一切正常运行，Web设计开发代理商将按照约定交付所有成果，包括网站的源代码、视觉设计元素（整套UI居多）以及在规划、设计和开发阶段使用的其他文件。根据网站项目的复杂程度，企业（客户）有可能还将获得如何正确使用站点某些功能（如管理面板、客户管理等）的培训指南和文档。

步骤6：维护

通过维护、制定A / B测试、功能测试、内容更新和其他优化措施，延长网站的生命周期。

Web设计开发过程的最后一步并非每个人都熟知。许多企业认为网站上线后就应该终止与Web设计开发代理商的合作了。事实上，一旦你真正投入到在线营销推广中时，网页设计开发永远不会结束。

那么在维护阶段会发生什么呢？首先，Web代理商将在你或你的用户在访问期间遇到的任何问题提供技术支持与解决方案，以持续优化用户体验。对于CMS，技术支持还将延伸到定期的性能和安全性测试、更新或附加安装等。其次，虽然网站确实可以运行，甚至超出了你的期望，但这并不意味着没有更多的优化空间。随着时间的流逝和新趋势的出现，更是如此。Web代理商通常会使用A / B测试来确定哪些变化最能影响指标（例如点击率和转化次数），以使您的网站价值最大化。试想，如果网站后期运营期间因为一次小的更改，重新雇佣其他Web代理商，是否将产生更高的费用和更长的实施时间呢？