Material Design 3(MD3)自定义颜色的适用场景与使用方法咨询

MD3自定义颜色的适用场景与实际作用 #

MD3默认色板的主色、次色、表面色、错误色、成功/警告色这些固定色槽，只覆盖通用UI交互场景，自定义颜色就是用来填补默认色板覆盖不到的业务专属色彩需求，核心适用场景和作用如下：

• 品牌专属识别色场景：比如产品独有的IP配色、会员等级的金/银/铜专属色、品牌联名模块的专属配色，这些颜色不属于通用交互语义，硬塞到默认色槽会破坏全局色彩语义，就需要用自定义色承载。
• 强业务绑定的语义色场景：比如金融类APP的股票涨跌色、笔记类APP的笔记分类标签色、健身类APP的运动强度等级色、工单系统的不同优先级状态色，这类颜色的语义和业务强绑定，默认色板没有对应语义槽，必须用自定义色实现。这里要提一句很多人踩过的坑：不要硬改默认色槽的语义，比如为了做国内股市“涨红跌绿”把默认成功色改成红色、错误色改成绿色，最后全局表单校验、操作提示的颜色全乱，用户根本分不清是操作成功还是报错。
• 特殊组件的视觉区分场景：比如页面里的核心付费转化入口、和普通功能做区隔的专属功能入口，需要在不打乱全局视觉层级的前提下做差异化露出，用自定义色可以避免和主按钮、普通操作按钮的颜色撞色，保证视觉层级清晰。

实际作用总结下来就三点：

1. 不破坏默认色彩体系的语义一致性，不用为了业务需求硬改全局通用色的配置
2. 可以接入MD3的色彩生成规则，自动生成明暗模式、高对比度模式下的适配色值，不用手动维护多套色值，还能自动满足无障碍对比度要求
3. 统一全应用的业务色调用入口，避免业务页面随便写死色值，切换主题、开启动态配色的时候出现漏改、颜色显示异常的问题

MD3自定义颜色的正确使用方法 #

按下面的流程走基本不会出错：

• 先筛色，不要盲目加自定义色

  把你需要用到的所有业务色先列出来，优先匹配默认色槽的语义：普通的操作成功提示就用默认成功色，普通报错就用默认错误色，只有默认色槽语义匹配不上的颜色，才新增为自定义色。正常来说单应用的自定义色组控制在3-5组就足够，加太多反而会让整个应用的视觉逻辑混乱。

• 按MD3色彩规范生成完整色阶，不要只用单一色值
  自定义色不要只存一个纯色值，要和默认主色一样生成完整的tonal色调阶（常用档位为0、10、20、30、40、50、60、70、80、90、95、99、100），亮色模式下优先用40-60档位的色值做组件填充，暗色模式下用70-90档位的色值，自动保证文本和背景的对比度达到4.5:1的无障碍标准。如果应用支持安卓12+的动态配色，自定义色也要配置对应的动态色彩映射规则，避免开启动态配色后自定义色和系统生成的主题色冲突。
• 用语义化命名，严格按语义调用
  绝对不要用颜色本身的属性命名（比如禁止命名为custom_red、light_gold），必须用颜色对应的业务语义命名，比如stock_rise、vip_gold_tier、paid_entry_fab，调用的时候严格匹配场景，不要随便把某组自定义色挪到无关场景用。
  以Jetpack Compose里的自定义色配置为例，正确写法如下：

  val ColorScheme.stockRise: Color
      get() = if (isLight) Color(0xFFD93025) else Color(0xFFFF8A80)
  val ColorScheme.stockFall: Color
      get() = if (isLight) Color(0xFF1E8E3E) else Color(0xFF81C995)
  

• 全场景校验
  配置完成后分别在亮色模式、暗色模式、高对比度模式、动态配色开启的场景下测试自定义色的显示效果，确认没有对比度不足、和相邻组件撞色、语义表达错误的问题再上线。

内容的提问来源于stack exchange，提问作者Taha Sami