8天在线UED团队官方博客

使用Sketch Measure的「规范导出」功能代替Zeplin

8天在线UED团队对于效率的提升孜孜不倦,提升效率就是降低成本。我们的UED团队一直保持小而精的特点,就是依靠极高的效率。

最近,我们放弃了Zeplin,使用Sketch Measure的「规范导出」功能代替。(感谢组长和某群的小伙伴)

并且我们搭建了ued.dev.8dol.com(内部)的高保真展示网站,方便规范的展示与共享。

我们先说说Sketch Measure的「规范导出」功能

安装了Sketch Measure2.0以上的版本后就可以使用规范导出功能,快捷键是Ctrl+Shift+E

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-12-45

之后就可以选择像素和色值显示方式

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-17-24  %e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-17-32

选择需要导出的画板

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-18-09

点击导出后就可以生成html文件

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-18-54

在文件夹中生成了index.html这个规范展示文件、assets切图文件夹、links和preview预览图文件夹。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-20-11

打开index.html之后就可以看到这样的界面:

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-21-39

左侧:可以选择画板、切图、色彩

中间:展示界面、鼠标移动到元素上可以交互,展示其大小、间距等

右侧:点击元素后,右侧会展示该元素的属性(如:色彩、大小、位置、样式、CSS等)

PS:点击右侧的色彩可以切换色彩值的显示方式(HEX、RGBA等)

 

Sketch Measure 与 Zeplin的对比

Sketch Measure Zeplin
费用 免费 收费 $15起
访问速度 本地文件,速度快 在国外,速度慢
安全性 本地储存,安全 在线储存,帐号管理存在隐患
便捷性 需要发送文件给程序、或者自己建立共享文件系统 只需要将程序的帐号加入项目既可
展示 分项目展示、内容分散、不方便搜索、 集中展示、搜索方便
切图 直接在assets文件夹找文件就行了、也可以在相应界面下载 可以在对应界面下载
PS 不支持PS 支持PS(PC用户的福音)

高保真展示网站

我们使用Sketch Measure代替Zeplin,明显的缺点就是共享不方便。因此,我们借鉴产品组的原型分享网站,在此基础上优化完善,建立了UED高保真分享网站。

是这样的:

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-52-16

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-52-25

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-52-32

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-52-48

我们将文件直接复制到UI的共享网盘中,打开UED共享网站,就可以查看到Sketch Meaure导出的规范。同时我们也可以将相关的sketch源文件、素材等放在其中。可以更好的内部分享。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-13-%e4%b8%8a%e5%8d%889-55-13

 

至此,我们的全新的设计规范分享方案就完成了,通过对于设计、运维、程序等多方面的工作,实现了一个比Zeplin更加方便的设计规范分享方案。相信对于研发中心的效率提升会有一定帮助!大家可以尝试一下这样的方案~

如果有更好的方案,欢迎留言ww

评论(4)

  1. WordPress这个主题设计挺好看的!~能分享下嘛 Q502363156

  2. 这个高保真展示网站怎么做?

  3. 求教如何建立资源共享网站,需要开发帮忙么

发表评论