UI 中的色值命名

说起夜间模式，延伸到界面颜色、style guide 等，我常接触的实现方式跟变量、跟命名有关。

比如在客户端里，定义 yellow、green、gray 等分别对应什么色值：

+ (UIColor *)yellow {
    if (IS_LIGHT_THEME) {
        return [UIColor colorWithHexString:@"FFEB3B"];
    } else {
        return [UIColor colorWithHexString:@"2F2F2F"];
    }
}

在网页里，Sass、Less 以及 CSS 现在也可以使用变量。比如先在 variables 文件里定义好 $red: #EA6F5A，就可以在其它地方使用：

.text {
  color: $red;
}

夜间模式也一样，给 加一个 class，将指定元素的 color、background-color 等属性改为 $nightRed、$nightBackgroundColor 等。

但我发现，有时候我们做得不够好。

颜色总归不止一两种，从文字、按钮、背景色到分割线，红色可能有深有浅，灰色可能有四五种色值，这时怎么命名？

1. red1、red2，gray 1、gray 2、gray 3。这样的命名描述性很差，有注释还好，没注释的时候还要找设计师问。

2. grayDC，gray50，分别代表 #DCDCDC、#505050。虽然一眼就知道具体色值，同时也失去了变量的优势。
   （如果原本很多处标题都用了 gray50，现在要改深一点，总不可能把 gray50 对应的色值改为 #323232 吧，那就只能逐个逐个元素去改…）。

3. red、redDark，gray100、gray 200、…、gray900。这样虽然体现了深浅，依然无法表达清楚这个颜色的用途。

应该尽量避免用上面这些命名方式，按用途来命名更合理。例如：

• 文字，用 grayTitle、graySubtitle、blueLink 等等；
• 按钮，用 redButtonBorder、redButtonBg、redButtonBgHover 等等。

[Yelp 的 style guide](https://www.yelp.com/styleguide)

[微软 Office 的 style guide](http://dev.office.com/fabric#/styles/colors)

这样做好在，

• 易于管理，可以跟设计上的 style guide 对接，避免颜色过多而混杂；
• 描述性更强，工程师一眼就知道该用在哪，标题用 grayTitle、副标题用 grayTitle，而不用纠结是用 gray800 还是 gray900 然后去问设计师。
• 需要调整时很方便，只要改一处变量，全局生效。

有兴趣不妨浏览 DesignGuidelines.co，这里有更多优秀的 style guide 案例持续在更新。

这套规则同样适用于字号、行距、段距等。

---

上一篇：《夜间模式随想》