一款助眠APP的UI設計過程

現在，我們發現健康類APP越來越多了：健身應用程序、跟蹤器、卡路里計算器、水和食物日記、活動提醒等等，這些APP的確對我們保持日常健康提供了幫助。今天我們就來分享一款助眠APP——Slumber的UI 設計案例。該項目由UI / UX設計師Ernest Asanov主導。

項目

一款助眠APP的UI 設計

目標

Slumber是為有睡眠問題的人設計的，裡面包含故事和冥想的內容。通過這些內容，Slumber希望能夠讓用戶放鬆，從而睡個好覺。界面設計的主要任務是：

1、清晰直觀的導航，用戶使用這個APP主要是為了放鬆，而不是花幾個小時獲取信息；

2、時尚的視覺圖形，為產品營造適當的氛圍；

3、高可讀性和引人入勝的動畫，以支持輕鬆的交互。

整個APP非常簡潔，一共有三個Tab,分別是首頁、睡眠庫、我的，下面分別來看一下具體的設計思路。

首頁

至於顏色和背景的選擇，移動用戶的界面是根據APP的功能來設計的。Slumber採用的是深色調，傳遞燈光柔和的夜晚氛圍。屏幕上還有一些相應的圖形，整體看起來時尚、深沉。

首頁上有新劇集和熱門播放列表，標籤欄將用戶鏈接到APP的核心功能區域：主頁、睡眠庫和我的。鑒於Slumber的目標用戶群體十分廣泛，一些用戶可能不太熟悉技術，因此設計師採用了標籤+圖標的方式，以便為每個人提供清晰的導航。

屏幕上另一個漂亮而引人注目的點是自定義插圖，它與預載入器一起製作成動畫，使得等待的過程不但不乏味，還充滿了美的吸引力。

GIF

睡眠庫

睡眠庫中有大量輕鬆的內容可供選擇。為了能夠讓用戶快速的進行略讀，每個選項都配了相應的主題圖片。

簡單明了的過濾器系統使得用戶可以選擇最舒適的設置和聲音組合，以完善冥想或睡眠的體驗。用戶可以自己調整背景效果，創建個性化的聲音。在用戶調整和聆聽音樂的過程中，背景圖片一直存在，不會消失，整個體驗很完整。

Slumber上的動畫並不引人注目，但是在過渡的過程中為界面添加了風格和自然外觀。選擇的字體可讀性很高，排版層次結構非常清晰，用戶可以在短時間內瀏覽屏幕。

GIF

睡眠庫中的配圖質量都非常高，不但讓用戶在視覺上看起來非常舒服，也創造了很好的使用氛圍。

我的

「我的」類目下面有用戶所有的關鍵性信息，用戶可以自己設置就寢時間提醒，獲取睡眠耳機。定價屏幕顯示用戶如何達到高級模式。在這個模塊里，UI設計也是採用的深色背景和鮮艷的圖案，容易吸引用戶的注意力。

這個項目是一個有趣的挑戰，在整個設計過程中，既要考慮與「健康睡眠這個主題的對應性，也要注意視覺元素的時尚型，要在二者之間取得平衡。

作者：Tubik Studio

原文地址：https://uxplanet.org/case-study-slumber-mobile-app-design-for-healthy-sleeping-83b0acb454b0

翻譯：熊小熊

集創堂四周年線上分享活動（7.13-7.20）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！