emengweb
好名字
要使名称有效，它必须符合某些基本特征：它必须是可识别的，并且可以识别它所指的内容。即使似乎将该组保留为“Copy 23”，在创建后花几秒钟设置一个正确的名称，也将有助于提高设计过程的速度和秩序。那么，除了使用它的地方之外，名称应该如何命名？
它有一个逻辑结构
使用一些逻辑来构建名称很重要，它是可预测的并且将始终保持不变 - 不会经常根据情况而改变。也许这在组件中更为重要，这些组件通常具有长而复杂的结构。
它与视觉属性无关
我们之前提到的这个逻辑意味着使用上下文、函数或层次结构来命名某些东西。但不是随着时间的推移可能会改变的视觉属性，从而使名称变得无用。如果您根据元素颜色或其边框半径命名某些内容，一旦这些属性之一被修改，它将不再有用。但像往常一样，总会有例外，我们稍后会看到。
很短，但很有意义
在组件中，遵循结构的逻辑使我们以通常很长的名称结尾。一旦我们使用了一个实例（意味着组件的副本，而不是可编辑的），我们可以简化名称以尽可能减少它。这将使图层列表更容易在简单的视线中扫描。这里的重要一点是，只是为了使内容更短，我们不会牺牲名称的目的，即轻松识别它所指的内容。
很短，大家都知道
你知道“干杯”是每个人都知道你名字的酒吧吗？在团队中，所有团队成员都应该知道、同意和使用命名约定。不可能是从一个项目到另一个项目，从设计师到设计师（甚至在同一个产品内部）有不同的命名方式。
附带说明：如果您有一个分布式团队或有国际设计师，最好使用英文名称。这将使您的文件更容易理解，而无需考虑其他人所在的位置。
尺寸
一个界面充满了不同的大小，从文本到断点，或者元素之间的间距。最简单、最可升级的方式与我们在现实世界中使用的服装尺码系统有关。这是一个被广泛理解的非常普遍的概念。从小到大，它会是这样工作的：
xs = Extra small sm = Small md = Medium lg = Large xl = Extra large 2xl = Extra, extra large
或者，我们可以使用“xxl”而不是“2xl”，但我发现当大小开始增长时，如果我们排除数字并只使用“x”，则可读性会越来越受到损害。
还有其他命名尺寸的方法。其中一些是指动物或其他种类的类比。我觉得这很有趣，但在某些情况下并不清楚什么东西比另一个东西大，因此这种系统的用处是有限的（更不用说，它们也更难扩展。）举个例子，这就是我的意思是（再次，从小到大）：
mouse rabbit dog horse elephant whale
颜色
作为一般规则，就像其他事情一样，我们尽量不特别引用颜色（例如，“黄色”），而是更喜欢函数或上下文。如果这是不可能的或不够的，我们可以首先参考更广泛的视觉属性（例如“亮”或“暗”），最后，如果有帮助的话，使用更具体的东西。
类别
界面中的主要颜色可以分为“主要”、“次要”和“突出显示”，具体取决于它们的使用位置和功能。整个产品的功能应该是一致和连贯的。
- Primary用于具有交互性的元素，例如按钮和链接。
- 从某种意义上说，次要是一种互补色，用于与主要形成对比，例如对于不必如此突出的次要按钮。
- 另一方面，突出显示用于引起对某些具有重要作用的特定元素的注意，例如表单末尾的提交按钮。它还可用于指示活动元素，例如选定的选项卡。
除此之外，还有更多的类别具有更实用的存在，例如：
Neutrals Backgrounds Opacities Shadows Icons Texts
调色板
通常，我们不会只有一种原色或副色。相反，我们经常使用带有更多深色和浅色选项的调色板，这些选项通常从基础创建，用于悬停状态、禁用项目等。
在这些情况下，我们将基色命名为“00”：例如，“Primary / 00”。对于任何较暗或较亮的选项，我们生成大约 10 个步骤的比例，并根据其在该比例中的位置对每种颜色进行编号。因此，最后一步将是相应比例中更暗或更亮的选项。
Primary / 00 Primary / Dark / 10 Primary / Dark / 20 Primary / Dark / 30 Primary / Dark / 50 Primary / Light / 10 Primary / Light / 20 Primary / Light / 30 Primary / Light / 50
生成所有步骤对于能够参考位置很重要。显然，没有必要在我们的规模中使用所有这些。我们可以省略一些，那些我们认为不会使用的，比如在我们的界面设计中没有真正应用程序的那些。
组和层
图层要以最简单、最干净的方式命名，以方便阅读。当图层是符号或组件实例时，应替换简化版本的名称。
在组件或组内，图层名称应反映它们执行的功能（将保持不变，独立于其内容）——并且不会受到内容本身的影响。
图层必须易于阅读，但也易于识别。因此，在某些情况下，可能需要使用后缀来将一个元素与另一个元素分开，只需快速浏览一下即可轻松了解它的含义。当我们有两个彼此相邻的相同类型的层时，这特别有用。
组件
组件名称将从最通用到最具体，首先表示内容和功能，然后是其变体和状态。将其付诸实践的一种方法是：
Component / Function or hierarchy / Variant / State
在一个更图形化的例子中，我们可以有这样的东西：
Button / Secondary / Compact / Enabled
这可以扩展到更复杂的组件中，同时将在其中包含嵌套组件。根据经验，我们优先考虑功能和上下文，而不是变体或行为特征。