赞助商
立即赞助

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

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

命名,是困扰很 UI设计师的常见问题之一。从我们开始在软件中设计内容时,就要对图、图文件夹进行命名,到对接开的时,还要对切图进行命名,到管理我们的版,项目文件目录,命名技巧是不容我们忽视的团协技能。

这类文章网写了不少,但很多同学去查看以后还觉得无法实际项目中应用。这因,只学一些常用词汇或命格式,只聊胜于无,无法真加我们的效率。

尤其在今,越来越多的互网队开始使用云服同步项目文件,如 Dropbox、Google Driver、Synology、坚果云等等,这使得的项目文件还要暴露在所有队成员的公共视线之中,命名已经不是计一个人的事,重要性越发凸显。

面,我们来整讨论讨论于 UI 设计文件命名的规范点。

一、文件的检索方式

首先从文件的命始,面提到的「当」 一词,就因对 UI 文件行命唯一标准的,如果只靠对命的死记硬背,依旧会项目中遭遇诸多阻力。

要知道,之所以需要命名,它的目的是为了方便——检索,让可以更高效的查找指定的文件。

如日工作我们会发生如的场景:

需求方突然要你供一年前某个版本迭代设计中被惨拒的稿子,重进行审核评估,你得从自己根目录就有几百个件夹且毫无序逻辑的移硬盘中重把它来……

有天你临时请假,事打开你电脑,在你已经被图标铺满桌上找到前项目文件和指定页……

一个比大的项目,进开阶段,前端同们接受并压切图文件夹,看见里面包含名称是「新的图、新的图(1)、新的图(2)……」的近300个 png 文件……

我们找到一个想要的文件,不是每次在目录中进行遍历,也就是看一遍看到想要为止的笨方法。果没有有效的检索方式,么任何人只能在计机量的文件里裸泳,溺亡是迟早的。

所以命先从检索文件的方式起,主包括以下几种:

  • 级
  • 排序
  • 标签
  • 搜索

1. 层级检索

层级检索源自文件置的层级结构,可以所接触过算机的人群里朴素的文件收纳方式,比如我们熟悉的 Windows 存一张照片,那么径概这样的:

选择硬盘 → 多媒体文件夹 → 照片文件夹 → 照片类型/日期文件夹

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

在 Windows 中,由于某些历史遗留问题,表现形式都在鼓励使用层逻辑来存放文件。最显著的莫过于硬盘,C盘既然已经被默认成了系统相关文件,那 D、E、F 盘然就应该是划出游戏、学习、的类。

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

而 Mac 系统弱化了硬盘的概念,在 Finder 中更多突出了对文件进行标记,高效主动查找功能 Spotlight ,也就是暗示你文件存在什地方都无所谓。这是多 PC 用户刚刚切换 Mac 不适应的因之一。

2. 排序检索

排序就是计算机文件排列的方法,无论是 PC 还是 Mac,在文件夹空域点击右键,都可以见排序方式的选项。有文件类型、名字首字母、创建日期、修改日期、大等等。

在日中我们使这个序功最频繁的原因,应该是件没有对齐格,使序功帮我们快速整。

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

而在一个件非多的目录中,我们就可通过使同序方式来快速到我们想要的件。

比如 Windows 经常会有「某.dll」引发误提示,我们要过名排序在 win32文件夹下找到这个母开头文件区域,再下个母缩小搜索范围,然后很快能楚这个 .dll文件是否存在。或者,我们解压了某个游戏,它根目录文件特多,于是我们会使用类型进排序快速找到 .exe 结尾几个启动图标。

3. 标签检索

在 Mac ,标签功能是被突出,可以很便创、分配标签文件。这样,我们多了个维度来查找文件。

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

比如个项目名为「电话亭」 Sketch 文件为版本或者功能原,要分存放到不文件夹内,没有刻意使用层级系统进分类,那么如有天我需要找出并另备份项目所有 Sketch 文件,那么可以在开始打上「电话亭」标签,以后要选这个标签可以立即筛选出这个项目文件。

到类似 Things、滴答、印象笔、Bear、Eagle 等包含大量目录文件的应用,提供标签个检索度。

关于Eagle 的详细介绍:《这款人发的Eagle,堪称收集理素灵感的利器!》

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

这功能 Windows 资源理器中可以忽略的……

4. 主动检索

主动检索就搜索,就输入框中键入文字内,直接根据称或者标签、类型查找的文件。

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

这建立我们对文件称已一了解的基础。例如速找到之切图中的登录按钮,可能就会直接输入「登录」或者「按钮」这些关键信息。

而如果文件名本身没有和内容有任何关,或者这种关是混乱的,那搜索然无从谈起。

5. 文件命名总结

项目的文件命名,说底叫什、用什英文简写、大写和符号都是次要的,是要通过命名这个步骤,加快前面4种检索行为的效率,而不是为命名而命名。

并且,在一个团队中,大使的电脑系统一定一致,开发使 PC,那么你就强调件中的标签。而如果使公共盘,那么同盘对序的细节是有一定的区别的,都要经过测试再做决定。

二、文件的命名系统

在我给大供的思路中,只两种检索模式作为发点,即层级和字序,因为我认为它们具有最广泛的适性。

并,好命名系统定是紧密结合项目文件管理法,它能帮助我们有强迫性文件进分类和删除冗余部分。即使任何个打开我们项目,也能轻易找到目标,才是我们追求。

1. 文件层级

项目开始时,要先规划楚,会出现哪些类型文件,做出层级划分。

例,在我去的某个项目中,一个版文件包含的分类有 PRD文档、Sketch原型文件、Sketch设计文件、其它设计文件、动画源文件、参考图、应用素材、导出展示图、导出互动画、设计说明、切图等等。

那么我们将他们分门别类,就可以得到下面这树状图:

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

那么,我们就可以以此称 V1.0 文件夹下方创建各级子文件夹了,之后将对应的文件置入到指层级文件夹中,就完了我们初的文件整理方式。

当然,不同项目性质和流程可能会有增减,最终确定的层是需要整理的。即使一开始定义的不够完整,那随着项目的深入,你可以直在同中插入新的文件夹即可。

而我们的命名系统,从这里就开始了!

2. 件夹命名

我习惯使数字作为同一个目录件序的方式,因为数字最容易被我们记忆,并且可营秩序感,减轻我们打开件夹的焦躁。

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

上面是一般我会使的件夹命名方式,即使—— NO._件夹名称。

为默认排序「按名称」会自动根据数递增,那么文件序列能保持不变,使用几天以后,这数序列可以被我们有效记忆。即使几天后增加个新文件夹——「8_活动文件」,也不会影响到前已经沉淀下来习惯。

试想在你的手机上的微信启动图标,用的次数够时,我们其忆的就是它是几行几列,而不是根据图标样式和应用名一个个看去。同时,样划分的文件夹,任何项目相关的人很清楚应该何查找自己需要的内容。

3. 画命名

在文件夹内的文件,是否一样需要有效的序列,也要根据文件的具属来确定。素材图,有没有特意命名不是太重要,因为它们没有忆和反复提取的必要,存下来只是做备份而已。

界面展示图,意义就不一样了。多的几界面,少的也二三十,如果我们任何命排序模式,那么看起会非常累,找一指的页面也非常累。

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

所以该如何出效命,就从设界面时的目标始起了。一般分两种景,一种比较的程,涉及到非常多的界面模块。另一种以完整业务流程准的设项目,那么它们的排序就会一的差异,致如下方所示。

模块_模块_类型_状,演示:

置模块_个人资料_头像裁切

启模_注册_验证码填写_验证失败

流程名_流程步骤页_状态,演示:

发布流程_容填写_照片编辑

买流程_提交付款_成功

基本文件命名,都会根据层级从上到下过下划线分割。所以需要这样层级划分,是为我们可以用来命名页词汇是有限,如个应用出现了很多都要称呼为设下级页,那么最好要楚它从属关系,是哪个页跳转进来。

导出的界面图命名,际上就是画的命名,以 Sketch 为例,设计还未导出的阶段就要做出整理。Sketch 中有个关键功能是左上角的 Page 列表,我们以通创建不同的 Page 将整个 APP 的页面进行分类。例下面的案例:

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

我将整个 APP 划分成8个大模块,每个模块前面增加一个序号,并且个序号对应我们的正常浏览和权重的顺序,之对每个画进行命名,样不轻易搞混。

画布的命,除了面提到的下划线层级以外,数字的排序依旧使用的。因当我们导出了的页面以后,查看的习惯就一张一张向后切换,这向后切换的过程需明确排序的,不能看了第一页购买功,切换下一页就启动页。

所以导出的页面命名画风是这的:

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

第一个数字是模块序号,不仅快速表所属模块,同等于将所有页面做出了类。而在第二开始对页面做出命名,根据操作顺序和权重,在页面名字前面再增加一个序号。

如社交模的详情页,就可这么表达:1_2详情页。

详情页不会有个状态,可能涉及到带有评论,不带评论。或者详情页下属所有独立评论页。那么我们要再增加个层级,正常情况导出去,文件排序会受到文首母干扰,m>p>y,于是实排列会是这样:

1_2详情页没评论

1_2详情页评论详情

1_2详页论

如果论只一状态,但包含下级页面,那么可能命后实际的排序就会变下面这种况,下级页面排到面:

1_2详页论详

1_2详情页

所以,为了解决这些混乱, 会在详情页后面和下一标题前面都增加序号。比如:

1_2详情页1_1完整式

1_2详情页1_2没有评论

1_2详情页2_1评论详情页默认

1_2详情页2_2评论详情页空白

1_2详页3_1点赞列表

1_2详情页4_1转发列表

命名最多只需要保留4层即可,再长下去已经会显的干扰查,并且中文实际应用起来是比英文高效的,因为英文字符占位大多不如中文简。

虽然这么看起来命名似乎非复杂,但只要适应一很快就习惯并应自如。因为这种命名的方法除了在导后可按顺序查,还会强迫我们思考页面的系,并会根据这种系来列 Page 中的 Artbord,我的习惯是独立页面横向列,同的状态就纵向列。

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

而具备这种规律的复杂设计件,会现么情况,借上公司拿到手的要页面源件举例(实际页面数大概是这些的10倍)。虽然模有一定的分类,但是层级太碎片没有逻辑,这些模的位置很难记忆,我们每次都要先很多时间定位到模位置,再浏览页面容来到想要的容。

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

再上中每个模,实际上都有一个独立的 Sketch 存放更整的设计件,那么当每次我们要查、修改、覆盖对应的设计件时,都需要消耗大量的精。

品、设计、前后端程序员都需要不定时查看文件,如为了这缺乏体系命名规则降低效率,长此以往,那造成经济损失远大家想象。

画命名的规则,之所以要有逻辑和严谨,就是为在任何情况下,我们以快速定位到源文件,对它们进行说明或者修改。无论是给自己、其他设计、其他同查看我们的内容时,以很快摸清楚门路,不像无头苍蝇一样只能挨个查看。

结语

上半部分就写到里,命名的系统不是只为命名而命名,而是结合我们文件管理的逻辑定义的一套检索系,所以,在死硬背任何固定的命名模式前,你们先要思考在一个项目中,文件、界面的级关系。

下部分我们会再讲关于切图、图层的命,以及给家一张完整的文件命系统思维导图参考。

欢迎关注作者的公众号:「超人的话亭」

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

图片素材作者:Evgeniy Dolgov

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

相关文章

设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。 「设计评审」一词颇为广义,涉及数种可用性...
UI 设计
某个时间我们下载了许多优秀的 APP,定了伟大的目标——每天赏析一款优秀产品,学习前沿的交互和视觉风格,努力提高自己的审美...
UI 设计
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
UI 设计
上一篇《万字干货!可能是最全面的UI 设计师文件命名规范(一)》我们讨论了 UI设计中文件命名的规范和要点,这一部分我们要...
UI 设计
近年来,设计圈有两大趋势不容忽视,一是人工智能、神经网络、深度学习无疑是时下最热门的科技名词,「人工智能设计」这个词...
Banner
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
UI 设计
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
UI 设计
@烧炖:2018年的七夕是个星期五。晚上7点,设计师小王正在收拾东西,他和隔壁组的小姐姐约好了去看电影,打算7:30下班。正收...
sketch