案例研究:如何实际应用UX设计法则?来看看Headspace(冥想类产品巨头) 遵循的7个用户体验定律!

语言: CN / TW / HK

UI & UX

Article:2022/09/26

欢迎来到 「NEW案例三分钟」 栏目~ 「NEW案例三分钟」 是由美国交互设计资讯连载的关于交互设计的案例分享栏目,每周为大家更新不同类型的UI&UX设计案例,希望大家在阅读案例的研究过程有所收获~

大家喜欢看什么类型的案例分析呢? 欢迎在 文末 加入我们的 交流群 中共同讨论哦~

Headspace 是一家英美在线 医疗保健 公司,专注于通过引导式 冥想 ,帮助用户实现更加幸福健康的生活。 Headspace 是由 冥想领域的专家Andy Puddicombe 打造的一款 冥想软件 ,在全球拥有 数百万用户。

今天为大家分享 Headspace在设计中遵循的一些UX定律帮助大家在真实的优秀案例中理解如何在设计实践中使用UX设计法则:

1. 审美可用性效应

用户通常认为美观的设计是更实用的设计。

设计师使用这一法则欺骗用户的思想,使他们 喜欢 这个应用程序,并为他们提供 很好的反馈

Headspace具体如何使用美学可用性效应:

1. 鲜艳的色彩 设计应用程序,使用户被其 美丽的颜色和简约的设计 所吸引。

2.通过使用 圆角 ,使应用程序看起来很 可爱

3.通过添加 具有平静感的卡通插图 ,让用户 感到 平静

4.设置初始阶段的 酷炫动画

5.圆形 排版 ,可爱,赏心悦目。

2. 希克定律

做出决定所需的时间随着选择的数量和复杂性而增加。

根据研究发现,您提供给用户的选项数量会混淆他们并使决策变得困难,并且用户将花费大量时间来做出完美的决定。

就像外出并有很多地方可去一样,决定去哪里也是一个艰难的决定。

Headspace具体如何使用希克定律:

1.通过 突出显示可能最适合 普通用户的优惠,为其提供 鲜艳的背景颜色 ,使其 脱颖而出

2.通过 标记 或给出“ 最佳 报价”的标签,可以 更清楚地说明为什么 突出显示报价。

3.通过为用户 提供更少的选项 ,这使得决策更快,更容易。

3. 邻近定律

彼此靠近或接近的物体往往会被组合在一起。

Headspace具体如何使用邻近定律:

1. 通过 在主体周围 添加 相同的填充、使用相似的颜色、形状等相关元素进行分组

2. 通过在 不同元素之间 提供 更多空间 ,使元素看起来 彼此分离

4. 共同区域法则

如果元素共享一个具有明确边界的区域,则它们往往会被感知为组。

公共区域中的元素被视为分组元素,如果你想一起显示各种元素,那么最好使用带有 边框、背景阴影或颜色的公共区域 ,这使用户相信 这些元素属于彼此

Headspace具体如何使用共同区域法则:

1.通过向公共区域 添加背景

2.将所有元素 放置在容器或形状内

3.并 保持与您的设计一致 ,不要在应用程序内将点1和2混合在一起,无论是边框还是背景内容,以保持 一致性

5. 菲茨定律

获取目标的时间是到目标的距离和大小的函数:即大且近的目标,用户更易触及;而小且远的目标,用户更难到达。

曾有博主为了更有效地养成多喝水的习惯,把水瓶放在靠近自己的办公桌上,这有助于每天喝更多的水。基本上,正是菲茨定律的基础知识解释了 越接近目标就越容易实现它

按钮 UI设计越接近拇指 ,用户就 越容易点击 按钮并实现定义的目标,如注册,确认,订阅等。

Headspace具体如何使用菲特定律:

1.通过将 按钮 放置在 屏幕底部可以轻松触摸 ,尤其是当用户用一只手使用应用时。

2.通过 使按钮足够大 ,这使得 目标的范围 很宽。

3.通过使用 鲜艳的颜色 ,就像上图中一样,使用了蓝色,这与整个橙色主题有点不同,这有助于它 从其他元素中脱颖而出

6. 多尔蒂阈值

当计算机和它的用户以一定的速度(<400 毫秒)进行交互时,生产力就会飙升,从而确保双方都不必等待对方。

提供反馈可以帮助其他人知道他们已经在有效进行中,就像在与老板交谈时点头一样,让他们知道你在听(即使你正在考虑回家:)

Headspace具体如何使用多尔蒂阈值:

1. 通过提供 动画 使用户与应用程序互动

2. 通过添加 加载指示器 ,使用户感觉到后台发生了某些事情,他们必须等待。 (尝试使用带有进度指示器的加载指示器,该指示器指示多长时间以及必要时添加百分比。)

7. 相似法则

人眼倾向于将设计中的相似元素视为完整的图片,形状或组,即使这些元素是分开的。

UI设计中的 相似对象倾向于感知相似 ,它们相似或工作完全相同,因此设计人员使类似类型的元素 在设计中保持一致

Headspace具体如何使用相似性定律:

1. 通过使按钮 看起来一致 ,应用程序中的所有主按钮都是蓝色的。

2. 通过使形状看起来与 圆角一致 ,您可以看到所有元素,并且应用程序中的按钮都是圆角的。

3. 通过使应用程序中的 颜色一致 ,Headspace在应用程序中始终使用橙色作为 主要颜色 ,使其更 易于识别

4. 通过使用 相同的字体系列或版式

5. 通过 以相同的方式使用插图 ,Headspace使用在整个应用程序中相似的卡通插图,最终使 品牌 脱颖而出。

感谢阅读:)希望对大家在设计实践中运用UX设计法则有所启发~

(部分图文来自网络,若有侵权,请联系删除。)

加入 UI&UX交流社群 ~

设计资源/书籍资源/知识互动

还有更多神秘福利!

一起创作更好的设计~

往期推荐 | Read More

案例研究:饱和设计主题如何创新?培养正念冥想习惯的应用程序——Mindwaves!

设计资讯:Adobe 收购 Figma 会改变交互设计的未来吗?有哪些 Figma 流行替代品?

环保意识、国际旅行、数字货币、区块链:在未来具有影响力的用户体验设计领域!

文字丨Jelly

编辑丨Jelly

如果觉得我们做的还不错点个赞和在看吧! :)

「其他文章」