整站设计

响应式·好视通云直播


设计 · 前端 · 后端模版

Next Section

响应式·好视通云直播

10月 前  •  BY  •  0 条评论

 

一.项目内容:

【名称】:好视通云直播
【概况】好视通云直播单页面升级成完整的网站,作为一个独立的产品品牌网站。
【流程】:首先由产品经理整理需求文档,提供给市场,由部门经理规划网站框架、再到文案策划出文案,最后由我(网页设计师)设计界面效果、编写前端页面、开发成模版(部门无前端和后端,均由设计完成)、完善内容、上线。
【风格】:当前主流的渐变科技风格;
【特点】:响应式、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/

云直播

 

Scroll Up