Headspace是由冥想大師Andy Puddicombe所打造的一款冥想APP，目前在全球擁有超過數百萬的用戶。該APP主要專注於透過引導式冥想，幫助使用者實現幸福健康的生活。

優秀APP設計案例分析

今天Inspirr網頁製作將為大家整理Headspace在APP設計中遵循的一些UX設計定律，幫助大家從真實的優秀APP設計案例中，理解如何在實踐中運用UX設計法則!

【優秀APP設計案例分析：Headspace APP設計特色】

從UI設計來說，Headspace APP的介面非常乾淨簡潔，整體配色方案以橘黃色為主色調，配以粉嫩的色彩、畫風軟萌的插圖以及簡單易懂的卡通動畫，給使用者帶來非常放鬆的視覺和心理體驗。

優秀APP設計案例分析

該APP給使用者帶來非常豐富的冥想課程，所有課程循序漸進以引導使用者從無到有地進行冥想;同時每個課程後面都會有十分鐘的計時，讓使用者學完後即可進入冥想狀態。

優秀APP設計案例分析

此外，Headspace APP的聲音，從音色到語調都充滿著感染力與引導力，容易使人進入到他所營造的氛圍中，幫助使用者快速進入到冥想當中。

優秀APP設計案例分析

【優秀APP設計案例分析：Headspace APP設計遵循哪些UX設計定律】

UX設計定律一：美學可用性效應(Aesthetic Usability Effect)

美學可用性效應是指用戶通常認為美觀的設計就是實用的設計，因此設計師經常會使用這一UX設計法則來「欺騙」用戶，使他們喜歡這個APP並為他們提供很好的反饋。

UX設計定律

那麼，Headspace APP是如何使用美學可用性效應的?

• 用鮮艷的配色方案，讓使用者被粉嫩的配色方案和簡約的UI設計所吸引。

• 透過圓角設計，讓APP看起來更加可愛、親民。

• 透過添加具有平靜感的卡通插圖，讓使用者感到平靜、放鬆。

UX設計定律二：希克定律(Hick’s Law)

希克定律是指使用者做出決定所需的時間會隨着選擇的數量和複雜性的增加而增加。研究發現，介面選項的數量愈多容易導致使用者在決策上變得更困難，同時需要花費大量時間才能做出完美的決定。

UX設計定律

那麼，Headspace APP是如何使用希克定律的?

• 通過鮮艷的背景顏色，突出「可能最適合普通用戶的優惠」的選項。

• 通過標記或添加「最佳報價」的標籤，清楚說明為什麼突出顯示報價。

• 通過為使用者提供更少的選項，讓他們在決策上變得更快、更容易。

UX設計定律三：鄰近定律(Proximity-Theorem )

鄰近定律是指彼此靠近或接近的物體(元素)，往往會被組合在一起。

UX設計定律

那麼，Headspace APP是如何使用鄰近定律的?

• 通過在主題周圍添加相同的填充或使用相似的顏色、形狀等，對相關元素進行分組

• 增加不同元素之間的留白，使用不太相關的元素看起來彼此分離。

UX設計定律四：共同區域法則(Law of Common Region)

共同區域法則是指如果元素共用一個具有明確邊界的區域，它們往往會被感知為一組。因此，想一起顯示各種元素，最好使用帶有邊框、背景陰影或顏色等公共區域，讓使用者相信這些元素屬於彼此。

UX設計定律

那麼，Headspace APP是如何使用共同區域法則的?

• 將相關元素放置在同一容器或形狀內，同時向公共區域添加背景顏色/陰影

• 保持設計上一致的同時，使用增加留白方式區分介面中的各項內容。

UX設計定律五：菲茨定律(Fitts’ Law)

菲茨定律是預測獲取目標的時間取決於目標和當前位置的距離和目標的大小，即大且近的目標會讓使用者更容易觸及;小且遠的目標會讓使用者更難到達。在交互設計上，設計師通常會透過改變目標大小來降低操作難度，並通過調整位置距離來提高操作效率。

UX設計定律

那麼，Headspace APP是如何使用菲茨定律的?

• 透過將按鈕放置在介面的底部，方便使用者輕鬆觸碰，尤其是當使用者僅用一隻手使用APP時。

• 透過使按鈕尺寸足夠大，讓使用者點擊目標的範圍變得更廣。

• 透過增加介面中的色彩對比度，讓重要元素可從其他元素中脫穎而出。

UX設計定律六：相似性原則(Law of Similarity)

相似法則是指人眼傾向於將設計中的相似元素視為一組，即使這些元素是分開的。

那麼，Headspace APP是如何使用相似性原則的?

• APP中所有主按鈕都是藍色的，讓使用者一看就知道這是介面中最重要的元素。

• APP中所有元素都是使用圓角設計，使其更具親和力。

• 整個APP使用相同字體系列、版式設計和主色調，使其更易於識別。

• 整個APP都使用相似的卡通插圖風格，最終使品牌脫穎而出。

UX設計定律七：多爾蒂閾值(Doherty Threshold)

美劇《Halt and Catch Fire》中有一段台詞：「當你使用電腦執行一系列操作時，每當按下回車鍵，如果電腦能在400毫秒內給予反饋，那將會讓你一直保持專注，效率也會飆升，讓你完全沉迷進行;但如果反饋時間超過400毫秒，哪怕只是偏差到半秒鐘，你的注意力就很容易會被分散，你甚至會想起身洗個碗、拿個遙控器、看場比賽……所以說400毫秒以下的反饋速度是最佳節點。」

而劇中引用到的這個臨界值「400毫秒」就是多爾蒂閾值。

UX設計定律

那麼，Headspace APP是如何使用多爾蒂閾值的?

• 透過提供動畫，讓使用者與APP進行友好互動。

• 透過添加加載指示器，讓使用者感覺到後台正發生的程序，告知他們這是必須等待的。

上述介紹的UX設計定律，不僅適用於APP設計，網頁設計等其他交互設計同樣使用。另外，這些UX定律雖然被很多設計師奉為「標準」，但是各位設計師也不能照本宣科，而是應該根據整體效果來選擇，才能讓整個視覺設計變得更具吸引力!