赞助商
立即赞助

万字干货!可能是最全面的UI 设计师文件命名规范(二)

UI设计3年前 (2021)更新 流光
2.4K 0 0

上篇《干货!可能是最全UI 设计师文件命名规范(一)》我们讨论了 UI设中文件命名的规范和要点,这一部要讨论的是关于切图的命名、图层命名、版本管理的问题。

一、切图的部分

切图是什,多新人可能还是比较懵懂。简讲解,任何 UI 类的计图,要通过代码还成软件界面,没法通过代码写出来的图形,就需要计导出对应的图形文件,给代码做补充。

比如用手机看这篇文章所的浏览器或 APP,方任何图标都通过导出的切图显示。

而一个完整的应用要导出的切图是有很种类型的。从图形身的含义或者是文件的式。首先说图形的类型,包含有背图、插画素材、动画素材、序列帧、图标、LOGO 等等。

所以了解怎么命名前,我们先要知切图基本属性和规则。

1. 切图分类

图形类不少,而切图数量可能比较庞大,所以大家定要先认个观,依靠命名能解决所有检索问题可能性几乎为零。我们是要依靠文件夹层级划分进协助。

如数量最多的图标、序列帧,势必要单独为它们创建一个件夹,混合到一个目录中。如果有它某种类的图形数量较多,那么都应该先为它们创建一个独立的件夹。

例如以前某项目中的切图文件夹划是这的:

万字干货!可能是最全面的UI 设计师文件命名规范(二)

而最需要重点讲解的就是图标部,因为这涉及的下类最多也最复杂。比如下面的这个案例:

万字干货!可能是最全面的UI 设计师文件命名规范(二)

从右上角中间的类底部的导航,出现了好种不同的图标类型。这是在计一套 APP 经常会发生的情况,即一套图标规格没有法足的视觉景需要。于是,这套项目就出现了多套图标的规格。

再看看下面支付宝服务类型界面,图标数多,如「搜索」、「设置」这类功能图标非常的差别,把它们到一文件夹下面明显不合的。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

所以文件的划分,就清晰。如果以尺寸划分的,那么就用尺寸命文件夹,如果类型的,那就按类型划分。比如下面的两种分类:

万字干货!可能是最全面的UI 设计师文件命名规范(二)

这些都比较好理解,但,所细节从属,还一优先级高的问题,就我们切图面向的手机系统。如果使用了两平台独立的设,或针对平台导出矢格式文件时,那么顶层就应该划分出 iOS  Android 两文件夹,把文件分导出,便于不同的端程师检索。

里我们集中在只使用一套设计,并且只导出 PNG 的状态,不能避免的要面对分辨率倍数的问题,即 @1x、@2x、@3x 的文件名缀。我的结论就是不建议大家为它们创建独立的文件夹。

iOS 开发,是接选取个文件3分辨率,拖进 Xcode 即可,那么分文件夹要多跳转常影响效率,如下图所示。而 Android 开发,虽然程序目录会划分出 hdpi、xhdpi、xxhpi 等文件夹,这个操作不需要设计师来做,程序员会自己复制出三分辨率然后改名再入开发项目文件夹。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

根据以上说明,完成切图分类,那么可以为我们后续具体命名提供基础环境了。

2. 切图命名

前所以铺垫这么多现在才提分类,是为设计师导出切图命名有个最要标准——说话。

上最见整的切图命名模式大致是这样的:模_页面_级页面_类_状态,而且会给一堆英语的单词供大使,那么最后的效果一般是这样的:

Community_PostList_ DiscussPage_ShareIcon_Defult@1x.png

相信大已经发现问题了,这种命名实在太长了。止是层级太多,且英的字数难控制。虽然很多时候有一些广泛应的元素如导航、标题、背景之类的都有简写 (Nav、Tit、Bg),但至会有一半的词汇你会发现它们是没有简写方式的。

而且,英语不是的母语,大多数人英语好点也就4、6水。如果一个抽象、不常见的词语,如 「拼」、「发红包」、「种草」、「拔草」,确定你词典查的英语词组是理的吗,这些西简写就更不懂。

再者,发命之所以使用英语,因码里不能使用中文,如果直接用拼音的也太不敬业了。我们的标注必给自己框这样的限制的,或者强行认只标注英文看起专业。强行英文的结果就导致自己以后看不懂,别人也看不懂。

有的人能还讲,命名就是要根据开的习惯来。里释一件,就是除非切图命名个规范是经团议,由开整理给你的,不不要企图认为自己的英文命名具有普适。

多数开发员有自己命名习惯,你习惯和他不可能完全匹配上,所以正常项目程序员会根据他们自己或开发团队习惯命名,那有另套体系,我们命名是为了让他们能快速找到指定文件而已。

,前面的件夹分类就是帮助我们分割同类的图标,我们的命名可更简洁精准,逻辑更连贯,降低查图标需要的检索成本。这时在每个件夹中,切图的命名就可只3级搞定。即:

  • 模块_名称_状态

在境下,使用的名称基就是:

  • 设置_钱包_高亮@1x.png
  • 动态_评论_默认@1x.png
  • 登录按钮_击@2x.png

紧跟流中使用的习惯来定,样的命名才是简单易懂易用。只是纯形式化又复的命名规范,只倒逼程序通放大切图缩略图来查找指定的图形。

二、图层的部分

图命名放到切图面来说,就是因为我们对图的命名首先要根据切图的需要定,成证导出的时不需要对切图文件有额外的命名修改,图命名直接用。

虽然大家都崇在设计文件命名要细致,恨不个图层都写上楚图层命名,我要在这边出不意见。

1. PS图层命名

先讲使用 PS ,命名是常。原和 PS 操作逻辑有常大关系,难以用鼠标接在画布选指定内容。比如下图这比较常见 PS合成场景。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

这场景起码有几百个图层组合而成,而这么多图层,有大量影效层覆盖在手表上。如我要用鼠标接在画布选定手表,那基本会选择到手表上高层,不楚是哪层高。所以,选和调 PS 图层内容都要接从图层列表查找。

而这种情况把图层命名清楚,那源件只会是大车祸现场。随着图层堆叠的数量增,到后面你每做一个改都会非艰难。删除无效图层、修改前后系、对某个分的有图层进行调色处……

所以在 PS 中命名多细致都不过,因为这才能的懂,别人才怎修改你的源文件。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

2. Sketch / Adobe XD 图层

但是,在现在的 UI设计工具中,环境就发生了变。需要我们进行细致命名的绝对条件已经存在了。

UI 的计没有那多不可见并堆叠的图层,按住 Ctrl 或 Command键,你乎可以选中任何的见的图层,这候对图层列表的依赖也就远远没有 PS 那深。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

而且,一个 UI 项目的页面和零碎的素实在是多了,如果真以细致每个图层都不会出现默认新建图层字的地步,需要耗费极其庞大的力去维护,而这个维护的结果可以增加的队效率并不显著。

因无论自己还别人,修改文件的时候直接用鼠标去选中对应图层就可以了,命不命对操作都太多直接的影响。当然,我们还一好的习惯,就不依赖隐藏的图层,尽使用一新的画布表不同的状态。

基样的质,在 Sketch 或 XD 的文件中,只建议大家做出适当的命名操,而不用太纠结形式的细节,要把每个图想命名的无用强迫症,应用在对整个项目文件的管理和思考上。

第,我们要能在画板根目录上,编组所有层级最高模块/组件,命名这部分内容。下级相要模块文件夹,也可以适增加命名。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

第,尽可能将类似图标、LOGO这些必然要导出图形,制作成 Symbol,并做好晰命名。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

第三,Sketch 如将个完组件做成了 Symbol,那么要其文图层命名做出晰排序和命名,这样才能正常更改其内容。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

然,图层和命名和前关于切图命名有样要求,是——说话。图层名可以显示符比文件夹列表模可以显示少多,很多喜欢用英文命名文件,经常图层名长到显示了半「…」,这样命名更没有意义。

三、版本的管理

最后,是关于版本管理问题了,网上有层出不穷关于怎么管理版本法,这里奉劝各位,希望借助力和工具版本管理,都是不切实。

无论是 SVN、GIT 的技术类管方案,还是使坚果、Folio之类的第方工具,会将本来是太复杂的问题复杂。这是因为成我们件版本变更迭代的事件太多了,使这些方法仅要大量精维护,而且中会有很多可控的因素产生,成混乱。

在过去的项目经验,只推一种关于版本管理的方式,那就还是文件夹和命名,简的才是管理复杂最有效的方法。

即每次遇到设文件、文档需新替换,或改动(不只加新的内去),那么就同级目录中,创建一版本回收文件夹,复制一份当的文件去,再始修改。

万字干货!可能是最全面的UI 设计师文件命名规范(二)

每复制回收站的文件,命都下修改,方便后面可能的查找。通常命的格式——日_版本简单明_,效果如下:

万字干货!可能是最全面的UI 设计师文件命名规范(二)

这样不仅自己操作起方便,且其他人也可以很易的访问查找的指历史版本。得益于目 UI 文件体积的精简,一 Sketch 文件通常几十 MB 就能搞,所以记录很多版本也无所谓。当然,如果项目出比较型的 PSD 或者视频文件,那么对于版本的理就尽可能的精简不多多益善,否则会共享传输造极的压力。

而除具到某个文件的版管理以外,还要考虑一个更高级的管理,即项目版。相信很人有样的经历,在开始面的版时创建新的文件夹和设计文件,是在几个版要反复在几个项目之间切换查找页面。

所以,我是设计第个版本是 v1.0,那么在开始 v2.0 版本时,接复制份原版本文件夹出来。这样,不仅保留完 v1.0 所有项目文件,文件夹层级可以保留下来。

复制成后,只要再将除了界面设计源件外的它档、切图等件全删除即可。保留设计件,目的就是要保持最版本设计件的集中和唯一性。有和项目相的设计件都集中在一个目录,才有利于我们的更和协作。

要说一个题外话,在过去的项目中,非常在计文件唯一性的标准。当一个产品队有个计,程序员直查源文件的标注,如果源文件不备唯一性,项目调整中每个人脑上都存了个版本,且各添加了新的内容进去,不能直覆盖并,最后只能演变成一开发灾难。

结尾

以上就是对于项目文件管理和命名完整的经验和思考,经过了好年的验和改进,相它可以应付绝大多数的情况协同需要。

还牢记,这些看似麻烦的过程,不只了给我们自己使用,还方便所项目的员,这种能力一样一 UI设师应该保的专业素养之一。

最极度推荐大家使用同步云盘进行工协同,首要推荐的是使用自建的云盘群辉 Nas,是国内现在势头正盛的坚果云。果是比国际化的团,么无论是 Dropbox 或者 GoogleDrive 以,传统的 QQ传输或是移动硬盘拷贝,已经不适应今天的生产力需求。

如靠上文描述,体管理和命名是法起到晰记忆作用话,我另准备了张完思维导图。

清大图请前往百载,链接:https://pan.baidu.com/s/1GsDeB9aM6vXc0J4l3ZgukQ,密码:xtnc

万字干货!可能是最全面的UI 设计师文件命名规范(二)

注作者的微信公众号:「超人的电话亭」

万字干货!可能是最全面的UI 设计师文件命名规范(二)

图片素材作者:Evgeniy Dolgov

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

写这篇文章也是总结了以前刚接触的时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,...
切图工具
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
UI 设计
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
C黑暗模式
某个时间我们下载了许多优秀的 APP,定了伟大的目标——每天赏析一款优秀产品,学习前沿的交互和视觉风格,努力提高自己的审美...
UI 设计
越来越多的设计师和设计团队开始选择使用 Figma 来进行 UI 和产品设计了。 凭借着快速发展的社区和大量的第三方插件、服务以...
Figma
先问你一个小问题: 「如果让你设计一个挽留弹窗,你会通过什么方法或内容 来留住用户?」 2000 years later… 如果你的脑...
UI 设计
作业帮集团品牌以及K12全线产品进行了整体视觉形象升级,推出了新品牌色,更加年轻化。
UI 设计
为您准备了最新的 Material Design设计规范,请伴随笔记一口吃掉。 一、安卓是什么? 想象一下,过年同学聚会上,大家把手机...
Material Design