中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

任務(wù)

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

預(yù)處理過(guò)程

客戶是來(lái)自南非的 Mannva Group 公司，他們希望設(shè)計(jì)出一款名為 Manuva 的新產(chǎn)品，適用于專(zhuān)業(yè)健身人事和健身房會(huì)員的移動(dòng)端應(yīng)用。這款應(yīng)用的主要目的是幫助用戶在健身房找到適合自己的私教，并且在不加入特定健身房的前提下預(yù)約到試聽(tīng)的課程。用戶將可以通過(guò)應(yīng)用內(nèi)的地圖或者列表發(fā)現(xiàn)最近的健身房、私教和課程，用戶能夠通過(guò)距離和時(shí)間排序來(lái)篩選最近可用的健身房、私教和課程。這款應(yīng)用對(duì)于健身行業(yè)從業(yè)者而言，可以用來(lái)作為維護(hù)和運(yùn)營(yíng)客戶的工具。對(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)思，并且開(kāi)始繪制線框圖。通過(guò)線框圖，設(shè)計(jì)師將APP的各屏的布局高度簡(jiǎn)化精煉地呈現(xiàn)出來(lái)，它可以將整個(gè)APP的信息架構(gòu)快速而視覺(jué)化的勾勒出來(lái)，確保后續(xù)的開(kāi)發(fā)和客戶對(duì)于項(xiàng)目的結(jié)構(gòu)有清晰的了解。此外，如果客戶想要進(jìn)行修改，線框圖的修改成本也相對(duì)較低。

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

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

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

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

UI設(shè)計(jì)

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

設(shè)計(jì)師為客戶提供了多種配色的選擇，也讓客戶可以從多個(gè)不同的角度來(lái)看待他們的APP。不同的配色方案覆蓋面非常廣，有黑色背景的也有白色背景的，有冷色調(diào)的也有暖色調(diào)的。接下來(lái)我們看看具體的設(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 來(lái)自非洲，所以基于用戶的需求，選取了大量非洲裔運(yùn)動(dòng)員的圖像。

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

新用戶流程自定義插畫(huà)

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

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

結(jié)語(yǔ)

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

原文作者 :?Tubik Studio

譯者：陳子木

譯文地址：http://www.uisdc.com/manuva-app-uiux-design

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供