响应式网站

好视通智慧教育


设计 · 前端 · 后端模

Next Section

响应式·好视通智慧教育

1年 前  •  BY  •  0 条评论

一、项目简介

1)智慧教育概况

      公司旗下“好视通”是国内音视频领域的知名品牌,在全球市场已获得了超过50000家企业用户的高度认可与信赖。针对 传统教育录播系统的弊端,好视通将自身的音视频技术优势与传统录播相结合,打造出全新一代的互动录播系统,除了 满足录播、直播、点播等需求之外,还能在多个教室之间进行师生实时互动,赋予了传统录播更多的变化,同时也变标 志着教育录播进入互动时代。

        在未来的发展中,好视通将秉承“让人人拥有优质教育的机会”的理念,持续加大资金投入和研发力度,专注于互动录播的研究与技术革新,为中国的教育信息化做出更大的贡献。

2)项目起源与要求

起源:原来产品线“互动录播”调整为“智慧教育”,原来网站于2016年9月上线,一直承载着互动录播产品线的展示,以及SEM落地页面,今年2017年6月开始,因百度推广对落地页要求调整等原因,PC端网站无法满足业务需求。

要求:功能上需要做成响应式;风格,教育行业,比较中规中矩;面向用户,教育行业人员(不做具体画像

二.主要负责:

基本步骤:阅读整理项目文档——分析文案——勾勒框架——提取主色辅色——进行设计——输出界面——发送主管审核——调整修正——确认。

1) 设计输出(计划2周实际2周半):

  • 设计,理解需求、文案,确定首页风格以及基础排版;
  • 6个一级栏目设计:产品中心、解决方案、应用场景、客户案例、新闻动态、关于好视通;
  • 13个二级栏目页面设计:产品中心[3]、解决方案[3]、应用场景[5]、新闻动态[1]、关于好视通[1];
  • 7张banner;首页[3]、产品中心[3]、解决方案[3]、应用场景[3]、客户案例[1]、新闻动态[1]、关于好视通[3]。

2)前端页面编写(计划2周半实际3周)

  • 页面切图、制作雪碧图等前端页面编写前的准备
  • 首页、公用头部头部
  • 产品列表、内页[3];
  • 解决方案列表、内页[3];
  • 应用场景列表、内页[5];
  • 客户案例列表[1];
  • 新闻动态列表、内页[2];
  • 关于我们内页[3];

3)后端(计划2周半实际1周半)

  • 本地建立项目,安装网站程序、填充后台内容;
  • 模版制作:公用头部、头部、首页、单页面、通用栏目页、通用列表、通用内页、产品模型模版、解决方案模版、应用场景模版、人才模型和模版

注:设计上,先设计一级页面是为了统一全局风格。前端上,一个模块(栏目)来编写是因为栏目下有一些功能是相同的,可减少重复编写、提升开发效率。

 

三、PC端设计效果

响应式

1)Banner:

2)附加页面:

404

404

兼容提示

兼容提示

智慧教育icon

智慧教育icon

四、PC端主要页面效果

五、移动端主要效果

虽然网站具备响应式功能,但是产品使用场景的原因,智慧教育网站主要还是以PC浏览为主,移动端为辅。

1)手机设备展示

移动端首页

移动端首页

 

移动端首页Banner

移动端列表页面Banner

移动端页面聚合

2)手机页面效果

3)平板设备展示

移动端平板

移动端平板聚合

 

六、前端代码与后端模版

1)节选:

前端代码与后端调用:

导航调用

 

 

七、项目总结

计划一个月零一星期, 实际一个月3个星期
延期原因:时间预估不足,一个月零一星期的时间,只是预估了设计到前端静态页面的时间;计划不足,后端程序无法支持,由设计师进行模版制作。

项目虽然延期上线、但是项目质量自我评估比相比老版提升了很多,设计上中规中矩,在前端上做了一些动画加入,增强页面交互体验,后端模版制作上,做得比较灵活,对服务器请求也做了优化、可以在与后台结合得很好,减少了维护难度,此外做了人才招聘模型开发,总之,网站能设计上不丑于竞争对手,增强交互动画、优化SEO等,完全能够满足现在基础业务需要。

作为一个网页设计师,第一次从设计输出、到前端页面、到后端模版制作、到本地迁移外网服务器上线,独立负责至少三个不同工种的工作内容,在业务的驱动下,个人经验在积累,技术在也加强在扩展,好坏分半,精力就那么多,分散了,就会变得平庸。

总之,技多不压身,不断积累不断进步。

 

八、上线地址:http://edu.fsmeeting.com/

Scroll Up