将颜色应用于顶部和底部应用栏的方式可帮助用户识别它们并了解它们与周围元素的关系。顶部和底部应用栏使用应用的主要颜色。系统栏可以使用主要颜色的深色或浅色变体来将系统内容与顶部应用栏内容分开。此顶部应用程序栏使用主要颜色 （紫色 500），系统栏上使用深色主要变体 （紫色 700）。为了强调应用栏和其他表面之间的差异，请在附近的组件（如浮动操作按钮 （FAB））上使用辅助颜色。此底部应用程序栏上使用主要颜色（蓝色 700），浮动操作按钮使用辅助颜色（橙色 500）。如果底部应用栏和浮动操作按钮的颜色相同，请使用阴影或替代方法在它们之间创建足够的区别。当应用的顶部或底部应用栏颜色与背景色相同时，它们会混合在一起，强调应用的内容而不是其结构。
此应用程序的顶部应用程序栏颜色和背景颜色都是主要颜色：白色。但是，在滚动时，顶部应用栏会增加阴影，表明它的高度高于滚动在其后面的内容。
此应用程序明亮、无缝的布局将其主要蓝色（蓝色 700）用于应用程序栏、底部导航和背景颜色，因此单个元素不那么突出，而内容更突出。激活状态使用辅助黄色。它在底部导航栏上包含一个阴影，用于显示表面之间的高程划分。
背景具有正面和背面图层。为了区分这两个图层，基线背面图层颜色是您的主要颜色，而基线正面图层是白色。
此应用程序在背景的背景层上使用其原色 （紫色 800）。文本字段是浅色主要变体（紫色 700）。辅助颜色（红色 700）作为航班票价的重点。
此应用程序将原色 （pink 100） 用于背景的背景层，将原色深色原色 （pink 900） 用于排版和图像。此外，辅助颜色 （粉红色 50） 用于前层上的扩展页。
图纸和表面（如底部图纸、抽屉式导航栏、菜单、对话框和卡片）的基线颜色为白色。这些组件可以合并颜色以在其他表面之间创建对比度。对比度可以使表面边缘明显，从而在表面重叠时指示高程差异。
此产品已将底部工作表和导航抽屉中的默认白色更改为原色
①本产品在底部纸张的一部分中使用原色（紫色 500）而不是基线白色。②本产品的抽屉式导航栏使用其主要颜色（紫色 500）而不是基线白色。在屏幕上临时显示的表面（如抽屉式导航栏和底部图纸）上使用对比色。这些表面通常为白色，但你可以使用应用的主要颜色或辅助颜色。
此应用程序在底部导航抽屉中使用其主要颜色蓝色（蓝色 700），将主要深色变体（蓝色 800）用于帐户切换器，并使用辅助颜色（橙色 500）进行选择。
此应用程序将其主要颜色（白色）用于其模态导航抽屉，从而在深色排版和导航之间产生最大的对比度。白色纱幕用于使其后面的内容不那么明显，因为抽屉式导航栏的颜色与背景的颜色相同。
此应用程序在右下角显示一个工作表，其主要颜色（粉红色 500）着色。点击后，工作表会展开。卡片的基线颜色为白色。此颜色可以自定义以表达品牌或提高易读性。卡片文本和图标也可以使用颜色主题来提高可读性。
这些卡片的表面使用原色 （紫色 500）。应用程序的背景颜色为白色。辅助色 （teal 200） 用于数据可视化。
当卡片的文本和图标出现在图像前面时，它们可能难以阅读。为了提高可读性，您可以使用颜色为文本和图标创建表面。按钮、色卡和选择控件可以通过对它们应用主要或次要颜色来强调它们。
②浮动操作按钮和扩展浮动操作按钮的基准颜色是辅助颜色。
此应用程序的颜色主题由一种主要颜色 （紫色 500） 和一个主要深色变体 （紫色 600） 和一种辅助颜色 （青色 200） 组成。①本产品使用底部应用程序栏的主要颜色（紫色 500），使用辅助颜色（蓝绿色 200）作为浮动操作按钮和选择控件的强调色。②本产品使用辅助色（蓝绿色 200）作为选定列表项的强调色。按钮允许用户通过单击来执行操作。相关文章 arrow_downward Chips 是表示输入、属性或操作的紧凑元素。按钮、色卡和选择控件可以用您的主要或次要颜色来强调。
此应用程序将其原色（粉红色 100）用于其扩展的浮动操作按钮和筹码。它使用其主要的深色变体 （粉红色 900） 作为滑块。
不要使用您的品牌颜色之一来为警报着色。这将有助于它脱颖而出。浮动操作按钮 （FAB） 应该是屏幕上最容易识别的项目之一。使用颜色在 FAB 和周围元素（如应用程序栏）之间创建对比。辅助颜色是在 FAB 上使用的基准颜色。如果您的画布使用多种颜色，则您的 FAB 可以使用单色来代替，以从内容中脱颖而出。
此应用程序的辅助颜色（橙色 500）应用于 FAB，使其与周围的 UI 形成鲜明对比。
此应用程序的颜色主题对所有按钮、选择控件和图标使用主要白色和次要黑色。这些组件之所以突出，是因为它们与生动的多色内容形成鲜明对比。
颜色可以表示文本相对于其他文本的重要性是更大还是更小。颜色还可以确保文本在放置在图像或背景上方时保持清晰易读，这可能会导致难以阅读它们面前的文本。
此应用程序的颜色主题由一种主要颜色 （紫色 500） 和一种辅助颜色 （橙色 600） 组成。橙色强调卡片的标题，紫色显示在选项卡和按钮上。重要文本（如标签和标题）可以使用您的主要颜色或辅助颜色。
此应用程序使用其辅助颜色（橙色 800）来强调和吸引人们对标题的关注。
此应用程序将其原色（绿色 800）用于选项卡，粗细变化表示已选中和未选中状态。
使用主要颜色或辅助颜色来强调较短的文本，例如标题。将文本放置在图像上方时，通常会导致易读性问题。在文本和图像之间创建彩色图层可以确保文本保持清晰。
此应用程序在图像上方应用黄色纱幕，以确保其上方的文本清晰易读。图标有助于识别操作并提供信息。它们的颜色应与背景形成对比，以确保它们清晰易辨。
此应用程序的图标同时使用其主要颜色（绿色 800）和辅助颜色（橙色 800）。
Shrine 使用其主要的深色变体（粉红色 900）作为图标。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
