序言

“肯定是要扯一些蛋的。”

不是所有的资深设计师都要成为全栈，但一个厉害的设计师必须要了解设计背后的代码原理，以及各种动画设计方案。正好借这个案例来跟大家分享下设计过程中每一步背后的思考。

因为这个项目是2016年早期的设计，旧版官网图片电脑已丢失，感谢Morningmedia官方团队提供我旧版备份，来作为本教程素材。

开篇

Morningmedia晨晨传媒

晨晨传媒是国内最活跃的在线演艺内容服务商。公司专注于直播艺人发掘、培养、包装与推广，同时拥有诸多的定制直播频道、新型移动端直播综艺栏目以及内容IP衍生业务等，以在线直播为基础，构建造星生态圈，跨入泛娱乐产业。

旧版官网

首先给大家预览下旧版官网的上线效果：

前期思考

用户人群

平台用户主要以年轻人为主，网红，直播，美女，帅哥，我们设计重点一定是够潮，够潮，再潮。

色彩搭配

选取主题颜色的时候，以黑色调为主，点缀色我们尝试了很多亮眼的色彩：

经过我们讨论后一致决定选用此色：

首页设计步骤分解

定稿大图

Banner设计

在设计Banner的时候，我们考虑到了交互动效体验，设计中采用全屏设计：

动效的亮点是btn设计，hover放大变色：

跟前端一起交流配合下我们完成了这个动效的实现逻辑：

.slideBox:hover a.prev,.slideBox:hover a.next,.picScroll-left:hover a.prev,.picScroll-left:hover a.next,.fullSlide:hover a.prev,.fullSlide:hover a.next{ transform: translateX(0);-webkit-transform: translateX(0); opacity:1;visibility:none;transition-property:opacity,transform,background,width;-webkit-transition-property:opacity,transform,background,width; transition-duration:.5s;-webkit-transition-duration:.5s;} a.prev, a.next{display: block;width:72px;height:108px;position: absolute;top:50%;margin-top: -54px;overflow: hidden;z-index: 10; background: #999999;background:rgba(153,153,153,.4);opacity:0;visibility:none;transition-property:opacity,transform;transition-duration:.5s; } a.prev:hover, a.next:hover{ width: 80px; filter: none; background: #8effe6; transition-property: background,width; transition-duration: .5s;} a.prev{left:0;transform: translateX(-100%);} a.next{right:0; transform: translateX(100%);} a.prev i, a.next i{display: block;position: absolute; left: 28px;top: 45px; background-image: url(../images/icon_sprite.png); background-image: -webkit-image-set(url(../images/icon_sprite.png) 1x,url(../images/icon_sprite@2x.png) 2x); width: 11px; height: 18px; }a.prev i{background-position: -180px 0;}a.next i{background-position: -160px 0;left:inherit;right:28px;}

签约模块设计

在设计原型的时候，我们采用了基本排列形式，重点则在于动效设计上来体现出我们独特的风格：

动效设计（代码太长，此处省略）：

资讯模块设计

我们大大简化了资讯的表现形式，排版上更有趣味对比性：

Footer模块设计

结合站点目录树，外加版式的优化：

动效设计（效果图为最新上线版本，基于上一版本迭代，修改了一些小需求）：

梦工厂主页设计步骤分解

定稿大图

Banner设计

再次强调一遍，第一屏的动画效果真的很重要：

动效设计：

大片拍摄模块设计

旧版将企业自身优势写到了动态资讯，新版我们将单独描述自身优势：

动效设计：

形象策划模块设计

我们弱化了图片，突出了文字主题：

动效设计：

其他核心页设计

定稿大图

字体运用规范

在此套UI设计中，我们均采用Pingfang字体：

在CSS中，我们优先适配MAC OS：

font-family:"PingFangSC-light","PingFangSC","Helvetica Neue","Helvetica","Arial","微软雅黑","黑体",sans-serif;

响应式设计

不仅仅针对PC的改版，我们也将PC效果还原到了H5中：

@media screen and (max-width : 1439px) { .fullSlide{height:490px;!important} .fullSlide .bd li img{min-height:490px;} }@media screen and (min-width : 1600px) { .fullSlide{height:720px;} .fullSlide .bd li img{min-height:720px;} }

如何重新定义自己？

在设计UI中，你不仅要知道交互逻辑，视觉设计方法，如果你也具备了动效设计，前端实现等知识，那么无疑对设计是有很大的帮助的，你能站在客观易用落地角度去深挖设计背后的细节，而不是一个纸上谈兵只会做概念化的平面设计师，那根本无法为企业创造出价值。

希望大家在业余时间多去了解下不同的知识，不求门门精通，但一定要学习到基本内容。老王以前在业余时间坚持学习Principle，XD，AE，CSS3，Bootstrap等，如今在项目设计中可以灵活运用各类软件，达到不同的设计目的，动效啊，实现度，交互都能涉及。

公众号开通留言功能咯，大家一起来玩玩吧～