[译]如何在 Jetpack Compose 中进行颜色原型设计

在这篇短文中，我将介绍在开发新的UI设计原型时如何管理和使用颜色。这主要面向那些需要快速开发，但没有品牌指南或预制设计的开发者。

在这些创造性的时刻，优先考虑快速迭代是最重要的，让我们来看看如何实现这一点。

借鉴预定义的调色板

在我看来，这是优化我的选色过程中最重要的技巧。

在为设计添加颜色时，我经常觉得 MaterialTheme 的颜色选择太过受限，最终不得不去调整十六进制的颜色值。

无论是复制粘贴十六进制代码，还是与 Android Studio 有问题的颜色选择器作斗争，这都会浪费时间。

相比之下，我在 Web 开发项目中使用 tailwindcss 时会更容易些。Tailwind 提供了一个预制的调色板，包含 22 组颜色，每组都有 11 个变体。

这些组以颜色名称标识（红色、橙色、粉色、石板色等），变体则用数字标识（50、100、200、... 800、900、950）。

变体数字决定了颜色的明暗程度。50 是最浅的，950 是最深的。

因此，在 Tailwind 中选择颜色就像选择一个颜色和一个数字一样简单。对我们这些非设计师来说足够简单了 ;)

<div class="bg-yellow-900">
	<h1 class="text-red-200">We live in a twilight world</h1>
</div>

好了，今天的 HTML 到此为止。我们如何在 Jetpack Compose 中应用这个呢？

让我们把所有的十六进制值作为 Color 对象添加到一个 Kotlin 文件中。我们也可以像它们的 Web 对应项那样命名变量。所以 red-200 变成 Red200。

我在之前的项目中已经做过这个了，所以你可以直接从这里复制。 有了这些新的颜色值，我们可以在 Compose 中这样写之前的代码示例：

Box(modifier = Modifier
	.background(color = Yellow900)
) {
	Text(
		text = "We live in a twilight world",
		color = Red200,
	)
}

将这个文件复制到任何项目中，我就能大大减少在选择令我满意的颜色上浪费的时间。

原来我只需要 242 种颜色，而不是整个 RGB 光谱！

深色/浅色颜色选择器

当采用这种自定义颜色的方式时，我们经常忘记支持浅色模式（或者对于日行者来说忘记深色模式 ☀️）

所以对于原型设计，我有一个快速的技巧，可以轻松指定深色和浅色。

@ReadOnlyComposable  
@Composable  
infix fun Color.or(light: Color) =  
    if (isSystemInDarkTheme()) this else light

这个中缀扩展函数只是检查当前系统的主题设置，并将深色或浅色变体颜色应用到各自的模式中。

然后我可以在之前的代码中使用这个函数来快速指定颜色的浅色变体，像这样：

Box(modifier = Modifier
	.background(color = Yellow900 or Blue200)
) {
	Text(
		text = "We live in a twilight world",
		color = Red200 or Orange700,
	)
}

希望通过一点语法糖，我们可以从一开始就更容易地考虑两种主题。

预览颜色

最后，当查看我们的颜色更改结果时，10 秒或更长时间的构建是不可接受的。为了快速迭代我们的设计，我们需要更快地看到变化。

在 Android 项目中，预览功能就派上用场了，通常只需要 2-3 秒就能看到所做的更改。这些功能在稳定性方面已经有了很大进步，在调整 UI 设计中的颜色值时为我节省了大量时间。

通过预览，你可以为应用中的元素制作设计。你甚至可以更进一步，创建一个仅用于预览的视图，但包含使用你的颜色的不同主题可能性。

这可能看起来像一个品牌展示板，其中不同的颜色应用在形状、文本和图标上。

一目了然，你可以轻松注意到一个颜色更改对图标有效，但对文本无效。

如前所述，这在 Android 项目中运行良好。但在使用 Compose Multiplatform 时，情况有点不同。多平台的预览功能正在开发中，但我还没能可靠地使用它们。而使用 Android 目标进行预览也相当麻烦。

然而，多平台在预览方面的不足（暂时的），在热重载方面得到了完全的弥补。这个过程值得单独写一篇文章，但目前为止，它在预览颜色等方面是一个非常有用的工具。