发布: 2022-02-22

Remain Style Guide

品牌色

什么是品牌色

它是代表品牌的专属颜色，赋予品牌整体统一感，并且能有效地向用户不断传达同样的信息

品牌色的运用

品牌色通常建议采用 primary color 一种与 secondary color 一种。比起使用多种颜色，使用少数几种颜色更能提升品牌感，同时有助于做出以内容为中心的设计。如果觉得过于单调，可以在品牌色上增加饱和度与明度，从而做出更丰富的表现。

品牌色的比例

primary color 的比例必须高于 secondary color。若反过来，可能会让用户对主色产生混淆，因此 primary color 的使用量最好多于 secondary color。

这是选定 #3d5afe 作为 primary color、#ff6e40 作为 secondary color，
并展示 primary color 的占比高于 secondary color 的示例。

色彩的搭配 (color scheme)

在确定 primary color 与 secondary color 时，颜色之间的组合也非常重要。色轮（色相环）工具是帮助实现和谐配色的工具。所有颜色彼此既可能协调也可能冲突，因此这个过程可能会拖得太久或让人感到困难。此时可以使用色轮工具来缩短时间。

这是展示 primary color (#3d5afe) 与 secondary color (#ff6e40) 的关系为互补色关系时，在网页上如何运用的示例。

交互色(interaction color)

交互色建议使用比默认色亮 1~2 个色调或暗 1~2 个色调的颜色。也可以把明度与饱和度的阶梯拉得更大来使用。

确定 default color 之后，可以把 interaction color 的 lighten、darken color 设置为 4~5 个阶梯来使用。比起把 interaction color 定为 1~2 种颜色，这样能做出更丰富的表现。lighten color 越往左越亮，与基本色相比越亮数字就越大。darken color 越往右越暗，与基本色相比越暗数字就越大。