CN110083336A - 一种高效率创建定制化网站的方法 - Google Patents

Abstract

一种高效率创建定制化网站的方法，具体步骤包括：整理并分析客户需求、网站原型图制作、UI设计、程序开发、网站测试与验收。通过对网站步骤详细而有序的设计步骤快速而准确地确认客户的网站设计需求，每个步骤都可较好的反馈项目当前的进展状态且可预期项目完工后的状态，大大降低返工概率，缩减网站开发时间及人力投入成本，提高网站创建效率。

Description

一种高效率创建定制化网站的方法

技术领域

本发明中涉及旅游管理领域，具体为一种高效率创建定制化网站的方法。

背景技术

二十世纪末期，随着以Internet为代表的计算机技术，网络技术和信息技术的迅速发展，随着信息管理应用范围扩大化，电脑办公自动化全方位普及，电子商务进入人们的视野，而如今在这个市场竞争越来越激烈的背景下，电子商务呈现高速发展势态，这就加速了世界经济全球化的进程，企业进行网络宣传成为一个非常重要的方式。为了吸引客户的注意，企业通常会根据产品及公司文化定义宣传网站的特色。网站设计公司的设计的形式较单一，无法根据客户的不同需求完成网站的特色性设计，导致网站设计人员在程序未开发前与客户公司需要多次沟通并根据客户的修改意见多次修改设计稿，而设计稿本身的修改较繁琐，大大提高工作量。若客户在程序开发阶段提出修改意见会造成网站设计项目的返工，进一步加大网站设计人员的工作量，拖慢网站设计进程，提高网站制作成本。

发明内容

本发明针对上述技术问题，现提出一种高效率创建定制化网站的方法，网站制作的每个步骤都可清晰反馈项目当前的状态，甚至可预期项目完工后的状态，大大降低返工概率，节省网站设计时间、网站设计成本。

一种高效率创建定制化网站的方法，具体步骤如下：

01：整理并分析客户需求；

a：将整理得到的客户需求的逻辑编辑到Excel表格后跟客户初步确认并根据客户的修改意见在Excel表格中进行修改直至客户满意，其中Excel表格中陈列有网站开发的程序步骤、每个步骤对应的内容、对每个步骤内容的具体描述；该步骤便于设计者与客户的交流沟通，为后续步骤的实现做了良好的铺垫，提高后续工作的有效性；b：结合Excel数据通过Xmind或者MindMaster软件制作思维导图；c：用Visio制作甘特图及作业流程图，其中甘特图中横轴表示时间，纵轴表示网站开发的项目事件或相关项目事件对应的相关工作人员；

从理论到实际，以图形的形式客观描述用户需求，网站设计前期就可将整个项目规划清晰的呈现在客户面前；摒弃了交流-制作，交流-制作的传统方式，避免出现用户需求跟实际研发内容不符的现象；

02：网站原型图制作；客户功能需求确认后，根据不同终端选择不同的原型图工具制作原型图，其中针对APP终端选择Mockingbot或者Mockplus工具制作网站原型图，针对PC终端选择Axure制作网站原型图；

利用网站原型图设计工具将产品从单一思维逻辑层面提升到界面层面；更好地阐述产品的用户体验；利用这种方式，能够快速、高效的定位用户UI层的内容；摒弃从思维导图直接到UI设计图的传统做法，避免花费大量时间及人力根据客户需求反复修改设计稿；

03：UI设计；确认UI核心主题(例如颜色、文化等等)；结合原型图制作用户界面设计稿，通过Photoshop制作整体布局设计稿，设计稿中的精细部件(例如图标、插画等)用Adobe illustrator来制作；

将色彩付诸于产品；使产品从单一线条、单色系草图变成真正的产品效果图；

04：程序开发，包括a页面切图、b后台开发、c接口开发、d前端数据绑定；

其中，a页面切图：按照设计稿制作网站页面，使用HTML5+CSS3编程语言将图片格式的文件编写为浏览器可以识别的静态网页文件，然后利用JavaScript脚本制作网页中的动态效果；b后台开发：通过C#或者PHP动态语言结合MySQL或者MsSQL数据库，开发符合用户体验的网站后台；c接口开发：将所有含有业务逻辑的功能，制作成RestFul风格的接口，通过这种方式，可以将整个项目的前后端彻底分离，各司其职，提高效率，便于项目的管理；d前端数据绑定：前端工程师利用之前做好的接口以及HTML前端页面，结合VUE这个框架，来构建整个网站的用户界面，从前端的页面切图到后台开发；从接口开发到前端数据绑定，一步步将一张原本只是″图片″的产品变成能够与之″交流″的产品；

05：网站测试与验收，其中网站测试内容包括a功能测试、b UI测试、c数据库压力测试；

其中，a功能测试：包括链接测试、表单测试、上传附件测试等，测试原则为从左往右，从上往下逐一检查；b UI测试：测试WEB页面的兼容性，分辨率通过Chrome浏览器的模拟功能进行测试，浏览器通过下载市场上面所有主流浏览器一一进行测试；c数据库压力测试：向数据库表中注入不等量的数据，在同等服务器硬件及网络带宽情况下，检查不同等量的数据对访问者访问速度，找出数据访问存在速度缺陷的地方并优化相关代码。

优选的，所述一种高效率创建定制化网站的方法，定制化网站包括企业介绍模块、服务范围模块、产品介绍模块、会员模块、企业与消费者交流模块及其他模块，优选的，会员模块中包括消费者交流模块，即供消费者互相交流对该企业特定产品的使用心得的模块，便于消费者之间互相推荐或引进更多有意向的消费者，便于企业产品的宣传推广工作。

优选的，所述一种高效率创建定制化网站的方法，定制化网站还包括产品对比模块，且产品对比模块中包括产品规格特色对比单元、产品价格对比单元、用户评价等级对比单元及其他对比单元。产品对比特色单元主要凸出该企业所售产品的特色，更细致的产品定位可吸引有兴趣的用户继续浏览该网站，产品价格对比单元、用户评价等级对比单元供浏览人员进行产品性价比的参考。

优选的，所述一种高效率创建定制化网站的方法，定制化网站还包括相关或配套产品的多企业链接模块，一方面方便消费者为实现某种需求通过一个企业网站快速购买该需求所需要的相关配套产品，节省消费者的网站浏览时间，另一方面可通过多个产品销售企业之间的协同合作扩展产品销售渠道增强宣传效果。例如甲企业网站主营销售电子产品，乙企业网站主营与甲企业电子产品相关的电子产品配件，丙企业网站主营相关电子产品的保护套及电子产品的保养用物品，那么甲、乙、丙三个企业网站中的多企业链接模块中均可直接进入其他两家公司网站主页。

优选的，所述一种高效率创建定制化网站的方法，步骤05中用于UI测试的主流浏览器包括搜狗浏览器、UC浏览器、谷歌浏览器、360浏览器、qq浏览器。

附图说明：

下面结合附图对具体实施方式作进一步的说明，其中：

图1本发明涉及的一种高效率创建定制化网站的方法步骤连接图；

图2本发明涉及的一种高效率创建定制化网站的方法中Excel表格示范图；

如下具体实施方式将结合上述附图进一步说明本发明。

具体实施方式

具体实施案例1：

一种高效率创建定制化网站的方法，具体步骤如下：

01：整理并分析客户需求；

a：将整理得到的客户需求的逻辑编辑到Excel表格后跟客户初步确认并根据客户的修改意见在Excel表格中进行修改直至客户满意，其中Excel表格中陈列有网站开发的程序步骤、每个步骤对应的内容、对每个步骤内容的具体描述；该步骤便于设计者与客户的交流沟通，为后续步骤的实现做了良好的铺垫，提高后续工作的有效性；b：结合Excel数据通过Xmind或者MindMaster软件制作思维导图；c：用Visio制作甘特图及作业流程图，其中甘特图中横轴表示时间，纵轴表示网站开发的项目事件或相关项目事件对应的相关工作人员；

02：网站原型图制作；客户功能需求确认后，根据不同终端选择不同的原型图工具制作原型图，其中针对APP终端选择Mockingbot或者Mockplus工具制作网站原型图，针对PC终端选择Axure制作网站原型图；

03：UI设计；确认UI核心主题(例如颜色、文化等等)；结合原型图制作用户界面设计稿，通过Photoshop制作整体布局设计稿，设计稿中的精细部件(例如图标、插画等)用Adobe illustrator来制作；

04：程序开发，包括a页面切图、b后台开发、c接口开发、d前端数据绑定；

其中，a页面切图：按照设计稿制作网站页面，使用HTML5+CSS3编程语言将图片格式的文件编写为浏览器可以识别的静态网页文件，然后利用JavaScript脚本制作网页中的动态效果；b后台开发：通过C#或者PHP动态语言结合MySQL或者MsSQL数据库，开发符合用户体验的网站后台；c接口开发：将所有含有业务逻辑的功能，制作成RestFul风格的接口，；d前端数据绑定：前端工程师利用之前做好的接口以及HTML前端页面，结合VUE这个框架，来构建整个网站的用户界面，从前端的页面切图到后台开发；05：网站测试与验收，其中网站测试内容包括a功能测试b UI测试c数据库压力测试；

其中，a功能测试：包括链接测试、表单测试、上传附件测试等，测试原则为从左往右，从上往下逐一检查；b UI测试：测试WEB页面的兼容性，分辨率通过Chrome浏览器的模拟功能进行测试，浏览器通过下载市场上面所有主流浏览器(包括搜狗浏览器、UC浏览器、谷歌浏览器、360浏览器、qq浏览器中的一种或多种)一一进行测试；c数据库压力测试：向数据库表中注入不等量的数据，在同等服务器硬件及网络带宽情况下，检查不同等量的数据对访问者访问速度，找出数据访问存在速度缺陷的地方并优化相关代码。

进一步的，定制化网站包括企业介绍模块、服务范围模块、产品介绍模块、会员模块、企业与消费者交流模块及其他模块，优选的，会员模块中包括消费者交流模块，即供消费者互相交流对该企业特定产品的使用心得的模块，便于消费者之间互相推荐或引进更多有意向的消费者，便于企业产品的宣传推广工作。

进一步的，定制化网站还包括产品对比模块，且产品对比模块中包括产品规格特色对比单元、产品价格对比单元、用户评价等级对比单元及其他对比单元。

可选择的，定制化网站还包括相关或配套产品的多企业链接模块，一方面方便消费者为实现某种需求通过一个企业网站快速购买该需求所需要的相关配套产品，节省消费者的网站浏览时间，另一方面可通过多个产品销售企业之间的协同合作扩展产品销售渠道增强宣传效果。

本发明中通过详细而有序的网站设计方法步骤快速而准确地确认客户的网站设计需求，每个步骤都可较好的反馈项目当前的进展状态且可预期项目完工后的状态，大大降低返工概率，缩减网站开发时间及人力投入成本，提高网站创建效率。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (6)

1.一种高效率创建定制化网站的方法，具体步骤如下：

01：整理并分析客户需求；

a：将整理的客户需求的逻辑编辑到Excel表格后跟客户初步确认并根据客户的修改意见在Excel表格中进行修改直至客户满意，其中Excel表格中陈列有网站开发的程序步骤、每个步骤对应的内容、对每个步骤内容的具体描述；

b：结合Excel数据通过Xmind或者MindMaster软件制作思维导图；

c：用Visio制作甘特图及作业流程图，其中甘特图中横轴表示时间，纵轴表示网站开发的项目事件或相关项目事件对应的相关工作人员；

02：网站原型图制作；根据不同终端选择不同的原型图工具制作原型图，其中针对APP终端选择Mockingbot或者Mockplus工具制作网站原型图，针对PC终端选择Axure制作网站原型图；

03：UI设计；确认UI核心主题；结合原型图制作用户界面设计稿，通过Photoshop制作整体布局设计稿，设计稿中的精细部件用Adobe illustrator来制作；

04：程序开发；

a页面切图：按照设计稿制作网站页面，使用HTML5+CSS3编程语言将图片格式的文件编写为浏览器可以识别的静态网页文件，然后利用JavaScript脚本制作网页中的动态效果；

b后台开发：通过C#或者PHP动态语言结合MySQL或者MsSQL数据库，开发符合用户体验的网站后台；

c接口开发：将所有含有业务逻辑的功能，制作成RestFul风格的接口；

d前端数据绑定：前端工程师利用之前做好的接口以及HTML前端页面，结合VUE这个框架，来构建整个网站的用户界面，从前端的页面切图到后台开发；

05：网站测试与验收；

a功能测试：包括链接测试、表单测试、上传附件测试等，测试原则为从左往右，从上往下逐一检查；

b UI测试：测试WEB页面的兼容性，分辨率通过Chrome浏览器的模拟功能进行测试，浏览器通过下载市场上面所有主流浏览器一一进行测试；

c数据库压力测试：向数据库表中注入不等量的数据，在同等服务器硬件及网络带宽情况下，检查不同等量的数据对访问者访问速度，找出数据访问存在速度缺陷的地方并优化相关代码。

2.如权利要求1所述一种高效率创建定制化网站的方法，其特征在于：定制化网站包括企业介绍模块、服务范围模块、产品介绍模块、会员模块、企业与消费者交流模块及其他模块。

3.如权利要求2所述一种高效率创建定制化网站的方法，其特征在于：会员模块中包括消费者交流模块。

4.如权利要求1所述一种高效率创建定制化网站的方法，其特征在于：定制化网站还包括产品对比模块，且产品对比模块中包括产品规格特色对比单元、产品价格对比单元、用户评价等级对比单元及其他对比单元。

5.如权利要求1所述一种高效率创建定制化网站的方法，其特征在于：定制化网站还包括相关或配套产品的多企业链接模块。

6.如权利要求1所述一种高效率创建定制化网站的方法，其特征在于：步骤05中用于UI测试的主流浏览器包括搜狗浏览器、UC浏览器、谷歌浏览器、360浏览器、qq浏览器。