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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
文件命名最详细的规范——新手转向资深的必经之路(下)
0.0°
2017-05-15 原创文章 经验/观点 举报 2153 16 4 0

接着上一篇文章继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。



Sketch文件的命名以及它的图层的整理


2.Sketch的Artboard(画板)命名

作为新手我们很容易出现这样的Artboard的排布,如下图。

Image title


然后我们再来看看一个成熟的设计师它的Artboard的排布与命名,如下图。


Image title


我们可以发现,它的命名是由“代号-模块-功能”这样的结构而组成。先来解释一下,为什么会有代号这个存在,比如图中的“MR-1”与“MR-4”。


因为真正定稿后的sketch是需要与开发工程师进行开会商讨过稿的,一般这样的会议,会将sketch文件投影到一个屏幕上。而开发童鞋们,有什么问题需要指出的就直接说,“MR-1-1与MR-1-2有疑问”,而不用费力去说,“某某模块从左数第一页和第二页有疑问”。如果是远程会议,这样的代号更方便团队之间进行交流。所以一般都会为每个Artboard编一个码,并且一个代号表达一个模块,比方说上图中“MR-2”表达的就是“ManualHL”的模块。


另外Artboard命名完成之后,需要将所有的Artboard按照序列号排好,相同模块内容的需要放在一起。如下图

Image title


还有一点需要注意的是,在sketch文件里面,为了将页面跳转流程表示得更加清晰,设计师会在最顶层加一个额外的Artboard,主要用来画流程线,和一些信息备注。如下图Flow&Note的Artboard。


Image title


3.Layer(图层)命名

Layer的命名,其实是涉及到单个Artboard的图层的整理方式。整理思路是,按照页面的内容先分几个大块,组成大的文件夹,然后再在每个文件夹下面将图层顺序排列好,按照图层内容进行命名。大文件夹和layer的命名尽量以文件夹内容和layer内容为依据,如下图Search的整理方式。


Image title

Image title


其中还涉及到icon的命名方式,icon最完整的命名方式为“模块 类别功能_状态”,比方说上图中的放大镜一样的search icon,它就可以用search_icon_input_gray,来表述,当然如果整个方案中只有一个这样的icon的话,觉得累赘也可以直接命名为icon_search。依情况而定,可以灵活变通。常用的模块、类别、状态如下图。


Image title


4.Symbol组件的命名方式

symbol(组件)的出现大大提高了设计师使用sketch的效率,以前改一个颜色需要全局修改的任务现在一键全部搞定。没有使用过sketch的童鞋可以先去尝试一下。

而symbol的命名如果规范好了,也会给自己带来很大的便利。一是在插入symbol的时候找起来特别方便,二是在导出图片的时候会自动分类成文件夹归纳好。如下图。


Image title


symbol在命名的时候会用“/”隔开去进行分类,比方说“icons/general/bringsensorclose”,意思就是在“icon”文件夹下建了一个子文件夹“general”,在“general”下有个icon名字叫bringsensorclose。导出后图片会按照这样的规则进行排列。并且在整理symbol的页面时,也需要遵循Artboard的文件的整理方式,即将同一个类别的symbol放在一起。


5.导出图片的处理

一般咱们再作图的时候采用2倍的屏幕,多用750x1334px尺寸去进行方案的绘制,因为这个屏幕在市场上的占有率是相对来说比较大的。而在导出icon图片资源的时候呢,习惯上需要将@2x、@3x的图片都导出,在sketch的右下角会有这样的图片导出设置,如下图。


Image title


当然有的开发只要一倍的图,所以需要提前跟开发商量后再进行导图。当然如果图片过多,可能占用内存比较大,可以下载ImageOptim进行压缩。

到这里,文件命名的规范终于整理详细了。大到版本号文件夹的整理,小到icon命名的规范,总结一下规律,原则就是以内容为出发点,在脑海中划出层级关系,进行归纳分类,方便自己也方便团队其他人能顺利找到自己的资源,让合作效率更高。


Sophia的tips:
真正的高手,细节都做的很好!


相关文章
文件命名最详细的规范——新手转向资深的必经之路(上)



作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。
职场设计技能,更多教程抢先看,请关注作者的微信公众号:Sophia的玲珑阁Image title



更新:2017-05-15

收藏

16人已收藏

Sophia的玲珑阁

从创业公司到大厂,分享实用的互联网设计技巧和职场经验。

  • 142

    作品

  • 389

    粉丝

  • 7

    关注

  • 作为设计师,我是如何一步步找到业务增量的
  • 情绪是魔鬼,但要原谅自己
  • 2020年打工人4条总结出炉
  • 提升屏效可实施性最强的4大方法
相关标签
设计经验UDCUX

    猜你喜欢

      2017-05-15 原创文章 经验/观点 举报 2153 16 4 0

      文件命名最详细的规范——新手转向资深的必经之路(下)

      0.0°

      你确定要举报文件命名最详细的规范——新手转向资深的必经之路(下)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年05月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      16
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录