設計實戰！健身應用Mannva的UX/UI設計流程是怎樣的

通過APP來構建面向用戶的解決方案，是目前企業常見的思路。相比于移動端網站，APP有著功能更加強大的框架和針對性更強的特點。

一款APP的性能如何，和它的UI和UX設計息息相關。人們對于移動端應用的期望每年都在增長。人們希望通過舒適的交互和令人愉悅的導航系統在APP中達成自己的目標，他們希望UI要富有吸引力還具有原創性，希望APP的功能和他們的興趣足夠貼合。今天的文章，則是在截然不同的需求之下，完整設計出一個貼合實際健身流程的專業健身服務應用。這個設計項目是由設計師 Tania Bashkatova 來負責的。

任務

為健身房中使用的健身APP進行UI和UX設計
 

預處理過程

客戶是來自南非的 Mannva Group 公司，他們希望設計出一款名為 Manuva 的新產品，適用于專業健身人事和健身房會員的移動端應用。這款應用的主要目的是幫助用戶在健身房找到適合自己的私教，并且在不加入特定健身房的前提下預約到試聽的課程。用戶將可以通過應用內的地圖或者列表發現最近的健身房、私教和課程，用戶能夠通過距離和時間排序來篩選最近可用的健身房、私教和課程。這款應用對于健身行業從業者而言，可以用來作為維護和運營客戶的工具。對于用戶而言，這款工具主要幫助他們發現適合自己的健身服務。當敲定課程、健身和私教之后，這款名為Manuva 的應用還提供應用內的支付服務。

Mannva Group 希望他們的應用被設計得充滿活力且年輕化，并且為用戶提供清晰明了的新用戶引導教程。此外，他們還額外要求設計師關注導航的設計，確保用戶能夠毫不費力地找到他們想要的信息和內容。

UX設計

了解了所有的信息和需求之后，設計師完成構思，并且開始繪制線框圖。通過線框圖，設計師將APP的各屏的布局高度簡化精煉地呈現出來，它可以將整個APP的信息架構快速而視覺化的勾勒出來，確保后續的開發和客戶對于項目的結構有清晰的了解。此外，如果客戶想要進行修改，線框圖的修改成本也相對較低。

這就是 Manuva 的APP 的線框圖。設計師設計出了基本的布局，包括登錄界面和主屏幕。

客戶要求將一些原始的功能包含到登錄界面當中，確保用戶無需注冊的狀況下便可在 Manuva 中發現信息。這就是為什么設計師會在登錄按鈕下方加入一個“Desicover Manuva”的按鈕，為用戶提供一個額外的選擇。此外，為了讓用戶的個人信息更加個性化，在登錄過程中，用戶還可以有針對性地選擇他們的目標。

主界面包含兩個部分，一個是健身教練列表，一個是地圖。這幫助用戶快速地找到他們需要的私教。此外，用戶界面當中還包括一個標簽欄，這種導航模式平易近人還足夠清晰。

總而言之，線框圖將Manuva 的整個框架和信息結構清晰地呈現出來，并且將交互區域、元素都規劃了出來。

UI設計

當線框圖所呈現的結構和構思被接納之后，設計師開始著手設計相應的UI界面。在設計過程中，最重要的任務之一是找到合適的配色方案。配色對于產品視覺極其重要，它直接關系到了用戶對于產品的第一印象。不適當的配色可能會直接影響到產品的可用性、可讀性以及用戶的滿意度。此外，設計師需要考慮的品牌本身的特點，目標受眾的年齡、性別、文化背景以及喜好，在此基礎上來構建配色。

設計師為客戶提供了多種配色的選擇，也讓客戶可以從多個不同的角度來看待他們的APP。不同的配色方案覆蓋面非常廣，有黑色背景的也有白色背景的，有冷色調的也有暖色調的。接下來我們看看具體的設計：

最終客戶選擇了白色背景下包含兩種對比色的UI概念設計，這兩種色彩是藍色和粉紅色。而藍色本身也是 Manuva 的LOGO中的品牌色，這樣的選取有利于提高品牌的認知度。以下是APP 最終的UI設計：

在注冊界面當中，APP 會讓用戶選取他們最喜歡的運動方向，呈現方式是相應的運動員的圖像。由于 Manuva Group 來自非洲，所以基于用戶的需求，選取了大量非洲裔運動員的圖像。

為了讓用戶界面看起來清晰而足夠原創，設計師還單獨為此設計了一組自定義矢量圖標。圖標風格簡約美觀，和整個導航系統搭配起來頗為不錯。

新用戶流程自定義插畫

新用戶引導流程是客戶特別關注的一部分。新用戶引導流程中，用戶通過系統提供的教程了解APP 的功能和基本的控件如何實用。這個環節中，通常包含簡短清晰的引導和描述性的信息，闡述APP 的優勢，并盡量吸引用戶試用并留下來。

為了讓這些教程界面更具娛樂性，客戶和設計師一同討論，并且最終添加了一系列自定義插畫。這項任務交給了Tubik 的平面設計師 Marina Solomennikova 。插畫的風格是扁平的，色彩和整個UI配色相互呼應，效果如下：

結語

無論存在多少同類應用，創新和不同的需求和市場總會讓新生的APP 有脫穎而出的機會。不過在創造性的設計，用戶體驗設計上，需要設計師投入更多的精力，力圖讓UI更加令人愉悅。