Woah, opacity! A full guide to this badass hero of efficient UI design
哇哦,不透明!这个高效 UI 设计的坏蛋英雄的完整指南
Topics 主题
Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations—making your workflow more efficient and flexible. So, let’s talk about the ways opacity can be a game-changer in your design practice—and especially useful for startups and fast-moving teams!
透明颜色是现代操作系统的主要内容,但出于某种原因,网络应用程序仍然没有充分利用现代界面设计的这一奇迹。当您将透明颜色正确集成到您的设计工具包中时会发生什么?您可以最大限度地减少设计令牌、样式和组件变体的数量,从而使您的工作流程更加高效和灵活。那么,让我们来谈谈不透明度如何在设计实践中改变游戏规则——对于初创公司和快速发展的团队尤其有用!
1. A simpler solution for buttons
1. 更简单的按钮解决方案
Designing secondary buttons can be more complicated than it seems, especially when you consider how they’ll appear across different backgrounds and surfaces. A button with a light color might seem fine on a white background—until you introduce more layers, like additional gray surfaces. Suddenly, your button isn’t visible and you’re forced to create multiple button styles, each with its own hover and pressed states.
设计辅助按钮可能比看起来更复杂,尤其是当您考虑它们在不同背景和表面上的显示方式时。浅色按钮在白色背景上可能看起来不错,直到您引入更多层,例如额外的灰色表面。突然,您的按钮不可见,您被迫创建多个按钮样式,每个样式都有自己的悬停和按下状态。
And here’s where opacity shines: by using transparent colors, we eliminate the need for these extra styles. One set of transparent colors adapts to various backgrounds, requiring only three states: idle, hover, and pressed.
这就是不透明度的亮点:通过使用透明颜色,我们消除了对这些额外样式的需要。一组透明颜色适应各种背景,只需要三种状态:空闲、悬停和按下。
This approach isn’t just effective for gray buttons—it works for any color, simplifying your design process across the board.
这种方法不仅对灰色按钮有效,它适用于任何颜色,全面简化您的设计过程。
2. Streamlined and adaptable states
2. 精简且适应性强的状态
Like buttons, many interface elements require distinct states: hover and pressed. Designing these states with solid colors can lead to visibility issues, especially on different backgrounds
与按钮一样,许多界面元素需要不同的状态:悬停和按下。使用纯色设计这些状态可能会导致可见性问题,尤其是在不同的背景下
Transparent colors solve this problem by adapting to any surface, ensuring consistency without multiplying your design work:
透明颜色通过适应任何表面来解决这个问题,确保一致性,而无需增加您的设计工作:
3. Borders: the perfect case for transparency
3. 边框:透明度的完美案例
When it comes to borders, transparent colors are almost always the best choice. This is because they maintain accessibility across various surfaces and work seamlessly in both light and dark modes. Unlike buttons and hover states, borders don’t require the same level of contrast maintenance, making transparency a clear winner here.
当谈到边框时,透明颜色几乎总是最好的选择。这是因为它们保持了各种表面的可访问性,并且在浅色和深色模式下无缝工作。与按钮和悬停状态不同,边框不需要相同级别的对比度维护,这使得透明度在这里成为明显的赢家。
4. Effortless theme-ability
4. 毫不费力的主题能力
If your application offers customizable themes (like a white, greenish, or blue-ish background) transparent colors are invaluable. They blend naturally with different surfaces, eliminating the need for separate color sets for each theme.
如果您的应用程序提供可自定义的主题(例如白色、绿色或蓝色背景),则透明颜色的价值是无价的。它们与不同的表面自然地融合在一起,无需为每个主题设置单独的颜色集。
Perfect examples of apps that can benefit from this are Slack or Zed, where user customization is a key feature. Transparent elements automatically adapt, providing a consistent experience with minimal effort.
Slack 或 Zed 是可以从中受益的应用程序的完美示例,其中用户定制是一个关键功能。透明元素会自动适应,以最少的努力提供一致的体验。
All that said, while properly utilizing opacity can offer significant benefits for your designs and workflows, there are a few considerations to keep in mind.
话虽如此,虽然正确利用不透明度可以为您的设计和工作流程带来显着的好处,但仍有一些注意事项需要牢记。
Contrast levels (WCAG/APCA compliance)
对比度级别(WCAG/APCA 合规性)
The contrast of transparent colors can vary depending on the background. For instance, #000000 at 8% opacity might meet contrast requirements on white and light grey backgrounds but not on darker backgrounds. If strict accessibility compliance is essential, solid colors may be necessary.
透明颜色的对比度可能因背景而异。例如,不透明度为 8% 的 #000000 可能满足白色和浅灰色背景的对比度要求,但不能满足较暗背景的对比度要求。如果必须严格遵守可访问性,则可能需要纯色。
We’ve built a little demo to understand how contrast ratio correlates with opacity and background colors. The results are interesting to say the least, if you have a set of gray colors for surfaces (for example, Radix Colors Gray scale) and #000000 color with opacity range up to 20%, your CR will be pretty consistent.
我们构建了一个小演示来了解对比度如何与不透明度和背景颜色相关。至少可以说,结果很有趣,如果您有一组表面灰色(例如,基数颜色灰度)和不透明度范围高达 20% 的 #000000 颜色,您的 CR 将非常一致。
Pretty much the same holds true for the grayscale of Radix colors in dark mode and a #FFFFFF square. The change in contrast ratio is insignificant if you keep the opacity around 13%.
对于深色模式下 Radix 颜色的灰度和 #FFFFFF 方块来说,几乎同样如此。如果将不透明度保持在 13% 左右,对比度的变化是微不足道的。
You can still use opacity in your Figma designs, but by converting everything to solid colors and adjusting little mistakes; this is how the old Figma design system used to work.
您仍然可以在 Figma 设计中使用不透明度,但可以将所有内容转换为纯色并调整小错误;这就是旧 Figma 设计系统的工作原理。
Border overlapping 边界重叠
Semi-transparent borders can create an overlapping effect that’s visually distracting—be mindful of this when designing overlapping elements.
半透明边框会产生重叠效果,在视觉上分散注意力——设计重叠元素时请注意这一点。
Performance 表现
While transparent elements generally perform well, older devices or those with weak GPUs—such as most budget smart TVs or 10-year-old smartphones—might experience performance issues, especially when displaying fullscreen opacity. Testing on a range of devices is crucial to ensure a consistent user experience. We’ve built a simple test stand for you to test if transparency will works on your device. We ran this test on a wide variety of machines, including an old laptop from 2011 with Intel Core i3, and got consistent 60 fps everywhere.
虽然透明元素通常表现良好,但较旧的设备或 GPU 较弱的设备(例如大多数预算型智能电视或 10 年前的智能手机)可能会遇到性能问题,尤其是在显示全屏不透明度时。在一系列设备上进行测试对于确保一致的用户体验至关重要。我们为您构建了一个简单的测试台来测试透明度是否适用于您的设备。我们在各种机器上运行了此测试,包括 2011 年配备英特尔酷睿 i3 的旧笔记本电脑,并且在任何地方都获得了一致的 60 fps。
Opacity is a powerful tool that can simplify your design process, especially when time is limited; it’s an 80% solution with only 20% of the effort.
不透明度是一个强大的工具,可以简化您的设计过程,尤其是在时间有限的情况下;这是一个 80% 的解决方案,只需 20% 的努力。
Sure, more sophisticated approaches like apcach or OKLCH can provide even better results, but they often require significantly more time and resources. For startups and fast-moving teams, embracing transparency in design can lead to cleaner, more effective results—without the need for endless variations and styles!
当然,像 apcach 或 OKLCH 这样更复杂的方法可以提供更好的结果,但它们通常需要更多的时间和资源。对于初创公司和快速发展的团队来说,在设计中采用透明度可以带来更干净、更有效的结果,而不需要无穷无尽的变化和风格!