<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          案例研究:一款助眠APP的UI設計分析

          2018-7-13    藍藍設計的小編


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          版權申明:本文原創作者人人都是產品經理,感謝人人都是產品經理的原創經驗分享!致敬哈



          本文主要分享一款助眠APP——Slumber的UI 設計案例,該項目由UI / UX設計師Ernest Asanov主導。

          案例研究:一款助眠APP的UI設計分析

          現在,我們發現健康類APP越來越多了:健身應用程序、跟蹤器、卡路里計算器、水和食物日記、活動提醒等等,這些APP的確對我們保持日常健康提供了幫助。

          今天我們就來分享一款助眠APP——Slumber的UI 設計案例,該項目由UI / UX設計師Ernest Asanov主導。

          項目

          一款助眠APP的UI 設計。

          目標

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

          界面設計的主要任務是:

          1. 清晰直觀的導航,用戶使用這個APP主要是為了放松,而不是花幾個小時獲取信息;
          2. 時尚的視覺圖形,為產品營造適當的氛圍;
          3. 高可讀性和引人入勝的動畫,以支持輕松的交互。

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

          首頁

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

          案例研究:一款助眠APP的UI設計分析

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

          案例研究:一款助眠APP的UI設計分析

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

          案例研究:一款助眠APP的UI設計分析

          睡眠庫

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

          案例研究:一款助眠APP的UI設計分析

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

          案例研究:一款助眠APP的UI設計分析

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

          案例研究:一款助眠APP的UI設計分析

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

          案例研究:一款助眠APP的UI設計分析

          我的

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

          案例研究:一款助眠APP的UI設計分析

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

          作者:Tubik Studio

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

          翻譯:熊小熊

          本文由 @熊小熊 翻譯發布于人人都是產品經理。未經許可,禁止轉載

          題圖來自 Pexels,基于 CC0 協議

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          相關文章:

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

          創意設計的方法—無窮關聯法

          多倫多訂餐APP-懶洋洋

          UI設計師的日?!猆I設計師平常都干些什么

          幫助您做出漂亮版式設計的八個實用技巧

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合