当前位置: 首页 > 科技观察

MaterialDesign的色彩设计

时间:2023-03-11 22:33:20 科技观察

色彩从当代建筑、路标、人行横道、运动场馆中汲取灵感,大胆的色彩表现,激活色彩,与周围单调的环境形成鲜明对比。强调大胆的阴影和高光。带出意想不到的鲜艳色彩。ColorSwatches-0.13MB(.zip)UIPalette该调色板基于一些基本颜色并填充光谱,为Android、Web和iOS环境提供一套完整的可用颜色。基色的饱和度为500。UI颜色使用选择您的调色板来限制颜色的数量,从许多基色中选择三种色调和一种强调色。背面使用强调色,可选。为灰色文本、图标和分隔符添加alpha为了有效地传达信息的视觉层次,应该使用不同的文本阴影。对于白色背景上的文本,标准alpha值为87%(#000000)。具有低视觉层次的次要文本应使用54%(#000000)的alpha值。文字、标签等用于提示用户的文字视觉层次较低,应使用26%(#000000)的alpha值。其他元素(例如图标和分隔线)也应具有黑色alpha值而不是纯色,以确保它们适合任何彩色背景。对于彩色背景上的白色或黑色文本,您可以通过表中的调色板找到合适的颜色对比度和alpha值。我们强烈建议在UI的大面积区域使用大胆的颜色。UI中的不同元素适合主题中的不同颜色。工具栏和大色块应使用饱和度为500的基色,这是应用程序的主色。状态栏适合使用饱和度为700的较暗基色。强调色为您的主要操作按钮以及开关或滑块等组件使用明亮的强调色。强调色也可用于左对齐的部分图标或章节标题。替代强调色如果您的强调色相对于背景颜色太深或太浅,则默认选择更浅或更深的替代颜色。如果强调色没有正确显示,请在白色背景上使用饱和度为500的基色。如果背景颜色是饱和度为500的底色,则将使用100%白色或54%黑色。主题主题是为您的应用提供一致基调的一种方式。样式指定表面的亮度、阴影级别和字体元素的适当不透明度。为了提高应用程序之间的一致性,提供了两个主题选项:LightDarktheme-1.3MB(.ai)原文:Color翻译:arjinmc校对:PoppinLp