使用Sketch & Zeplin 需要注意的10件事情

作者最大原文链接

内容简介

我之前的文章提到过，优秀的动画应该与人和谐。响应已经非常惊人，而且看到别人对过度动画界面感到沮丧是一种非常棒的体验。你刚刚将所有设计上传到Zeplin，突然间你收到一位开发者的信息，要求你导出所有图标和图像，然后压缩成zip文件发给他们。你不知道为什么他们不直接从Zeplin下载它们？他们让你把截图上传到Zeplin，因为他们无法看到项目之间的边距...接下来，你会质疑这个工具有什么用途？

如果这些事情之一发生在你身上，那么这篇文章是为你写的。以下10件事情，将帮助你充分利用时间，并与开发人员找到愉快沟通的桥梁。

1.画板尺寸

iOS版 @ 1X：375 x 667 px
Android mdpi：360 x 640px

网页
你的产品将在哪些设备中呈现？定义断点，并记住开发人员将要使用的媒体查询。如果你不知道是什么，请与开发人员联系。

1920 x 1080像素
1200 x 900像素
1024 x 768像素
320 x 480像素

2.断点如何在响应式布局中的作用

使用响应式设计（根据您已设置的断点）将作品上传到Zeplin，换句话说，检查作品在不同的屏幕分辨率和设备上的展示效果。

您认为很明显，设计将在较高分辨率（例如1920 x 1080像素）上以水平方向居中，但开发人员不在乎读者的感受。

3.图像栅格尺寸

将最大尺寸分配给图像栅格，以避免在设计在更高分辨率的屏幕上显示时质量损失。例如，如果您正在使用iOS的应用程序，请将图像的大小设置为 @3x。如果您不这样做，您将收到开发人员的消息，如下所示：

“给我一个更大尺寸的图片，因为在 iPhone7 上看起来有点像素化。”

4.导出图标组，也可以单独导出各个对象

开发者可能想导出您的图标的一个或多个元素，或完整的图标。所以使所有项目可以单独导出也可成组导出。在Zeplin，开发团队将能够导出。单个元素也可以导出成组的图标。

5.导出图像而不是文本

想象一下包含图像，文本和过滤器的banner，并且不能使用CSS构建过滤器。那么开发人员必须能够导出：

1.只有图像
2.只有过滤器
3.图像滤镜

6.线高

正文文本的行高必须比当前字体大小多6px，但想要通过赋予元素图形来影响用户的标题或重叠文本除外。

然后，检查不同文本框的行高。请记住，开发人员将选择一个文本框并复制并粘贴行高。在所有文本框中设置相同的行高以保持设计中的一致性。

7.文本框宽度

将单行文本的宽度设置为'auto'。这将允许您的开发团队查看文本和界面的其他元素之间的边界，或屏幕设计的边界。

8.移除图标周围的区域

您在Sketch中导入的一些图标有一个周边区域，这对导出是很好的，但是当他试图检查Zeplin中的对象之间的差距时，对于开发人员来说是很困难的。删除这个空间，让开发人员能够检查图标和界面的下一个元素之间的距离。

9.按钮状态

您在Sketch中完成了设计，并将屏幕上传到了Zeplin。现在出现开发者的问题是：

“当用户悬停，点击等交互时，图标，文字，按钮的会变成什么样？”

在界面中使用的不同组件创建一个包含所有状态的新图形，您可以将其命名为“Specs”。

10.如何在Zeplin组织设计画板

Zeplin允许您通过标签组织屏幕。你可以按内容（例如，您的网站的部分）或功能对屏幕设计进行排序。按照用户流程将屏幕排序到每个标签（部分或功能）中。这样，Zeplin的第一个屏幕将成为您网站或应用程序中的第一个屏幕。

还有什么？

不要浪费时间创建风格指南，您可以直接从Zeplin（Styleguide选项卡）添加颜色和排版。PD：别忘了邀请开发团队到你的Zeplin项目！