H5平面设计师该有哪些转变？

政治局常委分工,解放军理工大学校歌,霞浦一中吧

 

　　写在前面的话，因为互联网行业的介入，很多行业的一贯法则都发生了变化，比如零售、金融、地产、汽车、通讯、旅游等等……平面设计师作为各行业中比较下游的一个岗位，不管是被客户上司逼被还是平日的潜移默化，其实也多少受到互联网的影响，感知风向起步较早的一批甚至已经蜕变到了移动端的设计师，任职于大型互联网企业UI UE，这里暂且不表。

　　因为笔者这只笨鸟也还在摸索的道路上，在这里谈的算不上什么建议，只是一些血泪史(有血有泪有shi)，设计行业变化很快，不过总结起来也不出三大块：

　　内容

　　表现技巧

　　观念观念还是观念

　　壹·先来说说隔靴搔痒的内容

　　前平面设计师做的比较多的工作，比较常见是设计logo、vi系统里七七八八的东西、catalog、包装以及印刷的七七八八的东西除此以外就是专门的网页设计师。除了内容不知所云的印刷品和层级多到爆的网页，其他设计项目都比较抽象，比如最常见的logo设计。只言片语的线索，要求高端大气上档次～开搞!这样一向情愿的鸵鸟效应在h5广告上倒是不会有，因为一般投h5广告和传统设计最大不同是kpi那座大山!折页、名片印出来可以往桌角一搁完事，h5广告这样pm就要杀人了好么?

　　案例详情：http://www.digitaling.com/projects/13596.html

　　虽说内容并不是设计师可以控制，(大不了文案不好大图凑)不过设计师还是可以给予内容编辑一些建议，

　　比如开篇、序言、转折部分要给页面足够的空间，不要吝啬空白页(也叫调剂页，点到为止不然有放水嫌疑)，有时一个页面摆一句文案就足够提气;描述产品部分请直奔重点——也就是产品本身，如果有翔实的数据支持，文案结构对称那么你可以偷笑了：遇到了一个好copy，这样的内容可以为作品加分。相反什么得过国际大奖，名师设计，进口材质，绿色生产过程，阿猫阿狗用了都说好……面面俱到的文案还是尽可能少一点。在不脱离内容的基础上，还是建议设计师们尽可能加入内容的梳理工作中，比如试试把传统的标题整成可点击的标签(tag)，把slogan整得更口语化，大段的条目文字配合图片做成幻灯轮播，或者逐条的动画进入，看着也就没那么烦了。毕竟大家都没有那么多时间一本正经看大段文字。

　　贰·表现技巧，断舍离

　　首先设计师得有这样的概念，H5广告的和投放成本比网页和印刷品都要大得多，时效性上一朝一夕就over了，总之它比较金贵。在有限的手机屏让传播效益最大化就是表现的活儿了。视觉传达依然离不开平面的基础：构图、色彩、空间。黄金分割自不必赘述，但是到移动端上“主题元素居中突出”更不会犯错;经典的几何构图比如稳定的正三角形、圆形、正方、二、三等分构图，倾斜、几何形构图搭配辅助图形会产生不稳定感，但也会有年轻、锐气的感官，而边缘化构图会让作品显得更加老辣。上述的构图法往往在传统的平面设计上用到概率比较少，就算偶尔大胆尝会被要求和其他元素融合一下或者用什么东东破一下，甚至最后改回一张大图。传统平面设计上更多是为品牌形象，产品格调服务，所以视觉元素、画面层次较丰富，而在h5广告的设计则尽量保持视觉主体的单纯性。

　　案例详情：http://www.digitaling.com/projects/15561.html

　　这里要提一下字体设计，它既是内容设计也是构图设计，一款成功的title设计本身就可以hold住画面。

　　而一个精雕细追的画面脱离了标题未必可以hold住主题。

　　色彩也有了比较大的颠覆，我们所看见的大量红配绿、蓝配黄的撞色搭配越来越多，以及荧光色也时不时来凑热闹啦，这种在以往设计领域被视为深井冰的配色摇身一变成了怪咖潮范的经典。其次是大面积黑白灰的配合也很常见，优雅的黑白照片再度被大量启用，(黑白大图压大字成为一句半调侃半真理)换了以前把领导照片p成黑白的你试试……可以用那么多犀利的颜色还不用担心输出、色差问题也是得益于移动大屏设备的普及。HSB色板渐渐代替了传统印刷领域的cmyk色板，以及大面积的纯色代替渐变色，毕竟互联网上的色彩需要单纯、明确、有情绪。

　　空间的表现比上述都要复杂一些，处理好构图和色彩依然还停留在平面设计范畴，没有空间时间的流动就不能体现h5的真正魅力。在平面上模拟空间流动也是有几种方法的：视差效果，前景和背景在屏幕滚动时位置的差异，这里的实现方法用epub360的layer组件再合适不过了，笔者当初就是被layer组件的视差demo吸引然后迷上了Epub360(害羞)。

　　还有些做法是巧妙利用了素材，通过假3d画面素材，搭配和基本的放大缩小移动这些动画，依然可以营造出简单轻量级的空间感。

　　如果设计师会3d软件那么想象力完全可以火力全开，建模渲染一个场景作环境，搭配上epub360的序列帧利器和各种触发，场景再现妥妥的。

《全民突击》HTML5设计全程回顾及经验总结

腾讯游戏HTML5实战案例!在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。