唐山学UI设计中颜色设计如何应用

UI设计中颜色设计如何应用

UI设计中颜色设计如何应用？当文字在图片上方时，会引起易读性问题。在文本和图像之间创建一个彩色层，确保文本是清晰的。想知道UI设计中颜色设计如何应用吗?不妨接着往下看吧~

在材料设计中，颜色以一致且有意义的方式应用于UI元素和组件。

用法

这些指南描述了对颜色应用程序非常重要的各种UI组件和元素。

顶部和底部的应用程序栏

在顶部和底部的应用程序栏中应用颜色可以帮助用户识别和理解它们与周围元素的关系。

识别应用程序栏

顶部和底部的应用程序栏使用应用程序主色。系统栏可以使用主色的深颜色或浅颜色来区分系统内容和顶部应用程序栏内容。

要强调应用程序栏和其他结构层之间的区别，可以在附近的组件上使用第二种颜色，比如浮动操作按钮(FAB)。

混合应用程序栏与背景

当程序顶部或底部的应用程序栏颜色与背景颜色相同时，它们将混合在一起，并且应该强调内容而不是层次结构。

背景

背景有一个前后层。为了区分这两层，基本内容层颜色为原色，而基本内容层上面的颜色为白色。

纸张和表面

纸张和表面的基本颜色，如底页、导航抽屉、菜单、对话框和卡片，都是白色的。这些组件可以与颜色相结合，与其他层形成对比。对比使表面边缘可见，表明表面重叠的差异。

模态框

使用对比色，比如导航抽屉和屏幕上临时出现的底部页面。通常这些表面是白色的，但是你可以使用应用程序的主色或次要色。

卡片

卡片的底色是白色。这种颜色可以定制来表达品牌或提高可读性。卡片文本和图标也可以使用颜色主题来提高可读性。

当卡文本和图标显示在图像上方时，它们可能难以阅读。为了提高可读性，你可以在文本和图标的表面使用颜色。

按钮、标签和选择控件

按钮、标签和选择控件可以通过应用主色或副色来强调。

颜色分类

1.包含，文本的基色和按钮大纲为主色

2.浮动操作按钮和扩展浮动操作按钮的基础色是辅色

3.选择控件的基色为次要色

浮动操作按钮

浮动操作按钮应该是屏幕上最容易识别的项目之一。

使用颜色创建浮动按钮和周围元素(如应用程序栏)之间的对比，第二个颜色是浮动按钮上使用的基本颜色。如果你在画布上使用多种颜色，你的浮动按钮可以是单色的，并在内容中脱颖而出。

字体和图标

文本可以使用颜色，相对于其他文本的重要性或大或小。当放置在图像或背景上时，使用颜色可以确保文本清晰，但是它会使在图像或背景前阅读变得困难。

排版的层次结构

颜色可以增加文本的可见性和重要性。

标题和选项卡

重要的文本，如选项卡和标题，可以使用主色或次要色。

文本的易读性

当文字在图片上方时，会引起易读性问题。在文本和图像之间创建一个彩色层，确保文本是清晰的。

图标

图标有助于识别操作和传递信息。他们的颜色应该与背景对比，以确保清晰。