如何開始設計一個 App ？

我不是專業的設計師，由於興趣愛好，我找到了現在的工作，並做了不少網站和 app 的項目。我們有專業的設計師團隊，但是漸漸地我也會親自動手進行一些設計。我的角色更多是「創意」或者「產品」，但是很多時候我發現要完全表達自己的想法是無法繞開設計的。「設計」對於我來說不是界面漂不漂亮，而是能不能很好地解決某個問題。因此從這個「實用主義」角度出來，我來談談一些我的設計方法。

You dont need to reinvent the wheel.

對於非專業人員，怎麼樣開始設計好呢？英文里有一句話說得好：「 You dont need to reinvent the wheel.」 字面的意思就是你不需要重新發明車輪子。App 的設計里，有很多大家熟悉的 Pattern （樣式）例如登錄、購物車等等，或者一些經過無數次使用證明是很好用的 UI 結構，例如上下滑動的 List View 等，我們不需要重新去設計這些東西了，因此在設計我們的 app 之前，最好去了解一下一些常用的 pattern。

Design Pttrns 是一個收集很多 app UI pattern 的網站

Good artists borrow, great artists steal.

畢加索說的「 Good artists borrow, great artists steal" 貌似更適用於我們這些非專業的「設計人員」。找到跟自己想法相近的 app 界面來「臨摹」，具體做法就是，拿某個界面相近的 app 截圖放到 Sketch 後者 Photoshop 里，把截圖 UI 上的每一個元素都「克隆」一遍。

在我看來如果基礎的東西沒有做好，再好看的設計或者再酷炫的動態效果也沒有用。 這裡說的「基礎的東西」就是排版、間距、元素的比例、顏色等等，變成問題的形式就是「排版是否整齊劃一？」 「間距是否合理，不太寬也不太窄？」 「按鈕看起來像不像可以讓人點擊？」 「文字大小適合閱讀嗎？」 「顏色對比足夠嗎？」 ......

這些問題對於有經驗的設計師是很基礎的東西，但是對於非專業人員就不太能拿捏得好了，於是「臨摹」好的設計、用戶好評的 app 就比較穩當。他們的排版、結構、間距、大小等等都經過考驗的。

下面的截圖就是我設計 Quopi （我設計的一個給圖片加字的 app，在蘋果 App Store 搜索 「Quopi」 就可以下載到哦）「精選圖片」 View 時候參照著 iOS 的照片 App 的排版來做的。

Quopi 的圖片排版就是按照 iOS 照片 app 的相冊大小和間距去排版的

除了「臨摹」別的 UI 排版和結構以外，也可以使用 UI Kit。UI Kit 就是一些專業的設計師做好的某些 UI 界面或者模擬的 app，你可以免費或者購買這些 UI Kit 用在自己的項目當中，快速地設計出產品，節省成本和加快產品發布的效率。很多創業團隊苦於很難找到專業設計師的時候，其實使用 UI Kit 是個不錯的選擇。

http://www.sketchappsources.com/ 是一個有很多免費的 Sketch 素材的網站，特別是很對 UI Kit 和 icon 組合，讓你快速設計自己的 app

The marketplace for design resources 是一個專業的 UI Kit 的資源網站，這裡的 UI Kit 都是收費的

使用UI Kit 也不等於完全不用設計直接用，UI Kit 可以作為一個優質的起點，就像模板一樣幫助你進行設計，根據需要改變一下顏色，只使用部分 UI 模塊，改變一下大小比例等等，你可以做任何的改變。

很多 UI Kit 設計得特別全面，基本山更可以覆蓋目前各種類別的 app，購物、照片、社交等等

或者大家會擔心不管是「臨摹」還是使用 UI Kit，會不會讓自己的設計和別人的一樣了？被人認為「抄襲」呢？我覺得完全不需要擔心，因為這兩個方法目的在於快速地設計出結構嚴謹、間距、大小等合適的 UI 界面，在這個基礎上我們需要不斷地去完善和優化，最後按照自己的想法和設定功能做出自己的 app。有一個最初的設計之後，我們還需要做以下三個工作：

• 收集你認為想要追求的風格的設計，然後找到適合產品的配色。

• 不斷問自己，這個設計能再好一些嗎？不斷修改，但注意給自己一個期限。

• 有條件的話，找專業的設計師參與進來一起設計、提高。

我在幫助客戶設計一個 Web App 的時候就是從一個 UI Kit 開始的，我很快就出來一個設計版本和大家討論功能和布局了，大大節省了時間。我在第一個版本的設計中直接使用了 UI Kit 提供的 icon、按鈕樣式、字體大小等等。

使用 UI Kit 設計的第一個版本

我購買的 Module UI Kit

接下來的版本我們在排版和功能上都有所改變，這時我開始讓這個設計更符合客戶的品牌調性，於是我參考了客戶的一些品牌插畫，從中選擇了一個紫色和黑色為主調色的搭配，icon 也重新換了一套，這樣最終出來的產品已經和 UI Kit 非常不一樣了。

最終開發出來的 web app

以上的方法可以讓你快速地設計出能用、好用的 app，但是如果這些需求滿足以後，需要讓設計更上一個層次，變得更有「性格」，更有自己的「品牌」 ，甚至更有「趣味性」等等，就需要有更專業的設計手段和想法了，比如更有創意的排版或者配色，也可以考慮找厲害的插畫師給自己的 app 配上一些酷酷的配圖，又或者購買一套你喜歡的 icon 放到界面里。不過在整個過程中都要反覆問自己，這個設計的目的是什麼？就像文章一開始所說的，設計一定是帶有目的性的，搞清楚了，相信就會出來不錯的產品。