［译］移动应用设计者的思维模式

作者: 欧耶 | 来源:发表于2015-05-11 17:29 被阅读1096次

译前注：这是Smashing Magazine上4月份的一篇文章，就内容而言对比现在国内“方法论”和“技巧规律”齐飞的环境下，文章或许没有太多的“标新立异”。作者或许更多地是以界面设计的角度出发撰写，但作为一篇总结性的文章，我觉得还是全面地覆盖移动应用设计的很多方面，有形而上的“道”，也有实际操作的“术”。文章对于作者而言是对他自己经历和工作迭代的总结，对我而言，这是一个思考总结很好的参考。

正文：

设计移动应用不仅仅局限于肉眼所能看到的表象，这项工作需要你对移动设备有深刻的认识，同时它又常常会需要我们改变自己的思维模式—即使这意味着要舍弃那些我们在网页设计中早已习得的种种。

我的职业起点像大多数的设计者一样，都是从平面设计项目开始的。但是很快，我就进入了网页世界的领域，因为它是如此地吸引着我，于是也变成了我那时的工作重心。在那个过程中，我学会了那些在此之前从未涉及过的交互设计（interaction design）和用户体验（ user experience）的相关概念。

那时我不止一次地陷入了这样的工作循环中：我已经掌握了一个几乎万试万灵的设计模式，它足以让我更加简易和快速地提交新的的设计方案，但因为这样或那样的原因，所有的这些设计看起来都是如此相似。而就在那时，iOS和Android的第一个版本开始发布。

此后，如同呼吸到了一口清新的空气，我的生活开始进入了一个出人意料的新阶段，我开始专注于一个完全不同的事物：移动应用设计。我所需要的也正是这么一个真正的挑战。我不仅仅必须去学习新的知识，而且必须把部分我沿用已久的网页设计的精髓遗忘。

在那个新的起点后几年，也就是不久前，设计界在复杂的情绪下见证了苹果智能手表的发布。一方面，见到一个设备提供了一个全新领域的设计可能性是让人兴奋的，另一方面，去挑战理解这样一个包含了未知的交互形式和用例的媒介会让人感到畏惧。

这肯定不是我们第一次在市场上遇到的全新设备，但需要全新的设计去适配的新技术出现得越来越频繁，我们以后需要适应于这样一个越来越快的更新速率。

全新的产品类别，例如智能手表，迫使设计者不停地学习新的设计范例。（图像来源：苹果）

当然，第一个巨大的行业推动发生20年前我们迎接来第一批网站之后，无所不在的互联网进驻了我们的世界。在那之前，像我这样的大部分设计师专注于平面设计，互联网的到来要求我们学习如何替一个可交互的媒介进行设计。我们的用户不再仅仅只是一个旁观者。

这样的转变对于一些人而言并非那么容易，所以那时候如此多的网站看起来就像在上面贴了些按钮的广告牌而已。这些设计者没能马上理解这个新媒介的特点。

BBC（左）和Hertz（右）制作的应用看起来像是网页而不是原生应用，同时他们也忽略一些在移动设计中的惯例

如今同样的事情发生在移动应用上，一个经常会发生的情况就是一些应用看起来就像小型网页：他们作为一个网页被重构“迁移”到智能手机上。设计者忽视了显示对比度、字体字号、触控区域和操作手势等等，同时他们忽略了不同的用户在不同的地方以及在不同的设备上使用应用间差异的影响。

当我们为移动应用设计时，摆脱网页结构对我们的限制是必不可少的。我们必须以一个不同的心态面对这些项目，同时全面地理解移动设备，从而充分利用这些设备实现一个良好的用户体验。

所以为了成为一个移动应用设计者你需要做些什么呢？除去专业知识和技术工具，你需要改变你的思维模式。以下是使你适应移动应用设计领域的一些建议。

改变你的工作方式

每一刻都会有数不清的移动应用进入应用市场，所以你并没有时间去挥霍。

作为一个专业设计者，我们不再拥有几周几月的时间在产品发布前对细节打磨设计，那样最后只会意识到已经有别的应用解决了我们要解决的问题（大部分情况下是用相近的方式解决的）

于是精益用户体验设计（Lean UX）应运而生，这是一种短平快的工作方式。这种方式促使产品设计和产品开发持续迭代，同时保持着一个的核心理念：在完成产品的用户验证前没有东西是确定不变的。

精益用户体验设计基于持续迭代和闭环的工作循环

因此，移动应用设计不能起始于使用Photoshop 或者 Illustrator进行的界面设计。设计应该开始于更早之前的线框图原型和基本设计阶段。在这个方式下，如果需要改变设计，它只要花费片刻就可以完成，而不是几个月。

对于设计者而言从视觉设计出发是一个普遍的倾向：这也是我们通常最感兴趣的阶段。在某种程度上，我们习惯于这么工作也因为它是唯一我们知道的可行的方式。

最近，当我向很多设计者建议在项目工作的起始阶段只需要在纸上简单描画，甚至连电脑都不需要使用时，他们大部分都会惊讶地看着我。在纸上画图听起来是如此地基本，以至于我们经常忘记它也是一种可能。这样的设计方式显然可以非常有效地防止我们陷入到一连串参数中（例如设计文档的尺寸、颜色和字体等等），而参数和细节在我们正在开始一个项目时的确会限制我们的创造力。

个人而言，我觉得在纸上画草图是比以往更有效的方式，因为它可以让我只专注于构思创意和需要被解决的问题，而不再是掉入考虑设计细节的泥沼中。或者说至少在第一阶段时不应该去考虑设计细节。

“移动优先”或者说小屏优先，也是一个值得被采用的策略。即使你的应用在智能手机和电脑桌面上都会运行，但先为小屏的手机进行设计可以更加高效。从移动设计的立场出发的设计流程迫使我们进行优先级的确立，去筛选关键元素，以及更重要的是改变我们普遍习惯于将桌面电脑屏幕作为设计出发点的心智模式。

“移动优先”是基于为智能手机设计作为出发点，然后迁移到更大的屏幕

我第一次使用“移动优先”的方式开启一个项目的时候，我几乎以头痛欲裂告终。或许这很像你第一次去健身房的情况，你有一阵没锻炼的肌肉会开始疼痛，这是因为运动强度的不同导致的。如果你没有试过以这种方式进行设计，找天去试试吧，你会注意到你产品设计中优先级顺序的变化，你也会很快地意识到什么才是你的应用上真正重要的，那就是那个不可或缺的元素。

你也可以与携带行李去旅游做一个类比，如果你只有小型行李箱，那你会带什么走呢？你肯定是携带最重要的行李，就是那些你在旅途中必不可少的东西，而其余东西只能留在身后。不管你信不信，这个普通例子与你在为智能手机进行设计时遇到的情况会非常相似。

向不同的领域学习

一个移动应用的成功是依靠于设计者和开发者齐心协力地不断革新，从而达到最高质量的产出。为了达到这样的结果，你可以通过设计者和开发者同时进行平行工作去缩短迭代时间从而提高工作效率。要做到这点，你必须同时清楚地理解设计的复杂性和实际执行的情况。

这其中一个方法是学会使用开发工具，不需要学到能从头到尾开发一个应用的程度，但至少能够快速无偏差地构建出应用界面，精确地传达设计的意图。

我以前是项目里唯一的设计师，然后会有一群开发者等着我的产出去完成工作，导致项目进度遇到瓶颈

在去到巴萨罗那不久后，我开始在一个技术创业团队里工作。我惊讶地发现我是这里仅有的设计师，我被一群开发者包围着。一开始我们遇到了不少项目瓶颈，因为所有人都在等着我的设计产出去继续他们各自的工作。

花费一些时间，我学会了使用像Xcode这样的开发工具以及一些基础的编程语言。这些能够让我给出更复杂的建议，以及可以和其他团队成员同步在确定的时间点上。

过了一段时间，也就是我来到这个团队几个月之后，开发者也了解了我的工作方式。他们能够不需要我的辅助直接打开我的设计文档导出设计素材。

最后，我要教给你一个小技巧：学会与团队其他成员使用相同的术语。这样做，你将会感觉在办公室里的所有人都在讲同一门语言。设计师和开发者通常会使用不同的词汇去描述相同事物，这样使得这两个人员群体间的沟通变得更困难。

意识到团队协作的价值

回顾一下上一个主题，团队协作远不只是分享办公空间。它促使团队成员进行合作以及持续地沟通。移动应用的精益设计导致了以往一环扣一环的瀑布式开发模式的终结。

但在实际操作中，大部分的团队会进入一个高效的混合式开发流程，其中开发者采用敏捷的开发方法（一个指定截止时间前完成一项目标工作），同时设计师采用精益的设计方法（快速迭代，通常没有指定的截止时间）。

这里仍然有“瀑布式开发”的残留，设计师通常会比团队的其他成员提前一些进行工作，开发者无需等待所有的设计产出都准备好就可以开始工作。

这就是为什么应用设计者必须把他们的同事（特别是程序员）当作盟友而不是敌人。理解对方同时逐渐地习惯共同工作将会得到一个更好更和谐的结果。

我们通常害怕分享我们的工作。我们对可能发生的评审和评论倾向于采取防御性的心态，特别是面对设计师同行时。事实上别人提出的很多东西对于提升我们的设计方案是极其重要的，包括那些没有设计背景的人提出的反馈，譬如程序员。他们的观点通常比我们更加务实，能够起到一个很好的平衡作用。

以前我访问的某个公司的人告诉我，他们的设计师和开发者在不同的楼层工作，通过各种即时通讯系统进行沟通。我建议他们应该尝试一些改变：替相同项目工作的设计师和开发者应该打散坐在一起。几个月后，他们告诉我他们的产品质量有了急剧地提高，他们团队间的关系也同样有明显提升。

使用多种操作系统

当你设计移动应用时，你不能仅仅参考你自己使用的手机。如果的你的目标市场是全部移动市场，你必须至少使用Android， iOS 和 Windows Phone这三种设备，然后逐渐习惯于持续使用它们，从而能够充分理解在各个平台上是如何去处理不同设计场景的。

事实上不管有没有iPhone世界都照样转动。太多设计师把他们自己局限在iOS上，当需要为Android进行设计时，他们通常仅仅是对原来的应用进行了几乎是原封不动的迁移。

例如选项卡这样一个简单的导航素材在iOS，Android和Windows Phone上不同的使用方式

交互模式（针对设计问题建立的解决方案）在不同的操作系统是不一样的。因为如此，设计师必须经常交替使用不同交互模式从而能够理解吸收它们并正确使用。

举几个例子，选项卡的放置位置，如何展现菜单，什么时候以及如何显示初级和二级操作项，这些在每个操作系统间是有很大差异的。

为了学习各个移动系统上的不同交互模式，这里有一个切实可行的练习方式你可以采用：下载安装在不同操作系统上的同一个应用，然后认真地分析他们间的差异处和相似处。这些系统的交互模式本应有所不同，所以如果你发现一个应用在iOS和Android上无论外观还是操作上都几乎完全一样，那很有可能它们中的一个没有被正确地设计。

Instagram的应用在iOS (左) 和Android (右)上诡异地相似。开发者似乎没有遵守一点基本的原生交互规范就把应用放到了Android里。例如选项卡在Android里应该是放在屏幕的顶部。

除此以外，不断发现和尝试别的应用是很好的一个方式去探索如何解决你的界面设计问题。举例而言，很多次我感到创意匮乏不知道如何解决问题时，我就会去使用我的手机，仔细地分析它们是如何解决我所面对的问题的。

如果你手边没有手机，你可以查看像Pttrns，Android App Patterns和Windows Phone UI Design Patterns这样的网站，里面有很多可能对你有用的实例。

无处不原型

一个敏捷的开发方法需要在执行前清楚产品样式和功能是怎样的。与此相近，原型可以预先帮助我们评估（通过用户验证）一个应用的可用性。理想情况下我们不需要等待很久就可以开始创建我们的第一个原型。

一个原型可以简单到一张纸贴到一块木片上就足够了，就像掌上电脑（Palm Pilot ）原型的案例（图像来源：Computer History Museum）

我们当中的一些人可能记得Palm Pilot：有一个初代原型就是简单到将设计的界面打印出来贴到一块木片上。它们公司的员工可以将这个原型放在口袋里随身携带，如同一个真实的设备。

对于尺寸、重量和使用舒适性这些我们想要测试的内容而言，原型都能够胜任了。关键的点是要在你脑海里确定为了进行测试必需要进行设计的工作范围，然后就开始着手工作吧！

现在已经有了各种各样的原型工具，甚至可以像查看最终成品一样在智能手机上去查看某个设计样式。然而，一个原型不仅仅是静态的设计，它必须包含图像、界面切换和操作手势。

POP可以让你拍摄纸上画的的原型，然后快速地创建一个可交互的原型（图像来源：POP）

选择一个最适合的原型工具，主要是要根据你的工作流，即你想要达到的效果和你期望的产出怎样的。举例而言，当在纸上画简单的线框图时，我通常使用POP。通过使用这个应用，我能够拍摄我在纸上画的原型，然后在手机应用上简单快速地添加操作手势和页面跳转。

但当一个设计想法继续往下进展时，我发现使用设计专用的软件进行工作会更加便捷，例如Sketch，然后使用Marvel, Flinto或者InVision制作得到一个更加打磨精细的原型。（记住一点，有时候使用一个工具不一定需要它优秀于其他工具，选择工具时很大部分是根据于你觉得使用哪个更顺手。但是，如果你想更多地去学习了解使用 Sketch和InVision去制作原型，Smashing Magazine上有你可以参考的。）

就像上面提到过的，现在有很多原型制作应用，多到让我在几个月前决定制作一个简单的网站去罗列所有我知道的原型工具：Prototyping Tools。这个网站提供了所有工具的特点概述，帮助你进行工具的选择。

作者的个人项目

另一方面，需要注意像Android 这样的操作系统因为采用“material design”更专注于微交互。而现在微交互的原型制作大部分是设计师负责的。（像Keynote这样的工具能够让你相对简单地进行一些细节的原型设计，这方面Keynote的神奇移动是比较好用的）

所见非所得

当为网页设计时，你制作得到的设计和你最后在现实中看到的成品基本是一致的。但在为移动应用设计时，为了了解一个应用界面设计的展现效果（和功能实现），你必须在移动设备上进行测试。尤其在选择对比度和尺寸上，这样的测试时必不可少的。

在Android和iOS上的应用工具帮助设计者在不同分辨率和像素密度的移动设备屏幕上查看他们自己的设计。对于iOS，最广为人知的工具选择之一是LiveView。另外一个工具，也就是我使用最多的是Skala（在Android和iOS上都可以使用），它还提供了Mac上的桌面版本。如果你使用Sketch，你还可以尝试Sketch Mirror.

遗憾的是这类工具没有可以在Windows和Windows Phone上使用的（至少我没有遇到）。

Pixate提供了一个手机应用连接电脑，然后可以在你的手机上预览你的设计产出（图片来自：Pixate）

在我的工作流中，我会经常在我的手机上预览我的设计，确保它的展现样式正确，然后才进入下一个阶段。同时，我通常一次只会为一个操作系统进行设计，然后大部分时间都携带那个系统的手机在身边。这样子的话，从第一个线框图完成的时候开始，我就可以经常地在手机屏幕上看到我的设计产出展现的样式，然后确保设计中的尺寸（包括图像、文本和触控区域），对比度和颜色都和我预期中一样。如果你不这样做，你很快就会发现，修改和订正会花费你更多的时间。

同样重要的是，最开始新建设计文档时，需要采用和你进行预览设计时使用的手机一样的尺寸（宽度和高度上）（注意：如果你为不同的屏幕尺寸进行设计时，需要记住像素不再是最好的尺寸衡量标准，因为像素尺寸从一个操作系统到另一个系统时会发生改变，例如，在iOS上的points和在Android上的density-independent pixels的差异。这个会迫使你要通过某种方式去充分理解在当前移动应用环境下如何进行设计与如何使用图片的不同之处）。

一旦你的设计交付给开发者进行实现，你需要检查在不同手机和不同系统上应用的样式和表现是怎样的，而不是仅仅拿你身边最好的手机进行测试。