分享几个非常好的用户体验交互设计案例

2020-02-06 11:08:56

字体：大中小

来源：转载

供稿：网友

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

以下讨论的是和用户体验交互相关的分享几个非常好的用户体验交互设计案例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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利用简单的插画，让创建流程更有温度，同时预防错误。