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

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

登錄和個(gè)人頁面

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

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

這款健身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ān)鍵信息，將關(guān)鍵性的信息以信息圖表的形式呈現(xiàn)，否則用戶界面會(huì)看起來非?；靵y。

主界面

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

主界面應(yīng)該可以幫助用戶抵達(dá)不同功能、不同位置的頁面，設(shè)計(jì)師可以采用多種不同的導(dǎo)航控件來實(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ì)師可以將不同類型的活動(dòng)都匯集到這個(gè)界面當(dāng)中。傳統(tǒng)意義上，健身類APP 在計(jì)算日常運(yùn)動(dòng)量的時(shí)候，會(huì)采用兩種不同的方式，一種是計(jì)算距離，一種是計(jì)算步數(shù)。

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

心率界面

心率是運(yùn)動(dòng)過程中，用戶身體狀況的重要指標(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í)候，需要加載過程，相應(yīng)的，應(yīng)該搭配數(shù)據(jù)加載動(dòng)畫。如果要貼合主題，動(dòng)畫效果可以制作成心跳的插畫。自定義插畫和動(dòng)效設(shè)計(jì)會(huì)讓整個(gè)界面看起來更加精致，也使得心率的展現(xiàn)過程更具交互性。

睡眠跟蹤界面

好睡眠是身體健康的標(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è)界面通過圖表展現(xiàn)出來。

卡路里界面

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

進(jìn)度界面

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

日程界面

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

目標(biāo)界面

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

運(yùn)動(dòng)健身是需要持續(xù)進(jìn)行才會(huì)有效果，這也使得這個(gè)健身APP的設(shè)計(jì)策略和細(xì)節(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é)議