旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 行業(yè)資訊 > 如何用UI設(shè)計(jì)完成一個(gè)健身APP
如何用UI設(shè)計(jì)完成一個(gè)健身APP
時(shí)間:2018-02-23來(lái)源:5wd995.cn點(diǎn)擊量:作者:馬晨皓
時(shí)間:2018-02-23點(diǎn)擊量:作者:馬晨皓

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



 

登錄和個(gè)人頁(yè)面

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

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

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



 

主界面

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

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

 

活動(dòng)界面

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

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



 

心率界面

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

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

 

睡眠跟蹤界面

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

 

卡路里界面

在健身的過(guò)程中,卡路里是能量消耗和食物攝入的時(shí)候最常見(jiàn)的度量。如果你想要健康,控制食物攝入的熱量,計(jì)算運(yùn)動(dòng)的消耗,都得依靠這一度量。所以,卡路里的界面是相當(dāng)重要的組成部分??防锏男畔⒖梢约傻交顒?dòng)界面當(dāng)中,不過(guò),將卡路里單獨(dú)出來(lái)制作成獨(dú)立的界面,加上擴(kuò)展信息,比如卡路里的攝入和消耗,會(huì)對(duì)用戶更有用。



 

進(jìn)度界面

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

 

日程界面

在不同的時(shí)間,不同的地點(diǎn)可有不同的健身活動(dòng)。有了日程界面,用戶可以更好的規(guī)劃一下自己的日?;顒?dòng)進(jìn)程。日程界面是標(biāo)準(zhǔn)化的,不過(guò)設(shè)計(jì)師可以加入一些有趣的圖標(biāo)來(lái)代表不同的運(yùn)動(dòng)。

 

目標(biāo)界面

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

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

 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2021/ 5wd995.cn 北京漫動(dòng)者教育科技有限公司 備案號(hào):京ICP備12034770號(hào) 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc