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

接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。Sophia的tips:真正的高手,细节都做的很好!


接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。

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

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

2. Sketch的Artboard(画板)命名

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

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

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

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

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

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

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

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

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

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

3. Layer(图层)命名

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

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

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

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

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

4. Symbol组件的命名方式

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

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

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

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

5. 导出图片的处理

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

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

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

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

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

相关阅读

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

专栏作家

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

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

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

(0)
CatherineCatherine
上一篇 2017-05-01 00:17
下一篇 2017-05-01 02:17

相关推荐

  • 如何平衡广告盈利和用户体验?

    如果你是一名手机应用开发者,你肯定知道广告可以为你的应用提供巨大的收入潜力。可以说手机应用就是在为流量主下金子: 到2020年,将会有高达1890亿美元的收入,而其中仅应用内广告带来的收入就会达到1170亿美元。事实上,我们最近对1000多名应用程序开发者进行了调查,发现高达84%的人承认他们通过广告将应用变现 —— 61%的人声称广告带来了最多的收入。但是,一如既往,能力越大,责任越大。作为一名应用开发者,你要负责确保用户的使用体验,...

    2018-04-06
  • 如何从头打造让用户真正信任的界面

    让人信任的网页到底是怎么样的?设计一个令人信任的网页应该是有迹可循的,几天文章当中的10个技巧,就是可行性相当高的手法,仔细看看,也许会让你获益匪浅。

    2017-05-24
  • 「大产品小细节」5分钟了解格式塔原则

    这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

    2017-08-04
  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05
  • axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11
  • 交互设计文档如何写,才给程序员以美得享受?

    阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

    2018-02-01
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • 创新历史上的今天:黑白电视首次面世 1926.01.26

    今天看到谷歌Doodle的名称是: 黑白电视首次面世 1926 ,我们来说一说这个产品从0到1的创造历史,从交互设计角度看你有什么启示呢? Doodle的名称: 第一台电视亮相 90 周年 表明此doodle时间是: 26.01.2016 这个产品…

    2016-01-26
  • 网易云音乐交互负责人|从一次活动设计,聊聊交互设计师的3个阶段

    交互设计师的三阶段:有美感、有逻辑、有sense

    2017-05-18
  • APP设计当中不容忽视的20个小细节

    APP设计当中不容忽视的20个小细节如下: 1、一致,一致,还是一致 你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应…

    2015-04-14