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

接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲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

相关推荐

  • 《用户体验可视化指南》视频讲书(3)

    《用户体验可视化指南》书中第一章的第二部分。客户旅程是一条线路,用户地图是多条线路的集中展示,专注于服务蓝图的交互可视线之上的部分。心智模型本质是聚类,空间地图用于更复杂的系统去表达信息流和内容之间的关系。点击视频观看(大约10分钟)兰静同学听后分享这节视频有3个内容,其中有个非常重要的内容,解决了我也疑虑已久的问题:客户旅程图和体验地图,到底有什么区别?视频中详细的说明了二者的区别:一条线和多条线。客户旅程图强调了用户是怎么一步一步做...

    2018-04-01
  • 网页感知价值研究:UI中的感知价值

    “感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。定义:感知价值是指对产品或服务目标的主观感受。

    2017-05-13
  • 我手机里的应用设计体验

    最近养成了一个习惯,看到手机应用的一些设计点,自己觉得好或者不好的时候就会截图下来,翻了一下手机已经存了一堆图片了,就干脆发出来吧。 应用更新通知弹窗 应用更新弹窗是几乎每个应用都会有的一个模块,但是…

    2016-06-27
  • 原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 【交互面试】阿里巴巴交互设计实习生笔试题汇总

    阿里巴巴交互设计实习生笔试题 1 在线测试,测试时间 180 分钟 【自我介绍-20 分】简要的自我介绍(学校、学历、专业、个性、独特亮点等),并上传你的简历和作品。(将附件上传到无密码的网盘中,建议使用酷盘,并…

    2015-07-30
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 这3种移动端登录的交互方式,孰优孰劣?

    登录注册的界面看起来很简单,在交互上却有很多值得思考的地方。现在我们选以下三种较有代表性的登录方式来比较和小结一下。

    2017-05-26
  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 资源贴|2016年Top20 UX设计博客和资源网站

    全球用户体验和用户界面的发展从未停止,并引领潮流,似乎每个人都知道该行业的流行语。尤其重要的是要时刻更新行业最新想法和会谈结果,但很难从众多的资源中找到真正有帮助的材料,所有撰写该文,这就是博客的方便之处。

    2017-05-19
  • IAMUE首发-交互设计相关概念手册

    这些“洋词”工作中总有会遇到的,新手看过来,别到时候别人说了你听不懂 名词 缩写 单词 功能 交互设计 IxD/IaD Interaction  Design 简单的说,交互设计是人工制品、环境和系统的行为,以及传达这种行为的外形元素…

    2016-01-13