响应式·好视通智慧党建

9月 前  •  BY  •  0 条评论

一.项目内容:

好视通智慧党建响应式网站

主要结合好视通的品牌形象和定位运营模式,分别对云直播的界面、模板、功能模块等进行了更全面的改进和设置,力求更加合理,更加完善的服务于用户,为广大客户提供更好的技术服务和体验。

【概况】公司业务拓展,需要制作一个特色鲜明的响应式党建网站。

【设计风格】:相对传统党建行业网站更简约,注重信息分组、主次层级;

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

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

1.界面设计

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

设计&风格&规范:

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

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

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

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://dj.hst.com/

 

 

相关作品

Scroll Up