企业级互动直播系统

好视通云直播


首页设计 · 前端重构 · 全平台

Next Section

【单页】好视通云直播

1457 个字 / 13 张图 / 预计阅读 16 分钟
2年 前  •  By

1.设计内容:

好视通云直播设计与重构,阶段性暂时做了首页。

1)首页设计

基本步骤:阅读产品文档——分析文案——参考同行——勾勒框架——提取主色辅色——作图(设计展示与前端实现相互拉扯)——输出界面——发送主管审核——调整修正——确认。

2)页面重构

“以技术的手段给设计提供可行性分析、提供灵感、将代码的灵魂赋予设计” ,本地环境建立项目文件夹,编写HTML+CSS+JQ前端代码,并适应PC、移动平台展示与交互,兼顾SEO优化、压缩图片、代码,把握这个设计、交互体验、速度、SEO之间的平衡,把控权重与实现成本。

2)进步与不足

进步:因项目受众和特性,设计风格突破遗忘的中规中矩的商务型,使用当前主流设计风格,精简低效率元素、主流配色;引入HTML5、CSS3,交互体验相比之前商务型网站更加柔、人性化;一级导航优化,缓慢定点、二级导航优化,点击元素层外收起等;

不足:沟通、流程、技术上,缺少与产品经理、文案、产品设计之间的交流,缺少设计草稿输出(脑袋完成构架无法传阅读出来,时间、流程、岗位有关。),JS水平有待提高。项目本身,产品可塑元素少,缺少突出特性、单页面整体篇幅不够,不能完成一套完整的交互流程,行为召唤力不高。

2.PC效果:

响应式:PC、笔记本、平板、手机

1.Banner设计:

直播Banner

直播Banner

Banner动画分层动画演示

2.首页设计:

PC端直播效果

 

3.移动端效果:

1.平板端:

平板端

平板端

1.手机端:

场景:移动端

展示:移动端

横屏:移动端

展示:移动端

 

4.配图风格延展:

 

3.上线地址:

http://www.fsmeeting.com/live/

 

 

Scroll Up