By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
命名 - Naming
2021-06-21 19:24:50    19    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

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

19 人读过
文档导航