设计稿的后续处理
爱读微课 发布于48月前 1003次浏览

一切设计完成后,设计师需要将设计稿交付给开发人员,交付的文件一般包括:设计稿、标注稿和切图。交付文件的质量很大程度上会影响设计的最终实现,在Sketch中,借助软件本身和一款优秀的插件,可以很方便的进行标注和切图,并高效的导出。

在移动设备上实时预览

在进行移动界面设计的过程中,经常会遇到这样的问题:明明在电脑上设计的效果看着挺不错的,但是按照设计图进行开发后发现可能某个按钮太小导致不容易点击到,可能某些文字太小导致看起来很费劲。这时只能够返工重来。

要避免上述问题,最好的方式是在设计时就能在真机上进行预览。Sketch提供了非常方便的方式——Mirror。Mirror是一款运行在iOS设备上的App,可以让设计师实时在移动设备中看到设计在真机上的效果。

若要使用该功能,首先得确保符合以下条件。

第1点:确保是iOS设备。Mirror暂时只能够在iOS设备上运行,不支持安卓设备。

第2点:iOS设备和运行Sketch的Mac在同一局域网内,或者通过数据线连接。

满足以上两点要求后,我们便可以使用Mirror了。

首先需要打开iOS设备上的app store,然后搜索sketch mirror,在搜索的结果中选中Sketch Mirror。Sketch Mirror是收费软件,人民币30元。购买后即可安装。


安装完成后,在iOS设备上打开Mirror,然后回到Sketch并单击工具栏上的Mirror,若iOS设备和Mac在同一局域网内,即可在Mirror处看到该设备,单击该设备名即可。若没有看到设备名称,可以在输入框内输入iOS设备的IP地址,iOS设备的IP地址可以在打开Mirror后的下方看到,如图6-2所示。输入完成后按下回车稍等片刻即可在iOS设备上看到当前画布中画板的预览。


在iOS设备上可以通过左右滑动屏幕切换画板,也可以单击下方的画板名称或画布名称快速进行跳转和定位,如图6-3所示。此时,若在Sketch中进行图层的修改,iOS设备上的预览也会实时变更,十分方便。


将设计稿进行分享

在实际工作中,设计完成后一般需要先将设计稿发送给产品经理。常规的办法是导出设计稿然后发送给产品经理,但是这种方式比较繁琐,如果设计稿需要修改的话,在修改完成后需要再次导出发送。一般情况下一套界面数量也是比较多的,这样会严重影响效率。

Sketch更新到3.4以后,新增了分享功能,打开该功能后会生成一个网址,凡是在同一局域网内的用户均可通过该网址在浏览器内快速实时查看设计稿,并且Mac和Pc系统均可。

要使用该功能,需要先打开分享。单击Sketch工具栏中的分享工具。


将Enabole Local Sharing右侧的开关打开稍等片刻,会自动打开浏览器,并跳转至分享页面,且工具栏上的按钮变成彩色。


在自动打开的浏览器中复制浏览器地址,然后发送给同事,同事即可通过该网址进行访问,查看设计稿。


单击图片即可全屏查看。若无法访问,有可能是因为Sketch文件名是中文导致,可以将文件名改成英文再试。若还是不行将分享关闭后重新开启即可。但是前提是须确认大家在同一局域网内。

若设计没有问题后,便可进行标注、切图和导出了。

交付给开发的文件

首先需要注意的是,每个开发团队的开发人员的习惯不同,可能对设计稿的需求也不同,如命名的规则等,所以在进行设计稿交付前与开发人员特别是前端进行沟通是非常重要的。

交付给开发的文件一般包括3个文件夹,如图6-7所示。


标注文件夹里面的文件为设计稿的标注文件,在该文件内,需要展示给开发人员各元素的尺寸、边距、颜色等,如果是文字还需要行高、字体等,在低于最小触控尺寸的图标上,最好还能给出触控范围的标注。这些数据越精确详细,开发实现出来的的最终效果才能和设计稿越接近。一般会借助一些工具进行标注,在Sketch中Sketch Measure便是一款非常优秀的标注插件,会在后面详细介绍到。图6-8所示便是一个标注的例子。


切图文件夹里面是对界面中元素的切图,凡是程序员不方便通过代码实现的设计师都应该进行切图,特别是图标、按钮等元素。切图文件夹中的每个切图根据系统的不同会有不同的要求,以iOS为例,同一个图标的切图应至少有@2×和@3×的尺寸,且对于图标还需要有不同状态下的切图:默认状态、选中状态等。对每个切图的命名也应该遵循一定的规范,建议和开发人员进行沟通。一般来说,切图需要用英文进行命名,切图的格式为png格式,且命名规则为:模块_类型_功能_状态@n×.png,如home_btn_setting_selected@3×.png,表示在主页板块中的设置按钮选中状态下的切图,且切图为3倍尺寸,适用于iPhone 6 Plus/iPhone 6s Plus。命名应该是有意义的、易于理解和查找的。

设计图的文件夹便是设计稿的导出,方便开发人员查看设计稿本身的样式。有些研发团队不会把设计稿单独分出来组成一个文件夹,而是将设计稿放入标注文件夹中,方便开发人员直接对比查看。

本文节选至

视觉之外—— 全链路设计思维的培养与提升

作者:黄方闻

爱读|www.iread360.com

爱读 ,您的职业进阶课堂。聚焦热点专业,汇聚行业精英,打造精品课程,致力于为您提供专业的在线学习服务及线下高级培训


评论:
暂无评论!赶快抢首评吧
作者
提问/回答
0/2
文章
0
关注者
53
添加评论...
评论0
赞0
收藏0
APP下载
手机扫码下载APP
VIP会员
在线客服
微信客服
扫码关注微信客服
周一至周五 09:00-18:00
我有话说