我们最近发布了 Thanx 3.0 的 iOS 和 Android 版本。对于Mark 和我来说，这是一个非同寻常的项目，这是我们整个的设计过程，希望对大家有些帮助。

Thanx 是一个能帮你从你经常去的商家——比如你每周二去的三明治店或是每个比赛夜晚结束后你都会去的披萨店——那自动赚取回报的移动应用。在使用任意的信用卡或借记卡注册这个应用后，每当你在那个商家使用这张卡消费时，你累积了可以兑换礼品的点数。礼物有可能是返还现金、半价的大号披萨，或是免费的啤酒，任何事物都有可能！如果你还没有试过 Thanx，你应该现在就去下载。

重新设计的目标

提升美感
更好地整合新加入的功能
简化用户体验

提升美感

新旧页面对比

就界面来说，我们2.0的设计看起来相当过时。毕竟，它是两年前设计的。作为一个 iOS 6 来说，它还算是可爱的，但后来的 iOS 7 和 8 却改变了整个的设计风格——应用变得更加扁平，拟物化几乎消失了。甚至会有一些顾虑是说，有些刚打开我们应用的人可能认为它已经不再有人维护了，因为它看起来有点“老”。

2014年底，Mark 对 Thanx 进行了全面的品牌重塑。我们拥有一个漂亮的新标志和颜色系统，但应用本身却是老旧的。我们可以把新 logo 放进旧应用里面，但结果可能并不合适。当2015年年初在计划这款应用的新设计时，我们意识到它也许是一个非常完美的画板，用来首次展现我们全新的品牌形象，即使这意味着我们的新 logo 要推迟几个月发布。

更好地整合新加入的功能

自从2013年发布2.0版本后，我们就引入了几个新的特性包括登录页和 NPS 反馈（用来衡量顾客满意度的跨企业标准）。这些特性是应用的重要部分，但它们从来没有感觉到被整合进整体的体验中。在3.0的应用中，通过将它们更好地整合进流程，以及塑造统一的视觉风格，我们将使这些功能更自然的呈现。

自2.0版本之后，我们还得到了非常多的对于用户的了解。通过这些了解，我们制定了相当全面的新功能的清单，以更好的服务每一个人。其中包括增强 NPS 反馈功能，更好的状态提醒，和大量的新种类的回报，特价优惠，还有给顾客的惊喜。我们还允许用户在遇到交易问题时可以发送收据照片，还会显著的加强贯穿整个应用的用户支持功能。

简化用户体验

好的体验设计通常意味着去掉某些东西，而不是增加。在过去两年中，我们头脑风暴了各种我们能加进应用的新功能，也加入了很多精彩的特点，但现在是时候去审视一下，什么是需要被移除的。

这些页面可以以更简约的界面来展现吗？这些流程可以简化，甚至删掉吗？结果是，可以。

在设计一个更加强健的应用内提醒系统（用来推送一些交易、奖励状态，甚至错误）时，我们意识到我们应该让这些提醒不那么显眼，应该允许用户清除，或者甚至能自己消失，因此不至于阻碍使用。但我们还会允许一些紧急的提醒——比如要求你更新信用卡——能够在提醒中心页面一直保持可用状态。

另一个简化的例子是，我们决定移除在原有应用中占十足比重的地图功能。因为这个功能在UI中所占比重太大，以至于会过度的增加应用的大小，还会扰乱用户当前的注意力。我们不是像 Yelp 一样的用于发现新店的应用，你只会在已经使用过 Thanx 的商家使用它。

设计之前

理解需求

其中首要的一步是了解这款应用的更大的愿景。为了研发一个成功的产品，我们团队应该重视和解决三大块的需求：1、业务需求，2、技术需求，3、设计/品牌需求。

我举例说明一下：有相当多的商家告诉我们他们希望自己的品牌能够在注册流程里面更好地呈现，这就是一个业务需求。为了实现这一需求，我们的应用需要知晓用户是在何地登录的（比如他们是已经到达店铺？或者是在家，只是收到推送消息或是email 而已？）Thanx 的用户只在乎他们经常消费的商家的品牌，而不是 Thanx 的品牌。就反映用户喜爱的商家的程度上，应用应该将商家的品牌放在最首位。我们需要适应用户的喜好。随着这些目标的提出，技术需求也就随之产生。而设计需求也就是如何恰当平衡地展示商家和 Thanx 的品牌。

人物角色 ( Personas ) 和用户场景 ( User Scenarios )

有许多不同类型的人群使用我们的应用。其中一些人是科技达人，而有些人却不是。有些人非常富有，而有些人只有微薄的收入。有些人会去各种可以使用 Thanx 的商店，有些人只会去某一个店铺。他们遍布在美国各地，拥有不同类型的手机，有无穷无尽的不同点。

为了创造出适用于大部分人的体验，考虑到各种类型的用户是非常重要的。最好的方法是创建人物角色，用以认识真实人群需要的、期待的、想要的，从而设计出最佳的体验。在我们做品牌重塑时，对于我们两类受众：顾客和商家，Mark 已经分别创造了3个角色。为了更好的描绘这些角色的形象和他们使用 Thanx 的场合，我们创造了使用场景。带着使用场景工作是非常有帮助的，因为它能够让我们在设计应用的时候，考虑到大部分的使用情况。

举两个例子：

“新用户 A 正在第一次兑换他的奖励。”

比如说刚注册 Thanx 的一个用户要兑换他的第一份礼品，但不知道在付款之前或之后，如何激活这个奖励。在之前的应用中，如果不去说明它是怎样工作的，用户会摸不着头脑。而在这次重新的设计中，我们通过更加清楚地交代 Thanx 的工作方式，来避免用户的不确定感。

我们通过引入登录页的通知来解决的这个问题。这些页面清楚地告诉用户什么时候激活奖励，而且信息覆盖整个屏幕，这样人们更愿意去阅读。即便他们忽略了这个提示，我们还会在奖品详情页再次强调这一信息。另外，我们还在详情页加上了一个帮助按钮，能够让用户在遇到任何关于兑换奖品的问题时，可以进入 FAQ 页面以及获取用户支持。

“用户 B 将要兑换奖品，但店员 Z 不知道如何兑换。”

考虑到一个 Thanx 商家——比如汉堡店——新雇了一个收银员，当顾客准备结账并向店员展示手机上的 Thanx 奖励时，这位新员工会知道怎样兑换奖励吗？如果员工不知道怎么做，如何改善体验并降低失望感，避免员工向主管求助时造成的延误？我们的解决办法，是在奖品页面加入针对员工的教程链接。由于每个商家的兑奖程序不尽相同，这份教程能够被完全定制，因此对于前文汉堡店的员工来说，这份教程可能是“在收银机上选择特价-优惠券，输入代码0981以及奖品或是返现的数目”。另外，我们的后台允许任何 Thanx 的员工更新在服务器上的这些教程，并立刻实时推送到应用上。

之所以能解决这些问题，是因为我们能够比较深入地理解我们的用户是谁，他们是怎样与 Thanx 交互的。

用户调研

如果缺少与用户的交流，是很难运作好一款产品的。就公司内部而言，我们会做出一些关于用户通常如何使用我们产品的设想。有时候这些设想是准确的，但如果缺少了与实际用户的沟通与观察，我们将会错失这些来自外部的观点。

对于 Thanx 3.0，我们定义了三类需要研究的用户群体：

A) 注册过并至少支付过一次的用户（新用户）

B) 赚取了第一份奖励，却还没兑现的用户（早期用户）

C) 兑现过多次奖励的用户（核心用户）

今年早些时候，我从每类用户中征集到一些个体样本，安排了与他们的面谈。从这些交谈中我们收获很多，但有一个特例我想单独拿出来分享，是来自与 Steve 的交流。Steve 常常使用 Thanx，他绝对属于 C 类用户。他去年得到了十次的回报奖励，但是，Steve 只在一个商家使用 Thanx，对比我的卡片页，他的页面就显得空荡荡的。

Steve 来说，Thanx 是他的 Mixt Greens （注：Mixt Greens 是一家餐馆名称）专属应用。在他的主屏幕上没有任何其他商家。这意味着每次 Steve 打开 Thanx 都只会看到一张单独的卡片，而他必须点击这张卡片之后，才能去做与获得 Mixt Greens 奖励相关的事情。对于 Steve，这个老版应用里的卡片界面毫无意义。想象一家只提供奶酪披萨的餐馆，你会每周去两次这家餐馆，但每次他们给你的菜单上就列着一个菜：奶酪披萨。好无趣。

我们调查了所有 Thanx 用户的数据后发现，大量主流用户都属于这一类——他们只有一个喜爱的商家。因此在 Thanx 3.0 中，我们让它更加智能：如果你只有一个商家，Thanx 会跳过商家列表页。如果没有调查数据或者与用户交流，我可能永远不会意识到这是需要改进的体验。

页面清单

在开始着手设计之前，我们收集了旧应用里所有的页面设计。这非常有帮助，因为这样我们能够全面地审视整个流程和每个页面。在改善一些流程和重做其他东西时，就不会忽略掉现有的需要留存的功能。这些页面清单也能作为制作线框稿时的草图。

Thanx 2.0 的页面

设计调研

我们希望这次的重制能完全不同于之前的应用，能够适应新 logo 的外形和感觉。我们使用 Niice 制作了情绪板（Moodboard），用于作为插图的风格、UI、和过渡效果的参考。从之前 Mark 重塑品牌的项目中得到的信息是，人们对于 Thanx 的认知是友好、有趣，而且聪明。这次的改造需要保留住这些品质。

着手设计

限制

针对目标用户开展设计仅仅是整个过程的一部分。我们需要记住开发和时间的局限会影响整个应用的交付。在制作线框图之前，我们决定避免重度使用动画或是视觉特性，因为会影响应用的准时推出。因此，Thanx 变得简约却不失功能，而且（我希望）我们的开发团队也不会恨我。

线框图

我们决定使用 AI 来制作线框图，因为 Mark 和我都习惯使用 AI 来快速地进行简单的设计。由于 AI 支持大尺寸和多个画板，我们可以随意拖动页面，并根据流程来组织它们。上图是现在的 AI 画板。不过还是可以组织得更好。下次要注意。

Photoshop

这是我们最终选择的设计工具。我们希望能即刻开展设计，Photoshop 成为我们必然的选择。我们在前期遇到的挑战是弄清楚以什么分辨率来进行设计。因为采用新的分辨率和资源尺寸（@3x）的 iPhone 6 和 iPhone 6 Plus 刚刚发布。

我们决定先按 iPhone 6 (750 x 1334 pts) 的尺寸来进行设计，然后通过调整间距和 UI 元素来适配 6 Plus 或 5s 及以下的设备。一些人也许更倾向于按照最小的屏幕尺寸来设计（也就是 iPhone 4 / 4s 640 x 960 pts）并确保在放大到大尺寸屏幕之前，所有重要的元素都能适应该尺寸。我们也考虑到了这一点，但是我们的数据显示使用 iPhone 4 的用户仅占总用户的10%，我们决定把重点放在比重最大的群体身上，也就是使用 iPhone 5 / 5s 的那部分人。因为iPhone 5 / 5s 和 iPhone 6 的长宽比都一样，所以对我们来说最合适的方法是为较新的设备也就是 iPhone 6 进行设计，然后通过缩放进行适配。

除了照片，所有的设计资源包括图标和标志都以矢量的格式创建，因此从 @2x 放大至 @3x 以制作开发所需的资源也没有问题。

制作原型

InVision 成为我们设计原型的新选择。它的 UI 简洁易用，我也非常喜欢能够在我的手机上查看原型的功能。更有用的是，我们能够在一个页面设计的具体的位置进行讨论和查看意见反馈。

进行标注

这一部分对我来说也是学习的过程。作为与 Thanx 的开发团队合作的第一个主导的 iOS 项目，有很多我需要弄清楚的事，来使我的设计容易被理解并开发。

我最初的一个挑战是学习如何给开发团队提供尺寸信息。由于我们是针对 iPhone 6 的屏幕做的设计，我们所有的测量数据都是基于 @3x 的尺寸，所以在制作标注的时候，我需要给出在 @2x 和 @1x 情况下的尺寸吗？幸运的是，Xcode 能自动缩放图片以适应不同屏幕尺寸，每个 UI 元素只需要一种尺寸。

制作标注花费了大量的时间。每一个页面的每一部分的测量都要被清晰地标注。还有一些特别的情况需要考虑，比如在适配 iPhone 4/5 大小的屏幕时需要截断的区域。我用了三到四周时间才完成之前设计的所有页面的标注。

开发支持

在递交设计标注后的几个星期里，Mark 和我通过电话来给工程师提供各类支持。其中包括提供我们忽略掉的图片资源、需要弄清楚的标注，更多的是，在设计阶段我们没注意到的特殊情况下的界面。我们还做了一些调整以方便适配和简化代码实现。这也就回到了之前提到的开发方面的一些限制——作为设计师我们需要尊重并灵活处理这些事情。

在 Thanx 我们非常幸运拥有这样一支会考虑到我们最终用户的开发团队。也就意味着可以通过开发和设计之间的大量合作，确保我们确实创造出了非凡的用户体验。

总结

重新设计 Thanx 是非常有趣的经历。请在 Apple Store 和 Google Play Store 上关注 Thanx 。在接下来几个月里，我们将收集用户反馈并迭代更新，敬请期待！

附录：移动 UX 设计资源

在工作中，我们发现下列这些非常实用，甚至必需的网站和工具。

工具

Niice — 很好的情绪版（moodboard）在线应用
Adobe Illustrator
Adobe Photoshop
Adobe Bridge — 没有比这更好的方式来管理和预览成千上万的 PSD\PSB\JPG\PNG 文件了。
Confluence —团队交流、协作、捕获目标和需求的必要工具。
InVision —对于制作原型，表现交互和流程非常有用。
LiveView —可以在你的 iPhone 上实际地查看你的设计
ImageOptim — 很好的免费应用，可以比 Photoshop 更好地压缩 JPG\PNG\GIF 文档。
iPhone 6 Screens Demystified — 对于分辨率的问题很有帮助分析。
iOS 8 Illustrator Vector UI Kit — Mercury Interactive 制作的实用的 UI Kit。

我们用来寻找灵感的网站

http://www.pttrns.com/
http://www.mobile-patterns.com/
http://www.android-app-patterns.com/
http://capptivate.co/
http://code4app.net/
http://dribbble.com/
http://www.behance.net
http://coolors.co/

原文连接：Designing the new Thanx App

－－杏树林产品设计高阳

应用再设计__Thanx相关推荐

Python：11设计动物Animal类，该类包括颜色color属性与叫call方法。再设计鱼Fish类，包括.....
设计一个表示动物(Animal)的类,该类包括颜色(color)属性与叫(call)方法. 再设计一个表示鱼的类,包括尾巴(tail)和颜色(color)两个属性,及叫(call)方法. 提示:让Fi ...
JavaScript OpenGL接口再设计
Web OpenGL封装简介上下文GLContext 基类GLObject 着色器GLShader 着色器程序GLProgram 着色器程序属性GLAttribute.GLUniform 数据缓存 ...
android微信个人界面设计,安卓版微信主界面的再设计
聊天界面前段时间刚刚上手Axure,因为某些契机,根据自己主观需求重新设计了安卓版微信界面.与现在版本区别主要是更加符合安卓的设计原则,同时对"发现"以及"我" ...
一个圆怎么平分三份_如图，把一个圆分成三等份，请你再设计1-2个不同的方法，把圆分成三等到份．（正确划分一个圆得2分，正确划分二个圆得3分）...
尺规作图简史: "规"就是圆规,是用来画圆的工具,在我国古代甲骨文中就有"规"这个字."矩"就像现在木工使用的角尺,由长短两尺相交成直角而成 ...
《一笔流书》草书字体视觉再设计—以张旭《李清莲序》为例
作品简介:书法是中国最重要,最具有代表性的艺术形式之一,它有着独特的文化魅力和丰富的表现形式.书法所书写出来的每一个字都是一种特殊的感情抒发,不再是单纯的字,而是背负了书写者的精气神.随着时代的发展, ...
电脑识别指令和代码的原理
电脑识别指令和代码的原理一．前言电脑代bai码,就du是让电脑执行的命令.可以让电脑执行相应zhi的命令.就电脑本身底层代码所言就dao是0和1,或者说二进制码.十六进制等等.还有汇编.C.C++ ...
FPGA最全科普总结
FPGA最全科普总结 FPGA 是可以先购买再设计的"万能"芯片.FPGA (Field Programmable Gate Array)现场可编程门阵列,是在硅片上预先设计实现的 ...
第一次软件工程作业（改进版）
1.Github项目地址:https://github.com/HardenMVB/3.28 2.PSP PSP2.1 Personal Software Process Stages 预估耗时(分钟 ...
深入理解Java的接口和抽象类
http://www.cnblogs.com/dolphin0520/p/3811437.html 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口 ...

应用再设计__Thanx