搜索位设计规范

1.支持的格式

该资源位支持配置 .png 静态图片、GIF及 Lottie动效

2020年4月1日起，仅支持lottie动画，不再支持配置gif图

760以下 png；[760-795) gif；795及以上 lottie

2.尺寸

375dp宽的@1x标准屏幕上为24*24dp，输出配置的资源建议为 @3x的72*72px静态图片或动效资源

2.1静态图

输出格式为 @3x的 72*72px的 .png 格式静态图片

2.2动效

配置的动效建议使用Lottie实现，不建议使用 .Gif 格式动效进行配置，2020.4.1日起不支持gif动效

Lottie插件相关资料

Lottie动画库支持的AE属性

1. 使用 After Effect 进行动效设计，动效画布尺寸为 72*72px ；

2. 完成动效设计后，使用 Lottie 插件导出 .json 文件或 .json + images图片资源文件夹；

3. 把 .json 文件或 .json + images图片资源文件夹 压缩成 .zip ；

4. 把 .zip 文件上传至文件下发服务器 http://tvp.oa.com/vupload/ 生成配置链接

3 设计要求

3.1静态图

1. 静态图片 输出的图片必须为带Alpha 通道的 .png 格式图片，图片大小为 72*72px；

2. 图片不得占满整个切图区域，应保持跟搜索栏右侧功能入口图标视觉面积和重量保持一致；

3. 图标表意清晰、符合主题，不应引起歧义或容易使用户疑惑；

4. 输出的切图需要边缘清晰不毛躁。

5. 输出需分别在白色和黑色背景上检查展示效果。

3.2 动效设计

1. 如果输出动效设计，最后一帧必须是跟搜索栏功能入口图标保持一致的视觉样式，在 375dp宽的@1x标准屏幕上，描边为 1.5dp（同理@2x屏幕3px，@3x屏幕4.5px），色值C3 #A2A2B6 ；动效的最后一帧应视觉上居中于画布；

2. 动效的运动时长不超过 400ms ，通过输出的动效文件总时长来控制动效的播放间隔，每次运动间隔不得 少于 6000ms ；

3. 不建议使用逐帧动画进行设计，如果使用逐帧动画，应保证每帧的边缘都能达到清洗不毛躁的效果；

4. 同一时段内，搜索栏右侧图标只允许有一个动效的入口，如有冲突，请找 @勉小玲 miamian ；

gif动图播放后会停在第一针，ios与安卓需分开设计，具体原因见下图：

（安卓与ios区分输出，安卓1帧，ios2帧，ios输出如下图）

3.3 设计审核

所有资源位配置，需经过平台设计师审核，才能发布到正式环境。设计审核请联系 @甄绍安 kongzhen

3.3.1案例说明

上方右侧红包VIP入口的案例中存在一些在后续做资源设计时应避免的问题

1. 上方使用Photoshop做逐帧动效设计，控制不好的话容易出现锯齿几毛燥边缘；

2. 该案例为动效设计，最后一帧应与左侧的功能入口视觉样式保持一致；

3. 在最后一帧停留时视觉没有与画布居中，并存在倾斜角