如何使用Sketch3创建APP原型

自从Fireworks逐渐衰落之后, 我一直在找其他好用的app和网站设计工具。后来我发现，只需用Sketch再加上其他一些简单的工具，就能构成一条非常不错的设计生产线。

在这篇文章中，我将谈谈我是如何利用Sketch搭配Flinto及InVision这样的原型工具来进行原型设计的。同时我还会在这篇文章中免费提供一些实用的Sketch模板文件。

在转入正题之前，为了说明我为何要选用Sketch作为UI设计工具，我推荐大家有时间读读这三篇文章：

•    “适应今日趋势的网页设计工具” 作者：Anthony Colangelo
•    “Fireworks逃难者们!快投入Sktech3的怀抱中吧！”作者： Adam Howell
•    “发现Sketch” 作者：Jean-Marc Denis

1.原型设计的意义

根据我的经验，当你向客户或者团队说明一款App的设计时，即便是制作的很简陋的原型也比一堆干巴巴的静态图片更实用些。

我自己也曾试着用不同的方法向客户展示原型，包括用平面图像，可点击的PDF文件，线框模型，甚至是Interface Builder创建的原型等等。但效果都不是很理想。

直到最近我才发现一个较为可行的方案：建立一个线框包，并搭配使用Flinto和InVision来创建互动原型。我也发现向客户展示模型时，环境（context）是非常重要的。例如，在电脑上展示某款移动App的截图可能会令人费解。
Flinto有30天的试用期，而InVision则有可供在单个项目中使用的免费套装。这两款工具都有付费增强版。有些人质疑我们这样做出来的App原型是否可用，但多数人都能理解这样的工作原理。我常用盖房子为例来说明：线框图就像房子的基本结构，等骨架搭好之后，就可以进行装修和安置家具了。

接下来我们来谈一下免费的Sketch文件。

2.Sketch模板文件

T这里提供的iOS 7 Blueprint.sketch可以免费使用，它可以帮助你更有效地创建互动原型。

免费Sketch模板文件
•    Sketch Blueprint (ZIP file, 1.5 MB)
•    Sketch Blueprint, GitHub

请注意这些模板文件仅适用于Sketch3.1及以上版本。

这些文件中已经包含了一些基本元素：
•    标签栏（tab bar）
•    菜单栏（menu bar）
•    片段控制器（segmented controller）
•    搜索条（search bar）
•    表格(tables，包括有图标和无图标的)
•    不同比例的图像
•    警示框（alerts）
•    不同的按钮和图标。
你还会在文件中找到不同的颜色和文字样式。这些Sketch模板文件已针对iPhones和6 Plus做了更新。

3.如何组织Sketch中的App文件

我的方法是在Sketch中为每个部分都保留一个单独的页面。拿登录页面来说吧。我会给登录页面的每个次级部分(如注册，找回密码，密码错误等)留出自己的画板(artboar)。如果我要制作的App确实需要登录或注册的过程，我会把这个过程的每个步骤都在原有的页面中设计出来。

Sketch文件中一个页面的不同状态
面对不同的状态图，你可以自己为它们命名。也可以参考我的命名方式。我一般是采用页面名称–状态的方法，如
•    登录–主页面
•    登录–注册
•    登录–忘记密码
•    登录–错误

在设计不同的状态页面时，对于重复的元素如菜单条，图像和图表，我一般会使用符号来代替。

Sketch也允许你以同样的方式处理颜色，按钮，文字风格等元素，而且十分快捷。如果你选定了主标题，正文及次标题的风格，那么这些风格会自动适用于其余所有文档。如果你要修改颜色的话，你只需修改一处颜色，其余相同风格的文档随即会自动调整为你修改的颜色。这样你就不必手动逐一修改它们的风格了。

提示:我认为Sketch与Adobe Fireworks之间可以做个对比。在Sketch中处理符号与样式的方法与在 Fireworks中很类似，所以应该不难理解。对这个话题有兴趣的读者可以参考以下文章：

•    “Collaborating With Adobe Fireworks on Large Design Teams,” Dan Nisbet
•    “How to Make an Effective Style Guide With Adobe Fireworks,” Joshua Mauldin
•    “iOS Prototyping With TAP and Adobe Fireworks,” Shlomo Goltz
•    “Useful Fireworks Techniques and Features for Large Design Teams,” Kris Niles

Fireworks虽然也有与Sketch类似的页面，但它并不具备Sketch的画板（ artboard）功能。但对于熟练的Fireworks用户来说，在不同的App界面之间切换应该并不困难。

另外请注意,Sketch中的符号与Adobe Fireworks中的符号并非100%地相同。Fireworks不仅有符号，还有组件符号（rich symbols）。Fireworks中的组件符号允许用户独立编辑一个符号的实例属性（instance properties）,这意味着用户可以更改一个组件符号的实例而不会影响主符号。

而Sketch目前还没有引入符号内状态的概念,所以当你试图赋予一个按钮多重状态时，一定要特别留神。遇到这种情况，最好把活动状态与非活动状态做成不同的符号。

4.如何将Sketch文件导出到原型工具中

我以Flinto为例来说明。

在Sketch中使用slices相当方便,你可以导出从PNG到JPG等不同格式的文件到桌面，然后将其拖拽到Flinto中。(另一种方法, 你可以直接在画布上点击文件名并选择“导出”命令，这种方式允许你设置优化导出选项。)

将slices 导出 Sketch使用Command + Shift + E快捷键或选择“文件” → “导出”
在Flinto中组合导入的图像或将其安放在固定位置上操作起来也十分方便，例如，你可以将某个菜单目录放在最上方，将工具条放在最下方。

如果需要的话，你也可以把所有元素都放在最上方或最底部。只需将图标拖动到你想要的位置即可。

Flinto可以创建HTML, CSS和JavaScript格式的互动原型。你可以通过电子邮件或短信接收到原型链接并将它展现于设备的屏幕上，它无论看起来还是用起来都与真正的App非常接近。 iOS与Android设备都可以以标准步骤演示原型，但遗憾的是目前Flinto还无法在Windows Phone上运行。

如果你的目的是创建一个响应式网站，你也可以保留HTML格式，总之，你可以自行找到最适合你自己项目和团队的方式。

5.一些实用技巧和窍门

你可以给不同界面设定特定的展示时间。这在设定只需短暂展示的提示框时十分有用。

Flinto中的定时切换(View large version)
Flinto允许你将链接从一个界面复制到另一个界面，这个功能超级有用。只需将一个界面中的热点文件（hotspot）拖拽到另一个界面中即可。

在Flinto 中实现批量文件操作
在我们查看原型之前，不妨先看看Flinto的工作台。你可以看到，正如我们之前所谈到的那样，菜单栏与工具栏都各安其位，同类的群组也排列有序。

Flinto的工作台
Flinto的另一项优势是当你要添加更多设计元素时，你并不需要重新创建一个项目---你只需按照设计变化而相应地调整项目就可以了。如果你使用的是相同的Sketch模板文件，你还可以用更合适的图像文件来直接替换原型中已有的图像文件。将这些画板从Sketch中导出，拖入编辑框即可。如果你想保留原有文件，可以通过复制当前项目来完成。方法是“设置” → “操作” → “复制当前原型”。

6.其他原型工具

我在本文开始时就提到过，Flinto并非唯一的原型设计工具，事实上，此类工具还有不少。

例如， InVision也是一款十分好用的工具。它创建原型的方式与Flinto十分相似，无论是创建移动设备还是桌面端的原型都不在话下。它有免费套装可选，并且支持Sketch原生文件。它也支持触屏操作，可以让你直接看到用户滑动界面时的效果。

InVision另一个让我觉得很赞的地方是，它允许直接在设计中添加评论，这样开发者就能更清楚地看到反馈的来源。

最近我还仔细研究了另一款原型设计工具Pixate, 它是专门针对iOS及Android app开发而设计的。它的优点是有更多的动画和触屏操作控制选项。而且与Flinto和InVision相比，它的互动效果更为真实，生动。

还必须得说一下经典的Interface Builder。它是 Xcode的一部分, 可以为iOS app创建原型— 当然如果你愿意的话，也可以为Apple Watchapps创建原型。

Interface Builder掌握起来相对较难一些，但它产出的原型的质量要高于Flinto及InVision。 Interface Builder产出的原型可以直接运行于iOS设备上。

如果你想找一款专业的，仅针对iOS的原型设备,我推荐你使用Keynote,它包含几乎所有的原生iOS切换方式和动画,向其中添加位图及文字特效也很方便，从而帮你轻松实现你想要的某些互动效果。它的局限是只能针对iOS App创建原型，而无法为Android或Windows Phone工作。

值得注意的是，大多数这些原型工具只能处理平面图像文件和/或slice，它们不能生成任何可供响应式网站使用的代码或框架。而且它们生成的原型也有一些缺陷，一般只能拿来做研讨之用，而不能作为真正的App使用（Interface Builder要稍微好一些）。

在下面的表格中我总结了一些原型工具的特色：

7.结语

我希望这篇文章能为你选择原型设计工具提供一些指导。总的来说，有互动效果的工具比平面图像能更有效地传达信息。Sketch是一款非常优秀的UI设计工具，它轻巧而强大，与Flinto, InVision及其他原型工具搭配使用也十分方便。如果你自己不能或不愿为一个原型编写代码的话，以上这些工具能为你提供很好的帮助。

转载自：shijue.me/show_text/5510dbcce744f9758c050333