选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

浅谈H5上的视觉表现手法(设计全流程)

年初加入UED团队算是刚刚接触H5。在一个摸索的阶段下进行。渐渐发现,想要做好H5,就应该先准备好一套清晰的设计流程。

视觉非单一的画面,精髓在于感官体验。

H5的画面表现不单是视觉层面,还要考虑到屏幕之间的切换,如何把握整套页面之间的节奏,什么时候抛出按钮,什么时候正确引导。还包括动效,音乐等,这些都是需要设计师花时间去琢磨研究的。我发现在H5的视觉表现上,即使是简单单一的画面,调整好了节奏,感官综合的好,反而胜过大多数仅靠画面撑场的作品,所以想设计好H5,首先要调整自己的思维状态。

浅谈H5上的视觉表现手法(设计全流程)

 

一、梳理结构

有时候策划人也不知道如何更好地表达案例的时候,你通常会收到类似于这样的手稿。

浅谈H5上的视觉表现手法(设计全流程)

你得先搞清楚做这个H5的目的,你是想卖产品搞促销?还是想引流增加用户?或者只是单纯的去推广一个品牌形象?先确立你要干什么,是要做一个文艺走心的小故事,还是做一个互动答题的小游戏。先梳理好一个故事脚本,类似于每个页面之间的结构形式。

二、风格定位

前期的风格定位就像选择一件外套,走清新可爱风格,还是成熟干练的路线,关键在于穿衣的人适合哪个风格。所以,用手绘风格表达,还是用调性元素去诠释,主要取决于你想传达什么。

三、设计表现

很多H5选用手绘的形式,引起了很多好奇的注目。选择好方向后,作出一个脚本,类似于电影的分镜头脚本,也可以理解为设计前期的一个计划。

浅谈H5上的视觉表现手法(设计全流程)

 

举例:寻找繁体字 h5

项目背景:在两会期间,文化频道希望能通过一些互动答题的小游戏去吸引网友参与,主题是识别在简体字中找出繁体字。

关键词联想:放大镜,游戏按钮,生命力血槽,技能点,考场,古代。

浅谈H5上的视觉表现手法(设计全流程)

浅谈H5上的视觉表现手法(设计全流程)

创意过程:产品设定成闯关游戏的形式,用手绘形象去增添游戏的趣味性。每个题型答对后有相应的成长奖励机制(秀才—举人—探花—榜眼—状元)

去吸引用户不断晋级,增加参与度。

浅谈H5上的视觉表现手法(设计全流程)

浅谈H5上的视觉表现手法(设计全流程)

好玩逗趣运用手绘风格都能做出很好的表达。也是现今H5传达情感的惯用手法之一,而没有一种风格是万能的,尝试更多的表现形式和多元的风格才能满足用户们的胃口。

四、效果实现

效果的实现包括视觉,声音和交互,这是H5比较花心思的部分,因为感官综合的好,胜过大多数单一画面好看的作品。实现的方式有很多种,比如AE生成动画,或者PS序列帧也可以,关键在于和前端制作配合去实现最终效果。

浅谈H5上的视觉表现手法(设计全流程)

浅谈H5上的视觉表现手法(设计全流程)

浅谈H5上的视觉表现手法(设计全流程)

五、小结

不是画出来单一画面就好了,h5是视觉听觉和交互的融合,巧妙的动画可以为页面加分,适当的音效让故整个验能更加生动和立体。

原文:腾讯网UED
转载注明:云瑞

TAG

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。