质感设计-样式-色彩

于 2023-08-23 00:00:30 发布
阅读量379 收藏 1
点赞数
文章标签： material design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tq1086/article/details/132439561
版权

1. 色彩

色彩（Color）可以表达意义、信息层级和状态。质感设计以5种关键色彩为基础，衍生出20余种色彩职能。

1.1. 关键色彩

质感设计以5种关键色彩（key color）为基础：

  • 显著色彩（Accent color）
    • 主关键色彩（Primary key color）用于浮动按钮、主要按钮、主要状态等需要用户特别关注的组件。
    • 次关键色彩（Secondary key color）用于显著程度稍弱一些的组件。
    • 第三关键色彩（Tertiary key color）用于平衡主关键色彩和次关键色彩。
  • 中性色彩（Neutral color）
    • 中性色彩用于背景（background）的表层色彩（surface color）。
    • 中性色彩变体（Neutral color variant）用于中等强调级别的文本、图标和组件边框（Outline）。

除此以外，质感设计提供了警示色彩（error color）。它是一种附加色彩（additional color）。

1.2. 色彩空间和记号

质感设计采用HCT色彩空间。HCT表示色相（Hue）、饱和度（Chroma）和色调（Tone）。质感设计通过调整关键色彩的色调生成不同职能的色彩。色调描述色彩的亮度，0是最暗的黑色，100是最亮的白色。质感设计采用名字加色调值来表示衍生色彩。比如tertiary40表示将第三关键色彩的色调设定为40而产生的色彩。

1.3. 色彩职能

每种显著色彩可以衍生出4种色彩职能。以主关键色彩为例：

Table 1: 主关键色彩衍生出的4种色彩职能
色彩职能说明色彩值
主色彩（Primary）基础色彩primary40
主上层色彩（On-Primary）用于主色彩上层的文本和图标等primary100
主容器色彩（Primary container）用于强调程度弱于主色彩的元素primary90
主容器上层色彩（On-Primary container）用于主容器色彩上层的文本、图标等primary10

表层色彩（Surface color）用于将一个区域与屏幕背景或其他区域隔离。表层色彩有5种职能。

Table 2: 表层色彩职能
色彩职能说明色彩值
暗表层色彩（Surface dim）neutral87
表层色彩（Surface）neutral98
亮表层色彩（Surface bright）neutral98
最低表层容器色彩（Surface container lowest）neutral100
低表层容器色彩（Surface container low）neutral96
表层容器色彩（Surface container）neutral94
高表层容器色彩（Surface container high）neutral92
最高表层容器色彩（Surface container highest）neutral90
表层上层色彩（On surface）neutral10
表层上层色彩变体（On surface variant）neutralVariant30

边框色彩（Outline color）用于绘制元素边框。

Table 3: 边框色彩职能
色彩职能色彩值
边框色彩（Outline）neutralVariant50
边框色彩变体（Outline variant）neutralVariant80
Table 4: 附加色彩职能
色彩职能色彩值
表层翻转色彩（Inverse surface）neutral20
表层上层翻转色彩（Inverse on surface）neutral95
主翻转色彩（Inverse primary）primary80
主固定色彩（Primary fixed）primary90
暗主固定色彩（Primary fixed dim）primary80
第二固定色彩（Secondary fixed）secondary90
暗第二固定色彩（Secondary fixed dim）secondary80
第三固定色彩（Tertiary fixed）tertiary90
暗第三固定色彩（Tertiary fixed dim）tertiary80
Table 5: 质感设计色彩职能
颜色职能系统变量引用变量暗黑模式引用变量默认值暗黑模式默认值
主色彩md.sys.color.primarymd.ref.palette.primary40md.ref.palette.primary806750A4D0BCFF
主容器色彩md.sys.color.primary-containermd.ref.palette.primary90md.ref.palette.primary30EADDFF4F378B
主上层色彩md.sys.color.on-primarymd.ref.palette.primary100md.ref.palette.primary20FFFFFF371E73
主容器上层色彩md.sys.color.on-primary-containermd.ref.palette.primary10md.ref.palette.primary9021005EEADDFF
主翻转色彩md.sys.color.inverse-primarymd.ref.palette.primary80md.ref.palette.primary40D0BCFF6750A4
第二色彩md.sys.color.secondarymd.ref.palette.secondary40md.ref.palette.secondary80625B71CCC2DC
第二容器色彩md.sys.color.secondary-containermd.ref.palette.secondary90md.ref.palette.secondary30E8DEF84A4458
第二上层色彩md.sys.color.on-secondarymd.ref.palette.secondary100md.ref.palette.secondary20FFFFFF332D41
第二容器上层色彩md.sys.color.on-secondary-containermd.ref.palette.secondary10md.ref.palette.secondary901E192BE8DEF8
第三色彩md.sys.color.tertiarymd.ref.palette.tertiary40md.ref.palette.tertiary807D5260EFB8C8
第三容器色彩md.sys.color.tertiary-containermd.ref.palette.tertiary90md.ref.palette.tertiary30FFD8E4633B48
第三上层色彩md.sys.color.on-tertiarymd.ref.palette.tertiary100md.ref.palette.tertiary20FFFFFF492532
第三容器上层色彩md.sys.color.on-tertiary-containermd.ref.palette.tertiary10md.ref.palette.tertiary90370B1EFFD8E4
表层色彩md.sys.color.surfacemd.ref.palette.neutral98md.ref.palette.neutral6FEF7FF141218
暗表层色彩md.sys.color.surface-dimmd.ref.palette.neutral87md.ref.palette.neutral6DED8E1141218
亮表层色彩md.sys.color.surface-brightmd.ref.palette.neutral98md.ref.palette.neutral24FEF7FF3B383E
最低表层容器色彩md.sys.color.surface-container-lowestmd.ref.palette.neutral100md.ref.palette.neutral4FFFFFF0F0D13
低表层容器色彩md.sys.color.surface-container-lowmd.ref.palette.neutral96md.ref.palette.neutral10F7F2FA1D1B20
表层容器色彩md.sys.color.surface-containermd.ref.palette.neutral94md.ref.palette.neutral12F3EDF7211F26
高表层容器色彩md.sys.color.surface-container-highmd.ref.palette.neutral92md.ref.palette.neutral17ECE6F02B2930
最高表层容器色彩md.sys.color.surface-container-highestmd.ref.palette.neutral90md.ref.palette.neutral22E6E0E936343B
表层色彩变体md.sys.color.surface-variantmd.ref.palette.neutral-variant90md.ref.palette.neutral-variant30E7E0EC49454F
表层上层色彩md.sys.color.on-surfacemd.ref.palette.neutral10md.ref.palette.neutral901C1B1FE6E1E5
表层上层色彩变体md.sys.color.on-surface-variantmd.ref.palette.neutral-variant30md.ref.palette.neutral-variant8049454ECAC4D0
表层翻转色彩md.sys.color.inverse-surfacemd.ref.palette.neutral20md.ref.palette.neutral90313033E6E1E5
表层上层翻转色彩md.sys.color.inverse-on-surfacemd.ref.palette.neutral95md.ref.palette.neutral20F4EFF4313033
背景色彩md.sys.color.backgroundmd.ref.palette.neutral98md.ref.palette.neutral6FEF7FF141218
背景上层色彩md.sys.color.on-backgroundmd.ref.palette.neutral10md.ref.palette.neutral901C1B1FE6E1E5
警示色彩md.sys.color.errormd.ref.palette.error40md.ref.palette.error80B3261EF2B8B5
警示容器色彩md.sys.color.error-containermd.ref.palette.error90md.ref.palette.error30F9DEDC8C1D18
警示上层色彩md.sys.color.on-errormd.ref.palette.error100md.ref.palette.error20FFFFFF601410
警示容器上层色彩md.sys.color.on-error-containermd.ref.palette.error10md.ref.palette.error90410E0BF9DEDC
边框色彩md.sys.color.outlinemd.ref.palette.neutral-variant50md.ref.palette.neutral-variant6079747E938F99
边框色彩变体md.sys.color.outline-variantmd.ref.palette.neutral-variant80md.ref.palette.neutral-variant30C4C7C5444746
阴影色彩md.sys.color.shadowmd.ref.palette.neutral0md.ref.palette.neutral0000000000000
表层浅色md.sys.color.surface-tint-colormd.sys.color.primarymd.sys.color.primary6750A4D0BCFF
蒙层色彩md.sys.color.scrimmd.ref.palette.neutral0md.ref.palette.neutral0000000000000

 

tq1086
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值