“网易有钱”sketch使用分享

Posted 2021-01-02

本文来自网易云社区

写在开头，关于ps与sketch之间的优劣网上已经有很多分享，大家有兴趣可以百度，其中对否我们在这里不予评价。在移动互联网时代每个app从几十到上百张页面，如果用ps绘制一个个页面光文件管理就让人崩溃，这也是为什么adobe出了一款ux的软件，自网易有钱2.0.0开始我们使用sketch到现在迭代到2.4.0版本，在本篇文章里分享一下我们的使用心得与问题希望可以和大家一起交流。

摒弃ps拥抱sketch

自项目之初“有钱”团队中的切图和标注工作由开发同学独立（满脸写满了大大的幸福），此举大大节约了视觉的工作时间，这也是我们可以在半年时间进行12次迭代的可能（15年6月上线～15年底）。同时带来的是视觉走查发现大量的还原偏差，毕竟我们不能指望开发同学在切图和标注做得有多好。不仅如此还需要提供大量的psd文件，即占内存又占传输速度找起文件又慢让我们很是苦恼。所以在研究了sketch的各种优点之后果断在2.0摒弃ps拥抱sketch。

如图为一个需求递交给视觉之后的流程演示，在此过程中我们需要完成需求方的视觉设计确认（在此不多做额外描述仅以有钱的实际案例描述sketch的设计中需要注意的一些事情）－多平台／多屏幕之间的适配（如何以一套尺寸完成ios&android之间的通用适配）－递交开发（分享什么样的sketch文档是开发心理窃喜的）－视觉走查（不要偷懒，再敬业的开发交付物也达不到100%的还原）

设计工具

我们用到的工具为sketch（暂时仅支持mac版），并且需要付费购买。同时我们需要向ps play一样的设计预览工具“mirror”；此时我们仅需要输出sketch文件给Android&ios开发，由开发自行测量与导出切图。

同时我们还会输出一套由sketch＋measure导出的文件给产品／运营／qa和wap前端方便没有mac的同学也能查阅。 （感谢有钱的开发同学帮我们修改了measure，修改了什么稍后会介绍）

基于iphone6尺寸为基准设计

安卓和ios不同的屏幕尺寸需要适配让视觉设计师苦恼不堪，能否一稿适配多平台一直是设计师探索的方向，然而iphone6的出现让这些变成现实，在2x标准下安卓720px 与iphone 750px仅相差30px，30px的概念按有钱的title txt来计算仅仅是一个文字的宽度因此可以忽略不计。详细可见站酷“来自海边的设计师”关于适配的分享有兴趣的同学可以自行查看在这里不多做重复。地址：http://www.zcool.com.cn/article/ZNDA1MzI0.html

制定规范文字与图层样式

在“有钱”的设计中我们更改了以前ps中的控件规范定义，不再以color与txt之间组合搭配而是每一个规范包含从iphone多屏幕的适配规则。

1.文字

在现如今sketch的规范库中，我们与开发约定文字规范：“为上述文字属性定义不同设备下的字号大小不同的颜色分为不同的编号”，视觉同学在新页面设计时很容易找到自己需要用到的文字属性，再也不会出现各种凌乱的懵逼；开发只需要输入文字编号即可适配多个屏幕（如：MKFontStyleCode_024）——一劳永逸。

2.通用图层样式

sketch里不仅可以定义文字规范，还可以定义图层规范库也就是把通用的btn／background／line／cell的颜色进行定义在后续的页面需要用到都可以直接从组件库里调用。与文字一样开发仅输入编号即可。

3.icon／banner／section规范输出

为了便于开发切图以及测量，我们需要把需要切图的icon／banner进行编组，并且在make exportable里进行预先切图。因为我们的设计尺寸是750px icon尺寸为2x尺寸然软件默认导出为1x，所以在导出1x，2x，3x时需要进行调整，如0.5x＝1x ，1x＝2x，1.5x＝3x

众所周知涉及到多平台banner适配比较复杂，单纯的等比缩放会在大屏下看起来巨大无比，因此我们在适配时根据不同的情况以“等比缩放组件／等比缩放＋弹性组件”进行适配。

section作为基础的组件，为了利于开发测量，我们根据开发实现方式以及使用习惯从视觉上进行了规范的调整，如图在开发的认知中一个section由多个cell组成，每个cell都是一个独立的区域同时包含分割线可在顶部也可在底部根据需要来定，那么我们如果要做一个130px的cell实际是包含线的高度。

协作输出

做好设计稿之后，视觉需要提供文件给开发，如果你们的开发同样安装了sketch只需把以上所描述的源文件给开发，如果开发同学没有sketch那么就需要用到上文中提到的measure，此插件可以像sketch一样的测量方式真真为视觉省了很大的工作量，间距／字号／透明度／颜色／等完全不在话下，还可以在pt与px单位下直接切换，别提多人性化了。然而measure无法显示我们定义的文字和图层样式代码，一度使我们将要放弃，毕竟花费那么大功夫和时间却无法协作让人很是郁闷。然经过我们开发同学对measure进行了修改，measure plus 横空出世，导出规范编号妥妥的不在话下。附带下载文件，有兴趣的赶快安装使用吧（ps：不知道measure的人可以这里看一看网上有很多描述，我就不详细解说了http://www.uisdc.com/sketch-useful-plugins）

视觉走查

这一步一定不能忽略，根据我们的实测，自从用sketch之后开发的还原度从80%提升到94%，但是还是会有一些方面会有一些小瑕疵，这也是可以理解。因此我们一定需要重视视觉走查，让你的想法可以99%甚至100%的还原也是一件很酷的事情。

特别插入

很多同学关心视觉还原是如何从80%提升到94%，简单的来说视觉还原的问题从两个大角度去分析：1.距离测量不够准确，2.文字实现出来大大小小或者偏上偏下。这两个问题更多的会体现在文章里提到的cell和文字。因此在sketch里我们定义文字与开发库里一致的行高，比如32px的文字实际在开发库里约是40px 这个时候在测量和居中的时候就不会出现以前的问题。

特别鸣谢

有钱视觉团队，有钱开发团队，有钱产品团队，有钱运营团队。

一稿适配多平台，来自海边的设计师：http://www.zcool.com.cn/article/ZNDA1MzI0.html

SKETCH设计教室！带你了解超好用的SKETCH插件：http://www.uisdc.com/sketch-useful-plugins

measure plus下载地址：https://github.com/hite/sketch-measure-Plus

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易云社区，经作者李宁授权发布。

相关文章：
【推荐】 如何通俗地解释云计算，看完这组图就明白了
【推荐】 大数据、数据挖掘在交通领域的应用