当前位置:主页 > 导出规则 >

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

  非技术型产品经理福音来了,和程序员不再撕逼,10天在线学习,补齐产品经理必备技术知识。了解一下

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

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

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

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

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

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

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

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

  中国网民网络阅读观察:70后用户比例最高,男性爱“听书”,女性爱“看书”

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://ogelus.com/daochuguize/276.html
点击次数:??更新时间2019-04-23??【打印此页】??【关闭
  • Copyright © 2002-2017 DEDECMS. 织梦科技 版权所有  
  • 点击这里给我发消息
在线交流 
客服咨询
【我们的专业】
【效果的保证】
【百度百科】
【因为有我】
【所以精彩】