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

登錄和個人頁面

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

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

這款健身APP 的主要目標是幫助用戶進行自我完善，個人信息不僅包含基本的個人數據，還應該包含相應的成就系統，比如每次運動卡路里的消耗、個人運動記錄等信息。過濾非關鍵信息，將關鍵性的信息以信息圖表的形式呈現，否則用戶界面會看起來非常混亂。

主界面

任何APP都應該包含主界面，它是用戶歷程的起點。APP 主界面應該足夠易用，它是整個產品的核心，也是承載產品導航功能的起始。

主界面應該可以幫助用戶抵達不同功能、不同位置的頁面，設計師可以采用多種不同的導航控件來實現這一點，頂部和底部導航，側邊欄導航，或者漢堡圖標等等。根據產品功能、屬性的差異，導航的設計也不盡相同。

活動界面

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

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

心率界面

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

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

睡眠跟蹤界面

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

卡路里界面

在健身的過程中，卡路里是能量消耗和食物攝入的時候最常見的度量。如果你想要健康，控制食物攝入的熱量，計算運動的消耗，都得依靠這一度量。所以，卡路里的界面是相當重要的組成部分。卡路里的信息可以集成到活動界面當中，不過，將卡路里單獨出來制作成獨立的界面，加上擴展信息，比如卡路里的攝入和消耗，會對用戶更有用。

進度界面

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

日程界面

在不同的時間，不同的地點可有不同的健身活動。有了日程界面，用戶可以更好的規劃一下自己的日常活動進程。日程界面是標準化的，不過設計師可以加入一些有趣的圖標來代表不同的運動。

目標界面

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

運動健身是需要持續進行才會有效果，這也使得這個健身APP的設計策略和細節需要非常用心才行。

【2018年設計趨勢，一個都不要錯過】

1. 《2018年，這10個LOGO設計趨勢值得你關注》
2. 《超全面總結！2017年UI設計領域流行過這21個設計趨勢》
3. 《掌握這12個移動端UX設計趨勢，你就掌控了2018年》
4. 《這款獨特的紫色，是為你指引2018年設計方向的年度潘通色》

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com