运营设计H5插画页面设计

H5页面设计

1. H5界面广泛出现在哪里：朋友圈落地页面、群内的活动转发。

2. H5的主要表现形式：以插画为主

   用真实图片的缺点：随机性强、表达不准确；氛围感不够；图片版权问题。

   用插画表现的优势：专门定制、表达精准；营造氛围、传递情感。信息传递变得更直观，视觉上更有趣味性、冲击力。插画表现的缺点：时间成本高，有一定的门槛。

3. 如何处理公司H5从0到1的项目需求：

   过程描述法：对动词进行场景构造，衍生出场景元素

   第一步：从文字需求转化成更加丰富的文字场景（把名词做灵感拆分）

   第二步：双图库思维建立【实物图参考（海洛创意、摄图网上面寻找）和插画风格参考（花瓣网等）】

   第三步：组合（把小场景组合成大插画、根据构造的场景组合元素完成插画）

4. 人物类型的场景插画：插画可以合理利用插件工具

   身体造型：成年人物比例头身体脚是1:2:3。四肢如何摆动参考花瓣人物结构。合理运用组件化思维，可以提高运营设计中的效率意识。sketch里面的Humaaans插件.sketch（版权可商用）和iconfont（图标素材）。

5. 创意执行：

   有效的文案分析思路：什么人who什么时间when什么地点where什么事情what。

6. H5页面四个组成部分：层级从强到弱活动。主视觉（营造氛围，建立认知）、活动入口（增强黏性，促销转化）、活动介绍（产品介绍，增加信任）、分享按钮（促进转介绍与自传播）。

7. 如何把主视觉做的更加好：

   情绪板分析

   布局样式排版：主题文字和主视觉场景比例是3:6 悬浮按钮1

   从中心向四周发散、

   
   

   配色变化：前暖后冷

8. 点缀元素如何烘托主体：

   流体渐变环绕分布

   特点：自由变化、色彩亮丽

   场景：招聘、金融、APP下载

   金币、红包等放射式流星雨分布

   特点：四处飞散、增强动感

9. 原型搭建

   插画头图占屏比例约为60%

   板块留白预留足够的呼吸感

   相同组件的一致性，如按钮和优惠券样式

   最小文字字号不小于22px,不影响识别。