响应式·好视通官网

11月 前  •  BY  •  0 条评论

一.项目简介:

好视通官网是公司品牌对外展示的窗口,同时承担线上营销服务功能,网站基于Bootstrap栅格系统的响应式企业网站,适应主流终端分辨率、兼容现代浏览器,甚至IE8浏览器。

【设计思路】:常规企业型展示设计,以实际会议场景渲染会议氛围,图形辅助表现产品特点;

【设计风格】:当前主流企业官网风格;

【网站特点】:响应式、H5+CSS3动效;

【兼容性】IE8及以上、现代浏览器;

【线上地址】:http://www.hst.com/

 

二.人员配置:

【总策划】:Dicke

【运维】:Alan

【文案】:Wing

【设计&前端&模版】:Sivan(墨墨猫)

 

三.项目实施:

1.界面设计
 基本步骤:阅读产品文档—分析文案—参考同行—勾勒框架—提取主色辅色—第一阶段作图—主管审

核、讨论—制定相应规范—输出剩余界面—发送主管审核—调整修正—确认界面。

2.前端重构

“以技术的手段给设计提供可行性分析、提供灵感、将代码的灵魂赋予设计” ,本地环境建立项目文件

夹,编写HTML+CSS+JQ前端代码,并适应PC、移动平台展示与交互,兼顾SEO优化、压缩图片、代

码,把握这个设计、交互体验、速度、SEO之间的平衡,把控权重与实现成本。

 基本步骤:

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

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

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

4).缺省页面编写(404 403 500 503),反馈意见页面;

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

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

设计规范前端规范

设计规范

前端规范

3.后端模版制作

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

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

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

总之,后端模版没有涉及太多复杂的业务逻辑。

 

四.项目分析

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

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

3:2:1;后端耗时主要在两个方面:一是后台逻辑组建和内容填充;二是模版函数嵌套制作栏目、列

表、内页模版

 

五.界面效果

 

六.线上地址:

http://www.hst.com/

 

好视通

 

 

Scroll Up