交互案例研究-如何设计带有幸福感体验的项目?

所谓“以人为本的设计”究竟是怎样的？

围绕用户的需求我们可以创建出怎样的设计呢？

我们又如何可以为用户创建具有幸福感的设计呢？

今天，小编就为大家分享一下Ludmila Shevcheko的交互项目。通过对应用程序进行迭代更新，来为用户带来幸福感体验。

项目介绍

Introduction

Happiness AI是一款应用程序。为了创造一种“可以帮助人们在生活中发挥最大潜力和幸福感的技术”的机会，该款APP的开发者开始寻求Ludmila Shevcheko团队的帮助。

Ludmila Shevcheko团队围绕“提升用户幸福感”这一概念，并在该程序的设计基础上，更好地促进了使用者的幸福体验。其任务在于使用现有应用程序的视觉设计，进一步开发产品的MVP版本。此外，在设计过程中，设计者们也需要牢记以下几个关键因素：

这款应用程序的主要目标受众为Gen Z
独特的设计（视觉和用户体验）是APP的关键元素
创建多个开放性概念

设计流程

Deisgn Processes

为了在"Happiness AI"中为用户提供更好的幸福感，Ludmila Shevcheko和她的团队进行了以下设计。

Step 1：探讨该款APP的当前状态

这款名为"Happiness AI"的应用程序已经上市。首先，Ludmila Shevcheko探索并分析了它的工作方式，并注意到了几个存在的问题：

过度填充的登录页面：页面上存在太多元素，因此需要进一步划分为更小更简单的部分
黄色背景上的白色文本，形成了低对比度
当界面上同时存在两个明亮的CTA时，主屏幕会显得有点空
由于降低了饱和度，反馈表情符号的非活动状态令人费解

此外，她还注意到屏幕中过于强烈的阴影以及可能会变成底部导航的侧边菜单栏。

Happiness AI视觉1.0版本

Step 2：全新视觉风格&登录页面

正如Ludmila Shevcheko在其Dribble页面上所呈现的那样，她使用了色彩填充的形式。然而，当其谈到新项目的第一步操作时，她更倾向于使用较为温和的设计手法。因为这样可以帮助设计者更好地了解用户的偏好。

这也是为什么Ludmila Shevcheko在一开始会选择柔和的调色板作为APP的色彩基调。基于APP现有的渐变颜色，团队成员们想使界面的颜色变得更加干净且具有明亮感。在向用户呈现第一个渐变色调的界面后，下一个页面的渐变颜色则会变得更微小，以此帮助用户更好地关注到界面元素。

登录APP后的前三个页面

"Happiness AI"的登录流程分为以下几步：

闪屏
添加用户姓名
Level#1"What makes you happy?"：兴趣的选择
Level#2：少数兴趣类别的选择

根据上述步骤，用户在每次登录APP时，只需点击每个页面就可以做出一个简单的选择，而不是在同一页面上做出完全选择却可能根本查看不到所有项目。

页面兴趣和类别

这个想法也是一个颜色代码的创建过程。每个兴趣类别都有自己的代表颜色：紫色代表艺术、绿色代表生活方式、粉红色代表爱情等等。此外，它们每个都伴有页面图标。而在进一步的更新中，这些都将变得更加简化和简约。

Step 3：进入更明亮的应用程序

通过提升更多的对比度，Ludmila Shevcheko及其团队决定专注于5个主要兴趣类别：健康、生活方式、社交、智力和目的。

虽然"Happiness AI"中添加了每个兴趣页面对滑动类别列表的提示，但这些类别本身并不出挑。那么，究竟该如何解决这一问题呢？同时，成员们也意识到一个问题，即：每个兴趣类别都有其独特的一个方面。

更新的流程

基于此，团队想到了一个设计方法：为每个类别添加不同的渐变颜色。这种设计方式是设计过程中的一个转折点，它可以帮助设计者们探索如何将兴趣类别的渐变颜色与应用程序的其他界面屏幕相结合。此外，还可以使APP变得更亮。

每个屏幕都具有不同的渐变颜色

细节设计

Details Design

在了解了以上三个设计步骤后，我们就来看一看"Happiness AI"的细节设计。

Interest icons-兴趣图标

Ludmila Shevcheko想创建一种不会引起太多关注的简约图标，同时可以帮助用户区分每个兴趣类别。因此，该款APP中的每个图标都由作为主要基本元素的圆圈组成。

为了更精确地查看这些图标，用户将会关注到这些图标都具有不同数量的元素，从两个圆圈和一颗心代表健康类别，到6+代表智力类别。

兴趣图标

第一次迭代vs当前设计

"How do I feel" icons-用户情绪图标

想要创建这类图标，就需要设计者获得用户情绪的反馈。在这种情况下，大家都习惯于使用五角星作为一个常见的图标。可是，又该如何将它们与情感表达结合呢？

此时值得我们关注的是，色彩有时候会带来无限的力量。例如，在纯白区域内，不仅可以通过不同的放置顺序来区分某种情绪，也可以借助色彩来进行区分。

表情符号的反馈

CTAs active states-CTA活动状态

在这款APP中，所呈现的第一个状态是带有"Today's Happiness AI"理念的页面，以及"Where to start"与"Share"选项。根据兴趣类别，这类的页面可以具备不同的渐变背景。因此，强调CTA按钮的最佳方法就是将它们设计为白色。

此外，为了创建活动状态，Ludmila Shevcheko团队提出了一个解决方案：使整个页面变暗。同时，这也为他们提供了更多使用渐变颜色的机会：将冷色渐变用于"Earn more"；而暖色渐变则用于"Take action"。此外，他们还增加了"Reading"图标，来帮助用户获得快速跳转页面并浏览的机会。