消息
登录即可查看消息记录
当前位置: 首页 >文章 > Sketch - Symbol 常见 7 个坑
收藏
分享

Sketch - Symbol 常见 7 个坑

举报CE青年CE青年发布于 2019-06-15152阅读1点赞
如果需要你在3分钟的时间更改完你页面上所有图标的颜色,你会怎么办...


前言

随着sketch的不断更新,已经更新到55


每隔一个版本,sketch都会出现很多新颖的功能,而对我来说,使用最多的依旧是sketch中的symbol

刚开始接触symbol是一个看起来很简单,但是真正使用起来十分费力的一个功能,而来了几个新同学,也因此发现他们对sketch的symbol使用上出现了很多问题,总结了一下他们遇到的问题,在内部也进行了分享讨论,同时也想发给大家看看,希望能够对你有所收获~

第一坑:不通过“/”对symbol进行分组



在symbol最开始建立时,最容易忽略的一个问题就是将他们进行分层级


新同学:一股脑儿的把symbol一个又一个的建出来,一道使用时,就出现了懵逼状态

这时候你就需要给自己的symbol制定一些相应的命名规范,用自己的一套规范去涵盖所有的命名形式~ 听起来很空对不对? 看看我是怎么命名的吧~~

模块/类型/功能/状态
home/icon/set/nor


整个命名方法对于我自己来说是和切图类似,同时你也可以去构建一套自己的命名规则
而盲目新建的symbol是最容易出现的,这样会造成最后symbol页面混乱、后期难以维护更新
因此对于 “/” symbol对项目进行分组更加利于你的文件管理,将自己的symbol按分类进行设置能够极大的提高symbol的复用效率

如果想要自己的切图速度更快?

你同样可以采用我所使用的这一套命名规则切图导出时,你可以根据你的symbol命名,将 / 修改为 _ 从而更加快捷的切图命名,更利于切图的寻找,同时也避免切图时的重复

第二坑:命名使用中文



在symbol中,本身命名的方式对于大家来说并没有什么要求,对于团队而言,只要你能够和开发进行很好的沟通的话,命名成什么其实都时可以的。

那为什么要将symbol命名为英文呢?

和第一坑类似,使用英文命名能够更加快捷进行图标的切图。

如果想要更统一项目规范呢?

在团队合作的项目中,因为每个人所表达的意思不一致时,用中文去表达,大家所表达的东西就会差距很大。因此需要通过制定相应的英文去规范公司的命名。

(这个并不是必须的,只是我觉得这样会方便一点,各位大佬不喜勿喷 )

第三坑:随意分离symbol

当你在天马星空的想象,需要尝试某一种新的风格时,我们常常将symbol分离出来。

对页面的元素直接进行修改,然后修改完成后,如果不再将symbol中的组件进行修改整理。

如果忘记整理呢?



可能会发生下面的情况
统一改变symbol颜色时,竟然有没有改变的

因为没有对统一的symbol进行重新整理,因此统一改变时,那些分离的元素就没有进行统一修改

如果使用了很多symbol都忘了呢?


然后就会面临各种头大,以及各种撞墙想si的心都有了

那究竟应该怎么做呢?

更合理的做法是将所要修改的特殊情况,按修改的元素复制为新的symbol,再次新建symbol,通过symbol的去切换里面的,这样即使修改了symbol,其他的内容也会因此进行修改。

第四坑:文本属性不设置


文本属性不设置也是我遇到比较多的人没有设置的情况

主要在于文本属性不设置,然后突然需要你把所有页面的13号字体改为12号字体时,你就彻底蒙圈了,那时候就懊悔,我为什么不把字体的规范设置好。(工作中此类的修改其实很常见)

因此给大家好的建议就是在准备开始制作大量页面前,先将文字规范进行归纳。如果有添加的新情况的话,也一定要记住将所有文字效果进行归纳

第五坑:ICON颜色不叠加蒙版

如果需要你在3分钟的时间更改完你页面上所有图标的颜色,你会怎么办?

这时,蒙圈了吧?

虽然可以使用sketch中的颜色替换或者是全部选择重新叠加

但是难道要像这样一个一个的选?

所以推荐大家在将icon制作完成后,上色到页面中时,使用symbol颜色层套icon,也就是在上面用颜色的symbol进行蒙版叠加

第六坑:同一symbol,画板尺寸不一致


在当你制作一个列表页时,icon的尺寸不一致直接会影响到你最后列表页的效果,

如果在icon 中经常遇到这样类似的情况,解决办法页很简单,将每隔icon下面,填充一个底,将所有icon进行规范化,就想这样,就能够轻松解决~

第七坑:不会合理使用插件

在symbol中,我推荐四个常用的关于symbol的插件,这4个插件对于我这种一开始是symbol痴的人来说确实帮助很多,有的功能虽然很简单, 但是真的很实用

symbol name autocomplete
推荐指数:★★★★★

这是我使用最多的一个插件,虽然他的功能很简单,用了他之后以至于我都觉得他就是sketch上本来的一个基本功能


给大家简单介绍一下他的主要功能:symbol name autocomplete 字面上的意思就是自动补充你的symbol名称,他也不需要任何点击开关之类,自动智能补充,是很轻量的一个软件,能够提升设计效率


symbol organizer

推荐指数:★★★★☆


这个插件他的主要功能就是快速去组织你的symbol页,当你新建了很多symbol并且他们是杂乱无章的排列时,这个插件就能够根据你的需要,按照一定规律进行排列。是你整理symbol的利器。

symbol namer


一键将 Symbol 实例重命名为覆盖文本值

Sketch Symbols Manager
这个插件之前在很多文章的symbol中被安利种草过,使用效果很不错。

需要付费(售价$19.99,私信可获取体验密钥,试试这个软件到底怎么样)

插件他可以将你的symbol作为文件去管理,管理会很方便快捷,特别在大项目中,修改起来更快捷。

其实说了那么多,就是想给大家说一下我在工作中使用symbol的一些方法。不知道如果大家有更好的想法~



本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号:CE青年 !

0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户77,971人)

【4月】爆款PS软件入门训练营
距离开班仅剩2天69人已报名
【4月】人像后期修图训练营
距离开班仅剩2天59人已报名
【4月下】万鱼鱼.商业插画入门训练营
距离开班仅剩2天206人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
手机版
虎课移动APP
支持视频下载,随时随地学习
桌面客户端 >
领福利
微信扫码即领2020年全新素材包
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分

恭喜你,领取成功

开课时间:

新人免费领取免费¥99

扫码开通训练营权限

打开微信“扫一扫”功能
扫码上方二维码

免费学习67000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了115,471
并提交了2,290份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
登录虎课网全站 67000+ 视频会员教程 | 每日可免费学 1