H5平面设计师该有哪些转变？[页4]

天尊重生无弹窗,黛塔范提斯,在线查ip

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

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

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

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

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

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

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

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

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

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

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

　　叁·知识体系和观念的迭代

　　传统的平面设计师的应用知识：修图、排版(输出印前流程和网页排版规范)字体设计图形插画设计、色彩心理学、web端还涉及到html css代码等，相信全面掌握这些的设计师已经是资深设计师并且在工作中可以独当一面。这样的设计师初入交互领域，还是需要学习不少知识，比如常见的画布尺寸和最小单位以及最后交付的完稿文件都有了变化，除此以外大家会感受到： h5的设计更像个活物，不仅仅页面的每个角落带有响应，甚至作品的线性空间内都可以相互影响。所以要求设计师的打破一维思维状态，由单纯的视觉维度转向用户交互界面继而将时空等客观环境因素都考虑进去，归纳来说：线型思维转向发散性思维。

　　再来看下交互设计师的总体知识体系：

　　这里不难得出视觉设计只占据很小一部分，前道需求分析和流程设计往往都有其专门的岗位来负责，剩下的原型部分和可用性测试还是会和设计师的工作有交集，甚至由平面设计一起包揽。假如你接受了这个挑战，就不光要着眼于画布上那些元件和图层。按照用epub360制作一款简单展示类h5来说，设计工作完成(只代表完成了一半)，还需要切图—优化素材—在线平台重新置入素材—动画设置—触发事件设置—页面关系调整—辅助元素(LOGO交互提示音乐)的设置以及不下几十次的在线测试优化。总体工作量远大于单纯的平面设计，操作熟练的设计师可以在1-2天完成设计和所有动销交互，凭的不光是手速和软件的熟练度，还有对总体流程了然于胸。例如：幻灯和普通原件在切图上的区别，动画制作中哪里用幻灯哪里该用序列帧，循环动画的触发是不是存在不合理?这些话题每天都在被讨论着，而就在这些细微处，用户之间的距离也渐渐拉开了。在epub360上逛的略久常常看见一些年轻设计师吐槽：项目经理把一个文档丢过来，惨无人道要求在两天时间里做出一个H5云云。其实个人觉得除了工作量的陡增这未必是件坏事，至少说明经理信任你，你可以展现自己的执行和文字解读能力，注意在制作过程必要节点和项目负责人进行汇报和及时沟通。沟通的重要性在h5制作中不容忽视，主张设计师们利用各种工具来表达自己的想法。这里可推荐的小工具有，Axure\mindmanage\ PPT \Keynote\以及我们手中的纸和笔。

　　理解和协调整体的能力

　　上述几个著名案例，展现点不同表现风格各异，拆解单个作品的元素细节非常协调，小到icon、笔触的摆放都经过了考虑也就是再设计，最终达到视觉上自成一套体系。这里的规范统一又区别于vi和画册的绝对统一，形象讲：不需要再为了app里一个转角死扣像素或者制作一本catalog反复比对行距和潘通色值，因为我们的互联网传播更快餐，大多数用户不会注意这些只有执行者才看得出的区别。然后这并不代表设计师可以偷工减料，虽然在单一页面上的花费时间减少，不过h5作品的整体关联性会让我们为一个页面上的疏忽而付出全局的代价，就好像使用0代码基础的第三方平台来制作h5那样，如果对一些基本知识的认识不足，到后期会出现各种状况，这些都是设计师在转型中要面对的。

　　好比说h5商业作品是一个立方体，视觉部分是立方体中的其中一面，那么营销企划、用户体验、特效制作、文案雕琢、媒体投放等构成了这个立方体的另外五面，各项活做得越扎实作品越饱满，也越接近广告目标。各环节的沟通不顺畅各自为政，那么可以联想到六面体会是只有表面文章的花架子，当然花架子总好过只有一两面的纸片儿。再回顾下交互设计师的知识体系，如好学的小伙伴们不满足于平面设计这个小面，习惯用交互设计师的视角去考虑每一个页面，那么对整体作品乃至我们的职业道路都可以加分。

　　那么问题来了，如何用交互设计理论体系来衡量h5作品的好坏呢，这里提几个常见标准供大家参考：项目核心要传达的是晦涩还是鲜明;视觉中心是否够直接明了，图形元素是否会有歧义或带来不适感;交互的设置是否能让用户用得顺手，如不顺手是否进行了必要的解释;动画特效是否会卡顿滞后，各种平台的兼容测试……多站在用户角度来审视作品，很多问题在前期就可以被规避。设计师们也可以通过各种渠道加强理论学习，比如至少通读下iOS 人机界面指南吧~ios的体系确实有其独到的考虑和魔鬼细节，这里不是神化苹果，不管怎么说苹果公司小到门店一个展柜大到产品发布会模式都被抄袭了不下一百遍啊一百遍。

　　不得不面对的现状，事实上在需求分析拟定阶段就可能牵扯到交互，也就是交互的前置化，比较遗憾的是，一般公司PM/AM在此阶段很少让设计人员参与进来，导致沟通执行之间出现断层。不过在机遇与挑战并存的互联网时代，设计师的地位逐渐回到本位，只要愿意做，机会就在你身边。

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

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