网页设计与制作·第2版
上QQ阅读APP看书,第一时间看更新

1.2 网站开发流程

在团队中,不同技术专长的人要彼此配合,就必须建立在良好沟通的基础上。由于企划、设计和程序这3个领域的工作是息息相关的,唯有良好的沟通与协调才能顺利完成整个项目,而且沟通的质量也间接影响到最终成品的优劣。下面将对网站项目的执行流程及相关人员该负责哪些工作事项进行说明,大致的流程如图1-1所示。

图1-1 网页项目流程

1. 项目经理

项目经理(Project Manager,PM)负责与客户洽谈网页的相关事宜,待项目成立后,项目经理管理项目团队的进度并消除客户的疑问,这个角色也是设计师与客户之间沟通的桥梁,是统筹整个项目与进度的关键角色。

网站在构建过程中需要注意的地方非常多,若客户一开始的需求不够明确,就很容易在制作过程中产生不断修改的问题,在这种不断修改的过程中会相对提高沟通成本、制作成本、时间成本和机会成本等。

主要工作事项如下。

1)网站规划与报价确认:逐条确认网站规划书与报价等内容。网站规划书阐明制作规格和工作范畴。

2)双方签约:由乙方(公司)准备装订完成的合约书(一式两份)、用印(加盖印章),连同第一期款项发票寄出。甲方(客户)收到合约用印后再寄回,并支付第一期款项。

2. 企划

企划(Planner)负责了解客户的需求与期许后,着手构思网站目标、分析现状、归纳方向、判断各种可行性,直到拟订策略、实施方案、追踪成效与评估成果等,最终整理出一份网站规划书。之后再将规划书交至团队其他成员,团队成员再根据规划书中各自负责的事项进行填写与设计,以组织出网站的内容与各种功能需求。

主要工作事项如下。

1)了解客户的需求:客户提出初步的网站设计需求、网站架构图、功能需求及相关网站风格的参考。

2)提供网站规划书及报价单:根据讨论的网站架构及功能需求,提供网站规划书、报价单等内容。网站规划应尽可能涵盖各个方面,可能包含的内容如下。

● 进行网站构建前的市场分析。

● 设定网站目的及功能定位。

● 网站技术解决方案。

● 网站内容规划。

● 网页设计及视觉美编。

● 网站维护与网站内容更新。

● 网站发布前的测试与调整修正。

● 网站优化与网站发布推广。

● 网站构建工作日程表。

● 网站构建费用明细。

以上为网站规划书中应该体现的主要内容,可以根据不同的需求、构建目的及内容再进行增减。在构建网站之初,一定要进行细致、详细的规划,尽可能避免各种不确定因素,这样才能如期完成项目,满足客户需求。

3. 设计

这里的设计是指视觉设计(Visual Designer,VD)。接手规划书后,与项目经理、企划讨论网站的细节,并着手进行界面设计、视觉风格、颜色搭配及心理分析等视觉设计。

视觉设计师除了要了解客户的行业类型,还要了解制作网页的主要用意,进而设计出符合客户需求的页面,设计师需具有独特的美感及创意,让网页能够两者兼备,创造出符合客户需求的网页。

主要工作事项如下。

1)网站风格讨论:双方进一步讨论网站视觉风格。讨论网站是否需遵循 CIS(企业识别系统)、VI(视觉识别)进行延伸设计。若无视觉系统,双方可共同讨论网站所使用的颜色、设计元素等需求。

2)首页版面设计:此阶段将根据所讨论的各种设计需求进行首页提案设计,并提供设计稿与客户讨论、调整并最终定稿。

3)图文资料:由客户提供内页所需的图片和文字,用于内页版面设计。设计师需要考虑如何将客户所提供的资料进行妥善编排与设计。

4)内页版面设计:以先前所定稿的首页版面设计为基础,进行各内页编排设计,并与客户逐项讨论确认。

4. 前端

前端工程师(Front-End Engineer,F2E)负责视觉设计,并整合后端工程师所开发出的各种内容与功能。其主要负责编写HTML、CSS、JavaScript与接收 API等内容,最终要确保网页程序的正确性与顺畅度,进而将完成的网页呈现到网络上。

主要工作事项如下。

1)切版与组版:接收视觉设计师裁切完毕的各种素材。根据整体的视觉样式利用HTML+CSS的方式进行网页切割与组装操作。

2)效果制作:各种网站模块、组件、CSS样式及定制化的程序设计,如Slider(图片轮播)、Accordion(可折叠式菜单)与图片特效等。

3)细部微调:切版的细节微调,如图片与文字尺寸的调整、文字的间距与行距的调整,以及网页图文内容的修订等。

4)内部测试:此阶段通过客户所提供的数据来检查网站的实用性,查看内容是否会造成跑版、字里行间是否容易阅读,以及数据是否按照既定的规则显示。

“切版”就是将视觉设计师设计好的PSD设计文件切成HTML+CSS格式。切版需要具有一定的技巧与专业知识,比如适当的HTML语句tag(标签)及结构,用什么方式来组成内容可以比较好地呈现并具有较好的性能,CSS怎么编写比较好维护更新,跨浏览器时怎么取得最佳的平衡;跨平台时要不要设计可以变更尺寸的响应式设计等,这些都是在这一阶段就要决定的。

5. 后端

后端工程师(Back-End Engineer,B2E)根据网站规划书中所需的各项功能、数据库内容及后台管理系统等需求进行程序开发。同时需提供一种方式让前端工程师可以串接所开发出的功能,或是等前端工程师将网页设计完毕后交由后端工程师进行整合。

主要工作事项如下。

1)数据库内容:根据需求,开发出对应功能的字段内容与层次关系等。

2)后台管理系统:制作与数据库连接的管理页面,让客户可直接从网页上登录,以进行页面数据的添加、删除、查询和修改操作,而不是去修改程序代码与数据库内容。

3)功能制作:有些功能是前端与数据库相互连接后才能显示出的内容。例如首页的广告横幅(Banner),客户可直接从管理页面进行图片的替换,而前端工程师必须编写切换效果,以及从数据库中抓取指定的图片并显示出来,类似这部分的内容必须由后端工程师告诉前端工程师如何连接数据库。

6. 测试

待前端工程师与后端工程师将网页制作与整合完毕后,质量保证(Quality Assurance,QA)工程师根据网站规划书中的需要项目逐项检查内容与功能,借此建立和维持质量管理体系来确保网站质量没有问题。

主要工作事项如下。

1)初步校对:此阶段由客户浏览网站进行网页内容的校对,并列出问题列表,以便逐条进行修正和调整。

2)登录测试:此阶段由客户针对之后需自行使用的各项功能从网站后台进行登录测试,并参照提出的问题列表来进行修正和调整。

3)网页修正:由公司根据列表内容更正图文资料并修复互动功能上的错误。

4)多国语言版网站:在第一语言版本网站构建完成后,才会进行其他各语言版本网站的制作。此阶段由客户提供各个语言版本的翻译文稿,再进行其他语言版本网站的制作,各个语言的版式会根据实际情况进行版面的调整。

7. 上线

将通过测试的网站上线,让大众可以搜索与浏览。

主要工作事项如下。

1)上级的前置工作:准备DNS数据、主机连接数据及新主机环境检查测试。

2)网站上线:将网站转移至正式主机,等到DNS指向生效后,网站正式上线。一般而言,DNS指向需24~72小时。网站上线后,需进行网站的各项上线核查。例如,“联系人”窗体的邮件发送测试、网页目录安全性设置、加入Google分析和网站搜索引擎登录等。

3)整合Google分析:整合Google网页分析平台(Google Analytics,GA),客户可通过GA了解网站每日的访客数、所使用的搜索关键字及访客来源地区等用户信息,以调整网站经营的策略。

4)培训(网站交接):此阶段将会由公司派专人为客户说明网站的操作和使用。同时也提供操作手册和网站后台登录数据,供客户日后用于网站的维护工作。