一.项目内容:
【名称】:好视通云直播
【概况】好视通云直播单页面升级成完整的网站,作为一个独立的产品品牌网站。
【流程】:首先由产品经理整理需求文档,提供给市场,由部门经理规划网站框架、再到文案策划出文案,最后由我(网页设计师)设计界面效果、编写前端页面、开发成模版(部门无前端和后端,均由设计完成)、完善内容、上线。
【风格】:当前主流的渐变科技风格;
【特点】:响应式、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;
后端耗时主要在两个方面:一是后台逻辑组建和内容填充;二是模版函数嵌套制作栏目、列表、内页模版。
三.界面效果
四.线上地址: