默认主题
颜色

颜色作为一种感知性的设计语言,在表达设计目标时起到强化作用。因此在定义一系列色值的同时,更重要的是对他们在实际页面和情景中的使用方法进行标准化定义。通过颜色可实现如下功能:

体现内容类型与层级关系

标题、正文、帮助内容

强化行动召唤

主按钮、次按钮、链接

引起关注

红色的错误提示,绿色的成功提示,橙色的警告提示。

区隔内容

背景色,前景色

品牌色

品牌色贯穿整体设计的主要颜色风格。品牌色主要体现在关键行动点及操作状态、重要信息高亮等场景。

  • 1
    #e6f7ff
  • 2
    #a9dffa
  • 3
    #6ec6f4
  • 4
    #36acef
  • 5
    #0091ea
  • 6
    #0079c9
  • 7
    #0063a8
  • 8
    #004d87
  • 9
    #003866

品牌色

主色:

主色为产品中应用最频繁,且能代表品牌基调的颜色。

在确定主色的同时选择主色的深色和浅色变体用于创造界面元素的对比。如,按钮、模块标题、交互状态等。

辅助色:

用于强调界面中的特殊元素。辅助色应慎重使用,仅作为强调和突出。

辅助色也可以选择深色和浅色变体用于界面元素对比。如滑块与滑动条、按钮交互状态等。

文本和图标色:

当文本与图标应用于主色和辅助色之上时,应使文本和图标颜色明显区别于颜色背景,保证内容清晰可辨。