一個專業(yè)易用的健身APP,要如何規(guī)劃它的功能和UI?

3 評論 10976 瀏覽 77 收藏 9 分鐘

通過一個設(shè)計實戰(zhàn)案例來講述下一個健身APP的設(shè)計策略,enjoy~

生活條件的提升使得大家對于健康的生活方式有了更多的需求。健身類的應(yīng)用就是幫助力求健康的用戶提升生活品質(zhì)的幫手。借助這類APP,用戶將會更加科學(xué)地健身,提升身體素質(zhì)。想要讓健身類的APP足夠靠譜,設(shè)計師需要在設(shè)計的時候,盡量讓APP具備足夠強大的解決問題的能力,那么在具體的UI和UX設(shè)計師,設(shè)計師要怎么做呢?今天的設(shè)計實戰(zhàn),我們就來了解一下這樣一個APP的設(shè)計思路。

登錄和個人頁面

對于用戶而言,這樣的一個APP應(yīng)該就是他口袋中的私人教練。它應(yīng)該給用戶以舒適感,能夠個性化地呈現(xiàn)信息,所以設(shè)計師需要為用戶配備一個實用性很強的個人頁面。

在打開個人頁面之前,用戶通常都需要登錄。為了更為便捷的登錄,并且強化社交屬性,允許用戶使用社交媒體帳號進行登錄,不過在用戶創(chuàng)建帳號之后,允許他們進行個性化的調(diào)整。APP中通常會包含年齡,性別,體重,身高等基礎(chǔ)的用戶數(shù)據(jù),用來界定用戶的身體狀況。通常,填寫信息的表單會設(shè)計得和申請表類似,用戶通過填寫提交信息,隨后根據(jù)不同的配置信息,個性化地呈現(xiàn)出來。

這款健身APP 的主要目標是幫助用戶進行自我完善,個人信息不僅包含基本的個人數(shù)據(jù),還應(yīng)該包含相應(yīng)的成就系統(tǒng),比如每次運動卡路里的消耗、個人運動記錄等信息。過濾非關(guān)鍵信息,將關(guān)鍵性的信息以信息圖表的形式呈現(xiàn),否則用戶界面會看起來非?;靵y。

主界面

任何APP都應(yīng)該包含主界面,它是用戶歷程的起點。APP 主界面應(yīng)該足夠易用,它是整個產(chǎn)品的核心,也是承載產(chǎn)品導(dǎo)航功能的起始。

主界面應(yīng)該可以幫助用戶抵達不同功能、不同位置的頁面,設(shè)計師可以采用多種不同的導(dǎo)航控件來實現(xiàn)這一點,頂部和底部導(dǎo)航,側(cè)邊欄導(dǎo)航,或者漢堡圖標等等。根據(jù)產(chǎn)品功能、屬性的差異,導(dǎo)航的設(shè)計也不盡相同。

活動界面

用戶為了身體健康,往往會參加各種各樣的健身活動,所以,這款健身APP 應(yīng)當為用戶提供跟蹤一天當中所有活動的功能。為了充分利用UI界面的控件,設(shè)計師可以將不同類型的活動都匯集到這個界面當中。傳統(tǒng)意義上,健身類APP 在計算日常運動量的時候,會采用兩種不同的方式,一種是計算距離,一種是計算步數(shù)。

用戶的活動信息非常適合使用信息圖來展現(xiàn),這使得不那么容易理解的數(shù)據(jù)被組織得更加清晰,更容易被理解。設(shè)計師常常會使用不同的圖標來代表不同的活動,這使得界面更加清爽明了。

心率界面

心率是運動過程中,用戶身體狀況的重要指標。現(xiàn)如今,標準化的API使得APP 可以接入各種各樣第三方的心率檢測設(shè)備,這使得用戶借助可穿戴設(shè)備獲得健康數(shù)據(jù)之后,可以同APP進行同步并進行分析。而這款健身APP 中的心率界面的數(shù)據(jù),可以從這些設(shè)備獲得。

這個界面的整體設(shè)計應(yīng)該是簡約的,盡可能保留最核心的交互元素,確保用戶可以輕松完成操作。由于心率相關(guān)信息通常數(shù)據(jù)量比較大,想要展示相關(guān)數(shù)據(jù)的時候,需要加載過程,相應(yīng)的,應(yīng)該搭配數(shù)據(jù)加載動畫。如果要貼合主題,動畫效果可以制作成心跳的插畫。自定義插畫和動效設(shè)計會讓整個界面看起來更加精致,也使得心率的展現(xiàn)過程更具交互性。

睡眠跟蹤界面

好睡眠是身體健康的標志。熱衷于健身的用戶對此應(yīng)該深有體會,總會試圖控制睡眠,確保時間和質(zhì)量。所以,健身APP 將會在晚上搜集用戶的睡眠數(shù)據(jù),包括睡眠的時間和不同的階段。通常,睡眠會被劃分為4個不同的階段,第一個階段是入睡,第二個階段是淺睡,第三個階段是深睡,第四個階段是延續(xù)深睡。搜集睡眠數(shù)據(jù)之后,在這個界面通過圖表展現(xiàn)出來。

卡路里界面

在健身的過程中,卡路里是能量消耗和食物攝入的時候最常見的度量。如果你想要健康,控制食物攝入的熱量,計算運動的消耗,都得依靠這一度量。所以,卡路里的界面是相當重要的組成部分??防锏男畔⒖梢约傻交顒咏缑娈斨校贿^,將卡路里單獨出來制作成獨立的界面,加上擴展信息,比如卡路里的攝入和消耗,會對用戶更有用。

進度界面

為了保持用戶的積極性,讓他們“沉迷自我完善不可自拔”,是要讓他們看到辛勤的健身運動有結(jié)果。而這個進度界面就是用來呈現(xiàn)的進展、成就的。同樣的,使用信息圖來呈現(xiàn)是個不錯的選擇。如果用戶的身體狀況有進展,能夠通過進度界面展示出來。

日程界面

在不同的時間,不同的地點可有不同的健身活動。有了日程界面,用戶可以更好的規(guī)劃一下自己的日?;顒舆M程。日程界面是標準化的,不過設(shè)計師可以加入一些有趣的圖標來代表不同的運動。

目標界面

其實,用戶健身的目標通常會比較明確,但是是各不相同的。有的用戶想通過健身來減肥,有的則是增重,還有的用戶是想通過健身來塑型的。想要達成不同的目標,用戶的健身側(cè)錄和方案也是不一樣的。有了明確的目標和清晰的方案,用戶就能夠通過量化的、可執(zhí)行的每一個健身項目,來不斷達成小目標,最終實現(xiàn)自己的健身目的。通過合理的獎勵機制,用戶會在不斷前進的過程中獲得成就感,設(shè)計中如果能融入一些游戲化的設(shè)計,效果會更好。

運動健身是需要持續(xù)進行才會有效果,這也使得這個健身APP的設(shè)計策略和細節(jié)需要非常用心才行。

 

原文作者 :?Tubik Studio

譯者:陳子木

譯文地址:http://www.uisdc.com/keep-fit-ui-design

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你好大神 可以說下文章里面的實例APP是哪一個么?謝謝!

    來自廣東 回復(fù)
  2. 三部分:首頁(主要數(shù)據(jù),社交內(nèi)容瀑布流),社交+內(nèi)容,我的。界面簡單就好。

    來自福建 回復(fù)
  3. henhao

    來自北京 回復(fù)