纯干货！谷歌深色主题UI设计规范

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼纯⼲货！⾕歌深⾊主题UI 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 作为⽬前最主流的设计风格和主题规范之⼀，MaterialDesign的深⾊主题设计规范⾮常值得参考学习。这是⼀套⾼度⾃恰的设计规范，有着相当严密的内部逻辑，在MaterialDesign的内在隐喻逻辑的推动下，严格遵循国际通⾏的可⽤性原则来确保深⾊主题的可⽤性和合理性。作为⼀个主流趋势，深⾊系配⾊主题必然会逐渐适配到⼏乎全部的移动端产品上，让⽤户在低亮度环境下更舒适地和移动端界⾯进⾏交互。可是，它的⾊彩模式、兼容性、系统性、易⽤性、可交互性以及内在逻辑⾃恰是怎么做到的？也许你不⼀定要严格遵循这套规范，但是它会作为标杆，告诉你要确保整套主题严密地运⾏，创造体验⽆缝的UI界⾯。⽤法深⾊主题将会让UI的绝⼤部分以深⾊来呈现。它是作为默认主题（浅⾊主题）的⼀个补充模式⽽存在。深⾊主题将会降低设备屏幕的显⽰亮度，同时仍保持最低程度的⾊彩对⽐度。它将会从⼈体⼯程学的⾓度提升设计，有效地减少视觉疲劳，并根据当前环境适应性地调整亮度，并在⿊暗的环境中提升屏幕的使⽤效果，同时节省电量。使⽤OLED屏幕的设备可以在任何时候确保⿊⾊像素是不发光的。原则在有较⼤纵深的环境当中，使⽤深灰⾊⽽⾮⿊⾊来呈现⾼程和空间。更深的灰⾊深⾊模式下，不要使⽤⿊⾊，⽽是使⽤深灰⾊，⽤来呈现较环境中的⾼程和⼤范围的区域。⾊彩与调性在深⾊主题的UI当中，尽可能使⽤数量有限的⾊彩，确保绝⼤部分的区域需要保持深⾊。节约能源在需要更⾼效能源利⽤率的设备上（⽐如使⽤OLED屏幕的设备上），通过减少发光像素来延长电池使⽤寿命。增强可访问性通过使⽤可访问性较强的⾊彩对⽐度，来迎合需要深⾊主题的⽤户（⽐如视⼒不佳的⽤户）。属性概述在这⼀节当中，了解MaterialDesign中关于深⾊主题的属性定义关于数字产品中对⽐度的设计，参考国际通⾏规则：WorldWideWebConsortium(W3C)UnderstandingContrast了解对⽐度MaterialDesign中的深⾊主题，基于下⾯的⼏个属性来进⾏定义：·对⽐度：深⾊区域和100%纯⽩⾊的正⽂⽂本的对⽐度⾄少要达到15.8:1常将有日思无日，莫待无时思有时。——《增广贤文》吾日三省乎吾身。为人谋而不忠乎？与朋友交而不信乎？传不习乎？——《论语》·深度：当元素处于相对较⾼的位置上的时候，通过较浅的表层颜⾊来呈现这种纵深上的差异。·去饱和度：主⾊调需要降低饱和度，以便符合web内容可访问性指南（WCAG）AA标准，⽐如正⽂部分的⽂本对⽐度需要保证⾄少4.5:1。·限制⾊彩：在⼤⾯区域都使⽤深⾊⾊调的时候，尽量少地使⽤提亮⾊（浅⾊、低饱和度⾼明度的⾊彩、或者是⾼饱和度的⾊彩）。拆解深⾊UI主题主要呈现出的前景视觉是深⾊的，同时其他的⾊彩也较为稀少。屏幕所散发出来的光线⾮常有限，但同时⼜保持着较⾼的可⽤性。背景（0dp⾼程叠加）前景（1dp⾼程叠加）主⾊调次要⾊在背景上的元素在前景表⾯上的元素在主⾊调上的元素在次要⾊上的元素⾏为深⾊主题应该可以通过外在显⽰的开关控件，来打开或者关闭的：·突出的⽅式，是使⽤直接可见的图标来打开或者关闭主题·不那么突出的⽅式，是在菜单或者APP设置中放置开关在APP的顶部菜单中显⽰主题开关在弹出菜单的菜单层中显⽰开关在APP的设置列表当中显⽰开关属性深⾊主题使⽤的是深灰⾊，⽽不是⿊⾊来作为主要的⾊彩。深灰⾊同样可以表现出⾮常⼴泛的⾊彩，能够呈现出⾼度和深度，因为相⽐于⿊⾊，灰⾊表⾯的阴影其实更容易被感知到。深灰⾊的前景⾊彩能够降低视觉疲劳，因为在深灰⾊表⾯的⽂字⽐在⿊⾊表⾯的⽂字，有更低的对⽐度。（还不会出现大丈夫处世，不能立功建业，几与草木同腐乎？——《罗贯中》炫光效果）云路鹏程九万里，雪窗萤火二十年。——《王实甫》炫光效果）⾼程在深⾊主题当中，组件在⾼程上和之前在浅⾊主题下应该是⼀样的，所以它应该也拥有相同级别的阴影。但是在深⾊主题下，原本的光影关系就发⽣变化了，不同⾼程下的元素所对应的阴影程度也不⼀样。元素越⾼，对应的背景被照亮的程度就越轻微前景元素越⾼（它在隐喻层⾯上就越接近光源），表⾯就越亮。在设计的时候可以通过有透明度的⽩⾊叠加层来实现这种轻盈的效果。元素越⾼，颜⾊相应的就越浅、越明亮。通过表⾯的⽩⾊半透明层，控制透明度来让表⾯发⽣亮度变化。1.元素控件层2.覆盖叠加层叠加层的另外⼀个优势在于，它可以让⼈更加便捷的分辨不同组件之间的⾼程，并且可以更容易观察到阴影。叠加层与元素控件的结合，不仅增加了和底部阴影之间的对⽐度，还让边缘更加清晰锐利和明显。默认主题仅仅使⽤阴影来控制⾼程效果，⽽深⾊主题之下，还需要借助调整表⾯⾊彩来控制⾼程效果。这些表⾯叠加层旨在最⼤程度地提⾼易读性，同时确保不同⾼程的元素彼此容易被分辨。⾼程叠加的透明度范围，最低是0%，最⾼是16%。这是⾼程等级和⽩⾊叠加层的不透明度对⽐表。叠加层阐明了组件之间的⾼程差异。A⾼程为1dp的卡⽚，叠加层不透明度为5%B⾼程为6dp的浮动按钮，使⽤没有叠加层的次要⾊C底部菜单栏，⾼程为8dp，叠加层不透明度为12%值得注意的是，叠加层不应应⽤于使⽤主⾊和次要⾊的UI元素控件表⾯。在深⾊主题之下，阴影同样应该保持深⾊，⽤以准确的描述投影关系，哪怕它没有那么显著。错误不要在使⽤主⾊和次要⾊的容器组件表⾯使⽤⾼程叠加层。错误古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼吾日三省乎吾身。为人谋而不忠乎？与朋友交而不信乎？传不习乎？——《论语》不要使⽤外发光来替代阴影来表⽰⾼程差异，因为这种效果并不能准确地描述⾼程阴影投递下来的效果。可访问性与对⽐度深⾊主题下，深⾊必须暗到⼀定程度，才能让⽩⾊的⽂本⾜够清晰地呈现。⽂本和背景之间的对⽐度级别⾄少要达到15.8:1才⾏。这样的对⽐度确保了即使是⾼程处于最⾼、最亮的控件当中，作为正⽂的⽩⾊⽂本都能通过WCAG的AA对⽐度标准，也就是4.5:1。如果背景颜⾊不够深，就⽆法确保⽩⾊的⽂本和背景⾊之间达到15.8:1的对⽐度，也就⽆法确保在极端情况下满⾜4.5:1的对⽐度下限。注意确保背景颜⾊⾜够深，才能正⽂处于最⾼⾼程（24dp）的情况下，达到⾄少4.5:1（AA）的对⽐度。在使⽤纯⿊⾊的界⾯下，有写硬件设备的电池效率会更⾼。在这种情况下，这些UI能够通过不发光的⿊⾊像素来节省硬件的电量。注意在OLED屏幕上，打开和关闭像素发光会导致屏幕滚动时出现延迟，导致像素模糊。UI应⽤主题配⾊⾊彩在⽂本的易读性中起到了重要的作⽤。所有的深⾊主题的配⾊⽅案都应该让UI中的元素都⾜够有对⽐度，⾜以通过WCAG的AA规则，也就是超过4.5:1的底线。可访问性强的不饱和⾊彩深⾊主题应该尽量避免使⽤⾼饱和度的⾊彩，因为它们多数不能够达到WCAG对于⽂本的对⽐度要求（4.5:1）。⾼饱和度的⾊彩能够在深⾊背景上产⽣炫光的视觉效果，产⽣视觉疲劳。相反，饱和度较低的⾊彩能够带来更清晰的视觉体验。配⾊⽅案中低饱和度的⾊彩能够提⾼易读性，减少炫光效果。错误避免在深⾊背景上使⽤让⼈觉得过于饱和的⾊彩。主⾊主⾊应该是整个界⾯和组件中最常显⽰的⾊彩。在整个MaterialDesign的深⾊主题中可以使⽤的基准⾊彩有超过200种不同的⾊调。（在不同⾼程的界⾯上，能够通过WCAGAA标准的4.5:1对⽐度的⽂本）我尽一杯，与君发三愿：一愿世清平，二愿身强健，三愿临老头，数与君相见。——《白居易》大丈夫处世，不能立功建业，几与草木同腐乎？——《罗贯中》深⾊主题的主⾊范例：主⾊指⽰器⾊调变体主⾊变体使⽤浅⾊的组件能够呈现基于主⾊延展出来的变体⾊彩。在这个深⾊主题中，使⽤了原⾊（紫⾊200）和主⾊变体（紫⾊700）。次要⾊次要⾊可以⽤来凸显你的UI界⾯⼀些特定的元素和区域。在深⾊主题中，次要⾊需要降低饱和度去满⾜4.5:1的对⽐度要求。深⾊主题中次要⾊的使⽤范例：次要⾊指⽰器⾊调变体这个UI界⾯中主⾊和次要⾊的变体。强调⾊在深⾊主题当中，深⾊的背景和元素占据了UI的绝⼤部分。⽽强调⾊通常使⽤的是浅⾊（柔和且饱和度较低）或者明亮（饱和度⾼，鲜艳）的⾊彩，确保被强调的元素能够脱颖⽽出。在关键的元素上应当谨慎地使⽤强调⾊，尤其是⽂本和按钮。寻找强调⾊你可以使⽤官⽅的配⾊⽅案⽣成器来创建（或者查看）主题配⾊⽅案。它可以⽣成⾊调⽅案，也就是主⾊和次要⾊的⼀系列深浅颜⾊的变化。你可以为你的深⾊模式⾊彩主题选择更合理的⾊彩，来构建配⾊。为了确保深⾊主题中⾊彩具有⾜够⾼的灵活性和可⽤性，建议在深⾊主题中选取较浅的⾊调（⾊彩饱和度范围在200-50之间），⽽不是默认情况下的⾊彩主题（⾊彩饱和度范围从900-500之间）。默认的主⾊深⾊主题的主⾊正确较浅的⾊调（200-50范围内的颜⾊）在深⾊主题中（在所有不同的⾼程之下）具有更好的可读性。丹青不知老将至，贫贱于我如浮云。——杜甫好学近乎知，力行近乎仁，知耻近乎勇。——《中庸》错误避免在深⾊主题中使⽤⾼饱和度的⾊彩，因为它们可以在深⾊的背景上形成炫光效果。默认主题下，在顶部菜单中使⽤配⾊⽅案中的主⾊。避免在深⾊主题的顶部菜单栏中使⽤主⾊，因为它们在深⾊主题下会导致炫光。品牌⾊范例：OwlOwl是⼀个教育类APP，为想要探索和学习新技能的⼈提供课程。相关的实例戳这⾥（需要梯⼦）。不饱和的⾊彩，应该在深⾊的UI主题的其他地⽅多使⽤。⾼饱和度的品牌⾊应该使⽤浮动按钮（2），饱和度较低的主⾊则应该应⽤到⽂本等元素（1）之中。深⾊主题下的主⾊品牌⾊深⾊主题基准配⾊⽅案MaterialDesign的记住主题中包含了给深⾊主题的全部⾊彩和⾊调。深⾊主题的⾊彩应该⾜以覆盖整个深⾊主题的UI界⾯，包括：⾊彩（主⾊、次要⾊以及⾊彩变体）界⾯主体（背景和控件）状态呈现（⽐如报错状态）内容呈现（字体排版和图像）使⽤Material⾊彩主题的基准配⾊MaterialDesign默认主题的基准⾊MaterialDesign深⾊主题的基准⾊报错颜⾊报错颜⾊主要⽤来指⽰出错的状况和状态。MaterialDesign的深⾊主题下的报错基准⾊为#CF6679。这种报错的基准⾊，是基于默认主题（浅⾊主题）下的报错颜⾊(#B00020)，在叠加了40%不透明度的纯⽩图层之后穷则独善其身，达则兼善天下。——《孟子》所构成的，它符合AA对⽐度标准。良辰美景奈何天，便赏心乐事谁家院。则为你如花美眷，似水流年。——《汤显祖》所构成的，它符合AA对⽐度标准。⽂本和图标⾊彩当⽂本、图标等元素，被置于背景或者某个控件上⽅的时候，为了进⾏区分的时候，所应该使⽤的⾊彩。在默认情况下，深⾊主题下的被置于⾊块上的⽂本和图标元素，⾊彩是以⿊⽩两⾊为主。深⾊UI下使⽤⽂本和⼩图标时的基准⾊。在深⾊背景上的浅⾊⽂本当浅⾊⽂本出现在深⾊背景上的时候（这⾥是⽩⾊⽂本置于⿊⾊背景之上），它应该遵循下⾯的不透明度设置规则：最重要的内容，⽩⾊⽂本不透明度设置为87%中等重要的内容，⽩⾊⽂本的不透明度为60%被禁⽤的⽂本内容，⽩⾊⽂本的不透明度为38%重要、中等重要和被禁⽤的⽂本区别定制应⽤MaterialDesign中的⼀些⽤例可以帮你更好的设计深⾊主题。⼤⾯积控件区域参考资料（需要梯⼦）：BottomappbarBackdrop对于⼀些使⽤了较⼤区域的控件或是弹出式菜单，应该使⽤深⾊主题的基准⾊来作为⾊彩。正确较⼩的控件和区域使⽤鲜艳醒⽬的⾊彩。错误较⼤的区域使⽤明亮的⾊彩，过于明亮影响整体视觉。注意非淡泊无以明志，非宁静无以致远。——诸葛亮忍一句，息一怒，饶一着，退一步。——《增广贤文》错误应该避免将配⾊中的主⾊引⽤到弹出菜单的背景上，这回导致明亮的⾊彩盖住多半屏幕。深浅⾊主题的结合参考资料（需要梯⼦）：Snackbar当需要在深⾊主题中使⽤浅⾊的控件的时候，浅⾊的控件可以确保层次结构的清晰。例如，在深⾊主题下，使⽤Snackbar来提⽰信息的时候，使⽤浅⾊来确保它能够脱颖⽽出。为了能够达到这个意图，可以使⽤浅⾊主题的配⾊来确保它⾜够醒⽬。Snackbar使⽤浅⾊的底⾊，让它可以脱颖⽽出。背景元素底⾊（默认主题）主⾊状态在组件和交互元素的状态，通常会借助叠加层的形式来可视化地呈现。在深⾊主题当中，呈现状态的叠加层应该使⽤与默认主题（或者浅⾊主题）相同的参数，并且可以通过调整来确保它来通过AA对⽐度等级标准。表⾯叠加的⾊彩，主要取决于底部容器所采⽤的⾊彩，这主要分两种情况：在底部容易是基准⾊和主⾊的时候。使⽤基准⾊的容器叠加层使⽤和图标或者⽂本⾊彩相匹配的颜⾊（如果不存在图标的话）。不同的状态下，叠加层的不透明度的状态各不相同，正常状态下是未叠加，其他状态下的叠加透明度则从4%到12%不等。使⽤主⾊的容器当控件容器的底⾊使⽤主⾊的时候，⽤来指⽰状态的叠加层应该使⽤⽩⾊。不同的状态下，叠加层的不透明度的状态各不相同，正常状态下是未叠加，其他状态下的叠加透明度则从4%到12%不等。禁⽤状态所有的被禁⽤的组件，都使⽤不透明度为12%的⽩⾊⽤来呈现外轮廓和填充⾊，并使⽤不透明度为38%的⽩⾊来显⽰⽂本和表层的内容。轮廓容器：不透明度为12%的⽩⾊我尽一杯，与君发三愿：一愿世清平，二愿身强健，三愿临老头，数与君相见。——《白居易》以铜为镜，可以正衣冠；以古为镜，可以知兴替；以人为镜，可以明得失。——《旧唐书·魏征列传》标签/图标：不透明度为38%的⽩⾊⾊彩填充容器：不透明度为12%的⽩⾊相关资源StickersheetStickersheet是和SketchforAndroid这套组件⼀起使⽤的。它包含全套深⾊主题的布局元素，包括状态栏、应⽤栏⽬、底部⼯具栏、卡⽚、下拉菜单、搜索字段、分隔符、导航、对话框等⼀系列的组件，⾮常实⽤。（值得注意的是，Google官⽅的设计师⼤多习惯于使⽤Sketch来设计界⾯）百川东到海，何时复西归？少壮不尽力，老大徒伤悲。——汉乐府《长歌行》