COT表盘素材规范

本规范仅供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
  • 文字应该提供字体文件。否则使用系统默认字体。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,380评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 路灯的, 树的影子在风中在摇摆, 像在为我跳一段艳舞, 像与我在讲一个故事, 我就在昏黄的灯光下,静静地,静静地,...
    钟凤山阅读 180评论 0 0
  • ahk是热键脚本文件扩展名的一种,编写ahk文件使用的脚本语言是autohotkey。autohotkey通过把常...
    哈迪斯_石头阅读 2,898评论 0 2