面向前端开发人员的 UI/UX 技巧（第一部分）

这是“面向前端开发者的 UI/UX”系列的第一部分。每隔几周我会发布一篇新文章。
在每一部分中，我会讨论一个通用主题、一些关于某个元素的UI/UX 技巧，以及一个实用的UI/UX 模式。

在这一部分，我将与你分享关于颜色、按钮和自动保存图案的技巧。让我们开始吧。

一般主题：颜色

颜色本身是一个广泛的话题，值得用几篇文章来详细阐述。为了更容易理解，我们将把它分解成多个方面。

每个应用程序都应该有自己定义的颜色系统。目前最常见的颜色系统结构通常如下：

注意：实际上，根据应用的需要，颜色系统的结构可能包含更多元素。

还有一些非常有用的工具可以帮助您构建颜色系统（例如，它们可以让您知道哪些颜色与哪些颜色互补）：

假设你要开发一个应用程序，你可能会想知道应该选择什么颜色。基本上，你可以自由选择你喜欢的颜色。但是，有指导总比没有好，所以我给你一个：

按钮主要有 3 种类型：主按钮、辅助按钮和文本按钮。

根据每个操作的强调程度，您应该使用适当类型的按钮。

每个按钮应具有以下状态：

假设您正在构建一个页面来为用户配置设置。您可能会倾向于设计一个表单，然后在表单末尾放置“取消”和“保存”按钮。

现在，当用户更改任何内容时，他/她必须记得在离开之前按下“保存”按钮。这应该不会有什么问题，除非你有很多字段，并且“保存”按钮位于底部，超出了当前视口。那时，用户很可能不会注意到“保存”按钮的存在，并忘记按下它。DEV.to 本身就遇到了这样的问题：

在这种情况下，如果更改不重要且不会造成破坏，您可以放弃“保存”按钮，并且每当进行更改时，都会立即保存（并发出通知）。

如今，许多应用程序都采用了这种“自动保存”模式，以提升用户体验。例如，Google 日历：

前端开发者的 UI/UX 技巧（第一部分）到此结束。如果您有任何反馈，请随时留言。我会争取在下周发布第二部分，如果大家能对本文有所反馈，并认为它有用，我会更有动力继续更新。

非常感谢❤️。