如何從零開(kāi)始設計一款漂亮的移動(dòng)APP？
以下內容由Mockplus團隊翻譯整理，僅供學(xué)習交流，Mockplus是更快更簡(jiǎn)單的原型設計工具。
我13歲時(shí)開(kāi)始學(xué)習平面設計。我從網(wǎng)上課程學(xué)會(huì )了設計網(wǎng)站，并習慣于全天使用Photoshop和Affinity Designer進(jìn)行設計。那些經(jīng)歷教會(huì )了我如何像設計師那樣思考。
我設計和開(kāi)發(fā)應用程序將近有一年時(shí)間了。我參加了麻省理工學(xué)院的一個(gè)項目，與一個(gè)團隊合作開(kāi)發(fā)Universeaty。 兩個(gè)月前，我開(kāi)始研究一個(gè)新的應用程序-Crypto Price Tracker，這款APP我會(huì )在1月28日發(fā)布。
在這篇文章中，我將配合實(shí)例說(shuō)明我在從事應用程序設計時(shí)的一步一步的過(guò)程。這應該對任何想學(xué)習或改進(jìn)數字設計技能的人有所幫助。設計并不是全部了解如何使用設計軟件，這篇文章也不會(huì )教你如何使用軟件。網(wǎng)絡(luò )上有數以百計的優(yōu)質(zhì)教程資源可以教你學(xué)習如何使用設計軟件。想做好設計，你需要理解你的產(chǎn)品，熟知它的特點(diǎn)和功能，以及在設計時(shí)始終將終端用戶(hù)放在心里。這就是這篇文章的意義所在。
設計過(guò)程：
1.為每個(gè)頁(yè)面創(chuàng )建一個(gè)用戶(hù)流程圖。
2.創(chuàng )建/繪制線(xiàn)框圖。
3.選擇設計圖案和調色板。
4.創(chuàng )建模型。
5.創(chuàng )建一個(gè)動(dòng)畫(huà)應用程序原型，并要求人們對其進(jìn)行測試并提供反饋。
6.給出最后調整確定的模型，并交由開(kāi)發(fā)按原型編寫(xiě)代碼。
我們正式開(kāi)始吧！
用戶(hù)流程圖
第一步是想出在你的應用程序中想實(shí)現的功能。一旦你有了你的想法，設計一個(gè)用戶(hù)流程圖。用戶(hù)流程圖是用戶(hù)通過(guò)app/網(wǎng)站進(jìn)行訪(fǎng)問(wèn)的一個(gè)非常高級的表示。
通常，用戶(hù)流程圖由三種形狀組成。
矩形用于表示頁(yè)面。
方塊用于表示決策（例如，點(diǎn)擊登錄按鈕，向左滑動(dòng)，縮放）。
箭頭將頁(yè)面和決策連接在一起。
用戶(hù)流程圖是非常有用的，因為它們給出了應用程序如何運作的良好邏輯思路。
下面是我在開(kāi)始設計應用程序時(shí)繪制的用戶(hù)流程圖。
主界面的用戶(hù)流程圖。
線(xiàn)框圖
一旦你完成了每個(gè)頁(yè)面的用戶(hù)流程圖并設計了用戶(hù)路線(xiàn)，你就可以開(kāi)始為所有頁(yè)面做線(xiàn)框圖了。線(xiàn)框圖在本質(zhì)上是以低保真度形式表示你的應用程序外觀(guān)?；旧鲜菆D像，標簽，按鈕，和其它元素的一個(gè)草圖或一個(gè)輪廓，這些元素都會(huì )在頁(yè)面上做好布局和定位。你的應用程序的草圖會(huì )體現它是如何使用的。
我使用UI模板打印的模板來(lái)繪制線(xiàn)框圖。 它既可以節省時(shí)間，而且給為我提供了一個(gè)很好的畫(huà)布來(lái)繪圖和做筆記。
下面是我繪制的一個(gè)線(xiàn)框圖例子。
主界面的線(xiàn)框圖。
繪制好線(xiàn)框圖后，你可以使用一款名為Pop的應用程序，并使用該應用程序將草圖拍照存檔，再通過(guò)「連結」（link to）的功能，將一張張草圖串聯(lián)起來(lái)，就能直接在手機屏幕上展示原型實(shí)際運作的樣子。
設計圖案和顏色調色板
這是我最喜歡的部分。這就像逛街一樣。有大量的設計圖案和調色板可供選擇。我可以去選擇我喜歡的，并感受它們給我帶來(lái)的視覺(jué)效果。
尋找設計圖案的最佳平臺是Mobile Patterns和Pttrns。想要找到好的調色板，你可以去“ Color Hunt”平臺。
創(chuàng )建模型
這是當你最終使用設計軟件的時(shí)候了。設計意義上的模型是以高保真的形式來(lái)表示你的應用程序。這就像你將來(lái)實(shí)際使用時(shí)進(jìn)入這個(gè)應用程序，然后你從這里面做一些截圖。它看起來(lái)應該很現實(shí)，非常像真實(shí)的東西。
有一些用于創(chuàng )建模型的設計軟件和工具。我使用Affinity designer來(lái)創(chuàng )建模型。iOS設計中最常用的工具是Sketch。
下面是我早期設計APP中的一些實(shí)例。
我使用了各種各樣的調色板來(lái)進(jìn)行設計。
我給我的朋友分享了最初的模型，以獲得他們的反饋。很多人似乎更喜歡黃金漸變和黑色背景。
我愿意接受更多的反饋并嘗試新的建議！想獲得更好的用戶(hù)體驗的方法是多與終端用戶(hù)交流。當你與終端用戶(hù)交談時(shí)，你會(huì )發(fā)現用戶(hù)有很多奇妙的想法，而不是去瘋狂地翻閱Dribbble或Behance。
所以我重新設計了模型并刪除了背景圖，因為生成它們在技術(shù)上是一個(gè)耗時(shí)的過(guò)程，除此之外，它們還降低了可讀性。下面就是我重新設計模型后的樣子。
黃金漸變和黑色背景看起來(lái)非常不錯！
我對這套顏色方案、標簽欄上的圖標和整體布局都非常滿(mǎn)意。我繼續按照相同的設計指南設計了其余的頁(yè)面。這是一個(gè)漫長(cháng)而有趣的過(guò)程！
一旦我的頁(yè)面準備就緒，我就在A(yíng)dobe XD上制作了一個(gè)原型，并請幾個(gè)朋友進(jìn)行使用并給出反饋。
經(jīng)過(guò)最終的潤色，下面是我確定的設計界面。
這就是最終的主界面！
所有的頁(yè)面完成后，我將它們導入到Xcode中并開(kāi)始編寫(xiě)應用程序代碼。
這就是我今天要分享的內容！我希望這篇文章能夠幫助你開(kāi)始在設計應用程序時(shí)找到靈感，或者幫助你成為更好的設計師。
我將以我最喜歡的設計名言之一來(lái)結束這篇文章。
設計不在于它看上去如何摸起來(lái)如何，設計在于它是確定產(chǎn)品如何運作的。
——史蒂夫?喬布斯
原文作者：Harshita Arora
