设计与重构

好视通MeeetingBox


响应式(bootstrap)  ·  动效(HTML5+CSS3) ·  正则表达式(表单验证)

meetingbox-响应式设计
Next Section

[响应式]MeeetingBox单页面

2年 前  •  BY  •  0 条评论

1.项目名称:

好视通MeeetingBox响应式单页面 [设计与重构]

2.项目背景:

1)概况:项目原先计划于阿里云云栖大会上线,页面的设计和前端代码,预计有两个星期,不料上线前两天,需求突变,设计和前端(都是同一个人,叫美工…)两天半火速上线,离预期上线仅晚了3个小时。

2)突变:十月初,根据经过与老大简单分析讨论了设计风格、相关的动效,出了首版和三张Banner(图示:飞机稿),在云栖大会的开始前两天,老大的老大突然改变需求,项目仍然按计划上线,这几乎是不可能的任务,11屏设计+前端页面(HTML+CSS+JS)+页面动效,毕竟量就在那里。

3.解决方案:

1)列计划,这样形势下不可能慢工出细活,首先根据文案和手头的图片资源进行大致的设计方案;

2)挤时间,QQ设置忙碌,减少干扰,少喝水减少上厕所的频率,吃饭,吃什么饭啊,吃个粉也就10分钟的事情….开始肾上腺激增加班,就连路上,梦里都在想着这块如何设计,前端如何实现。(设计师和程序员都不太会解决压力,何况破抠图小美工);

3)做设计,设计部分之前版本部分元素可用,设计尽量在合理展现的基础上考虑易于实现(因为代码码也是我写,BAT那种优雅的代码,好歹也是一个设计一个前端在做就不说分模块设计和开发了,我一个人力量有限呐);

4)撸代码,代码方面,一些实用用插件,如bootstrap快速栅格布局,有点宰牛刀杀鸡的感觉,再去制造轮子时间可不允许了,何况这个页面是响应式的,兼容适配工作量不小。

3.项目产出:

1)第一版,Banner设计:

MeeetingBox-Banner

MeeetingBox-Banner

MeeetingBox-Banner

MeeetingBox-Banner

MeeetingBox-Banner

MeeetingBox-Banner

2)第一版,首页常规设计:

MeetingBox-飞机稿

MeetingBox-第一版

2)确认版本,动效交互:

MeeetingBox确认版

MeeetingBox确认版

3)动效交互:

镜头动效

镜头动效     GIF动画文件比较大,更多的动效请移动下方网站体验。

4.线上地址:

www.fsmeeting.com/meetingbox/index.html

 

 

Scroll Up