响应式·好视通云直播

一.项目内容：

【名称】：好视通云直播
【概况】好视通云直播单页面升级成完整的网站，作为一个独立的产品品牌网站。
【流程】：首先由产品经理整理需求文档，提供给市场，由部门经理规划网站框架、再到文案策划出文案，最后由我（网页设计师）设计界面效果、编写前端页面、开发成模版（部门无前端和后端，均由设计完成）、完善内容、上线。
【风格】：当前主流的渐变科技风格；
【特点】：响应式、H5+CSS3动效；
【域名】：zhibo.hst.com
【模版】：live V1.0 by Sivan
【上线】：2017-12-13 （2017-06 好视通-直播·live单页上线）

1.界面设计

 基本步骤：阅读产品文档——分析文案——参考同行——勾勒框架——提取主色辅色——第一阶段作图——主管审核、讨论——制定相应规范——输出剩余界面——发送主管审核——调整修正——确认界面。

设计&风格&规范：

1、整体规划，对网站整理栏目进行了规划，更加明确了云直播的定位，产品服务更加清晰化；

2、风格延续，对整个网站的页面风格进行了延续，使用当前主流的渐变科技风格，使网站简洁明了，更加符合用户体验，与云直播的产品特性更加契合；

3、规范化，规范网站配色，文字层级等等。

2.前端重构

       “以技术的手段给设计提供可行性分析、提供灵感、将代码的灵魂赋予设计” ，本地环境建立项目文件夹，编写HTML+CSS+JQ前端代码，并适应PC、移动平台展示与交互，兼顾SEO优化、压缩图片、代码，把握这个设计、交互体验、速度、SEO之间的平衡，把控权重与实现成本。

 基本步骤：

1.本地服务器、相关公用框架、资源准备；

2.制作首页、公共头部、尾部——增加相应功能组件（返回顶部、乐语等）；

3.栏目、列表、内页、单页编写；

4.缺省页面编写（404 403 500 503），反馈意见页面；

5.优化、完善、兼容性检查；

注：耗时最多的是banner模块、动效编写。

3.后端模版制作

        网站程序基于PHPCMS，单页面居多、调用简单，只有公告和人才招聘有列表和内容，需要后台来支持内容添加，

其中其中人才招聘需要增加地点、人数、学历、部门等相关字段开发调用，

另外，还有一个意见反馈页面需要配置相关字段。

总之，后端模版没有涉及太多复杂的业务逻辑、相对调用数据还算简单。

模版调用演示（一些phpcms调用方式）：

资源调用首页导航首页模块招聘列表

头部文件调用

首页导航调用

首页“全终端发起，一键直播”模块

招聘列表新增字段调用

二.项目分析

设计比较耗时点：1.理解文案，元素主次划分；2.banner设计；3产品特点配图重制；

前端耗时主要在三个方面：一个是切图布局、二是H5动效编写、三是后期CSS与JS兼容性，耗时占比3：2：1；

后端耗时主要在两个方面：一是后台逻辑组建和内容填充；二是模版函数嵌套制作栏目、列表、内页模版。

三.界面效果

四.线上地址：

云直播 http://zhibo.hst.com/