互联网产品设计（网页、UI等）时，如何给产品选择配色？
时间：2024-02-15 04:20:01 | 来源：网站运营
时间：2024-02-15 04:20:01 来源：网站运营
互联网产品设计（网页、UI等）时，如何给产品选择配色？：如何更好的协调UI元素，通过配色优化UI设计？今天想和大家分享的是UI设计中的配色秘诀～
原则一致性 与品牌相对应。在整个UI的设计过程中，颜色应始终保持一致性，并与其所代表的品牌兼容。
特殊性颜色应在元素之间形成区分，并使它们之间具有足够的对比度。
目的性应该有目的地应用颜色，因为它可以通过多种方式传达含义，例如元素和层次结构之间的关系。
一、顶部和底部应用程序栏将颜色应用于顶部和底部应用程序栏的方式可帮助用户识别它们并了解其与周围元素的关系。
1、识别应用栏顶部和底部的应用栏使用应用程序的原色。系统栏可以使用原色相对应的深色或浅色来将系统内容与顶部应用栏内容分开。
此顶部应用栏上使用原色（紫色500），系统栏上使用同一色系更深的颜色（紫色700）。要强调应用栏和其他表面之间的区别，请在附近的组件（例如浮动操作按钮（FAB））上使用辅助颜色。
该底部应用栏上使用原色（蓝色700），而在浮动操作按钮上使用第二色（橙色500）。如果底部应用栏和浮动操作按钮的颜色相同，请使用阴影或其他方式在它们之间建立足够的区别 2、将应用栏与背景融合当应用程序顶部或底部的应用栏颜色与背景颜色相同时，它们会融合在一起，从而将重点放在应用程序的内容而非结构上。
此应用程序的顶部应用程序栏颜色和背景色均为原色：白色。但是，在滚动时，顶部的应用栏会获得阴影，显示其高度高于在其后滚动的内容。此应用程序使用其主蓝（蓝色700）颜色代表应用程序栏，底部导航和背景色，因此各个元素的突出程度较小，内容则突出。激活状态使用辅助黄色。它在底部导航中包括一个阴影，以显示曲面之间的划分。二、背景 背景具有正面和背面。为了区分这两个层，基线后层颜色是原色，基线前层颜色是白色。
此应用在背景的背层使用其原色（紫色800）。文本字段是浅色的（紫色700）。将第二种颜色（红色700）用作航班票价的重要内容。此应用使用背景色的后层的原色（粉红色100）和用于版式和图标的深色主色（粉红色900）。此外，第二色（粉红色50）用于表层的扩展页。三、工作表和表面 工作表和表面（例如底部工作表，导航抽屉，菜单，对话框和卡片）的基准颜色为白色。这些组件可以合并颜色以在其他表面之间形成对比度。对比度可使表面边缘明显，表明表面重叠时的高程差异。
本产品已将底部工作表和导航栏中的默认白色更改为原色。本产品在底页的一部分中使用原色（紫色500）代替基线白色。该产品的导航栏使用其原色（紫色500）代替基线白色。1、导航切换在临时出现在屏幕上的表面（例如导航抽屉和底页）上使用对比色。通常这些表面是白色的，但是可以使用应用程序的原色或第二色。
此应用程序在底部导航中使用其原色蓝色（蓝色700），在帐户切换器中使用较为深的颜色（蓝色800），并在选择时使用副色（橙色500）。此应用程序将原色（白色）用于其模式导航抽屉，从而在深色字体和导航之间创建了最大的对比度。由于导航抽屉的背景颜色与白色相同，因此使用白色的蒙版使后面的内容不太引人注意。这个应用程式会在右下方显示一张工作表，并以原色显示（粉红色500）。轻按时，页面会扩展。2、卡片卡的基准颜色为白色。可以定制此颜色来表达品牌或提高可读性。卡片文本和图标还可以使用颜色主题来提高可读性。
这些卡的表面使用原色（紫色500）。该应用程序的背景色为白色。次要颜色（深绿色200）用于数据可视化。卡片可以使用颜色以展示选择或重要性。当卡片的文本和图标出现在图像的前面时，可能很难阅读。为了提高清晰度，可以使用颜色为文本和图标创建表面
此卡使用彩色蒙版来确保文本清晰易读。四、按钮，选择控件 1通过将按钮、选择控件应用原色或副色，可以突出显示它们。颜色类别
- 包含按钮，文本按钮和轮廓按钮的基准颜色是主要颜色。
- 浮动操作按钮和扩展的浮动操作按钮的基准颜色是辅助颜色。
- 选择控件的基准颜色是辅助颜色。
此应用程序的颜色主题包括原色（紫色500）和深色主色（紫色600）和第二色（蓝绿色200）。1。此产品使用底部应用栏的原色（紫色500）和使用副色（深200）作为浮动操作按钮和选择控件的重点。2.该产品将辅助色（深200）用作所选列表项的重点。2按钮，选择控件可以通过原色或第二色来强调。此应用将其原色（粉色100）用于其扩展的浮动操作按钮。它对滑块使用其主要的深色变体（粉红色900）。浮动动作按钮（FAB）浮动操作按钮（FAB）应该是屏幕上最容易识别的项目之一。使用颜色在FAB和周围的元素（例如应用程序栏）之间创建对比度。辅助颜色是FAB上使用的基准颜色。如果画布使用多种颜色，则FAB可以改用单色着色，以从内容中脱颖而出。
此应用的辅助颜色（橙色500）应用于FAB，与周围的UI形成对比。此应用程序的颜色主题对所有按钮，选择控件和图标使用主要白色和次要黑色。这些组件之所以脱颖而出，是因为它们与鲜艳的多色内容形成了鲜明的对比。五、版式和图标颜色可以表示文本相对于其他文本具有更大或更小的重要性。颜色还可以确保将文字放在图像或背景上方时仍清晰易读，这可能会使阅读前边的文字变得困难。
1、印刷层级颜色可以增加文本的可见性和重要性。
此应用程序的颜色主题包括原色（紫色500）和次要颜色（橙色600）。卡的标题上用橙色装饰，选项卡和按钮上用紫色显示。2、标题和标签重要文字（如标签和标题）可以使用您的主要或次要颜色。
此应用使用其辅助颜色（橙色800）来强调并引起注意。此应用程序将其原色（绿色800）用于标签，其粗细变化指示选中和未选中状态。3、文字清晰将文字放在图像上方时，通常会导致易读性问题。在文本和图像之间创建彩色图层可以确保文本清晰易读。
此应用在图像上方应用了蒙版，以确保其上方的文字清晰易读。4、图示图标有助于识别动作并提供信息。它们的颜色应与背景形成对比，以确保它们清晰可辨。
此应用程序使用其图标的原色（绿色800）和辅助色（橙色800）。Shrine使用其主色较深的色系（粉红色900）作为图标。
>>>
本文由WELLDESIGN独家编译，经授权请勿转载。
在线咨询
