国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

案例研究:一款助眠APP的UI設(shè)計(jì)分析

2018-7-13    藍(lán)藍(lán)設(shè)計(jì)的小編


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

版權(quán)申明:本文原創(chuàng)作者人人都是產(chǎn)品經(jīng)理,感謝人人都是產(chǎn)品經(jīng)理的原創(chuàng)經(jīng)驗(yàn)分享!致敬哈



本文主要分享一款助眠APP——Slumber的UI 設(shè)計(jì)案例,該項(xiàng)目由UI / UX設(shè)計(jì)師Ernest Asanov主導(dǎo)。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

現(xiàn)在,我們發(fā)現(xiàn)健康類APP越來越多了:健身應(yīng)用程序、跟蹤器、卡路里計(jì)算器、水和食物日記、活動(dòng)提醒等等,這些APP的確對我們保持日常健康提供了幫助。

今天我們就來分享一款助眠APP——Slumber的UI 設(shè)計(jì)案例,該項(xiàng)目由UI / UX設(shè)計(jì)師Ernest Asanov主導(dǎo)。

項(xiàng)目

一款助眠APP的UI 設(shè)計(jì)。

目標(biāo)

Slumber是為有睡眠問題的人設(shè)計(jì)的,里面包含故事和冥想的內(nèi)容。通過這些內(nèi)容,Slumber希望能夠讓用戶放松,從而睡個(gè)好覺。

界面設(shè)計(jì)的主要任務(wù)是:

  1. 清晰直觀的導(dǎo)航,用戶使用這個(gè)APP主要是為了放松,而不是花幾個(gè)小時(shí)獲取信息;
  2. 時(shí)尚的視覺圖形,為產(chǎn)品營造適當(dāng)?shù)姆諊?
  3. 高可讀性和引人入勝的動(dòng)畫,以支持輕松的交互。

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

首頁

至于顏色和背景的選擇,移動(dòng)用戶的界面是根據(jù)APP的功能來設(shè)計(jì)的。Slumber采用的是深色調(diào),傳遞燈光柔和的夜晚氛圍。屏幕上還有一些相應(yīng)的圖形,整體看起來時(shí)尚、深沉。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

首頁上有新劇集和熱門播放列表,標(biāo)簽欄將用戶鏈接到APP的核心功能區(qū)域:主頁、睡眠庫和我的。鑒于Slumber的目標(biāo)用戶群體十分廣泛,一些用戶可能不太熟悉技術(shù),因此設(shè)計(jì)師采用了標(biāo)簽+圖標(biāo)的方式,以便為每個(gè)人提供清晰的導(dǎo)航。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

屏幕上另一個(gè)漂亮而引人注目的點(diǎn)是自定義插圖,它與預(yù)加載器一起制作成動(dòng)畫,使得等待的過程不但不乏味,還充滿了美的吸引力。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

睡眠庫

睡眠庫中有大量輕松的內(nèi)容可供選擇,為了能夠讓用戶快速的進(jìn)行略讀,每個(gè)選項(xiàng)都配了相應(yīng)的主題圖片。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

簡單明了的過濾器系統(tǒng),使得用戶可以選擇最舒適的設(shè)置和聲音組合,以完善冥想或睡眠的體驗(yàn)。用戶可以自己調(diào)整背景效果,創(chuàng)建個(gè)性化的聲音。在用戶調(diào)整和聆聽音樂的過程中,背景圖片一直存在,不會(huì)消失,整個(gè)體驗(yàn)很完整。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

Slumber上的動(dòng)畫并不引人注目,但是在過渡的過程中為界面添加了風(fēng)格和自然外觀。選擇的字體可讀性很高,排版層次結(jié)構(gòu)非常清晰,用戶可以在短時(shí)間內(nèi)瀏覽屏幕。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

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

案例研究:一款助眠APP的UI設(shè)計(jì)分析

我的

“我的”類目下面有用戶所有的關(guān)鍵性信息,用戶可以自己設(shè)置就寢時(shí)間提醒,獲取睡眠耳機(jī),定價(jià)屏幕顯示用戶如何達(dá)到高級模式。在這個(gè)模塊里,UI設(shè)計(jì)也是采用的深色背景和鮮艷的圖案,容易吸引用戶的注意力。

案例研究:一款助眠APP的UI設(shè)計(jì)分析

這個(gè)項(xiàng)目是一個(gè)有趣的挑戰(zhàn),在整個(gè)設(shè)計(jì)過程中,既要考慮與“健康睡眠這個(gè)主題的對應(yīng)性,也要注意視覺元素的時(shí)尚型,要在二者之間取得平衡。

作者:Tubik Studio

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

翻譯:熊小熊

本文由 @熊小熊 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

藍(lán)藍(lán)設(shè)計(jì)paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


相關(guān)文章:

------------------

創(chuàng)意設(shè)計(jì)的方法—無窮關(guān)聯(lián)法

多倫多訂餐APP-懶洋洋

UI設(shè)計(jì)師的日常——UI設(shè)計(jì)師平常都干些什么

幫助您做出漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧

日歷

鏈接

個(gè)人資料

存檔