好用户体验设计案例分享(七个情境)

1. 什么是好的用户体验？

1.1 定义

在开始分享案例前，我想先来谈谈好的UX设计是什么？

Usability易用性：产品设计符合符合用户的习惯与需求，用最少的努力发挥最大的能量。

Beautiful美观：产品功能达到目的后，视觉上有好的比例、构图、重要信息放在适当的位置，都能让用户体验更好

Pleasurable愉悦：让用户体验提升到另一个层次，加上一些小心思，不论是文案、插图、细微动画，让用户惊喜、感到开心。

好的用户体验金字塔Good User Experience Design

1.2 产品开发流程

在这里，稍微提一下产品开发流程，一个好的用户体验设计，不只是用户研究和设计，到执行层面，产品经理必须了解、定义问题、引导团队到正确的方向，设计师与工程团队紧密合作，才能将呈现用户完整的体验。

记住，设计师跟工程师是好朋友，要手牵手才能优质的产品。

另外，也尽量不要有”一次到位”的想法，许多好的设计是经过不断迭代更新、学习用户行为的。尽管做了用户研究，但到产品真正推出市场时，常常会有意想不到的回馈、状态，必须去做相对应的调整。

产品开发流程Product Development Process

2. 七大基本使用情境

在设计时，我们常常一开始都以最完美的情境下进行设计(Happy Path)，忽略了不同用户情境，造成用户的困惑或挫折感，与开发部门来回的沟通成本。因此，在开始着手设计时，若能考虑不同情境，更能全面地确保用户体验的一致性。

因此这篇的文章，要向大家介绍七个基本的使用状态：

1.注册Sign up

2.引导Onboarding

3.空白Empty State

4.创建Creation Flow

5.载入Loading

6.成功/确认/分享Success / Confirmation / Share

7.错误Error

除了常见、花最多时间设计的“创建”，别忘了还有用户一开始登入时的空白状态、载入及正、反回馈。

 

七大基本用户情境Seven Basic User Scenarios

3. 优秀的UX范例分享

＊分享的案例符合：

1.已上线的产品：上市的产品，并非Dribble, Behance上的概念设计

2.个人使用过的产品：本人有实际操作过，并非广告或是设计案例

3.焦点在个别/独立功能：这次着重于单独的阶段，并非整体产品

4. UX不只是美观，还有流程和技术：千万不要觉得界面好看就好，还有其中细微的流程，和背后的技术。设计师跟工程师是好朋友，缺一不可

5.主观意见：我认为好的UX，并不代表你也喜欢。就像我喜欢臭豆腐，但不是每个人都爱。

3.1 注册登录Sign up / Registration

产品：Zeplin

不论任何产品，注册几乎是必备流程。在个人注册过这么多产品后，Zeplin算是数一数二流畅又让人愉悦的。

仔细观察简单的注册画面，它包含：

-即时反馈：不论是成功或是输入错误，Zeplin利用颜色及图示告知用户目前的状态

-鼓励语气：当输入完毕时，「不错哟Looks good！」、「赞！」，右方的确认信息十分正面，肯定用户的输入动作，让用户感觉良好。

-提供有用的信息：当在输入电子邮件、名称及密码时，同时提供用户相关信息

Zeplin注册画面十分流畅及令人愉悦

3.2 引导Onboarding

大家对Boarding Pass登机证、Boarding Time登机时间这两个名词应该不陌生，On board在英文一般指的是搭乘交通工具，如船或是火车；或者第一天上班，老外会跟你说”Welcome on board”来欢迎新进员工。在产品设计中，On board是指用户首次”登入”产品。

当用户第一次见到你的产品时，说明内部功能及导览，让用户了解内部的功能及目的十分重要。想像第一次去餐厅、图书馆、甚至是认识新朋友，如何让自我介绍有趣又易懂，是维系用户关系的关键时刻。

产品：Dropbox

相信大家在下载新的App，第一次打开总是有很多美丽的插画，或是动画等，但我个人总是习惯顺手一滑，整个完全忽略产品介绍，连看都不看。

Dropbox的onboarding用户引导流程真的做得很好。第一次登入后，马上出现可爱的插画亲切地欢迎用户的到来。再来，利用放大镜的焦点，将用户的目光聚集在关键功能，并用大幅的画面下栏说明档案存取及共用文件，让人不忽略也难，十分简洁、易懂、美丽的设计。

Dropbox的用户引导流程，亲切又易懂

除了使用放大镜的方法一个一个步骤指示功能，同时可以参考：

-Craft：步骤 截图 视窗 简短文字说明

-Instagram Stories：简洁图示 文字

-iOS Siri：举例说明产品目的

其他Onboarding设计(Craft, Instagram Stories, and iOS Siri)

3.3 空白状态Empty State

在2015 Andrew Chen搜集125 million的手机数据，研究指出在用户下载App的前三天，每日活跃用户(DAUs, Daily Active Users)会据减77%；在90天内，只会剩下5%的每日活跃用户。

「在下载过后的三至七天，用户会尝试大量的app，去决定那些app是不必要的。对于“像样” (decent)的apps，大部分的用户会持续使用一个礼拜后，仍继续保留。成功的关键在刚开始的三至七天，就让用户迷上(hooked)你的产品。」
— Ankit Jain , Founding Partner at Gradient Ventures

因此，若能在用户刚开始接触你的产品，善用空白状态立即表现出产品价值，能够触发用户的使用动机。

一般而言，空白状态的情形主要有三种：

-1-首次登入：尚未有任何信息、行为

-2-清空/删除/完成工作：删除邮件、档案等，或是完成待办事项

-3-没有任何搜寻、配对结果

一个好的空白状态设计包含：

-1-具有教具性：教导用户如何使用产品(What, Where, and When)

-2-让用户愉悦：也许教导用户太过严肃，可以试着用可爱、幽默、有趣的口吻、视觉提升用户的兴趣

-3-诱导行动：说明产品功能后，最后仍须让用户与你的产品互动，不论是上传、浏览、创建档案，记得加上一个有意义的CTA进行动作

Asana & IconJar 善用空白状态，说明产品功能并诱导用户行为

在Asana的例子中(图左)，利用大型图示、渐层色彩吸引用户目光，并说明产品的价值(团队有效沟通)。IconJar一目了然的CTA，用户了解下一个动作是什么，具有促发行动性，也是挺好的案例。

 

3.4 创建/新增Creation Flow

创建流程是产品价值的核心，用户如何运用你的产品达到目的，一般而言是投入最多时间、繁复的项目，一个产品内大多有数个创建/新增流程。如： Instagram和Facebook po文的过程、Amazon线上购物、Venmo汇款转帐、Airbnb订房等功能。

至于如何设计开发一个清晰无负担的创建流程？必须透过了解问题、用户研究、原型设计、搜集回馈数据，才能验证一个好的设计，在此文我们不多加说明。不过，可以提到一个交互设计领域基本、不成文的原则—

三点击原则Three Click Rule

如果用户在三次点击之后，仍无法找到有用讯息和完成产品功能，用户就会离开你的产品。

用户是没有耐心的，假如他们没办法在有限时间内与你的产品有共鸣，不论是达到他的目的、或是提升兴趣，用户会受挫，而离开页面。

也许你会问，如果功能很复杂，也要步骤也要减少到三次点击吗？其实未必，Joshua Porter , Director of UX at Hubspot的研究指出，用户在三次点击后，如果找不到该功能，还是会继续点击，甚至多达25次。重点不在于减少越多越好，而是让每次点击都是有意义，提供导览列、将讯息有效的组合在一起、建立清晰的资讯架构，让用户可以有效率的完成目的。

产品：Invision

在Invision的新增项目流程中，运用饱和度浓厚的粉红色作为CTA，并放置在页面上端引人注目，当用户按下新增后，有简单的两个步骤：选择类型及装置，Invision利用简单的插画，让创建流程更有温度，同时预防错误。

 Invision Project Creation Flow利用插画跟三点击原则，增添新增项目流程的趣味

3.5 载入 Loading

2005年，Jakob Nielsen提出的十项用户体验设计优化原则，其中之一即是系统状态呈现/显示(Visibility of system status)。

举例来说，假如今天要去排永康街的鼎泰丰小笼包，店员会跟你说，你是“第几号”、”前面有多少人”、”大概要等多久”，至少让你有排队的心理准备，或者利用叫号机提醒客户。在产品设计时，也是相同的道理，目的是为了减少不确定性和降低用户的感知时间。

为了减少用户的焦虑，产品应提供回馈，让用户了解即将会发生的情形、预期多久会发生。

一个好的进度显示，通常会告知用户：

-现在状态：正在载入画面、资料、数据等

-未来状态：即将呈现的结果

最常见的手法包含：

-进度条：告知目前状态，到下一个状态前大概要多久

-载入动画：一个简单没有负担的动画，可以转移用户的注意力，不觉得等待时间有这么长

 

产品：Slack 

不但告知状态、转移注意力，同时为了不要让画面过于空白，加上了内容占位符，让转换画面/状态的过程十分流畅。

当然，最重要的还是页面载入的速度，用户是非常没有耐心的。

Slack & Gmail Loading 载入动画减少用户的焦虑

 

3.6 成功/确认/分享Success/Confirmation/Share

“反馈”是指依据用户的行为，给予有效资讯，让用户了解目前状态，作为判断下一步的根据。
不论是正面，或是负面的回馈都是有效的，在产品设计中则是执行功能的成功与否。当用户完成一项任务后，给予适当的正面回应，可以提升用户的成就感、让用户感到安心&开心。

产品：Shazam

Shazam是搜寻音乐的app，可以”聆听”、辨认音乐、获取歌词。当完成时，绿色的大页面占据整个画面，告诉用户搜寻成功，并提供Spoitfy的短捷键，让用户可以直接加入音乐清单。

最让我惊艳的是，我通常很懒得开不同的app，会直接截图存到相簿，或分享。Shazam了解用户行为，在截图后，上方的视窗显示”Tap to share”，真的是非常贴心的设计😍 👍

 

Shazam贴心的分享流程设计

其他我满喜欢的成功状态包含Mailchimp , Meetup和Overflow。

Mailchimp：UX经典案例，当用户成功发送一组邮件后，吉祥物大猩猩会跟你击掌，或是规划邮件发送日期，“Rock on!”讯息也让人会心一笑

Meetup：美国流行的地方性社交网站，让来自各地的人找到志同道合的朋友。当完成注册活动时，成功视窗虽然看似平凡，但其中的视觉层级设计得相当好：打勾→分享→活动概要→加入日历，画面清晰简要

Overflow：用户流程展示工具，当注册完毕后，除了正面的积极的讯息、社交分享捷径，有趣的是利用奖励(诱因)诱导用户分享产品，在新产品推出时，是很棒的用户体验。

Mailchimp , Meetup , Overflow的确认画面有清楚的视觉层级和令人愉悦的设计元素

 

3.7 错误Error State

相信大家都有过，手机卡顿、屏幕冻结、上传失败等负面的经验，还记得当下多么挫败、生气、不解吗？用户可能因此离开你的产品、流失客群。为了确保用户停留，我们可以重新思考错误消息设计。

错误消息常常被忽略，但确保正面的用户经验是非常重要的。

一个好的错误讯息包含：问题是什么，发生原因，解决方法。

以下的例子，都有清楚地说明原因及下一步指示，甚至利用可爱的插画，平复用户不开心的状态。

Headspace, Muzli, Slack的错误讯息，除了告知用户目前状态外，也提供有效资讯及指示

 

4. 小结Conclusion

这次的文章简要讲解产品设计的七个基本使用情境中的用户体验设计，刚入门产品设计的设计师常忽略的状态。希望看完文章后，设计师们能将这七个情境考虑进去，做更完善、全面性的设计。