HTML5网页设计流程

2021-04-11 21:00 本网

几乎每个Web设计人员都可以证明他们的许多工作是重复性的。对于每个Web项目，我们发现自己一遍又一遍地完成相同的任务，即使稍作修改也是如此。遵循详细的网站设计和开发过程可以加快您的工作速度，并帮助您的客户了解您在项目中的角色。本文试图说明开发Web设计流程如何组织开发人员的思想，加快项目的时间表并为发展准备自由职业者。

首先，“过程”到底是什么?一个Web开发过程是需要从开始拍摄到结束，以完成一个典型的Web设计项目的步骤的书面提纲。它对工作进行了划分和分类，然后将这些高级部分分为任务和资源，可以将其用作每个项目的路线图。

1.规划

计划阶段可以说是最重要的，因为此处确定和映射的内容为整个项目奠定了基础。这也是需要客户互动以及随之而来的对细节的关注的阶段。

需求分析。这包括客户目标，目标受众，详细的功能请求以及您可能收集的尽可能多的相关信息。即使客户已经精心计划了他或她的网站，也不要害怕根据您的经验提供有用的建议。

项目章程。项目章程(或等效文件)总结了上一点中已收集并同意的信息。这些文档通常简洁明了，而不是技术性过高，它们在整个项目中都可以作为参考。

网站地图。站点地图可指导最终用户，这些最终用户迷失在结构中或需要快速查找一条信息。好的做法不是简单地列出页面，包括链接和页面组织层次结构。

获得对服务器的访问权并建立文件夹结构。获取和验证的典型信息包括FTP主机，用户名和密码。控制面板登录信息;数据库配置;以及当前安装的任何语言或框架。

确定所需的软件和资源(股票摄影，字体等)。除了确定任何第三方媒体需求之外，还要确定您可能需要雇用分包商的地方以及您可能需要的任何其他软件。将所有这些都添加到项目预算中，并在必要时向客户收费。

2.设计

设计阶段通常涉及将计划阶段概述的信息进一步变为现实。主要可交付成果是文件化的站点结构，更重要的是视觉表示。在完成设计阶段后，网站应该或多或少已经成型，但是缺少内容和特殊功能。

线框和设计元素规划。这是网站的视觉布局开始形成的地方。使用在规划阶段从客户那里收集的信息，开始使用线框设计布局。尽管许多在线工具也可以提供帮助，但铅笔和纸在此阶段非常有用。

基于需求分析的模型。在Photoshop中设计模型可以相对容易地进行修改，可以使设计元素分层组织，并且在以后需要时可以进行切片和编码。

审批周期。审查，调整和批准模型的周期通常会进行，直到(理想情况下)客户和承包商对设计都满意为止。这是最容易进行更改的时间，而不是在对设计进行编码之后。

对有效的XHTML / CSS进行切片和编码现在是编码时间。切片最终的Photoshop模型，并编写基本设计的HTML和CSS代码。交互式元素和jQuery稍后出现：现在，只需在屏幕上获得视觉效果，并确保在继续之前验证所有代码即可。

3.发展

开发涉及大量的编程工作，以及加载内容(无论是由您的团队还是由客户的)。保持代码井井有条并加以注释，并随着整个网站的形成不断引用规划细节。采取策略性方法，并通过不断进行测试来避免将来的麻烦。

建立开发框架。。在这种情况下，独特的要求可能会迫使您偏离流程。如果您使用的是Ruby on Rails，ASP / PHP框架或内容管理系统，那么现在是实现它并启动并运行基本引擎的时候了。尽早执行此操作可确保服务器可以顺利进行安装和设置。

每种页面类型的代码模板。。一个网站通常有几个可以基于模板的页面(例如，主页，常规内容，博客文章，表单)。为此目的创建自己的模板是一种好习惯。

开发和测试特殊功能和交互性。。这是花哨的元素发挥作用的地方。我喜欢在添加静态内容之前先解决此问题，因为该网站现在提供了一个相对干净整洁的工作空间。一些开发人员也希望在此阶段启动并运行表单和验证。

填写内容。。无聊的时间：加载客户端或编写器提供的所有内容。虽然平淡无奇，但请不要误解，因为即使是最简单的页面也需要严格的排版和对细节的谨慎关注。

测试并验证链接和功能。。这是一个完整的网站审查的好时机。使用文件管理器作为指南，遍历您创建的每个页面(从首页到提交确认页面的所有内容)，并确保一切正常，并且在视觉上或功能上都不会遗漏任何内容。

4.发射

启动阶段的目的是准备网站供公众查看。这要求对设计元素进行最后的抛光，对交互性和功能进行深入测试，并且最重要的是要考虑用户体验。此阶段的一个重要的早期步骤是将网站(如果需要)移动到其永久Web服务器。在生产环境中进行测试非常重要，因为不同的服务器可能具有不同的功能和意外行为(例如，不同的数据库主机地址)。

抛光。特别是如果您不急于按时完成任务，则抛光基本完成的设计可能会产生很大的不同。在这里，您可以确定网站的某些方面可以进行一些小改进。毕竟，您希望与客户一样为这个网站感到自豪。

转移到实时服务器。这可能意味着转移到实时Web服务器(尽管希望您已经在生产环境中进行了测试)，“取消隐藏”网站或删除“正在建设中”页面。您对实时网站的最后一刻现在进行。确保客户了解此阶段，如果网站已经很受欢迎，则对时间安排要敏感。

测试。使用可用工具进行最终诊断，以运行网站：代码验证器，断开链接检查器，网站运行状况检查，拼写检查器等。您想自己发现任何错误，而不是听取客户或最终用户的投诉。

最终跨浏览器检查(IE，Firefox，Chrome，Safari，Opera，iPhone，BlackBerry)。不要忘记最后一次在多个浏览器中检查网站。仅仅因为代码有效，并不意味着它会在IE 6中以清晰的布局闪烁。

5.上市后

此时，当您处理与关闭项目有关的所有小任务时，业务会重新进入画面。打包源文件，提供使用说明，此时需要进行任何必要的培训。始终尽可能简洁地告知客户，并尝试预测他们可能遇到的任何问题。不要把项目关上门;告知您将来可以进行维护，并致力于提供持续的支持。如果尚未分摊维护费用，请立即建立。

交给客户。确保客户对产品感到满意，并且已履行所有合同义务(请参阅项目章程)。一个封闭的项目应该使您和客户都满意，没有被烧毁的桥梁。

提供文档和源文件。提供网站的文档，例如软拷贝站点地图以及有关所使用的框架和语言的详细信息。这将防止以后给客户端带来任何意外，并且如果他们与另一个Web开发人员一起工作，也将很有用。

项目结束，最终文件。让客户在最后的支票上签字，提供您的联系信息以获得支持，并正式关闭该项目。与客户保持关系;人们通常赞赏在接下来的一个月中检查以确保一切顺利。