# 玩手机停不下来，都怪 App 用了这个设计技巧 \| 灵感早读

- 作者：井岛俊铁
- 发布时间：2017-05-04 07:23
- 原文：https://www.ifanr.com/app/827105

![](https://s3.ifanr.com/wp-content/uploads/2017/04/Gamification-Design-Online-Course-1024x651.jpg)

> 译者按：曾经在飞机上碰到一位美国老奶奶在玩 Candy Crush，从华盛顿到波特兰近 4 小时都没停过。我发现，她一直在重置 iPad 的系统时间，都已经去到了 2032 年。看到这篇我才明白，Candy Crush 用了「游戏化」这个技巧，连老奶奶都不放过……
> 
> AppSo （微信公众号 AppSo）今天分享的这篇文章，**将带你认识「游戏化」的 6 种常见元素**。读完你才发现：**手机里的 app 这么好玩，原来都用了这个设计技巧**。

如今的产品设计，都遵循「以用户为中心、满足用户需求」的原则。各种产品团队绞尽脑汁，想尽各种办法，挖掘提升用户体验的新途径。而用户所需要的，是**简单好用、还要好玩儿**的产品。所以，就出现了在用户体验中加入「好玩儿」元素的设计。

那怎样才能设计出好用又好玩儿的产品呢？这时，「游戏化」就出现了。这篇文章，将**介绍「游戏化」的定义和具体表现形式，以及为什么它能提升用户体验**。

### 什么是「游戏化」?

从设计角度谈「游戏化」，不少人会将它误认为「游戏设计」。然而，「游戏化」和「游戏设计」几乎无任何联系，甚至在有些方面还有相反的特征。

「游戏化」，就是**将游戏机制运用于非游戏场景**（网站或 app 等等）。比如，要想鼓励用户多参与交互，你可以在 app 中加入「挑战」这类的游戏元素。用户可以参与挑战，通过连续一周每日签到，并获得相应奖赏。

如果目标清晰，用户就愿意参与。如果完成挑战后还可以获得奖赏，那用户绝对会感兴趣。通过这种方式，**设计师能够影响用户行为，并促使他们参与其中，与这些游戏元素（挑战、奖赏等等）交互，从而达到预期目的**。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1ByWaUyvwdD69hX2dlXnKQA.jpeg)[Toonie 闹钟](http://toonie.io)

### 「游戏化」元素的 6 大分类

「游戏化」是比较复杂的设计技巧，需要结合界面交互元素，运用多种游戏机制。设计师运用「游戏化」的主要目的，绝非将产品功能重新定义为游戏。基于此，我们来看看设计领域的日常游戏机制中，最常用的 6 大分类是什么。

### 1. 挑战

人的本性，就是喜欢各种挑战，并向他人证明你的实力。所以，「挑战」当之无愧，是排名第一的游戏化元素。它可以促使用户采取行动，也能为提升用户体验「贡献一份力」。

为了增加挑战效果，不妨试试各种形式的「奖赏」，让用户更积极地参与其中。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1qkXG43vR31K-n7QZwooXnA.jpeg)「今天你必须完成至少 3 个任务」—— [Upper](http://uppertodo.com) （待办事项 app）的任务挑战

### 2. 分数

为了让用户一决胜负，许多电子游戏都使用了分数制。游戏化的产品，同样也可以利用「分数」。**这不仅对用户有用，还对利益相关方有帮助**——用户通过分数可以看到他们的成就；利益相关方则可以评估用户的参与度。

设计不需要太复杂，不用通过评价表来呈现分数。需要展示的，有登入签到次数或点击次数即可。

### 3. 徽章和贴纸

**当用户完成某项挑战或达到一定分数时，可以奖励徽章和贴纸给他们。**这种「实体奖赏」在电子游戏里比较常用，用户对此也相当熟悉。其实在很久以前，贴纸就已经深得人心。所以，用贴纸作为奖赏也是非常不错的选择。

此外，使用徽章和贴纸，还可以给设计师提供无限的创意设计空间，毕竟设计方式可以多种多样。像**这类的奖赏，可以进一步提高用户的参与度**。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1tDcgsfRbJ5htduCVSL0GUw.jpg)[PukaPal 的徽章](https://dribbble.com/shots/3104847-PukaPal-Badges)

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1_bbiTso-l2rz8hbOfAkg2A.gif)[Toonie 闹钟的贴纸](https://dribbble.com/shots/3062119-Toonie-Stickers-Jumble)

### 4. 排行榜

要让挑战更加有趣，可以让用户**互相竞技**。要想促使用户积极参与，最核心的是去**把握用户「想赢」的心态**。通过徽章排行榜的排名，可以让用户更有积极性。

然而，有时也可能会适得其反，特别是用户看到自己的排名和榜首差之甚远时。所以，要不要使用排行榜，一定要慎重思考。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/18PnkiYdhrlwmJE0NzKSGLw.jpg)[蛇舌大作战](https://dribbble.com/shots/2990521-Snake-Battle-App)

### 5. 用户体验旅程

这个游戏机制的目的，在于**将用户与产品的交互过程变得更加简单、明了**。在开始使用产品时，尽量让用户融入其中，并有「真实玩家」的感觉。比如，在登入界面，可以向用户介绍主题内容，这样用户就不怕「走错路」。

当这段用户体验旅程继续向前时，推荐使用「支架式」方法。**所谓「支架式」，是指在用户逐渐熟悉产品后，再不断地解锁新的内容和功能。**这种方法，可以避免用户出错，整个交互过程也可以非常友好。

此外，在加入「用户体验旅程」时，还可以一并使用进度功能。让用户了解整个旅程的进度信息，从而继续留住用户。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1wOzs2HLAljSRDfBS5-YNQw.jpg)[Singify 使用指南](https://dribbble.com/shots/2904642-Singify-App-Tutorial)

### 6. 限制

可能有些用户会觉得，有了以上元素还是不够好玩儿，那可以考虑加入「限制」元素——**限制玩家时间**。比如，电子游戏里的很多任务，需要玩家在规定时间内完成。否则，玩家就会输掉。这个方法同样也可以用于游戏化产品的设计。

可以通过设计，限制用户交互范围，更多功能需要在明天或者完成某项任务后才能解锁。这种「限制」，可以让用户反应更迅捷，促使用户立即采取行动。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/night_in_berlin_onboarding_tubik_ui.jpg)[Night in Berlin](http://tubikstudio.com/case-study-night-in-berlin-ui-for-event-app/)

以上，就是主要的游戏化元素在设计中的运用。当然，也可能还有其它更具创新的元素，同样可以运用在用户体验设计。

### 「游戏化」元素在用户体验设计中的角色

其实，「游戏化」在设计中的运用非常普遍。恰当地运用「游戏化」，加上「精挑细选」的游戏机制，可以成为用户体验设计师的一张王牌，从而不断地**提高转化率和用户参与度**。

那「游戏化」有用吗？首先值得肯定的是，通过「游戏化」元素，界面的确好玩儿了不少。用户非常喜欢充满乐趣、挑战还有竞技精神的界面，正如电子游戏给用户带来的体验一样。所以，可以保持很好的**「用户回头率」**。

其次，游戏机制也是促使用户进一步参与的加速器。游戏元素成为各种任务的组成部分，而只有完成任务的用户才可以获得相应奖赏。这背后的**好奇心和兴奋劲**，驱使用户不断挑战任务，花更多的时间停留在 app 或者网页上。

如今，「游戏化」已成为主要的设计技巧之一。很多设计师都迅速上了车，并把「游戏化」运用到不同项目的设计。这就是为什么，那么多用户才反应过来，「这些游戏化元素我好像都接触过」。

![](https://s3.ifanr.com/wp-content/uploads/2017/04/1HRGYpQxkhik-6Ln9oEOaYw.gif)Mood Messenger [动画贴纸](https://dribbble.com/shots/3391259-Animated-Stickers-for-Mood-Messenger)

### 结束语

「游戏化」还算是比较新的概念，但它一直在努力证明，「游戏化」也是一种有效的设计方法。不可否认的是，「游戏化」越来越受关注，在短期内它很有可能成为最有效的设计方法之一。

如果你还想阅读更多有关「游戏化」的内容，不妨阅读以下这些文章：

- [游戏化和用户体验：用户的竞技场地](https://www.smashingmagazine.com/2012/04/gamification-ux-users-win-lose/)
- [游戏化：为用户动机而设计](https://www.cs.auckland.ac.nz/courses/compsci747s2c/lectures/paul/p14-deterding.pdf)
- [友好的游戏化界面，来看看这 5 个例子](http://www.creativebloq.com/web-design-tips/5-examples-of-great-gamification-1233261)
- [游戏化：游戏机制导论](https://www.interaction-design.org/literature/article/introducing-game-mechanics-for-gamification)

原文出处 \| [Tubik Studio](http://tubikstudio.com/blog/)，一个专注于 UX/UI 设计及网站开发的数字机构。

译者 \| Jorri

文章译自 [Gamification in UX. Increasing User Engagement.](https://uxplanet.org/gamification-in-ux-increasing-user-engagement-6437cbf702aa)

题图来自 [OpenEducationEuropa](https://www.openeducationeuropa.eu/en/mooc/gamification-design-2nd-edition)

**本文由让手机更好用的 AppSo 翻译出品，关注微信公众号 AppSo，回复「记账」获取[一款把记账变成模拟城市游戏的应用，谁都不能阻止你每天记账了](http://www.ifanr.com/app/786319)。**

![AppSo qrcode signature](https://s3.ifanr.com/wp-content/uploads/2016/09/AppSo-qrcode-signature.jpg)