案例研究:如何實際應用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

如果覺得我們做的還不錯點個贊和在看吧! :)

「其他文章」