这是用户在 2024-10-30 11:14 为 https://evilmartians.com/chronicles/woah-opacity-a-full-guide-to-this-badass-hero-of-efficient-ui-de... 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

Woah, opacity! A full guide to this badass hero of efficient UI design
哇哦,不透明!这个高效 UI 设计的坏蛋英雄的完整指南

Cover for Woah, opacity! A full guide to this badass hero of efficient UI design

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.
设计辅助按钮可能比看起来更复杂,尤其是当您考虑它们在不同背景和表面上的显示方式时。浅色按钮在白色背景上可能看起来不错,直到您引入更多层,例如额外的灰色表面。突然,您的按钮不可见,您被迫创建多个按钮样式,每个样式都有自己的悬停和按下状态。

Placing light-colored buttons on a light gray background might cause them to blend in and become less visible

Placing light-colored buttons on a light gray background might cause them to blend in and become less visible
将浅色按钮放在浅灰色背景上可能会导致它们融合在一起并变得不那么明显

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.
这种方法不仅对灰色按钮有效,它适用于任何颜色,全面简化您的设计过程。

By using transparent colors you can easily fix this

By using transparent colors you can easily fix this
通过使用透明颜色,您可以轻松解决此问题

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:
透明颜色通过适应任何表面来解决这个问题,确保一致性,而无需增加您的设计工作:

Increasing the transparency by 3% will result in a good hover color that works on any surface. The same solid color works on white, but not on gray.

Increasing the transparency by 3% will result in a good hover color that works on any surface. The same solid color works on white, but not on gray.
将透明度增加 3% 将产生适用于任何表面的良好悬停颜色。相同的纯色适用于白色,但不适用于灰色。

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.
当谈到边框时,透明颜色几乎总是最好的选择。这是因为它们保持了各种表面的可访问性,并且在浅色和深色模式下无缝工作。与按钮和悬停状态不同,边框不需要相同级别的对比度维护,这使得透明度在这里成为明显的赢家。

This example from [HTTPie](https://evilmartians.com/chronicles/ui-design-for-httpie-macos-vibes-for-the-api-testing-client) demonstrates how transparent colors help avoid a lot of manual work

This example from HTTPie demonstrates how transparent colors help avoid a lot of manual work
HTTPie 中的这个示例演示了透明颜色如何帮助避免大量手动工作

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 是可以从中受益的应用程序的完美示例,其中用户定制是一个关键功能。透明元素会自动适应,以最少的努力提供一致的体验。

If your product uses transparency, you can change the background color and the whole product will adapt
如果您的产品使用透明度,您可以更改背景颜色,整个产品就会适应

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 将非常一致。

The change in contrast ratio for gray colors is insignificant when done correctly

The change in contrast ratio for gray colors is insignificant when done correctly
如果操作正确,灰色对比度的变化是微不足道的

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% 左右,对比度的变化是微不足道的。

Change in contrast ratio for dark mode is insignificant too

Change in contrast ratio for dark mode is insignificant too
暗模式对比度的变化也微不足道

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.
半透明边框会产生重叠效果,在视觉上分散注意力——设计重叠元素时请注意这一点。

**Pro tip:** you can easily fix this by setting 1px paddings

Pro tip: you can easily fix this by setting 1px paddings
专业提示:您可以通过设置 1px 填充轻松解决此问题

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。

100 moving transparent rectangles on a gradient background at 58.8 fps on Intel Core i3

100 moving transparent rectangles on a gradient background at 58.8 fps on Intel Core i3
在 Intel Core i3 上以 58.8 fps 的速度在渐变背景上显示 100 个移动透明矩形

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 这样更复杂的方法可以提供更好的结果,但它们通常需要更多的时间和资源。对于初创公司和快速发展的团队来说,在设计中采用透明度可以带来更干净、更有效的结果,而不需要无穷无尽的变化和风格!

Schedule call

Irina Nazarova 伊琳娜·纳扎罗娃 CEO at Evil Martians 邪恶火星人首席执行官

Fighting the challenges of UI design or product problems? Our experts in developer tools and developer-first startups are here to help implement a unique strategy for you.
应对 UI 设计或产品问题的挑战?我们在开发人员工具和开发人员优先的初创公司方面的专家随时帮助您实施独特的策略。

Send email instead 改为发送电子邮件