简短介绍
记录设计的主要原因是让团队中的每个人保持一致,我的意思不仅仅是设计师。通过拥有一个主要参考站点,其中列出了所有设计规范、实践和工作流程,您可以将其用作核心咨询,避免重复概念或将它们分散在不同的地方。
文档超越了界面本身。围绕设计过程有很多事情也是交流所必需的:从决策背后的基本原理到行为,从日常实践到一般工作流程。目前,本出版物的范围将涵盖与产品视觉方面相关的所有内容。
在您的设计文件中记录
现在比以前更常见的是找到帮助将您的设计软件与文档可以存在的其他网站连接起来的工具。他们中的大多数通过插件工作,这些插件可以让您将设计保持在一个中心位置,然后通过第三方软件进行同步。我们稍后会讨论这个(或者你可以直接跳到文档工具部分。)
不幸的是,设计工具和文档工具的成熟度远远落后于我们现在想要的。出于这个原因,正如我们将在下面看到的,我仍然更喜欢将这些工具与文件内文档结合使用。这样做的好处是可以根据您想要的粒度级别对设计的通信进行微调,但需要一些手动工作以使其保持最新状态。
在接下来的几节中,我们将看到在记录设计的主要部分时要记住的内容。
颜色
为了记录颜色,我们需要遵循一系列步骤: 说明它们的解剖结构(意味着形成颜色资产的不同部分);定义它们将如何分类或划分;最后,它们之间的关系是什么,请记住,相同的颜色值可以在界面中具有不同的应用程序。
解剖学
颜色非常简单,因此要定义它,我们只需要一个名称和一个值,以及两者的视觉表示。要在我们的文档文件中执行此操作,创建一个具有通用结构的符号或组件以稍后基于该结构记录调色板是有用的。
这是一个非常简单的示例,但将复制此通用结构以记录界面中的每种颜色。还有一点要记住:颜色通常是比例尺的一部分,它们在上面有一个位置。
只有一种原色是很少见的。相反,我们更有可能将它的一些变体应用于不同的情况,例如悬停在按钮上时。所有这些都需要定义和记录,我们将在接下来看到。
定义
为了直观地解释颜色结构或分类的工作原理,除了将它们创建为变量或样式之外,您还可以将它们排列在样式指南内的特定页面上。
我们刚刚看到的原色可能是“主要”类别的一部分,在那里我们将有原色和副色。除此之外,一个项目通常会在调色板中包含一些其他的分区。
Main Neutrals Backgrounds Opacities Icons Texts
我们将使用 Neutral 类别来定义它包含的不同值的示例。
应用
正常的