百度输入法V6.5宣传H5制作过程

用户头像
北京/UI设计师/9年前/5017浏览
百度输入法V6.5宣传H5制作过程
用户头像
Megamindd
百度输入法的V6.5宣传是年底前最大规模的市场推广项目,我们想做一个输入法主题的趣味H5宣传,并结合圣诞特殊时期,传播,分享,使更多人看到最新的输入法特效皮肤的特征。
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzMjg=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
首页场景制作 由于主场景是一个娱乐城市主题视觉效果,有两种方式去制作,3D建模和PS绘画风格,在视觉展示和时间成本方面,我们倾向了3D建模,3D建模的优势在于透视准确,风格充满趣味性,更能准确体现输入法的风格,在模型复用方面也更方便,灯光渲染也比较到位,当然模型制作的过程中,也会倾向2D扁平化风格。在雪景制作上,3D制作的场景,结合光感更能展示好雪的视觉感觉。所以我们选择了3D建模去完成主场景。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzMzI=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
maya粒子下雪效果 三维真实例子模拟与AE粒子选择,对于两种方式的粒子生成,我们分别做了尝试,三维粒子的特点是非常真实,落地会有雪花微微弹跳效果,比较真实,缺点是时间成本较高,测试时间长,复用性差,而且渲染输出的文件比较大,难以压缩。合成之后体验差。 AE制作粒子下雪 调试时间长,效果比较明显,复用性强,可以直接渲染出体积小的png序列,并且容易做抽帧处理。最终我们选择用AE particular做粒子效果。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzMzY=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
动画制作以及难点 动画师会根据视觉设计师提供的视觉效果图和素材,做出相关的小动画,并渲染输出给开发人员。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNDQ=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzODA=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
剧本创意 1.经过多轮的创意碰撞和思考,我们总结出了2-3个合适的方案。最后选用恋爱达人测试方法去贯穿整个故事,结合输入法V6.5五种特技皮肤视觉效果,变成5种卡通娱乐场所,像保卫萝卜皮肤对应超市,每逛一个场所需要答一道题,最终根据答题的分数,推荐相应的输入法皮肤使用。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzODQ=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
因为是答题流程的H5,文案比较容易把控,是一些恋爱达人测试的问题,所以我们的原型,文案,视觉整体同步进行。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNzY=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
五种动效皮肤轮流展示问题: 以根据已经做好的五种输入法宣传视频为基础,轮流展示视频为目的去制作H5.
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzOTI=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzODg=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNDA=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
制作流程 首先我们进行了几轮脑爆,想出了故事整体的机构,做出了合理的分工。每个设计人员负责擅长的一块,每一块的设计师需要执行上一层设计师的草图,做好画面后,交给下一个设计师继续执行,这是一个很理想的状态。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNzI=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
故事板(原型) 整体故事的剧本有了,就是故事逻辑梳理。因为页面之间主要是交互效果,所以我们用原型图的绘制方法来替换故事版绘制。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNjA=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNjg=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNjQ=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNTY=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
视觉设计 在原型图出来之后,每个视觉设计的同学知道我们要做的什么,内容,主题,风格等,并出视觉效果图。当然由于发版的特殊时期-圣诞节,所以整体的视觉风格有圣诞的味道在里面,这是一个很重要的环节,决定整个H5的视觉效果。
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNDg=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
百度输入法V6.5宣传H5制作过程(图ZNTY3MzkzNTI=) - 交互/UE - 站酷设计师Megamindd原创素材 - 站酷ZCOOL
收藏
48
举报
|
35
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
大家都在看
登录注册