[TOOL] Recommend Sketch + Zeplin


设计师与工程师“灵魂”对话

“上次改背景色,涉及的模块页面那么多,改出一堆问题,你这还改?“

“切图不对啊,用不了……”

“字体字号还改?13pt改成14pt,又从14pt改成13pt,regular 改成 light, 又从light 改成 regular……”

“这规范什么时候才出来,今天改,明天改,什么时候是个头……”

常规版本迭代期间,设计师已经不是单纯输出一个个界面就完事ok。由于版本之间,界面之间具有版本可持续性,有些基本的样式不是说改就能改,稍有不甚,极有可能改出一堆问题,适得其反。

 

工欲善其事,必先利其器

Sketch + Zeplin 是集切图、标注、设计规范、前端代码导出为一体的设计协作工具,实乃现代设计的先进武器,使用起来工作效率那是蹭蹭蹭地往上蹿。

    推荐理由1:  覆盖全项目成员、主流操作系统和设计软件

  • 支持Photoshop\ Sketch 文件导入特定图层、画板,同时适用于原生和H5页面

 

  • 支持Windows\ Mac os系统,设计开发不同系统都可下载安装客户端,全体项目组成员均可无障碍使用。

 

  • 云端存储,随时随地同步更新最新设计

 

     推荐理由2:  设计师彻底告别标注、切图,大大解放生产力

  • 支持创建IOS \ Android \ Web 三类不同项目,满足不同端项目的设计需求

 

 

正确使用的方法

第一步:正确设计Sketch

画板尺寸

统一设计尺寸是设计开始基础,

  • IOS:
  • Android:
  • Web:

命名规范

界面命名规则

控件命名规则

切图方法

 

行高

文本框宽度

图片质量

 

第二步:使用Zeplin 助力,协同合作

准备工作:

  • 下载Zeplin 客户端、Sketch 插件
  • 安装Zeplin、Zeplin Plugin
  • 注册帐号
  • 创建项目: IOS \ Android \ Web
  • 邀请项目成员

导入界面

 

工程师:

  • 接受邀请
  • 下载客户端
  • 注册帐号
  • 安装客户端

马上开启选择界面、看标注、下载切图、复制文本/代码模式

 

第三步:版本管理与设计规范养成

标签分类

导入界面后,为每个界面打上标签(版本标签、功能模块标签、实现方式标签)

例如: V2.1 \   原生  \   H5  \  搜索 …

规范养成

 

愉快地工作吧!