企业微信
酷网科技公司
当前位置: 建站知识  >>  浏览文章
时间:2016年05月24日 信息来源:互联网

HTML5时代,平面设计师该从哪些方面进行自我提升?

Html 5这么吃香,平面设计师该做点什么?今天Epub360笔者从设计内容、表现技巧和观念三个方面,聊聊平面设计师该如何在这次浪潮中成功站稳脚跟,文中附上大量实战案例,不谈空话干货满满。想成为Html 5风口上的一只猪?来学习下这篇!

延伸阅读:

  • HTML5设计!大众点评最有情怀的8个HTML 5案例精选
  • 70度正在做的事,将改变HTML5行业?
  • 人气超高的HTML5特效设计排行榜

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

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

内容 表现技巧 观念观念还是观念

一、先来说说隔靴搔痒的内容

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

HTML5教程 HTML5设计原理 HTML5设计

《大众点评 我们之间就一个字》案例体验:

HTML5教程 HTML5设计原理 HTML5设计

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

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

二、表现技巧,断舍离

首先设计师得有这样的概念,H5广告的和投放成本比网页和印刷品都要大得多,时效性上一朝一夕就over了,总之它比较金贵。在有限的手机屏让传播效益最大化就是表现的活儿了。视觉传达依然离不开平面的基础:构图、色彩、空间。黄金分割自不必赘述,但是到移动端上“主题元素居中突出”更不会犯错;经典的几何构图比如稳定的正三角形、圆形、正方、二、三等分构图,倾斜、几何形构图搭配辅助图形会产生不稳定感,但也会有年轻、锐气的感官,而边缘化构图会让作品显得更加老辣。

上述的构图法往往在传统的平面设计上用到概率比较少,就算偶尔大胆尝会被要求和其他元素融合一下或者用什么东东破一下,甚至最后改回一张大图。传统平面设计上更多是为品牌形象,产品格调服务,所以视觉元素、画面层次较丰富,而在H5广告的设计则尽量保持视觉主体的单纯性。

HTML5教程 HTML5设计原理 HTML5设计

《华为:“中国智慧 触控未来”Mate S新品上市》案例体验:

HTML5教程 HTML5设计原理 HTML5设计

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

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

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

空间的表现比上述都要复杂一些,处理好构图和色彩依然还停留在平面设计范畴,没有空间时间的流动就不能体现H5的真正魅力。在平面上模拟空间流动也是有几种方法的:视差效果,前景和背景在屏幕滚动时位置的差异等。

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

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

空间的表现依然需要统一和单一,虽然H5作品可以在多个页面翻转,但是场景不宜转换过多。

上述内容和表现技巧两2点还仅仅停留在围绕视觉感官的工作,探讨下H5相比平面媒介的从整体感官上不同,举几个栗子:

《大众点评:海外游你还带着厚厚一叠攻略?》

HTML5教程 HTML5设计原理 HTML5设计

案例体验:

HTML5教程 HTML5设计原理 HTML5设计

《滴滴顺风车:测测堵车伤残指数》

HTML5教程 HTML5设计原理 HTML5设计

案例体验:

HTML5教程 HTML5设计原理 HTML5设计

其实熟悉为微信H5的小伙伴应该已经看出来了,以上是典型的测试题类H5,但是通过噱头的画面和戏剧性的文案,测试题主线显得丝毫不违和,反而让人对过程有所期待看到结果时会心一笑。

再来看些全程和用户互动的栗子:

美年达滴滴画脸

HTML5教程 HTML5设计原理 HTML5设计

案例体验:

HTML5教程 HTML5设计原理 HTML5设计

Nike 科比逆天瞬杀极速测试

HTML5教程 HTML5设计原理 HTML5设计

案例体验:

HTML5教程 HTML5设计原理 HTML5设计

京东金融:躺着也能挣钱

HTML5教程 HTML5设计原理 HTML5设计

案例体验:

HTML5教程 HTML5设计原理 HTML5设计

杜蕾斯的第一座美术馆

HTML5教程 HTML5设计原理 HTML5设计

案例详情:

HTML5教程 HTML5设计原理 HTML5设计

以上,通过剑走偏锋的切入点来贴合主题,案例展现出前所未有的用户体验,美、玩味、悬念、仪式感等等。作品自然经过大量的人力物力,并不是一两位平面设计师就能实现的了,那么我们从中可受到怎样的启发?既然各行各业触网的大趋势不可逆转,接下来聊聊平面设计师转型。


(编辑:小酷)

 


上一篇:APP界面设计如何选符合产品气质的字体
下一篇:PS教程!3种方法教你快速绘制椭圆矩形
联系
客服

扫码添加客服微信

服务热线
服务热线
0411-62888851
公众号

扫码关注公众号

回到顶部