美文网首页
COT表盘素材规范

COT表盘素材规范

作者: 0晨鹤0 | 来源:发表于2017-07-21 19:57 被阅读0次

    本规范仅供COT表盘组内部参阅,并不一定具有普适性,公众可选择性参考。
    本文档随时更新。
    最后更新于2017.7.21 20:00

    名词定义

    名词 英文 释义
    日间模式 light 正常情况下点亮屏幕时的模式
    夜间模式 dark 夜间时间段点亮屏幕时的模式(如果设计有的话)
    微光模式 shimmer 开启常亮时熄灭屏幕后的模式

    背景图

    背景图指的是用于作为背景的图片,一般每个模式对应一张。应符合如下要求:

    • 图片尺寸为正方形且不低于400x400.
    • 若背景不是纯色则背景图应设计为正方形以便适配方形屏幕。(圆屏会自动裁剪)
    • 背景图不允许存在透明与半透明区域(圆形背景的四角除外)。
    • 微光模式背景图应以黑色与白色为主。
    • 若背景为纯色且无其余元素,应当提供背景色的十六进制代码而不是图片。例如红色为#FF0000(背景色不允许Alpha透明通道)

    刻度

    刻度指的是一周圈的刻度与数字刻度,刻度允许与背景图合并在一起。但应该尽可能地为方形表单独适配。(当单独适配时建议与背景图分开)

    指针

    因指针牵扯旋转问题,为了保证不偏离圆心并优化内存、电量消耗,请严格遵守以下规范:

    • 所有指针图片大小应当高度相同并且与背景图等高。
    • 指针素材应该保持0°(指向12点)状态。
    • 指针图片宽度应尽可能减少。
    • 指针本体应该水平居中。本体指的是指针元素本身而不考虑阴影、发光等附属元素。
    • 指针的转轴应该水平且垂直居中。转轴指的是指针旋转时的圆心。
      下面是一个较为规范的指针样例:
    指针样例

    指针的最佳实践

    为了确保指针素材符合规范,这里推荐一个制作指针的流程供参考。

    1. 制作指针。
    2. 旋转至竖直向上。
    3. 拉出水平垂直平分参考线。
    4. 将指针调整至本体水平居中。
    5. 将转轴调整至水平垂直居中。
    6. 选择裁剪工具,按住Alt键调整水平裁剪范围,减去多余的透明像素。
    7. 输出为png。

    素材图片与代码绘图结合

    当素材图片需要与代码绘图结合时(例如刻度是图片但是数字刻度使用代码绘制),为了保证契合度请遵照以下规范:

    • 圆形素材务必保证正圆且圆心与图片中心重合。

    需要拼合类素材

    本类指的是实际场景中需要拼合使用的素材,例如文字表盘的时间文字。为保证拼合间距可控,请遵守以下规范:

    • 同类素材高度或宽度相同。(需要水平拼合时高度相同,否则宽度相同)
    • 素材不要留透明边缘。(为了保证高度 OR 宽度相同时除外)
    • 当为保证宽度OR高度相同而留出多余像素时,素材本体应该水平OR垂直居中。

    其他非图片类素材

    • 颜色一律提供精准的十六进制html代码。例如红色为#FF0000。需要半透明时应该加上Alpha通道。例如50%透明的红色为#7FFF0000
    • 文字应该提供字体文件。否则使用系统默认字体。

    相关文章

      网友评论

          本文标题:COT表盘素材规范

          本文链接:https://www.haomeiwen.com/subject/sznekxtx.html