Design

很多人在学习 Sketch 时,打开工具看到迥异的功能,会立马打退堂鼓。

其实大家对于工具的恐惧,来自于太多的新功能,和 Axure、Photoshop 不一样。

但是作为产品经理,不是专职设计人员,只用会 Sketch 的这几个功能,就够了。

Artboard

Artboard 有点类似 Axure 中的页面。如果说 Axure 中以页面为单位,那么在 Sketch 中就是以 Artboard 为单位。

  • 以 Artboard 来规定页面的尺寸
  • 以 Artboard 为单位来流转至设计师、研发人员
  • 以 Artboard 为单元在 Principle 中制作页面跳转

如果你做的是 Web Design,在如今宽屏较多的情况,可以以 1200 px 作为页面宽度。

而我习惯使用 1440 px 的宽度。

如果你做的是 App Design,并且以 iOS iPhone 6 的尺寸为基准,那么就可以使用 750 px 作为页面宽度。

个人觉得 Sketch Artboards 比 Axure 页面更好的地方,就是可以更加直观看到所有页面。

当你点击 Artboard 时,Sketch 会给出尺寸参考,让你快速相应尺寸的页面。

Rectangle

身为产品经理,最常面对的是线框图,所以在 Sketch 中最常见的就是矩形:Rectangle 了。

就算是设计师,最常用的也就是矩形吧。啊哈哈。

先给大家看看一个页面,他几乎都由矩形构成。

掌握矩形的检查器,也就掌握了 Sketch 功能的一半啦。当然,这是对于产品经理来说啦~

那我们来看看矩形的检查器都有什么功能吧:

  • 对齐:几乎每个设计工具都有的功能
  • 位置、尺寸、翻转
  • 圆角
  • 样式定义
  • 透明度、图层混合:类似 Photoshop 的图层混合功能
  • 填充与边框
  • 外阴影和内阴影
  • 模糊

是不是很简单,有 Axure 基础基本都能了解是什么功能。

至此,你就可以开始使用 Sketch 来画原型了。

Icons

在原型设计没有走设计流程时,产品经理可以去阿里巴巴下载一些 icons 临时充数。

Sketch 可以承接 iconfont svg 的格式,并且还原路径,方便后续编辑。Sketch 的布尔运算,和 Ai 中的「路径查找器」如出一辙。

在 Sketch 布尔运算中,可以方便得实现形状的合并、相差、相交、去重。

Zeplin

产品经理做完产品设计后,需要将成果交接给设计师或者说研发人员。Sketch 插件 Zeplin 可以很好帮助我们完成这一点。

Zeplin 是帮助设计师和研发人员更快沟通的工具,他可以完成:

  • Artboard 快速上传
  • Sketch 中每个元素给出标注和参考代码
  • 交接切图
  • 页面标注,帮助研发和设计更好地理解产品设计
  • 标签,更好地分类来帮助版本管理

上传

在 Sketch 选中要上传的 Artboard,按下 cmd + E 就可以上传啦。

参考代码

Zeplin 神奇的地方就在于,可以给出标注和参考代码,来帮助研发人员更快得书写前端代码。

切图

在 App Design 中设计师往往要交接不同尺寸的切图,就很麻烦。Zeplin 可以帮助设计师快速生成不同尺寸的元素切图。而研发人员直接在上面下载就可以了。

页面标注

有一些简单的交互和控制样式说明,可以直接写在 Zeplin 上就很方便。相当于产品经理的需求文档,就可以直接在 Zeplin 上搞定了,还自带评论功能。

标签

当迭代速度快、页面数量多时,适当地给页面打标签,可以帮助设计和研发快速找到页面,和确定任务。

也能够给不同页面打上版本信息,更好地进行版本管理。


好了,掌握 Sketch 这些功能,就可以尝试使用 Sketch 来做产品设计了。Sketch 目前的模板,周边的插件,已经优于 Axure 了。

也是时候学习这个新工具了。