前端设计神器:Zeplin for Mac特色介绍和使用说明
发布时间:2023-05-15 00:57:23
Zeplin for Mac是非常热门且高效的mac前端设计工具,主要面向的用户是设计师和前端开发工程师,相当于在他们两个之间建立起了一座桥梁,其核心的功能是标注、style guide、备注文档,以及团队协作。小面就让小编带大家一起了解一下~
Zeplin for Mac使用说明
Zeplin面向的用户是设计师和前端(Web、Mobile)工程师,相当于做的是中间桥梁这一块,核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作,目前仅支持 Sketch,但是 ps 也已经出现在官网,应该也快了。
在使用 Zeplin 之前,最早是使用马克曼进行标注的,也就是直接在输出效果图上量尺寸;使用 Sketch 插件 Measure 之后,可以在画板中生成尺寸标注信息,导出标注图提供给开发同学使用。无论是马克曼还是 Measure,最后的交付物是一致的,大概如下图所示:
这样的标注图有个问题,就是已经破坏了原本的视觉效果图,标注的信息一定会对原设计稿形成遮挡,因此一般效果图和标注图要分开给,开发也经常需要在两个图之间切换,图片管理不太方便。如果你的设计稿同时要适配多个尺寸,还要要输出多份标注图,交付给多个开发同学。更重要的是,如果对页面进行了迭代修改,就需要重新标注、重新输出、重新交付,即开发与设计之间的联结是断的,每次都要人工把这个缺口接上。
另外,如果时间有允许,设计师还需要制作 Style Guide,一方面是为了方便切图,另一方面是为后期迭代做好准备。Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容,如果自己制作的话,大概类似于是这样:
Zeplin 主要就是为了解决上述问题的,使用它之后,可以在 Sketch 中一键导入 Artboard,在设计师做好图层管理(命名、分组)的前提下,它可以自动生成标注信息(并且可以标注为 pt 或 dp),允许添加注释形成类 prd 文档,并且自动提取 Style Guide,同时还允许添加项目组成员,提供给团队组查看项目。
这是项目组管理界面,还有关于项目的简单统计,比如多少页屏幕、多少色彩和多少注释等。
Guideline,可以承载字体、颜色。
图片界面,当鼠标不悬浮在某个元素上时,可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时,点击对应的元素即可:
这样的话,设计师和工程师就可以无缝衔接了。如果喜欢小编的文章欢迎关注,第一时间为您带来最新、最高效的分享!
猜你喜欢
- 当你在编辑一些重要的文档资料时,想要让浏览者认识到这篇文档的重要性或者原创性,那么在word文档中怎么插入水印防伪标识?下面小编就为大家介绍
- 第1步,打开Word2013文档窗口,依次单击“文件”→“选项”菜单命令,如图1所示。 图1 单击“选项”菜单命令
- Excel是一个办公很经常用到的一个办公软件,他主要用于数据的分析、查看、对比等,让数据看起来更直观,更容易对比,而有很多时候需要查找合并了
- 函数曲线绘制并不是一件容易的事情,但是利用EXCEL画出一条函数曲线还是很方便的。今天,小编就教大家在Excel中表格利用函数画出曲线的操作
- macOS 13 Ventura 正式发布了,因为习惯只下正式版的更新,所以真正接触「台前调度」也没多久。用了几天,最后
- 当公式输入完成后,如果需要公式进行重新编辑或修改,首先让公式进入编辑模式,然后再编辑或修改公式。在计算报表中的数据时,如果对某列或某行应用相
- 说到选择我们大多数人比较头痛,想不到安装下win10也要选择,选择装什么版本。比如win10应该下business 还是consumer?对
- 现在有很多有用户都在使用Word来编辑各种文档,而合理的设置word文档的行间距对人们阅读word文件的时候非常的有帮助,那么我们要如何去修
- 今天我们来着重讲一下在excel 中设置双色刻度的条件格式方法,一般来说我们在excel中默认的双色刻度只有白-绿和黄绿两种颜色,我们如何来
- Excel2016表格怎么快速填充数据?excel2016中有个新功能,可以快速填充数据,该怎么填充呢?下面我们就来看看详细的教程,很渐渐,
- Macos系统中有很多我们常用的操作技巧,也有很多未被发掘的隐藏技巧,Mac菜鸟都需要Mac高手的指导才能发现掌握这些隐藏技巧,下面我们分享
- 苹果Mac电脑如何更改默认的浏览器?很多刚从使用windows系统的朋友,其实并不是很清楚怎么更改。下载一个新的浏览器之后都会按照初次打开浏
- 提醒你一下,明天周三就是七夕了。提到七夕,更多的是区域性的爱情价值观的凝结。情侣们成双成对的手拿鲜花简直煞吓旁人,本教程主要使用Photos
- 大家都知道在WPS表格中能够很方便的使用公式来计算,其实在WPS文字当中也能够实现公式计算。操作方法以这张产品表举例,先计算第一个商品的总价
- 在Word文档中编辑有关数学方面的内容,就不免涉及到复杂的公式符号,我们知道可以从插入窗口中找到特殊符号,但是内容一多起来,一个一个地插入,
- 在工作或是学习的时候当我们打开word文档,会碰到这样的一种情况,word文档中的图片不显示,这要怎么解决呢?如下是几种word文档图片不显
- 如果你的 iPhone 储存容量所剩不多,可以删除一些不常用的软件,最常用的方法是在主屏幕长按软件图标,然后点击图标左上角的“×”按钮。但是
- 接到任务,要求在一天内出一份十分复杂的Excel报表,其中有一步操作要比较两列的值.这功能不常用,记录之,备忘。假如你要比较A列与B列数据是
- 到了年底,单位要报送的表格非常多,有时就请一些非专业老师帮助录入,但在录入的过程中我发现不少老师录入的表格数据中存在一些空格,影响了数据的整
- 在Windows 7系统中打开办公软件Microsoft Office Word出现错误提示“Microsoft Office Word已停