必备型|标签规范设计方法探索( 二 )
HSB模式最友好的特性就是,可以完美固定HSB中的某一个参数,只对其他两个参数做改变或者只改动其中的一个参数,这一点,完全符合人的色彩直觉,也只有HSB能做到,而RGB、CMYK都是牵一发动全身的节奏。(故选此色彩模式建立基础色板)
2.1.2 色板的推导
为了覆盖我司多业务线的复杂场景以及设计侧输出的的规范统一性,以品牌色为基础在色环上0°-360°之间取色,同时遵循符高效易识别的原则。

这里需要强调的是标签的配色有别于日常配色设计,需加大色相区分,保证清晰识别。所以将间隔设定为±30°取色,按照色环顺序:品牌色——类似色(正负 30° 位置)——邻近色(正负 60° 位置)——对比色(正负 120° 位置)——互补色(180° 位置)生成12个主彩色(黑灰无色相)

为了获得更丰富的色彩和保持页面统一性,基于12个主颜色,在其中增加白色和黑色,改变明度和饱和度,形成同色系的调色板,在色彩系统里称为Tints and Shades系统,通过此算法可以获得更多色阶满足设计需要。
Tints and Shades系统
我们在skctch里根据tint和shade系统的算法,将其可视化,方便每个颜色都在统一的的规则里形成衍生色,形成基础色板。

根据上图我们可以发现:
【亮度区域】:S值以S/5结果值为增量递减,B值以(100-B)/5结果值为增量递增;
【饱和度区域】:S值以(100-S)/5结果值为增量递增,B值以B/5结果值为增量递减;
以我司品牌色,H(29)、S(88)、B(98)为例:
【亮度色阶】HSB参数:(29,88,98)、(29,、70,98)、(29,52,98)、(29,34,98)、(29,16,98)
【饱和度色阶】HSB参数:(29,88,98)、(29,、90,78)、(29,92,58)、(29,94,38)、(29,96,18)
其中运算结果数值出现小数点时四舍五入,根据此算法由此得到12色的基础色板如下:

2.1.3 颜色情绪
不同的颜色带给我们不同的色彩情绪,比如一说到蓝、蓝紫、蓝绿、紫、淡蓝等色,则容易联想到太空、冰雪、海洋等物像,就会产生寒冷、理智、平静、稀薄的、淡的、远的、轻的、等感觉。 暖色有大红、桔黄、玫红、黄橙、红紫等着色,就联想到太阳、火焰、热血等物像,产生温暖、热烈、危险等感觉,使人产生冲动情绪….,所以标签的色彩应用要与业务的行业属性契合,不只是简单的色彩堆砌,对色彩情绪的了解会我们做标签设计起到事半功倍的效果。
- 红色:热情、活泼、张扬、激动、警告……
- 橙色:成功、积极、活力、勇敢、自由….
- 黄色:年轻、温暖、鼓舞、柔和…..
- 绿色:自然、健康、新鲜,安全、平静、品质、生命、希望…..
- 蓝色:理智、安全、科技、宁静、平和….
- 紫色:高贵、优雅、神秘、权利…..
- 粉色:温馨、浪漫、明快、真诚…..
- …….

2.2 形状形状是标签信息的一个外化直观传递,应符合产品的品牌调性(比如直角、圆角、其它隐喻造型…..),根据我司业务属性将标签大致分为:
基本型:4px圆角矩形,高度以28px为主;
异型:高度以32px为主,具体根据业务场景需要设计
- 微博|“陌陌一哥”被罚1.08亿背后,陌陌直播收入下滑,撕不下灰色标签
- 固态硬盘|速率高达512GBs!PCIe7.0规范发布,但PCIe4.0或仍是主流!
- PCIe 7.0 规范公布,带宽直接翻倍
- 视听|广电总局、文旅部发文规范网络主播从业行为
- |如果网络主播行为规范中,禁止使用美颜相机,用户就会理智一些
- 网络|出手了!看看两部门联合发布的《网络主播行为规范》
- 国家广电总局、文旅部发文规范网络主播从业行为
- 腾达今天推出了一款Wi-Fi6规范的USB无线网卡|腾达u18ausb无线网卡开卖:支持1800m
- 苹果|x86/ARM怕吗?第三大CPU架构RISC-V加新规范:效率更高了
- “互联网+”不是一个标签,也并非想加就能加的
