什么是UI设计系统？

UI设计系统是一组用于设计、代码和组件的规范，可以将其视为一份设计协作的说明书，也可以当作一个素材库，用于收集资源并在你的设计中使用它们。

为什么我们需要UI系统？

要在界面设计的每个部分使用一致的UI规范，可能会是一个大工程。UI系统帮助用户直观地导航和使用你的程序，并且可以使你程序中各个地方设计保持一致，让用户能够更加快速熟悉你的设计风格。UI系统通过为团队提供更加结构化和引导性的方式为你的产品设计界面，从而来帮助团队更有效率的进行开发。

创建UI设计系统

创建UI设计系统最好的方法是建立一个列表清单，其中包括所有不同的模式、颜色、文本样式和你将在设计中使用的其他东西。它应该是一个清晰的清单，里面应该显示来所创建产品（网站或APP）所需的所有组件和功能。如下所述，创建完整的列表需要时间。UI设计系统需要时间和精力的投入，可能会很累，但不要放弃！在完成它的时候你将会得到一个干净而统一的UI设计规范，所以请继续加油！

情绪板和调色板

让我们首先创建一个情绪板和调色板，这样就可以设置你产品的主题颜色，并对你的设计有很好的了解。你的情绪板可以是流行UI的图片，鼓舞人心的产品或图片，你的灵感来源。你的情绪板还可以帮助你选择颜色搭配方案，但是你的颜色选择也是基于你的研究。因此你需要列出你这个应用所需要的主要颜色、次要颜色以及第三种颜色，不要忘记你的成功色和错误色！另外还需要给这些颜色设定一些灰度。灰度用于UI设计系统中的各种元素。大多数界面至少需要以下几种灰色：

• 浅灰色的背景
• 边框、线条、笔划或分隔线的稍暗的灰色。
• 副标题和正文的中灰色。
• 主要标题，正文和背景的深灰色理想情况下，保留原色的色调和色调，它们可能会有用。

最后，我们可能希望为每种颜色添加色调或色调变化。在设计用于添加浅色背景或深色笔划的组件时，这些功能非常有用。

情绪板

调色板

边界半径和阴影

接下来，让我们开始为UI设置边框半径和阴影。边框半径设置为UI卡、表的色调，并更改UI的整体外观和感觉。现在你可能会问我怎么知道我想要的边缘有多圆？

这取决于你想让用户处于什么样的情绪状态。如果你的半径更圆，它可能会变得可爱或更友好一些，如果你决定保持它原本的方形，它可能看起来会显得严肃一些。我的建议是圆角半径始终保持在2-8像素之间。

边界半径

我们的阴影主要用于将深度和透视应用到我们的设计中。最近，阴影一直是大势所趋，它们用于区分UI中的多个元素。这四个阴影应足以为我们系统中的每个组件进行样式设计：

• 一个微妙的阴影，以提高组件的交互性以及增加可用性。
• 悬停效果对组件的影响更明显。
• 一个范围较大的阴影，可以为下拉/弹出窗口和其他类似组件提供类似透视的效果。
• 用于模拟组件的远程阴影。

类型比例

没有任何一个界面是没有层级结构的。类型遵循节奏。你需要设定的字体以及不同标签的比例大小。这可能听起来非常困难以及耗费时间，但感谢https://type-scale.com/等工具让我们的设计能够变得更加轻松。你需要做的就是选择一个类型比例，它列出了可以使用的不同大小。

• 默认的文本大小，会出现在我们的各种网站、UI界面等许多地方。16px是许多浏览器默认的字体大小，所以我们可以选择使用它。
• 例如，博客中的大型正文副本稍大一些。
• 标题和小标题可以选择两个较大一些的尺寸。
• 例如，对于定价页面上的价格字体，可能需要一个非常大的尺寸。
• 我们还需要一些较小的尺寸，以较小的正文复制，输入提示和其他辅助文本。

图标

使你的图标统一，确保他们使用相似的风格，并遵循一定的设计规范。对于初学者来说，你可以使用免费成套的Icon，这样你就不会花太多时间自己制作图标，但总有一点是要确保它是统一的。

按钮，滑块和进度条

按钮是UI设计中非常重要的元素。按钮允许用户只需轻按一下即可采取行动并做出选择。按钮传达动作信息，因此应根据其工作功能进行设计。它们应易于查找和识别，同时清楚地表明它们允许用户完成哪些操作。现在有各种各样的按钮样式。按钮的显示状态也是界面设计的一个重要部分。

• 按钮
• 单选按钮
• 复选框
• 导航按钮

滑块，进度圆可帮助你定义这些小元素，使你的UI看起来能够更加统一。分解它们也会帮助你更好地设计其他元素。

下拉列表，标签和弹出窗口（复杂元素）

现在我们已经设置了一个规范，你可以这些所有的元素来构建下拉列表，标签和弹出窗口！你可以按照下面显示的不同类型去设计下拉菜单和弹出窗口。

结论

我基本上涵盖了大部分的元素内容。你始终可以使用此规范添加其他元素。总而言之，我想说保持界面简洁，不要过分使用在你的界面里。设置元素后，你可以开始将这些元素放入设计中。对于间距，你们可以使用8点网格系统。

作者：Rahul Goradia