利用零宽连字(‍),为设计 Sketch Symbol 提供新思路

公司内 B 端项目的表单比较多,经常有各种编辑页、功能配置页等。

所以最近在做到一个编辑页调整的需求时,也和前端老哥沟通了一波,把公司项目里常用到的表单做成了组件。后续我打算做成 Sketch Symbol,同步到组件库内。这时出现了一些耐人寻味的问题。

由表单组件构成的课程编辑页
由表单组件构成的课程编辑页

⊙ 耐人寻味的问题

拿其中一个最基础的表单来做例子。标题旁边,可能会出现「示例」入口;而表单的右侧扩展区域,根据业务需要会出现四种情况,一是占位符文本,二是已填写的内容,三是两种文本同时出现,四是没有文本。

表单组件需要支持的四种情况
表单组件需要支持的四种情况

把所有情况抽象出来,实际上我们要用 Sketch 组件来控制不同字段是否展示。而且字段不同,其文本颜色也不同。(控制图标是否展示是比较基础的内容,这里不赘述了,聚焦重点问题。)

实际上要解决的问题
实际上要解决的问题

17年我在油管播主 Pablo Stanley 的频道里学习 Sketch 时,处理上述情况的方式是再多做一个组件。因为 Sketch 到目前为止都不支持在组件外给里面的文本设置颜色,当前最多也只能更换用组件做的图标。

所以以往常规的做法是:

  1. 做多个表单组件,需要展示哪种情况就直接切换;
  2. 做一个表单组件,多个文本组件,利用 Sketch 组件的 Override 功能来控制不同文本类型是否出现,以及各文本字段的值。
两种常规做法
两种常规做法

以往我也一直用这两种方法来做,深知他们的利弊。

这两种方法均能达到目的,但是会创建多个组件,造成组件库冗余,不便于管理。而且文案需要来回修改时需要在组件下拉框内切换选择,操作较繁琐。其他同事上手时学习成本也颇大。

2021年了,用 Sketch 组件来控制文本显示 & 文本颜色有没有更好的方式?

答案是有的,最后我还会放上源文件,有兴趣的伙伴可以下载来试试实际效果,是否会比以往的组件方便。

⊙ 我有独特的做 Symbol 方式

基础实现

最开始我也是想用上面描述的第二种方法来实现。但这样组件库就会有多个冗余组件。工具线的设计是我负责的,不太乐意见到这种情况的发生。如组件需要后续迭代,冗余组件只会越来越多。

所以我这次想试试不走寻常路。不在内部额外嵌套组件,纯靠一个表单组件来控制不同文本类型是否出现,以及修改文本字段的值。做到如下图一般的效果:

理想效果:用一个表单组件,控制多种样式
理想效果:用一个表单组件,控制多种样式

首先 Sketch 是不允许在组件外改文字颜色的,所以基于业务,表单组件内需要有三个不同颜色的文本图层,以确保在组件外可自由改写各字段的值。

  1. 示例 #F73657 (产品的品牌色)
  2. 占位符文本 #999
  3. 已填写文本 #333

而因为占位符文本会被已填写的内容替换,所以组件内可以将两个字段重叠,确保位置一致。

制作组件(一):在组件内创建文本图层
制作组件(一):在组件内创建文本图层

另一个问题是需要控制字段是否显示。如果用旧方法,只要将文本做成组件,在右侧 Override 控制是否展示即可。但我们不做新组件,只能靠文本图层唯一一个可以 Override 的内容:字段的值来做文章了。

字段的值是什么,才能让我们看不见文本?

字段的值是空格的时候,我们就看不见文本了。所以,我们可以基于上一步骤做出来的组件,给占位符字段输入一个空格,给已填写的字段输入对应内容,我们已经能够做到「控制字段是否显示」了。

制作组件(二):对于不想展示的字段,右侧 Overrid
制作组件(二):对于不想展示的字段,右侧 Overrid

更进一步

上述步骤已经可以达到我们的目的,但每次拖一个组件出来都要给不需要展示的内容输入一个空格,操作仍然繁琐。

我突发奇想,要不干脆直接将源组件内的字段内容,填入一个空格。这样做之后,组件默认不展示任何文本(因为是一个空格,我们看不见),只有在右侧 Override 栏内给某个类型填入相应的文案,才会显示出来。

然而事情并没有这么简单。Sketch 里我们如果给文本图层只输入一个空格键,回车之后图层会被自动删除。估计 Sketch 是为了减少冗余图层的出现,认为纯空格的图层没有作用,直接将图层清理了。

Sketch 自动清理仅有一个空格图层
Sketch 自动清理仅有一个空格图层

然而我也不是那么简单,就是要跟 Sketch 硬杠。因为前段时间了解了一些前端、网页开发相关的知识,了解到网页内有多种空格,而且这几种空格所占的宽度,对应的 Unicode 都不一样!

所以我在 Sketch 内逐个试,看看其中没有一个空格能在 Sketch 文本图层内单独存活下来。

结果真被我找到,一个叫零宽连字(Zero Width Joiner)的空格(或者叫符号?)不会被 Sketch 自动清理,而且视觉表现也和普通的空格一样,都是一块空白。

所以我们可以直接将零宽连字空格:“ ‌‍”(两个双引号中间有一个空格)粘贴到咱们表单根组件内,作为文本图层的默认文本。然后修改图层名称为对应的类型,方便在组件外找到。

Sketch 不会自动清理仅有一个零宽连字的空格图层
Sketch 不会自动清理仅有一个零宽连字的空格图层

把零宽连字空格粘贴在其他文本图层之后,已经100%达到我想要的效果了。用取巧的方式,仅靠一个组件,实现控制不同文本类型是否出现,以及修改文本字段的值。组件无嵌套关系,拖入即用,有手就行。

制作组件(三):只需要填写需要展示的内容文本。不填写内容
制作组件(三):只需要填写需要展示的内容文本。不填写内容

PS:因为表单总是会有一个标题,所以在根组件内,标题字段就没有用空白来做。

其他实例

至此,组件已满足业务需要,因为无嵌套关系,所以扩展性也极强。

遇到特殊的情况:占位符文本和已填写文本同时出现的情况,也可以通过两组占位符/已填写类型来轻松做到。只要确保图层命名足够清晰,就能在外部组件右侧 Override 区域一眼看懂。

上面用零宽连字来做 Sketch 组件的几个示例,我也做成了 Demo 。源文件已传到网盘上面,感兴趣的小伙伴可以下载来体验一下。看看这种新思路能否对工作上各方面有帮助。如有其他想法或建议,也欢迎到评论区交流。

源文件已上传到 Google Drive,点击此处下载

⊙ 优势与局限

取巧地通过零宽连字来控制文本图层是否展示,优势很明显。

  1. 无嵌套。拖入即用,使用者的学习成本低;
  2. 操作简便。字段默认隐藏,只要在 Override 一栏填入对应内容即可正常显示。也无需像组件一样点开下拉菜单一个个找;
  3. 无冗余组件。组件库清爽干净,适合有设计洁癖的人。

当然也有其局限性的,对比以往常规的嵌套小组件做法,我这套零宽连字做法不适宜文字颜色过多的情况。

可配文本颜色过多时,会适得其反
可配文本颜色过多时,会适得其反

因为我们只是通过零宽连字来将选择颜色的步骤前置展示,没有收在下拉框内。所以每多一种颜色,根组件内就多一个文本图层,外部组件的 Override 区域就多一行。

所以假如一个组件有可能出现5种以上的文本颜色,或许得重新思考下这方式是否合适了。

还好我这种组件是基于业务,所以就不会有这么多颜色的情况。零宽连字的这套做法能避开这个局限,用起来还不错~ 如果是做像 Ant Design 那种最通用底层组件库,需要允许更改任何颜色,我这种方法确实是行不通的。

⊙ Figma 的表现?

Figma 是支持在组件外调整文本颜色的。所以实现同样的效果,在 Figma里简直不要太简单…

Figma 的实现方式
Figma 的实现方式

直接在组件外选中需要调整的字体,右侧调色板即可自由调色。同时在根组件内也能填入普通的空格而不被清理。或者也可以用可变组件来做,各方面都领先 Sketch 不少。

⊙ 零宽连字的其他应用场景

通过这个组件的案例,了解到了有「零宽连字」这么个东西,将他用在 Sketch 来做组件,是一个野路子的做法。那这东西正常是用来干嘛的呢?

网上搜了下,还真挺有用,零宽连字利用它的特性,可以用来做:

  • 隐形水印
  • 逃脱敏感词匹配
  • 传递加密文本

想了解更多「零宽连字」用途的朋友,可以看看掘金的这篇文章,我也不赘述更多了,以免跑题太远。

⊙ 总结

上面写了这次通过用零宽连字来做 Sketch 组件的完整思考、实践过程,在最后浓缩一遍,尝试用最精炼的语言描述清楚。

我们以用「零宽连字」这个外观看上去是空白的符号,作为根组件内的文本,可以确保在外边组件的 Override 也能复写该字段。默认为空白,即不展示。需要展示文本时填上具体内容即可。

通过这次的实践,我愈发了解到咱们 UI 设计师掌握点前端知识是有必要的了。如果我没了解过前端知识,没上手做过网页,是不会知道在计算机里面,空格是有这么多种的。

更不会有这次的新发现,原来简单的业务组件可以用这种思路去做。以前还自以为「架构能力强」、「组件化思维」,做了不少重复嵌套,各种斜杠命名的组件,看来可以更新一波了,清理下冗余组件了。

⊙ 参考文章

与我在 Medium 发布的其他文章不同,这次没有参考其他文章,也没有扩展阅读。

用零宽连字来做 Sketch 组件的方式,网上没有找到相似的经验分享,算是我独家的经验之谈了。

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store