本规范仅供COT表盘组内部参阅,并不一定具有普适性,公众可选择性参考。
本文档随时更新。
最后更新于2017.7.21 20:00
名词定义
名词 | 英文 | 释义 |
---|---|---|
日间模式 | light | 正常情况下点亮屏幕时的模式 |
夜间模式 | dark | 夜间时间段点亮屏幕时的模式(如果设计有的话) |
微光模式 | shimmer | 开启常亮时熄灭屏幕后的模式 |
背景图
背景图指的是用于作为背景的图片
,一般每个模式对应一张。应符合如下要求:
- 图片尺寸为正方形且不低于400x400.
- 若背景不是纯色则背景图应设计为正方形以便适配方形屏幕。(圆屏会自动裁剪)
- 背景图不允许存在透明与半透明区域(圆形背景的四角除外)。
- 微光模式背景图应以黑色与白色为主。
- 若背景为纯色且无其余元素,应当提供背景色的十六进制代码而不是图片。例如红色为
#FF0000
(背景色不允许Alpha透明通道)
刻度
刻度指的是一周圈的刻度与数字刻度
,刻度允许与背景图合并在一起。但应该尽可能地为方形表单独适配。(当单独适配时建议与背景图分开)
指针
因指针牵扯旋转问题,为了保证不偏离圆心并优化内存、电量消耗,请严格遵守以下规范:
- 所有指针图片大小应当高度相同并且与背景图等高。
- 指针素材应该保持0°(指向12点)状态。
- 指针图片宽度应尽可能减少。
- 指针
本体
应该水平居中。本体
指的是指针元素本身而不考虑阴影、发光等附属元素。 - 指针的
转轴
应该水平且垂直居中。转轴
指的是指针旋转时的圆心。
下面是一个较为规范的指针样例:
指针的最佳实践
为了确保指针素材符合规范,这里推荐一个制作指针的流程供参考。
- 制作指针。
- 旋转至竖直向上。
- 拉出水平垂直平分参考线。
- 将指针调整至本体水平居中。
- 将转轴调整至水平垂直居中。
- 选择裁剪工具,按住
Alt
键调整水平裁剪范围,减去多余的透明像素。 - 输出为png。
素材图片与代码绘图结合
当素材图片需要与代码绘图结合时(例如刻度是图片但是数字刻度使用代码绘制),为了保证契合度请遵照以下规范:
- 圆形素材务必保证正圆且圆心与图片中心重合。
需要拼合类素材
本类指的是实际场景中需要拼合使用的素材
,例如文字表盘的时间文字。为保证拼合间距可控,请遵守以下规范:
- 同类素材高度或宽度相同。(需要水平拼合时高度相同,否则宽度相同)
- 素材不要留透明边缘。(为了保证高度 OR 宽度相同时除外)
- 当为保证宽度OR高度相同而留出多余像素时,素材本体应该水平OR垂直居中。
其他非图片类素材
- 颜色一律提供精准的十六进制html代码。例如红色为
#FF0000
。需要半透明时应该加上Alpha通道。例如50%透明的红色为#7FFF0000
- 文字应该提供字体文件。否则使用系统默认字体。