恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Symbol的命名和归类
0.0°
2018-07-12 原创文章 经验/观点 举报 2548 14 7 2


上一篇文章写了symbol的一些使用技巧,没有读过的童鞋可以先看一下,附链接了解symbol的四大特点,让你的效率提升100倍symbol的四大特点,让你的效率提升100倍


symbol虽然好用,但是当一个项目比较大的时候就会需要建立很多个symbol,这时给symbol进行合理的命名和归类就显得尤为重要。



归类

首先我们通过一个情景来对比一下未归类和已归类的symbol在使用时的区别,

场景:我们要左侧导航栏中的彩色图标替换为白色图标,

如果我们没有做归类的话,右击替换symbol看到的界面是这样的


symbol未归类

symbol未归类


如果我们合理的命名归类的话,右击替换symbol看到的界面是这样的


symbol已归类

symbol已归类


很明显,归类后的symbol是已有一个清晰的分类和层级关系的,我们可以根据这种关系,快速的找到我们所需要替换的symbol,这样才可以更大提升我们的工作效率。

那么怎样命名才可以对symbol进行分类呢,其实很简单,就是给symbol命名的时候用斜线号来归类,符号“/"。


比如 “icon/24px/菜单栏/新建/normal”,

这样的命名方式就代表着这个24像素的icon,是位于菜单栏上的图标,图标名称是“新建”,图标状态是normal。


这样就可以把symbol按照功能和层级进行一个清晰的分类了。



命名

不过我们除了要对symbol进行分类之外,还需要对symbol里面的元素(比如文字,图片等)进行重命名,这样才能够让我们对一个symbol的构成有一个清晰的认识,这样做的好处就是,不仅方便自己的后续修改和迭代设计;而且即使是把源文件交给团队中的其他人,也可以自如的使用你的symbol。


如果我们没有对这个symbol里面的元素进行重命名的话,修改时面板就比较混乱,无法清晰知道文件名称在哪里修改,特别是有多个元素重名时。


我们还是通过场景来对比一下:

场景:我们要修改页面列表中第一列的“文件名”的名称进行修改,要将Maedik修改为Small Pig Peki


假如我们没有对这个表单symbol进行重命名的话,我们在右侧的修改栏中看到的就是这样的情况。我们无法准确快速的找到,哪一个文本才代表的是文件名。

未重命名

未重命名


如果我们进行过重命名的话,在右侧修改栏中看到的就是这样的情况。

Image title

已重命名


两图对比可以看出,对symbol中的元素进行重命名之后,修改面板清晰,我们可以快速找到需要修改的内容。


那如何修改symbol中的元素在修改面板中的title名称呢

其实很简单,就在进入symbol的page,然后修改symbol中对应图层的名称就可以了。


以“文件名”这个元素举例,

symbol中的图层名称修改前后对比

symbol中的图层名称修改前后对比


修改面板title名称前后对比

修改面板title名称前后对比


为了让symbol的修改面板更清晰,我们可以在给symbol的图层命名时备注一个emoji,

比如文本用“✍️”表示,

在MAC上调出emoji的方式:

在输入框处于激活状态时,按下Ctrl+Command+空格。


添加emoji

添加emoji


显示的效果

显示效果



总结

最后我们来回顾一下文章,

给symbol进行归类和重命名:

第一:用斜线号 "/" 进行层级分类

第二:在symbol页面给图层重命名命名,便于后期修改

第三:Control+Command+空格,可以调出emoji


彩蛋

给大家推荐两个插件,这两个插件结合symbol使用的话,会极大提高我们的工作效率。

01 remove unused symbol

自动删除该sketch项目里面没有用到的symbol。

02 rename it,按照一定的规律(比如按照顺序,替换文本等)重命名画板或图层。


更新:2018-07-12

收藏

14人已收藏

隐匿的大V

WX:17183467735

  • 8

    作品

  • 49

    粉丝

  • 75

    关注

  • 分享骨骼动画最常用的三个插件
  • 如何将AE动画转为json文件?
  • 8大系列34款免费可商用中文字体分享
  •  Sketch中10个惊为天人的骚操作

    猜你喜欢

      2018-07-12 原创文章 经验/观点 举报 2548 14 7 2

      Symbol的命名和归类

      0.0°

      你确定要举报Symbol的命名和归类

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      14
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录