如何從零開(kāi)始設(shè)計(jì)一款漂亮的移動(dòng)APP？

以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。

我13歲時(shí)開(kāi)始學(xué)習(xí)平面設(shè)計(jì)。我從網(wǎng)上課程學(xué)會(huì)了設(shè)計(jì)網(wǎng)站，并習(xí)慣于全天使用Photoshop和Affinity Designer進(jìn)行設(shè)計(jì)。那些經(jīng)歷教會(huì)了我如何像設(shè)計(jì)師那樣思考。

我設(shè)計(jì)和開(kāi)發(fā)應(yīng)用程序?qū)⒔幸荒陼r(shí)間了。我參加了麻省理工學(xué)院的一個(gè)項(xiàng)目，與一個(gè)團(tuán)隊(duì)合作開(kāi)發(fā)Universeaty。 兩個(gè)月前，我開(kāi)始研究一個(gè)新的應(yīng)用程序-Crypto Price Tracker，這款A(yù)PP我會(huì)在1月28日發(fā)布。

在這篇文章中，我將配合實(shí)例說(shuō)明我在從事應(yīng)用程序設(shè)計(jì)時(shí)的一步一步的過(guò)程。這應(yīng)該對(duì)任何想學(xué)習(xí)或改進(jìn)數(shù)字設(shè)計(jì)技能的人有所幫助。設(shè)計(jì)并不是全部了解如何使用設(shè)計(jì)軟件，這篇文章也不會(huì)教你如何使用軟件。網(wǎng)絡(luò)上有數(shù)以百計(jì)的優(yōu)質(zhì)教程資源可以教你學(xué)習(xí)如何使用設(shè)計(jì)軟件。想做好設(shè)計(jì)，你需要理解你的產(chǎn)品，熟知它的特點(diǎn)和功能，以及在設(shè)計(jì)時(shí)始終將終端用戶放在心里。這就是這篇文章的意義所在。

設(shè)計(jì)過(guò)程：

1.為每個(gè)頁(yè)面創(chuàng)建一個(gè)用戶流程圖。

2.創(chuàng)建/繪制線框圖。

3.選擇設(shè)計(jì)圖案和調(diào)色板。

4.創(chuàng)建模型。

5.創(chuàng)建一個(gè)動(dòng)畫(huà)應(yīng)用程序原型，并要求人們對(duì)其進(jìn)行測(cè)試并提供反饋。

6.給出最后調(diào)整確定的模型，并交由開(kāi)發(fā)按原型編寫(xiě)代碼。

我們正式開(kāi)始吧！

用戶流程圖

第一步是想出在你的應(yīng)用程序中想實(shí)現(xiàn)的功能。一旦你有了你的想法，設(shè)計(jì)一個(gè)用戶流程圖。用戶流程圖是用戶通過(guò)app/網(wǎng)站進(jìn)行訪問(wèn)的一個(gè)非常高級(jí)的表示。

通常，用戶流程圖由三種形狀組成。

矩形用于表示頁(yè)面。

方塊用于表示決策（例如，點(diǎn)擊登錄按鈕，向左滑動(dòng)，縮放）。

箭頭將頁(yè)面和決策連接在一起。

用戶流程圖是非常有用的，因?yàn)樗鼈兘o出了應(yīng)用程序如何運(yùn)作的良好邏輯思路。

下面是我在開(kāi)始設(shè)計(jì)應(yīng)用程序時(shí)繪制的用戶流程圖。

主界面的用戶流程圖。

線框圖

一旦你完成了每個(gè)頁(yè)面的用戶流程圖并設(shè)計(jì)了用戶路線，你就可以開(kāi)始為所有頁(yè)面做線框圖了。線框圖在本質(zhì)上是以低保真度形式表示你的應(yīng)用程序外觀?；旧鲜菆D像，標(biāo)簽，按鈕，和其它元素的一個(gè)草圖或一個(gè)輪廓，這些元素都會(huì)在頁(yè)面上做好布局和定位。你的應(yīng)用程序的草圖會(huì)體現(xiàn)它是如何使用的。

我使用UI模板打印的模板來(lái)繪制線框圖。 它既可以節(jié)省時(shí)間，而且給為我提供了一個(gè)很好的畫(huà)布來(lái)繪圖和做筆記。

下面是我繪制的一個(gè)線框圖例子。

 

 

主界面的線框圖。

繪制好線框圖后，你可以使用一款名為Pop的應(yīng)用程序，并使用該應(yīng)用程序?qū)⒉輬D拍照存檔，再通過(guò)「連結(jié)」（link to）的功能，將一張張草圖串聯(lián)起來(lái)，就能直接在手機(jī)屏幕上展示原型實(shí)際運(yùn)作的樣子。

設(shè)計(jì)圖案和顏色調(diào)色板

這是我最喜歡的部分。這就像逛街一樣。有大量的設(shè)計(jì)圖案和調(diào)色板可供選擇。我可以去選擇我喜歡的，并感受它們給我?guī)?lái)的視覺(jué)效果。

尋找設(shè)計(jì)圖案的最佳平臺(tái)是Mobile Patterns和Pttrns。想要找到好的調(diào)色板，你可以去“ Color Hunt”平臺(tái)。

創(chuàng)建模型

這是當(dāng)你最終使用設(shè)計(jì)軟件的時(shí)候了。設(shè)計(jì)意義上的模型是以高保真的形式來(lái)表示你的應(yīng)用程序。這就像你將來(lái)實(shí)際使用時(shí)進(jìn)入這個(gè)應(yīng)用程序，然后你從這里面做一些截圖。它看起來(lái)應(yīng)該很現(xiàn)實(shí)，非常像真實(shí)的東西。

有一些用于創(chuàng)建模型的設(shè)計(jì)軟件和工具。我使用Affinity designer來(lái)創(chuàng)建模型。iOS設(shè)計(jì)中最常用的工具是Sketch。

下面是我早期設(shè)計(jì)APP中的一些實(shí)例。

 

我使用了各種各樣的調(diào)色板來(lái)進(jìn)行設(shè)計(jì)。

 

我給我的朋友分享了最初的模型，以獲得他們的反饋。很多人似乎更喜歡黃金漸變和黑色背景。

我愿意接受更多的反饋并嘗試新的建議！想獲得更好的用戶體驗(yàn)的方法是多與終端用戶交流。當(dāng)你與終端用戶交談時(shí)，你會(huì)發(fā)現(xiàn)用戶有很多奇妙的想法，而不是去瘋狂地翻閱Dribbble或Behance。

所以我重新設(shè)計(jì)了模型并刪除了背景圖，因?yàn)樯伤鼈冊(cè)诩夹g(shù)上是一個(gè)耗時(shí)的過(guò)程，除此之外，它們還降低了可讀性。下面就是我重新設(shè)計(jì)模型后的樣子。

黃金漸變和黑色背景看起來(lái)非常不錯(cuò)！

我對(duì)這套顏色方案、標(biāo)簽欄上的圖標(biāo)和整體布局都非常滿意。我繼續(xù)按照相同的設(shè)計(jì)指南設(shè)計(jì)了其余的頁(yè)面。這是一個(gè)漫長(zhǎng)而有趣的過(guò)程！

一旦我的頁(yè)面準(zhǔn)備就緒，我就在Adobe XD上制作了一個(gè)原型，并請(qǐng)幾個(gè)朋友進(jìn)行使用并給出反饋。

經(jīng)過(guò)最終的潤(rùn)色，下面是我確定的設(shè)計(jì)界面。

 

這就是最終的主界面！

所有的頁(yè)面完成后，我將它們導(dǎo)入到Xcode中并開(kāi)始編寫(xiě)應(yīng)用程序代碼。

這就是我今天要分享的內(nèi)容！我希望這篇文章能夠幫助你開(kāi)始在設(shè)計(jì)應(yīng)用程序時(shí)找到靈感，或者幫助你成為更好的設(shè)計(jì)師。

我將以我最喜歡的設(shè)計(jì)名言之一來(lái)結(jié)束這篇文章。

設(shè)計(jì)不在于它看上去如何摸起來(lái)如何，設(shè)計(jì)在于它是確定產(chǎn)品如何運(yùn)作的。
——史蒂夫?喬布斯

原文作者：Harshita Arora