一個(gè)全新的UI設(shè)計(jì)實(shí)戰(zhàn):幫你改善睡眠的APP,是這樣設(shè)計(jì)出來的
本文將在此分享一個(gè)全新的UI設(shè)計(jì)實(shí)戰(zhàn):幫助用戶更好睡眠的應(yīng)用 Slumber 的UI設(shè)計(jì)的過程。enjoy~
現(xiàn)代人對(duì)于健康越來越重視,而移動(dòng)端APP 在這方面為用戶提供了多種多樣的幫助。無論是系統(tǒng)化的健身應(yīng)用,還是卡路里計(jì)算器,飲食日記,運(yùn)動(dòng)提醒,用戶可以借由多種不同的渠道和方式來保持健康的生活和良好的體型。
今天,我們想分享一個(gè)全新的UI設(shè)計(jì)實(shí)戰(zhàn):幫助用戶更好睡眠的應(yīng)用 Slumber 的UI設(shè)計(jì)的過程。這個(gè)項(xiàng)目被分配給我們的主力UI/UX設(shè)計(jì)師 Ernest Asanov,之前他還負(fù)責(zé)過 Vinny’s Bakery 和 Home Budget 兩個(gè)著名的設(shè)計(jì)案例,想必你還記得。
項(xiàng)目概述
為了幫助用戶獲得更好的睡眠,設(shè)計(jì)一個(gè)移動(dòng)端應(yīng)用和相應(yīng)的UI界面。
處理過程
Slumber 這個(gè)應(yīng)用其實(shí)是多個(gè)功能的集合,能夠幫助用戶通過聆聽和冥想等多種方法緩解睡眠和放松等多方面的問題。應(yīng)用中的睡眠音軌收集了一系列幫助用戶在完善放松和提升睡眠質(zhì)量的音頻素材。在這個(gè)項(xiàng)目當(dāng)中,設(shè)計(jì)師的任務(wù)也很清晰:
- 設(shè)計(jì)清晰直觀的導(dǎo)航:APP 的目標(biāo)是讓用戶得到放松,而不是花上幾個(gè)小時(shí)從一屏切到另外一屏來回翻看。
- 界面要足夠視覺化,讓用戶保持愉悅的心情。
- 可讀性要高,動(dòng)畫要引人入勝,交互要簡(jiǎn)單直觀。
主界面
主界面的色彩和背景主要是基于功能和用戶的使用場(chǎng)景來設(shè)計(jì)的,由于多數(shù)情況下用戶是在晚上使用這一應(yīng)用,所以需要傳遞出夜晚柔和的氛圍。所以在 UI界面要使用深沉的色彩,時(shí)尚的風(fēng)格和圖形化的元素能夠讓人感到愉悅。
主界面將會(huì)包含最新的助眠音軌和最流行的播放列表。底部的標(biāo)簽欄會(huì)將用戶導(dǎo)向到 APP 的核心功能區(qū)域,也就是主頁、資源庫和個(gè)人頁面。由于這款 APP 的目標(biāo)受眾非常廣泛,其中許多用戶不乏技術(shù)素養(yǎng)相對(duì)比較低的普通用戶,因此設(shè)計(jì)師需要將應(yīng)用的易用性和可理解性提升到一個(gè)非常高的層面,通過明確的導(dǎo)航和簡(jiǎn)單的界面讓每個(gè)用戶都能夠輕松使用。
另外一個(gè)頗為有吸引力的設(shè)計(jì),是可以自定義的封面圖,以及預(yù)加載好的動(dòng)畫,這使得 APP 的界面不會(huì)顯得乏味或者缺乏吸引力。
資源庫
APP 中包含了大量的用來促眠的音頻素材,用戶可以在資源庫中尋找自己覺得不錯(cuò)的音軌。
簡(jiǎn)約而清晰的過濾系統(tǒng)能夠幫助用戶找到最舒適的聲音組合,幫助用戶進(jìn)行冥想或者睡眠。用戶可以通過調(diào)整背景音效來尋求個(gè)性化的組合,找到最適合自己的。背景圖片將會(huì)始終顯示,并不會(huì)在調(diào)整過程中消失,確保整個(gè)流程不會(huì)斷掉。
微妙的動(dòng)效將會(huì)在用戶的整個(gè)交互過程中提升體驗(yàn)的愉悅度,又不會(huì)影響操作。選擇了可讀性優(yōu)良的字體,結(jié)合清晰的層次結(jié)構(gòu),用戶可以在短時(shí)間內(nèi)快速獲取屏幕中的信息。
高質(zhì)量的圖片是素材庫中內(nèi)容的重要支撐,它們確保整個(gè)視覺足夠優(yōu)秀,并且讓用戶在視覺上享受到了良好的氛圍支撐。
個(gè)人頁面
個(gè)人頁面中包含了用戶自身相關(guān)的關(guān)鍵信息,以及一些相關(guān)的交互,比如睡前提醒,耳機(jī)模式以及相關(guān)的一些設(shè)置。用戶還可以選擇包含更多功能和服務(wù)的進(jìn)階模式。同樣的,個(gè)人頁面也采用了深色系設(shè)計(jì),沉穩(wěn)優(yōu)雅。
這個(gè)項(xiàng)目是個(gè)有趣的挑戰(zhàn),相對(duì)獨(dú)特的需求和小眾的主題需要設(shè)計(jì)師在設(shè)計(jì)過程中仔細(xì)衡量,作出更加深思熟慮的設(shè)計(jì)決策。
原文作者 :?Tubik Studio
譯者/編輯 :?陳子木
譯文地址:https://www.uisdc.com/case-study-slumber-ui-design
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來源于原文作者
- 目前還沒評(píng)論,等你發(fā)揮!