浅谈H5上的视觉表现手法(设计全流程)
年初加入UED团队算是刚刚接触H5。在一个摸索的阶段下进行。渐渐发现,想要做好H5,就应该先准备好一套清晰的设计流程。
视觉非单一的画面,精髓在于感官体验。
H5的画面表现不单是视觉层面,还要考虑到屏幕之间的切换,如何把握整套页面之间的节奏,什么时候抛出按钮,什么时候正确引导。还包括动效,音乐等,这些都是需要设计师花时间去琢磨研究的。我发现在H5的视觉表现上,即使是简单单一的画面,调整好了节奏,感官综合的好,反而胜过大多数仅靠画面撑场的作品,所以想设计好H5,首先要调整自己的思维状态。
一、梳理结构
有时候策划人也不知道如何更好地表达案例的时候,你通常会收到类似于这样的手稿。
你得先搞清楚做这个H5的目的,你是想卖产品搞促销?还是想引流增加用户?或者只是单纯的去推广一个品牌形象?先确立你要干什么,是要做一个文艺走心的小故事,还是做一个互动答题的小游戏。先梳理好一个故事脚本,类似于每个页面之间的结构形式。
二、风格定位
前期的风格定位就像选择一件外套,走清新可爱风格,还是成熟干练的路线,关键在于穿衣的人适合哪个风格。所以,用手绘风格表达,还是用调性元素去诠释,主要取决于你想传达什么。
三、设计表现
很多H5选用手绘的形式,引起了很多好奇的注目。选择好方向后,作出一个脚本,类似于电影的分镜头脚本,也可以理解为设计前期的一个计划。
举例:寻找繁体字 h5
项目背景:在两会期间,文化频道希望能通过一些互动答题的小游戏去吸引网友参与,主题是识别在简体字中找出繁体字。
关键词联想:放大镜,游戏按钮,生命力血槽,技能点,考场,古代。
创意过程:产品设定成闯关游戏的形式,用手绘形象去增添游戏的趣味性。每个题型答对后有相应的成长奖励机制(秀才—举人—探花—榜眼—状元)
去吸引用户不断晋级,增加参与度。
好玩逗趣运用手绘风格都能做出很好的表达。也是现今H5传达情感的惯用手法之一,而没有一种风格是万能的,尝试更多的表现形式和多元的风格才能满足用户们的胃口。
四、效果实现
效果的实现包括视觉,声音和交互,这是H5比较花心思的部分,因为感官综合的好,胜过大多数单一画面好看的作品。实现的方式有很多种,比如AE生成动画,或者PS序列帧也可以,关键在于和前端制作配合去实现最终效果。
五、小结
不是画出来单一画面就好了,h5是视觉听觉和交互的融合,巧妙的动画可以为页面加分,适当的音效让故整个验能更加生动和立体。