搜索位设计规范
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动效
使用 After Effect 进行动效设计,动效画布尺寸为 72*72px ;
完成动效设计后,使用 Lottie 插件导出 .json 文件或 .json + images图片资源文件夹;
把 .json 文件或 .json + images图片资源文件夹 压缩成 .zip ;
把 .zip 文件上传至文件下发服务器 http://tvp.oa.com/vupload/ 生成配置链接
3 设计要求
3.1静态图
静态图片 输出的图片必须为带Alpha 通道的 .png 格式图片,图片大小为 72*72px;
图片不得占满整个切图区域,应保持跟搜索栏右侧功能入口图标视觉面积和重量保持一致;
图标表意清晰、符合主题,不应引起歧义或容易使用户疑惑;
输出的切图需要边缘清晰不毛躁。
输出需分别在白色和黑色背景上检查展示效果。
3.2 动效设计
如果输出动效设计,最后一帧必须是跟搜索栏功能入口图标保持一致的视觉样式,在 375dp宽的@1x标准屏幕上,描边为 1.5dp(同理@2x屏幕3px,@3x屏幕4.5px),色值C3 #A2A2B6 ;动效的最后一帧应视觉上居中于画布;
动效的运动时长不超过 400ms ,通过输出的动效文件总时长来控制动效的播放间隔,每次运动间隔不得 少于 6000ms ;
不建议使用逐帧动画进行设计,如果使用逐帧动画,应保证每帧的边缘都能达到清洗不毛躁的效果;
同一时段内,搜索栏右侧图标只允许有一个动效的入口,如有冲突,请找 @勉小玲 miamian ;
gif动图播放后会停在第一针,ios与安卓需分开设计,具体原因见下图:
(安卓与ios区分输出,安卓1帧,ios2帧,ios输出如下图)
3.3 设计审核
所有资源位配置,需经过平台设计师审核,才能发布到正式环境。设计审核请联系 @甄绍安 kongzhen
3.3.1案例说明
上方右侧红包VIP入口的案例中存在一些在后续做资源设计时应避免的问题
上方使用Photoshop做逐帧动效设计,控制不好的话容易出现锯齿几毛燥边缘;
该案例为动效设计,最后一帧应与左侧的功能入口视觉样式保持一致;
在最后一帧停留时视觉没有与画布居中,并存在倾斜角
最后更新于