Sketch文本样式怎么命名?

错误地命名符号和共享样式不仅会分散您的注意力,而且不必要地通过文件进行数十亿次的搜索,而且肯定会破坏您的团队合作

在开始为大型项目工作之前,使Sketch文件保持整洁似乎有点麻烦。这样,您命名符号和共享样式的方式不仅会影响团队中其他设计师的工作,而且还会影响后来将您的设计转变为可运行应用程序的开发人员。

在我的职业生涯中,我看到设计师使用了许多非常疯狂的命名约定,但是最常见的情况是根本没有命名约定。但是,创建一个命名约定以加快您的工作并保持设计整洁,即使您还远未成为专家,也不是火箭科学

您需要在Sketch中命名什么?

Sketch中有四种主要的对象类型值得合理地命名,因为它对工作流程有影响。这些是:

  • 文字样式

命名约定:什么是BEM?

UI,UX,图形或产品设计师(无论如何称呼)可以肯定地从前端开发人员那里学到的东西是通过应用一些简单且可用的结构驯服创意混乱。这就是命名约定的工作方式。

前端开发中通常使用两种主要的命名约定,例如Atomic Design,OOCSS,SMACSS等,但是BEM是适用于Sketch的超级容易使用的广泛约定。

BEM是“ 块元素修饰符 ” 的缩写,基本上是对所有含义的不言自明的定义。

Block是一个独立的元素,具有独立的含义。但是,元素没有独立的含义,并且为了获得含义而与块打结。修改器虽然会更改其行为或外观。因此,需要创建任何新类的命名约定:

.block —元素修饰符{css!}

这使我们可以快速了解类之间的关系以及代码中的内容。

对设计师意味着什么?

显然,设计人员通常不会(通常)选择CSS作为其主要设计工具-许多公司的行业标准是Sketch,它在创建任何共享项目的命名约定方面非常灵活-无论是文本样式,图层您想要创建的样式或符号。基本上,必须遵循的唯一规则是,为了创建从大类别到子类别和项目或经过修改的项目的路径,必须命名一种新的共享样式,例如:

类别/子类别/项目/修改

重塑轮子通常是一种处理材料的昂贵且无效的方法,因此,可以使用BEM并通过以下方式命名样式,而不是创建新的自定义命名约定:

块/元素/修饰符

超级简单。

命名文字样式

在每种印刷系统中,都需要定义标题,正文和不同功能的文本(例如标签文本样式)。因此,它适用于您可以在Sketch中定义的文本样式,以使设计一致。

为什么?

在项目开始时创建纯文本样式的主要优点是,设计良好的印刷系统的关键是其不同元素之间的比例-h1与h2的比例,h3与正文的比例,body与标签的正文以及以此类推。

如果您在一开始就进行了定义,则可以轻松地创建几个不同文本用法的屏幕(例如完全没有正文的首页,具有很多正文的文章页面,带有小标题的设置以及使用标签,提示文字,文字链接和标题),以检查您的文字样式比例如何相互配合。是否需要更改?您更改了文字样式设置,整个设计中的任何地方文字样式都很好。

怎么样?

首先,您必须定义 -在印刷系统中具有独立含义的元素。我建议为此使用标准的HTML命名-大标头使用名称“ h1”,小标头使用名称“ h2”,正文文本“ body”,标签文本“ label”,依此类推。

但是,您可能需要应用与block- element成对的东西。可以是上面示例中的大小,也可以是下面示例中的颜色。您也很可能希望对该元素有几个修饰符 -f.ex。具有多种颜色或对齐方式。

基本上,要决定将哪个属性设置为元素和修饰符,必须使用一些常识和设计专业知识。我使用的层次结构是大小的变化比颜色的变化更重要,颜色的变化比对齐类型的变化更重要。

要很好地创建样式树,只需将其命名为“ block / element / modifier ”或查看以下示例:

2020-01-19