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

评论(7)

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

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

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

  4. This message is posted here using XRumer + XEvil 4.0

    XEvil 4.0 is a revolutionary application that can solve almost any antibot CAPTCHA’s.
    Captcha Solution Google (ReCaptcha-1, ReCaptcha-2), Facebook, BING, Hotmail, Yahoo,
    Yandex, VKontakte, Captcha Com – and over 8.4 million other types!

    You read this – it means it works! 😉
    Details on the official website of XEvil.Net, there is a free demo version.

    Check YouTube video “XEvil ReCaptcha2”

  5. 现在可以用蓝湖了

  6. Youve done your design in Sketch and youve uploaded the screens to Zeplin. Now comes up the developers question.

发表评论