通過APP來構(gòu)建面向用戶的解決方案，是目前企業(yè)常見的思路。相比于移動(dòng)端網(wǎng)站，APP有著功能更加強(qiáng)大的框架和針對(duì)性更強(qiáng)的特點(diǎn)。

一款A(yù)PP的性能如何，和它的UI和UX設(shè)計(jì)息息相關(guān)。人們對(duì)于移動(dòng)端應(yīng)用的期望每年都在增長。人們希望通過舒適的交互和令人愉悅的導(dǎo)航系統(tǒng)在APP中達(dá)成自己的目標(biāo)，他們希望UI要富有吸引力還具有原創(chuàng)性，希望APP的功能和他們的興趣足夠貼合。在之前，我們?cè)?jīng)在《一個(gè)專業(yè)易用的健身APP，要如何規(guī)劃它的功能和UI？》這篇文章當(dāng)中提到了健身類應(yīng)用要如何設(shè)計(jì)，今天的文章，則是在截然不同的需求之下，完整設(shè)計(jì)出一個(gè)貼合實(shí)際健身流程的專業(yè)健身服務(wù)應(yīng)用。這個(gè)設(shè)計(jì)項(xiàng)目是由設(shè)計(jì)師 Tania Bashkatova 來負(fù)責(zé)的。

任務(wù)

為健身房中使用的健身APP進(jìn)行UI和UX設(shè)計(jì)

預(yù)處理過程

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

Mannva Group 希望他們的應(yīng)用被設(shè)計(jì)得充滿活力且年輕化，并且為用戶提供清晰明了的新用戶引導(dǎo)教程。此外，他們還額外要求設(shè)計(jì)師關(guān)注導(dǎo)航的設(shè)計(jì)，確保用戶能夠毫不費(fèi)力地找到他們想要的信息和內(nèi)容。

UX設(shè)計(jì)

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

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

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

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

總而言之，線框圖將Manuva 的整個(gè)框架和信息結(jié)構(gòu)清晰地呈現(xiàn)出來，并且將交互區(qū)域、元素都規(guī)劃了出來。

UI設(shè)計(jì)

當(dāng)線框圖所呈現(xiàn)的結(jié)構(gòu)和構(gòu)思被接納之后，設(shè)計(jì)師開始著手設(shè)計(jì)相應(yīng)的UI界面。在設(shè)計(jì)過程中，最重要的任務(wù)之一是找到合適的配色方案。配色對(duì)于產(chǎn)品視覺極其重要，它直接關(guān)系到了用戶對(duì)于產(chǎn)品的第一印象。不適當(dāng)?shù)呐渖赡軙?huì)直接影響到產(chǎn)品的可用性、可讀性以及用戶的滿意度。此外，設(shè)計(jì)師需要考慮的品牌本身的特點(diǎn)，目標(biāo)受眾的年齡、性別、文化背景以及喜好，在此基礎(chǔ)上來構(gòu)建配色。

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

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

在注冊(cè)界面當(dāng)中，APP 會(huì)讓用戶選取他們最喜歡的運(yùn)動(dòng)方向，呈現(xiàn)方式是相應(yīng)的運(yùn)動(dòng)員的圖像。由于 Manuva Group 來自非洲，所以基于用戶的需求，選取了大量非洲裔運(yùn)動(dòng)員的圖像。

為了讓用戶界面看起來清晰而足夠原創(chuàng)，設(shè)計(jì)師還單獨(dú)為此設(shè)計(jì)了一組自定義矢量圖標(biāo)。圖標(biāo)風(fēng)格簡(jiǎn)約美觀，和整個(gè)導(dǎo)航系統(tǒng)搭配起來頗為不錯(cuò)。

新用戶流程自定義插畫

新用戶引導(dǎo)流程是客戶特別關(guān)注的一部分。新用戶引導(dǎo)流程中，用戶通過系統(tǒng)提供的教程了解APP 的功能和基本的控件如何實(shí)用。這個(gè)環(huán)節(jié)中，通常包含簡(jiǎn)短清晰的引導(dǎo)和描述性的信息，闡述APP 的優(yōu)勢(shì)，并盡量吸引用戶試用并留下來。

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

結(jié)語

無論存在多少同類應(yīng)用，創(chuàng)新和不同的需求和市場(chǎng)總會(huì)讓新生的APP 有脫穎而出的機(jī)會(huì)。不過在創(chuàng)造性的設(shè)計(jì)，用戶體驗(yàn)設(shè)計(jì)上，需要設(shè)計(jì)師投入更多的精力，力圖讓UI更加令人愉悅。

【2018年設(shè)計(jì)趨勢(shì)，一個(gè)都不要錯(cuò)過】

1. 《2018年，這10個(gè)LOGO設(shè)計(jì)趨勢(shì)值得你關(guān)注》
2. 《超全面總結(jié)！2017年UI設(shè)計(jì)領(lǐng)域流行過這21個(gè)設(shè)計(jì)趨勢(shì)》
3. 《掌握這12個(gè)移動(dòng)端UX設(shè)計(jì)趨勢(shì)，你就掌控了2018年》
4. 《這款獨(dú)特的紫色，是為你指引2018年設(shè)計(jì)方向的年度潘通色》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com