Material Design Sketch Library

maxOS
maxOS
Dec 20, 2017 · 7 min read

概述

Sketch 47 中引入的 Library 功能简直就是有一大杀器,对于设计团队的协作来说有很大的提升。我比较少用到协作,但是快速迭代的节奏让我需要更快速的完成原型和交互方案。再次之前我设计了一整套基于 Google Material Design 的模版,每次设计的时候都将模版复制一份,利用模版中设计好的组件来拼凑成合适的页面。但问题是每个 Sketch 文件都包含了一份相同的模版,而且对于模版后续的修改也无法同步到之前的文件中,也会有不少的问题。

Library 可以说解决以上大部分的问题,因此我重新设计了 Material Design Toolkit,来配合 Sketch Library。你可以在这里找到该项目:GitHub — jay1803/Material-Design-Sketch-Library: Sketch Library for Rapid Prototyping,快速原型工具

Material Design Sketch Library(MDSL)作为快速原型工具,依旧是基于 Material Design 设计,毕竟 MD 是目前比较成熟且稳定的设计方案,并且可以跨平台使用。MDSL 将 MD 中组件重新设计,并且希望扩展了使用范围,包括对复杂系统的支持。目前 MD 设计方案依然比较偏移动端,在复杂的系统设计上并没有很好的方案,例如列表构造器、手风琴这类的设计模式在 MD 中并没有体现,这也是 MDSL 会包含的内容。但这些内容太多,我只能尽力而为,如果你对项目有兴趣,欢迎 Fork。你可以根据自己的需求重新设计,也可以在原有的基础上添加并提交。

Sketch 的 git 提交是个很大问题,目前并没有很好的解决方案,第三方的服务也有很大的问题。因此这需要合作讨论才能解决。你可以在这里加入 Slack 讨论组:MDSL-GIT。(链接将在 2018-01-20 过期)

以下是对 MDSL 文件结构和简单说明,作为简单的使用手册参考。你可以看在 Assets 文件中看到本文。

用词说明

本文中出现的字词可能与公认的意义不同,特别是借用了编程领域的一些词(如变量),为了更好的说明 MDSL,将在此对这些名词进行解释。

  • 变量:assets,在 MDSL 文件中名称通常会包含 assets,是组件的组成部分。因其状态在组件中是可以改变的,所以称之为变量。
  • 组件:components,具体的 symbol。由变量和静态的元素组成。
  • 集合:Sketch 文件。
  • 目录:组件的目录,也就是 symbol 菜单下的目录结构。
目录

结构

Material Design Sketch Library (MDSL)由多个 Sketch 文件组成,这些文件可能会不断的扩展,也可能会增多。文件主要分为两类,一类是全局变量,例如本文件。一类是组件集合,包括 Buttons、Cards、Dialogs 等。

1. 全局变量

Assets 文件可以理解为是 MDSL 的全局变量设置,全局变量会被用于其他的组件当中,作为全局的变量而存在。对全局变量的更改可能会影响到其他集合。

2. 组件集合

组件集合之间是相对独立的,组件集合是对相似类型的聚合,例如 button、tag、tips 都被聚合在 Buttons 中,因为这三种在形态上比较类似。因此集中在一个 Sketch 文件中。

文件结构

在一个 Sketch Library 文件中,通常会根据类型分成几个页面。类型是一种组件的集合,例如 button、tag、tips,被称之为类型。在一个文件中,类型被储存在独立的页面中。

除了组件类型页面,最开始的是手册页面(Manual),手册是对当前集合的使用说明,内容可能会包括组件的组成部分,以及具体的组件使用方法和案例,例如本页面。

组件类型页面按照首字母顺序进行排列即可。

页面结构

在一个单独的类型页面中,包括两种元素,一种是本地变量;另一种就是具体的组件。

1. 本地变量

assets 相当于是本地变量,其作用域通常仅限于当前页面。有时候变量也会由其他更细小的变量组成。嵌套过多的变量会让组件变得很难用,合理的控制组件所保护的变量也是在设计中需要考虑的一部分。

2. 组件

组件由变量和静态元素构成,变量包括来自 Assets 的全局变量以及当前的页面的本地变量。这些变量在具体的组件中,是可以通过操作栏来进行替换的。

在有些组件中,虽然可以使用变量来构成,但这部分变量在该组件中并不需要更改,此时可以将变量替换为静态元素。例如 Assets 文件中的 background 变量,在多数时候都不需要进行变更,当组件中嵌入 background 变量就需要根据组件所保护的变量数来进行权衡。

命名

组件有很多种分类方式,为了统一格式,在 MDSL 中,所有的组件会按照「集合/类型/子类/尺寸/主题/状态」来进行组合。考虑到目录的宽度和深度,基本不会在某个组件中出现完整的目录结构,他们通常会在某个子目录中进行合并,以平衡深度和宽度。理想的宽度与深度为 7x3,每个目录中有 7 个左右(5–9)的子目录,每个目录最深为 3 层。

当该目录下的子目录数量较少时(不超过 7 个),可以考虑与子目录进行合并,放在同一级目录中。例如有些「类型」中只有一种「子类」,那么就可以跳过该层次直接展示「尺寸」。

对于名称,如果是在同一层级通常使用下划线 _ 来连接名称例如 icon_text;跨层级的则使用斜杠 / 来连接,例如 image/1_1;合并层级的时候,通过短横线 — 来连接多个层级,例如 md-dark。

例如:Buttons/button/icon_text/small/dark/active,考虑到宽度深度可能会调整为:Buttons/button-icon_text/small-dark-active。对于一些常见的组件,也可以对名称进行简写,button 可以简写为 btn,small:sm,简写并没有统一的标准。

1. 集合

集合是相似类型的聚合,例如 button、tag、tips 都被聚合在 Buttons 中,因为这三种在形态上比较类似。在实际中,集合其实是一个 Sketch 文件。

2. 类型

类型是一种组件的集合,例如 button、tag、tips,被称之为类型。类型被储存在独立的文件中,在文件中,一个页面是一个类型。

assets 是一种较为特殊的类型,它不存在于单独的页面中,但却有一个单独的类型目录。这并不符合 assets 作为本地元素的身份,但是因为类型有时候需要向下合并,所以 assets 目录将当前文件中的 assets 都整合起来,并在 assets 目录下根据具体的类型在分类。

3. 子类

子类是对类型的再次分类,例如在 button 中,有带 icon 的,带 icon 的也有在左边和右边的。不同的子类在组件的组成元素上会不同。

4. 尺寸

在子类下,同样的一个纯文字的 button,会有不同的尺寸,这些尺寸根据使用情况和设备的不同而设计。

尺寸目前固定为以下几种:

  • xs:最小
  • sm:较小
  • md:中等
  • lg:大型
  • xl:超大

目前这些尺寸并没有固定,根据不同的组件会有不同。

5. 主题

主题通常指包括暗色和亮色两种,一般情况下并不需要主题这个层级。主题通常通过 dark_ 和 light_ 标记在组件的前面。

6. 状态

对于有些组件会有状态区别,多数组件的状态会直接通过其中的元素进行修改,例如 input 组件,但也有些组件的状态需要特殊对待,例如在透明度上需要区别的 button。


本文略显仓促,也无法说明我在设计 MDSL 中所有心得,我会在之后对其中的体会再做总结。不过文件结构和命名规范对于创建新的 Sketch Library 也适用,而具体的设计细节和结构,现在还很难得出很好的方案。

如果你对此感兴趣,别忘了在这里给我反馈。GitHub — jay1803/Material-Design-Sketch-Library: Sketch Library for Rapid Prototyping,快速原型工具

maxOS

Written by

maxOS

UX Designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade