# 1.1 颜色(Color)

# 颜色

规范的配色灵感来自对生活的自然环境、明亮的色调与柔和。品牌主色为科技蓝,体现专业技术、安全可靠,包容万物同时具有天空海洋的精髓,广阔、平静、蕴含着无限想象;在色彩规范中我们还定义了辅助色、黑灰色,以及使用在特殊场景的功能色;主色会使用在APP控件及体现品牌意识的地方,功能色、辅色及黑灰色,会以辅助衬托的形式搭配主色使用。

# 颜色指引

V2.0 版本色彩规范将对产品后续新功能界面、平台插件设计的色彩使用予以设计参考与指引,如插件应用较为特殊,需要其它更多辅助色彩拓展,请与 IoT 用户体验与场景部 UED 沟通协商。

# 主色 / 品牌

主色:app 中出现最频繁的颜色

蓝色 #267AFF

# 辅色

除了主色外的场景色,需要在不同的场景中使用(例如插件页中不同模式中使用)。

#29C3FF
蓝绿 #00CBB8
中黄 #FFAA10
#FF8225
橙红 #FF6A4C
设备关机/离线 #7C879B

# 黑灰色

中性色用于文本、背景、分割线和边框颜色。通过运用不同的中性色,来表现层次结构。

主要文案 2 #333333
次要文案 1 #666666
次要文案 2 #999999
次要文案 3 #C7C7CC
分割线 #F2F2F2
背景色 #F9F9F9
白色 #FFFFFF

# 功能色 / 特殊场景

功能性,特殊场景中使用(例如提醒、操作完成、操作失败)。

提醒、警告、注意 #ff8225
安全、正确、完成 #25cf42
危险、错误、失败 #ff3b30

# 渐变色

考虑到在不同场景需要,如分类、活动入口图标等重要元素,可以使用渐变色增加画面元素的丰富度。

#267AFF-#29C3FF

蓝色

#29C3FF-#32ECFF

湖蓝色

#00CBB8-#00F4E9

青色

#FFAA10-#FFD525

黄色

#FF8225-#FFCE4C

橘黄色

#FF6A4C-#FFB500

橘红色

# 颜色拓展

色彩规范前期通过对物理场景的自然景象,结合自身产品特征,形成了10种色彩。后期产品的使用情况及大量的观察,考虑到不同色彩在自然光下的变化规律,在2.0基础上对10个颜色进行了衍生,形成色板,包含100个不同层次的色彩提供使用。

# 无障碍设计指引

在我们的日常生活中有一个占比较小的人群就是视觉辨认障碍人群,即我们常说的“色盲(Color Blindness)”。 那么需要思考设计的是在设计工作中如何保证所有用户在视觉上的良好体验,消除色盲人群在色彩感知上的偏差,保障产品的可用性和易用性。

在设计产品时,色彩的组合搭配上需要考虑视觉辨认障碍人群难以或无法通过色彩去区分;因此则需要通过不同的色相明度或深浅去做不同状态的区分。针对规范色彩中我们提供了 3 种色彩或多种色彩的组合搭配使用;同时列举在红绿色盲情况下哪些色彩组合是避免使用。

Last Updated: 10/16/2023, 1:59:39 PM