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

经过一期带团队的体验,阁主发现文件命名有点让人抓狂,实在忍不住更新一篇文章去说说这其中大家约定俗成的规则,不仅包括切图命名规则,还包括文件整理规范。之前楼主有整理过简单的,貌似不够用,今天再来具体说说。


经过一期带团队的体验,阁主发现文件命名有点让人抓狂,实在忍不住更新一篇文章去说说这其中大家约定俗成的规则,不仅包括切图命名规则,还包括文件整理规范。之前楼主有整理过简单的,貌似不够用,今天再来具体说说。

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

文件整理的好处

阁主在说一件事的时候,喜欢将原因或者自己的经历先交代出来,那样大伙也看得更明白,知道为什么要这样做。

刚工作的时候,为了省事,于是将所有的图层都随意摆放(针对的是sketch软件进行讲解的,Photoshop的应用同理),有时候实在是太多了就进行群组,英文叫group,有点像昨天在群里发的开源项目的源文件的样子。如下图

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

可后来,渐渐发现,这样随意的做法在做方案的过程中看似节约了时间,实际上是浪费了时间

为什么这么说呢?因为作为设计师,基本上没有一稿过的情况出现,方案都是同PM、同部门其他设计师、开发商量后一步步定下来的,所以反复更改的情况肯定存在,并且可能拿出以前版本的文件进行参考。那么对于文件来说,总是需要寻找、选定、更改各个版本号以及各个图层,如果时间一直浪费在寻找上面,真心划不来,无意义。

于是针对个人来说整理好单个文件以及项目组的文件,是一件非常重要的事情,它提高了你的时间利用率。

后来,进了更大更规范的公司,所接触的项目就更多了。于是文件的管理,从个人查找自己的,变成了自己去查找团队的,以及团队查找团队公共的文件,有时候还要跨项目进行公用功能块,那就意味着有的文件是公用的。这样看来,文件管理也更加规范也更加重要,你能想象所有人像无头苍蝇一样到处乱撞去找文件,并且从各个杂乱的图层中找出某个图层进行修改的情况吗?

再者,有的软件非常依赖于sketch文件的整理,比方说动效原型的软件Flinto,sketch里面的图层按照什么规则进行陈列,利用sketch的插件导入到Flinto的时候,它就会长成什么样。如下图,左边是sketch的图层顺序,右边为Flinto的图层顺序。

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

软件这样设计的好处就是,很方便在sketch修改好文件之后进行导出。如果你的同事做的sketch杂乱无章,那么这项工作就必须由你自己来进行承担,那感觉真的是很想骂人。但反过来也是一样,你自己的sketch文件不整理好,也会给别人带来困扰,久而久之,别人也不太喜欢跟你合作。

当咱们将工作的场景放出来进行回顾的时候,就知道自己应该怎么做了。

文件夹的整理方法

一般用一个大的文件夹作为一个项目最原始的管理,还是拿千寻租房的项目来打比方。首先大的文件夹取名为该项目的名字“千寻租房”。首先阁主先针对有多个版本需要管理,并且UI和UX都需要进行接触的工作内容进行说明。文件整理方式如下图。

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

一般一个项目会涉及到以下几个内容的整理:

  • 01 Wireframe即low-fi(低保真效果图)文件的地址;
  • 02 Visual Flow是Hi-fi(高保真效果图)地址;
  • 03 UI Kits是图片资源输出的地址(比如说icon);
  • 04 Documents并不是产品文档,而是APP里面需要的一些文档,比方说《服务条款》等;
  • 05 App icon即APP的icon在各个平台上需要的尺寸图和它的源文件,尺寸常备1024x1024px,512x512px,167x167px,152x152px,120x120px,80x80px,58x58px(可以参考相关iOS规范);
  • 06 Video Templates是有视频文件的情况下放置视频;
  • 07 AppStoreScreenShot专门为screenshot(即用来简介APP功能的页面,需要上传到各个APP的发布平台)进行准备的,因为安卓平台实在太多了,有时候每个平台规定的尺寸还不太一样,所以专门为它怎被一个文件夹;
  • 08 Lauch Card因为在UI层面上需要耗费的时间比较多,一般在改版的时候放在比较靠后的需求,所以也可以单列出来。

而作为设计师,接触最多的就是01,02,03,所以讲他们三个放在最前面,这也是给文件夹进行编序的原因,所以看到从01到08,序列号是按照它们使用的频率和重要程度来进行排序的。

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

为什么不将03进行版本的区分?因为同一个APP,从1.0改版的2.0的时候,icon可能延续了部分1.0版本的内容,所以部分是公用的,如果再在上面进行分类,反而程序员进行查找的时候要去翻多个子文件夹,反而不太方便。设计师只要告诉程序员所用图片的名字,程序员可以直接根据单个的icon路径,直接在里面进行提取。当然这也只是其中的一种解决方案。

每个版本又可以进行功能块进行子文件夹的分类,比方说上图中的这一部分。

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

Archive是用来放历史文件的,对于设计师来说历史文件是不能丢的,说不准哪一天老板就说“还是改回第一版吧~”你懂得~

以上是针对工作内容综合性比较强的同学进行设计的文件整理方式。倘若有的同学工作内容比较集中,比方做单做UI或者单做UX的,那么文件的整理方式也可以进行如下进行整理。因为内容比较单一,所以只需要进行版本号进行区分也行。

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

文件夹的命名方式是“项目名+版本号”。比方说1.0版本的千寻租房项目,那么命名就是“千寻租房1.0”,如果有平级的2.0版本,就在它平行的下面再建一个文件夹叫“千寻租房2.0”。那么无论找什么版本的文件都一目了然。

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

1. Sketch的命名规则

Sketch的命名如上图可以看出,“项目名字功能块版本号_修改日期”,比方说在5月5日做的千寻租房1.0版本的首页,那么它的命名就是“千寻租房_index_1.0_0505”。加上日期是为了方便别人和自己查看哪个是最新的版本,有时候在查找历史文件时也能起到帮忙回忆的作用。

还有一点就是一般做项目的时候会给项目取一个英文的代号(特别是在跨国项目中,方便不同文化的人进行沟通),所以,在sketch命名中也多用英文进行命名。(英文不好的,用Google翻译或者有道翻译都是不错的选择,据阁主经验,三个月之后自己就习惯了)

文章太长分两天更新,明天内容更重要,将更新Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式等等干货,以及整理文件的思路总结~敬请期待~

相关阅读

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

专栏作家

Sophiallg,微信公众号:Sophia的玲珑阁,人人都是产品经理专栏作家。一枚爱折腾,爱健身的交互设计妹纸。

本文原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22248/

(0)
CatherineCatherine
上一篇 2017-05-01 01:23
下一篇 2017-05-01 03:24

相关推荐

  • 交互设计七大定律之席克定律

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07
  • 产品设计评价技巧的那些事(Airbnb产品设计总监)

    分享者:Katie Dill(Airbnb产品设计总监);译者:夏梦竹、张红月   在产品设计中会存在各式各样的评价,也许评价可能会带有一些意见色彩,但这就是它的价值所在。它让我们明白——为何人们喜爱或是讨厌我们的产品。…

    交互专题 2023-03-03
  • 屏幕外的交互设计:界面设计 ≠ 屏幕设计

    网易UEDC – Vicol :在互联网做设计的朋友,工作中几乎每天都接触着电脑和手机屏幕,像我的交互设计 工作也以接需求画原型图写文档为主。但我今天想说的,和这些看起来没有什么关系。我想说点屏幕外的交互设计 。

    2017-09-28
  • 干货推荐|数据可视化的五个步骤

    数据被称作是最新的商业原材料「21世纪的石油」。商业领域、研究领域、技术发展领域使用的数据总量非常巨大,并持续增长。就Elsevier而言,每年从ScienceDirect下载的文章有7亿篇,Scopus上的机构档案有8万个、研究人员档案有 1 千 3 百万,Mendeley上的研究人员档案有 3 百万。对于用户来说,从这个数据海洋中抓到关键信息越来越难。

    2017-05-29
  • 交互设计的前世今生:了解其产生与发展

    读史使人明智,这几乎可以说是真理。可以从历史中洞悉事物发展的本质。帮助我们更好的活在现在和将来。回顾交互设计的历史,了解交互设计的产生与发展,让自己在交互设计的道路上越走越好。

    2017-05-16
  • 灯塔激光定位技术——多人大空间交互体验的最优选择

    ——映维网——国际影响力VR信息数据平台声明:本文系第三方稿件,非映维网官方稿件,望读者知悉。本文内容涉及任何法律问题均与映维网无关。禁止以“来源映维网(YiVian)”名义转载本文。空间定位是VR 市场中一个非常关键的技术,当今排名前列的VR硬件设备厂商(HTC/Vive和Oculus)分别采用了不同的空间定位方案Oculus 的 Constellation 系统红外摄像头定位HTC/Vive、大朋VR的 灯塔激光定位系统尽管这两种定...

    2018-01-30
  • 5个优质的设计师导航网站汇总

    作为一名设计师想要设计出比较优秀的设计作品(包括网页设计和移动APP设计),除了拥有熟练的设计技能外,还需要拥有出众的创造力和审美。当然,如果你也有非常强的临摹能力也是不错的。 如果你对生活和万事万物没…

    2015-12-23
  • 大势APP的用户体验究竟“火”在哪儿?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:大势APP的用户体验究竟“火”在哪儿?周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目本期主讲老师▼用户体验设计UX是交互设计中非常重要的一点,每个APP根据适用人群和功能设计的不一样,都会有不同的用户体验,下面来说一说在众多...

    2018-04-07
  • 还原产品的基础属性问题——用户体验

    您真正的了解用户吗?找项目的时候是不是会遇到各种各样的坑?你“以为”和“现实”中究竟有什么区别?我们会不会就是所谓的自嗨型创业者?如何解决以及避免?今天我们即将揭晓!三人行茶学空间打造和谐空间,共享茶文化平台,精准交友,合作共赢。本周日特别邀请我们的会员嘉宾进行主题分享,一起共同成长!本周分享嘉宾:刘岱伦岱伦总2008年创办第一家o2o项目——洗车。到家!2013 年曾创下淘宝细分类目自然搜索排名第一!2015年自主研发无线充电车载净化...

    2018-04-19