命名 - Naming
2021-06-21 19:24:50    7    0    0
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

这可以扩展到更复杂的组件中,同时将在其中包含嵌套组件。根据经验,我们优先考虑功能和上下文,而不是变体或行为特征。

一个空状态的设计,在顶部显示一个插图,在中间显示一个文本,在它下面显示一个按钮

上一篇: 组织 - Organization

下一篇: 最佳实践:组件、样式和共享库

7 人读过
文档导航