首先，感谢Meng To。此文仅为中文译文。原文见文末的链接。下面为译文正文。

一天工作随笔

上周我与工程师们共同参与了香港AngelHack项目。那是一段美妙的经历。经过大量研讨后，我们定下方案：创建一个简洁的本地化聊天应用——Ripple。

创建开始

从问题出发：

当我们围坐在一起，彼此分享工作流程和想法成为一个相当棘手的问题。此前我从未与如此多的工程师一起共事过。很难快速找到一个群聊（group chat）的方法。我们不得不依靠信息工具完成沟通。备选工具：Facebook、Skype和WhatsApp。最后，我们选择了Facebook。痛苦的经历以寻找彼此的Facebook账号和设置群聊开始。Facebook其实很耗经历，它需要大量现实中的交流。在痛苦的各种延时（浏览网站会延时、多任务工作造成的延时以及交流的延时）后我们完成终于了设置。这花费了我们大量的时间。

另外，我们试图尝试Skype，但在香港很少有人用它。WhatsApp在香港相当流行，只是它需要你分享你的电话号码和电邮地址。人们总是会将电邮地址拼写错误。同时对于刚认识的人就将电话号码分享出来人们还是心存忧虑。这些工具都存在一个共同的问题：对于一个新手，注册流程过于繁冗。如果你尚未身处社交网络，你不会感到在自然的交流中被迫注册。

因此我们计划创造一个最简便的注册流程以及最简洁的聊天体验的应用。我们的目的是允许任何人在下载应用后用少于5秒的时间能够与身边的人开始聊天。

为iOS 7量身设计

这是我第一次为iOS 7做设计。但是我迅速地为其定位了风格样式，因为我们将注意力集中在裸色（naked colours）、炫酷的图标和排版上。我首先为Ripple选择蓝色。然后，我想添加一些深度并选择配色方案。我下载了一些背景图片，将他们模糊化，看看他们能否与蓝色看起来很和谐。字体方面，设置字体为Museo Sans。图标方面，我认为PixelLove适合iOS 7的设计语言。

iOS 7的设计语言。

我实用Sketch已经近一年了。我欣喜的看到它将我工作效率提高一倍，让我有更多时间研究动效和功能。最近我将更多的精力放在实际工程方面（后续为大家分享）。最近我使用使用画板功能的次数越来越多（Sketch的一个功能——译者注），因为它有预设的iOS屏幕尺寸和图标尺寸。Sketch的Mirror功能允许我快速查看我的设计在iPhone上面的效果并在屏幕（画板）间切换。

在Sketch中使用画板导出统一尺寸的文件并为其定位。

注册页

我试图创建最快捷的注册流程。出于简洁的考虑，唯一必要的信息是姓名。但是仅有姓名不足以创建有趣的交流。这是我受iOS 7照相功能的启发。我注意到：当你在不同的图片格式间切换的时候，图片将被动态模糊化。这种感性的深度和方向就是我希望在我的设计中所强调的。最终，注册页面上呈现出一个以模糊化的照片为背景和前置摄像头拍的图片组成的页面。键盘迅速弹出，视觉焦点集中在屏幕姓名（Screen name）上。

画面立刻集中在启动的相机照片和动态模糊化的相机照片上

聊天室

启动应用后，立刻进入由聊天室列表组成的欢迎画面。这些聊天室由你身边的人创建。你不必担心其他人是否已经添加了你。像Airdrop一样，只是是一个一对多的联系。如上所述，可能会使用Airdrop的技术快速邀请人们加入聊天室。

聊天页面

就聊天室本身，我受到iMessage中视差效果和弹跳效果的启发。这些效果都很有趣。聊天室包含文字内容和照片。照片会迅速提高聊天室的趣味性。此外，我添加了在线用户的Facebook／Twitter联系方式的列表。

聊天人的列表呈现中信息的顶部，这样你在查看列表的同时查看对话信息了。

当你首次快速创建聊天室，你可以很容易的分享你的联系信息。创建人可以直接此页面快速编辑聊天室简介、Twitter、Facebook和WhatsApp联系方式。

Flinto原型

我在Hackathon（黑客马拉松）必须向10个人讲述Flinto。他们都对此印象深刻。最终它成为了一个比不可少的应用。当我设计了新的页面，我会将他们立刻上传到Flinto并创建交互。这对工程师帮助巨大。当他们设计时，就可以测试在手机上的流畅度。从此，应用更刘畅的适应真实的环境，更辩捷的与设计进行比较。

用Flinto5分钟创建原型。

Flinto原型点击这里。用iPhone 5/S可得到最佳的体验。

iOS 7应用

幸运的是我找到了一位热爱挑战功能极限的工程师。我经常希望问“我们可以这样吗？我们可以那样吗？”我喜欢听到“是的，可以。”通常这是个好兆头。我接触大部分iOS工程师根本不想接触故事版。拥有一个愿意使用故事版的工程师使设计师和开发人员间合作顺畅许多。因为故事版令设计师的探索之路变得简单了许多。这等同于拥有一个懂HTML和CSS的设计师而不是开发者。

Xcode 5故事版。很简洁。

最后，我们管理并生成许多颇具挑战性的页面：注册页面和聊天室页面。我们从Cocoapod的资源库中调用模糊化的时时拍摄的照片、时差效果和弹跳效果。然后，设置Parse。遗憾的是，由于时间有限，我们没有使用真实的数据测试demo应用。

“革命尚未成功”

我们没有在AppHack上将一等奖揽入怀中。好在我们在26个团队中仍是9强中的一员。考虑到我们之前从未共事过，我们花了5个小时才在理念上达成共识，我们取得的成绩已经很OK了。我认为几乎每个想法看起来都笨笨的，但还是顺利的完成了。是我们的执行力帮了大忙。

对于我们团队这是一次胜利。许多人很喜欢注册页面，对其设计上的易用性给予积极评价。一些用户甚至询问该应用何时才能发布。这些反馈正是我所期待的。我设计的产品的目的就是为用户而设计。

我们仍将保持简化的理念。如果能有人积极的合作，在未来的某天必将有一款简洁的应用的诞生。

原文链接：https://medium.com/@mengto/from-design-to-ios7-prototype-bb582274b93f