如何從零開始設計一款漂亮的移動APP？

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

我13歲時開始學習平面設計。我從網上課程學會了設計網站，並習慣於全天使用Photoshop和Affinity Designer進行設計。那些經歷教會了我如何像設計師那樣思考。

我設計和開發應用程序將近有一年時間了。我參加了麻省理工學院的一個項目，與一個團隊合做開發Universeaty。 兩個月前，我開始研究一個新的應用程序-Crypto Price Tracker，這款APP我會在1月28日發佈。

在這篇文章中，我將配合實例說明我在從事應用程序設計時的一步一步的過程。這應該對任何想學習或改進數字設計技能的人有所幫助。設計並非所有了解如何使用設計軟件，這篇文章也不會教你如何使用軟件。網絡上有數以百計的優質教程資源能夠教你學習如何使用設計軟件。想作好設計，你須要理解你的產品，熟知它的特色和功能，以及在設計時始終將終端用戶放在內心。這就是這篇文章的意義所在。

設計過程：

1.爲每一個頁面建立一個用戶流程圖。

2.建立/繪製線框圖。

3.選擇設計圖案和調色板。

4.建立模型。

5.建立一個動畫應用程序原型，並要求人們對其進行測試並提供反饋。

6.給出最後調整肯定的模型，並交由開發按原型編寫代碼。

咱們正式開始吧！

用戶流程圖

第一步是想出在你的應用程序中想實現的功能。一旦你有了你的想法，設計一個用戶流程圖。用戶流程圖是用戶經過app/網站進行訪問的一個很是高級的表示。

一般，用戶流程圖由三種形狀組成。

矩形用於表示頁面。

方塊用於表示決策（例如，點擊登陸按鈕，向左滑動，縮放）。

箭頭將頁面和決策鏈接在一塊兒。

用戶流程圖是很是有用的，由於它們給出了應用程序如何運做的良好邏輯思路。

下面是我在開始設計應用程序時繪製的用戶流程圖。

主界面的用戶流程圖。

線框圖

一旦你完成了每一個頁面的用戶流程圖並設計了用戶路線，你就能夠開始爲全部頁面作線框圖了。線框圖在本質上是以低保真度形式表示你的應用程序外觀。基本上是圖像，標籤，按鈕，和其它元素的一個草圖或一個輪廓，這些元素都會在頁面上作好佈局和定位。你的應用程序的草圖會體現它是如何使用的。

我使用UI模板打印的模板來繪製線框圖。 它既能夠節省時間，並且給爲我提供了一個很好的畫布來繪圖和作筆記。

下面是我繪製的一個線框圖例子。

主界面的線框圖。

繪製好線框圖後，你可使用一款名爲Pop的應用程序，並使用該應用程序將草圖拍照存檔，再經過「連結」（link to）的功能，將一張張草圖串聯起來，就能直接在手機屏幕上展現原型實際運做的樣子。

設計圖案和顏色調色板

這是我最喜歡的部分。這就像逛街同樣。有大量的設計圖案和調色板可供選擇。我能夠去選擇我喜歡的，並感覺它們給我帶來的視覺效果。

尋找設計圖案的最佳平臺是Mobile Patterns和Pttrns。想要找到好的調色板，你能夠去「 Color Hunt」平臺。

建立模型

這是當你最終使用設計軟件的時候了。設計意義上的模型是以高保真的形式來表示你的應用程序。這就像你未來實際使用時進入這個應用程序，而後你從這裏面作一些截圖。它看起來應該很現實，很是像真實的東西。

有一些用於建立模型的設計軟件和工具。我使用Affinity designer來建立模型。iOS設計中最經常使用的工具是Sketch。

下面是我早期設計APP中的一些實例。

我使用了各類各樣的調色板來進行設計。

我給個人朋友分享了最初的模型，以得到他們的反饋。不少人彷佛更喜歡黃金漸變和黑色背景。

我願意接受更多的反饋並嘗試新的建議！想得到更好的用戶體驗的方法是多與終端用戶交流。當你與終端用戶交談時，你會發現用戶有不少奇妙的想法，而不是去瘋狂地翻閱Dribbble或Behance。

因此我從新設計了模型並刪除了背景圖，由於生成它們在技術上是一個耗時的過程，除此以外，它們還下降了可讀性。下面就是我從新設計模型後的樣子。

黃金漸變和黑色背景看起來很是不錯！

我對這套顏色方案、標籤欄上的圖標和總體佈局都很是滿意。我繼續按照相同的設計指南設計了其他的頁面。這是一個漫長而有趣的過程！

一旦個人頁面準備就緒，我就在Adobe XD上製做了一個原型，並請幾個朋友進行使用並給出反饋。

通過最終的潤色，下面是我肯定的設計界面。

這就是最終的主界面！

全部的頁面完成後，我將它們導入到Xcode中並開始編寫應用程序代碼。

這就是我今天要分享的內容！我但願這篇文章可以幫助你開始在設計應用程序時找到靈感，或者幫助你成爲更好的設計師。若是你喜歡個人應用程序，你能夠在這裏下載。

我將以我最喜歡的設計名言之一來結束這篇文章。

設計不在於它看上去如何摸起來如何，設計在於它是肯定產品如何運做的。
——史蒂夫•喬布斯

原文做者：Harshita Arora

原文地址：https://medium.freecodecamp.org/designing-beautiful-mobile-apps-from-scratch-1a3441ebd604

  Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。