Sketch Symbol 实用技巧

本文作者Lloyd HumphreysTradeshift的产品设计师,现居哥本哈根,欢迎分享文章连结。

在Tradeshift,我们开始以用 Symbol 的管理方法去持续维护更新一份集合的Sketch文件。而每一个能够加入这份文件里的 Symbol 都必须先通过一些品质与一致性的检查。

我们所有的设计师都会使用到这份文件,因此要实时更新发布最优质的Symbol。

Symbol 的外观必须大致相同,够小而足以模组化;够大而足以好用,还要经过良好整理,方便编辑(或是分离后附加在一份文件里)。

没有人喜欢接手一份几乎没有整理的Sketch 档案,所以Symbol 也不该弄得乱七八糟。


制作最基本的元件


理想的状况下,你不该常常将Symbol 分离(detach),因为这样削弱文件的意义。建立元件最基本的版本,每一个Symbol 都是之后可以组合成一体,且整体非常容易维护。你要修改的时候,可以很有自信只是在很小的范围做改变。

巢状(Nested) Symbol 让这个地方有一点点不同,但是只要依照使用习惯来判断,就可以打造强大又可以维护的Symbol。

要灵活运用Symbol 之间的异同与组合分离,这样才容易变通。



Symbol 的命名方式


要正确地为图层(Layer) 取名。我们尝试之后选择用小写横杠 (/) 分隔。

Sketch 会自动根据名称的斜线 (/) 把Symbol 整理进资料夹。

输入栏位和以此延伸的图形都整理进/in/ 资料夹

我建议使用control/definingproperty-state 格式的命名惯例。预设状态不该有状态,因为tab-inactive、tab-active 太冗长,用tab、tab-active 就可以了。

文件的取名称不应该过于依照互动元件的外观样式,因为它们之后很可能会修改。

译注

control:互动元件

definingproperty:元件命名

state:元件状态

button/primary-mouseover

button/primary-disabled

in/input/field/active



标记巢状Symbol 的延伸图形


因为现在已经可以用巢状Symbol,我也建议使用命名惯例来标记延伸的图形。当你在不同文件之间复制Symbol时,能够同时提醒自己要复制所有代表输入栏位,前缀是in/的Symbol,是一件很舒服的事情。这也让Insert Symbol的选单很干净。


Symbol 整理好,生活没烦恼


建立命名惯​​例代表使用 Sketch Runner(也是一个不错的插件) 时,总是可以很快速找到,因为有一套组织脉络可以遵循。



图层命名


为图层本身取正确且一致的名称。背景就应该永远叫做background,而不该跟bg混搭。如果取名为namedRectangle 100,之后一定会有报应!分离一个Symbol 的时候,它应该要维持清爽而且可以独立存在。

文字特别重要。要确保常常进行取代文字的Symbol有相同的文字图层名称(也就是,不同状态的相似Symbol)。你可以在Override编辑器修改Symbol里面的文字:如果共用相同的文字图层名称,取代Symbol时,文字在新的Symbol保留下来。它也会显示文字图层的名称当作区块的辨别方式,而不是内容。

你可以把Symbol 的参照来源(instance) 改名,但是不会影响与来源的连结。所以,我采用的命名方法是Symbol 用小写文字,而使用者编辑的文字都用大写(中文就没这个差别啦~)。不过,这只是习惯偏好的问题。



图层结构


把所有可以编辑的文字放在最上方。这样之后只要在群组按两次return,就会立刻开始编辑文字!

Symbol 是用来重复使用、分离和混合的,因此真的得要好好整理。这样任何人在查看细节的时候都可以快速理解。

图层结构的安排会反映在Override 面板上。如果最顶层的Symbol 有巢状Symbol,之后有一套编辑的脉络时,请记得Override 也会照顺序显示。



在Override 面板使用巢状 Symbol


相同大小的Symbol 可以在Override 面板成为替代选项。这对图示来说特别好用:

这些图示的大小都一样

改变状态也非常好用:

只要使用巢状Symbol,就可以在UI 资料库里,根据可能会用到的状态,以如法炮制的方式打造超级灵活的互动元件(在Tradeshift 也有我们自己的UI 元件资料库)。


这些都是同一个Symbol:

同一个Symbol,以不同的Override 进行强化



确保Symbol 正确地缩放


如果你交付的Symbol 在缩放时会出错,那结果也会很惨的。

如果某位不熟悉 这套 Symbol 内部精髓的设计师在无意间把 Symbol 分离了,那整个团队的努力就全部白费。

不断尝试、测试Symbol,是打造一个无懈可击的成品。成就一个完美的 Symbol 文件系统前期会要多花出好多的时间,但这可以节省日后设计过程中大量的时间,还可以避免各种坑。

可以来看看Peter Nowell 的缩放功能小抄



其他小提示


文字图层要设定为Fixed

文字图层要设定为Fixed,然后正确地靠齐。这样缩放Symbol 的时候,才能可以保持它的位置和足够的留白。文字图层应该要在面板上的Resize 设定为“Resize Object”。


预设文字有机会让最佳实做方法更进一步

举例来说,我们的预设文字(Placeholder Text,不是图层名称)由「动作目的」组成,无意间提醒文案的用语。


设计Symbol 的最小版本(X2)

以放大Symbol 的方式设计,比缩小容易。


Symbol 取代

Sketch 可以直接把某个Symbol 直接取代成另一个,然后缩小/放大为相同尺寸。如果你用不同大小的Symbol 取代,可以按滑鼠右键,选择Set to Original Size 修正。


Symbol 本身必须有意义,可独自使用

只不过,在更复杂的Symbol弄些背景其实也没关系,尤其是你的伙伴还不太熟Symbol的时候。


原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容