设计重塑品牌—「Morningmedia」官网设计背后的故事

原创文章 分类: 教程 版权:
1014 12 8 1
2017-06-23
0.5
编辑推荐

Image title


序言


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


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


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



Image title




开篇


Morningmedia晨晨传媒


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



Image title




旧版官网


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


Image title

Image title

Image title



Image title





前期思考


用户人群


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


色彩搭配


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


Image title


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


Image title




Image title





首页设计步骤分解


定稿大图


Image title



Banner设计


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


Image title


动效的亮点是btn设计,hover放大变色:


Image title


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


.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;}




签约模块设计


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


Image title


动效设计(代码太长,此处省略):


Image title




资讯模块设计


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


Image title




Footer模块设计


结合站点目录树,外加版式的优化:


Image title


动效设计(效果图为最新上线版本,基于上一版本迭代,修改了一些小需求):


Image title




Image title




梦工厂主页设计步骤分解


定稿大图


Image title




Banner设计


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


Image title


动效设计:


Image title




大片拍摄模块设计


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


Image title


动效设计:


Image title




形象策划模块设计


我们弱化了图片,突出了文字主题:


Image title


动效设计:


Image title





Image title




其他核心页设计


定稿大图


Image title


Image title


Image title


Image title





Image title





字体运用规范


在此套UI设计中,我们均采用Pingfang字体:


Image title



在CSS中,我们优先适配MAC OS:


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





Image title





响应式设计


不仅仅针对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;} }




Image title




如何重新定义自己?


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


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


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


Image title

Image title

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

378粉丝/0关注

原创达人原创小生
BitBill 2.0-BTC&ETH 比特币钱包BitBill - 比特币钱包/以太坊钱包 2.0官网

王涵洋Jobsw

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

原创达人原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN