一個多月前，我開始幫 Johnny 為他的 Spreadeo 做 iOS app。我倆白天都在公司上班（他是某 labs 的后臺程序員，我是某 startup 的 iOS 程序員），為了避免和公司有知識產權糾紛，我們都嚴格地只在下班時間和周末做這個項目：他負責搭建服務器和數據庫、提供 API，我負責做 app。
我們的產品 Spreadeo
在此之前的一個多月里，我們已經為了這個 idea 做過簡單的 mockup（好用的app mockup 工具）、和客戶約見過、并和一個 mentor 保持著聯系，所以開始做產品的時候，我們對功能、界面已經有了一些把握。
然而第3天，在按照 mockup 開發了基本功能和2個界面后，作為「無設計不 app」的我深深覺得接下來寫的每一行代碼都將會因為設計的不確定而浪費掉至少50%的開發時間（mockup 和做 app 時需要的設計是很不同的）。接下來的4天，我暫停了 app 開發，尋找設計師朋友幫忙。雖然找的都是認識的朋友，可是第一次為了這樣初期的項目尋找設計師，加上時間的緊迫，最終沒有獲得一個合適的設計。
于是，在第7天晚上躺在床上輾轉難眠的3小時里，我在腦中勾畫出 app 的各個視覺細節、交互體驗、界面轉換邏輯，甚至是色彩基調、logo 設計理念，并決定自己嘗試做設計——如果一天做不出來，我就放棄改善設計的念頭，完全按照 mockup 去做，不再 bibi。
Sketch
知道 Sketch 是幾個月前和公司的設計師進行了為期一周的 hack week，小哥強力向我推薦了這個比 Photoshop 容易上手、功能豐富、適合做產品設計的工具。當時我就想找機會嘗試一下，只是當時 Sketch 的資源較少，我也沒有想要做的設計，「無想法無設計」，一直拖到了它出了第三個版本才下載（不幸的是售價從之前的$50漲到了$80）。
關于 Sketch 和 Photoshop 的比較網上有很多，我就不贅述了。機緣巧合的是我正好那段時間在 Medium 上又看到了一篇夸贊 Sketch 的文章，并在簡單搜索之后，發現了不少非常棒的 Sketch 的免費素材資源，于是選擇了它而不是 PS 來為 Spreadeo 做設計。
事實證明，Sketch 真是太好用了。
從好的素材資源開始
Sketch 的素材資源非常好找，官網上就有不少，我個人非常喜歡 Sketch App Sources，資源豐富且有搜索功能。
雖然有那么多資源，但其實做 app 需要的素材很簡單。如果你仔細想想你見過的大部分 app（除了游戲類），你會發現它們大都是由長方形、圓形等基本形狀組成的，而真正值得尋找的素材是圖標 icons。
我用的資源基本上都來自 SketchActive 和 teehanlax。
其他素材可以到要用時慢慢找，切忌在開始設計前花太多時間準備素材，因為對于像我這樣的 newbie 來說只有在直觀地運用單個的素材到設計中后才能判斷它的好壞，純粹的素材搜集只會讓人迷失方向。
以 engineer 的思維來 visualize 腦中的東西
以下就是我在2天內完成的設計（不包括幾個后續添加的頁面和 others 里后來為網站做的素材）。
作為一個開發者，我沒法給出專業的設計建議，只能告訴大家我用到的不錯的功能和心得，還望專業設計師包涵/指教。
用 Artboard 分隔界面
編程的時候我們用 view controller 來分隔每個界面，在 Sketch 里，我們用 artboard。
把 artboard 設置成640 x 1136的大小，這就是一個 iPhone 4 英寸屏幕等像素的長方形（更多相關尺寸請見 iOS 7 design cheat sheet）。在完成一個界面設計后，可以復制這個 artboard 并重命名為下一個界面，也可以在界面旁邊新建一個 artboard。
在每個 artboard 里，所有的元素的位置都是以左上角為原點的，就像使用 .xib 文件一樣，你可以精確地把一個元素放到想放的位置。在你拖動一個元素的時候，Sketch 還提供了自動對齊、居中等功能，幫助你更好地布局。
用 Mirror 在手機上實時查看
Mirror 顧名思義，就是把你在 Sketch 里的設計實時地映射到手機上的 app。在手機上打開 Mirror 并和 Sketch 鏈接后，你可以看到每個單個 artboard，感覺就像是在手機上看著一個真正的 app 一樣，只不過沒有任何交互。
Mirror 非常有用，因為在電腦上看設計的感受和在手機上是完全不同的，而且即便沒有真正的交互，你也可以感受到哪些控件的位置對手勢不友好，并作出修改。
拖拽出來的構圖：巧用基本圖形
正如上文提到的，一個普通的 app 一般是由基本圖形組成的，我們的Spreadeo 也不例外。
在下圖中，我用2個長方形分隔出 navigation bar 和 tab bar，用圓角方形做卡片，用圓形和特殊字體做了卡片上的水印，又用圓形做了 tab bar 上被選中 tab 下面的高亮小點。
你還可以把幾個圖形進行整合，比如卡片水印就是兩個同心圓相減變成的一個環。你也可以用 mask 來保證某些元素保持你想要的形狀，比如上圖中卡片的背景圖和黑色漸變就是被圓角方形 mask 住，保持了卡片的圓角。
最后，你可以把幾個元素（包括圖形和文字）歸為一個 group，方便復制和移動位置。
陰影、漸變、毛玻璃背景、字體
圖形的新建和移動不難，但要想添加一點設計感，就要嘗試用陰影、漸變等效果，而這些在 Sketch 里都非常容易設置，點幾下鼠標再輸入幾個數字，你就可以輕松獲得這些效果。
你也許想，這些功能 PS 里也有啊。但如果你和我一樣是設計新手，你就會感謝 Sketch：你不用像在 PS 里那樣，在某個圖層的眾多選項里尋找你需要的效果，Sketch 已經精簡地把這些效果直接放在你面前供你勾選和設置，沒有額外的彈窗，一切改動實時地顯示在 artboard 里，毫無新手障礙。
另外，Sketch 提供非常豐富的字體庫，你可以選中所有想改的字，同時修改它們的字體并添加效果。
巧用 Symbol
在制作了幾個界面后，也許你會碰到一個問題：如果我想同時改變所有 artboard 里的 tab bar 的背景色，怎么辦？
當然，你可以用 Command 同時選中這些長方形并修改顏色。你也可以用一個更聰明的方式：把 tab bar 設置成一個 symbol。這樣，只要你在一個 artboard 里修改這個 symbol 里的任何一個元素的任何屬性（文字、字體、背景色、陰影效果等），這個變化都會自動傳遞到這個其他 artboard 上。這在微調色調、位置時，大大提高了工作效率。
借鑒、學習、迭代
不得不說，做設計離不開借鑒。
也許你和我一樣，在腦袋里想得明明白白，“這是張卡片”、“這是個按鈕”，可是并不知道什么樣的效果能讓一個簡單的圖形準確地表現出它的 affordance。我就遇到了按鈕怎么都不像按鈕的尷尬情況。這時候，下載幾個相關的或者備受好評的 app，研究研究他們在處理某個圖形的用的時什么方式，就會獲得不少幫助。
當然如果你有一個設計師朋友，那么拿你的設計去問問 ta 吧。我就在我的設計師朋友那獲得了不少超棒的建議，你可以看到我的 archive 里對兩個核心的界面都設計過幾個不同的版本。
快捷鍵
當當當，作為程序員的我當然對快捷鍵情有獨鐘（其實設計師也一樣啦），我就在此推薦我用到的快捷鍵。
- R：添加長方形
- O：添加圓形
- T：添加文字
- Cmd (+) +：放大 canvas
- Cmd (+) -：縮小 canvas
- Cmd (+) 0：縮放 canvas 到實際大小
- Cmd (+) 1：居中 canvas
- Alt：顯示元素間距離
- Alt (+) Cmd：顯示 group 里元素間距離
- Shift (+) 上下左右箭頭：以10 pixels 為單位改變 Y 或 X 值
- Cmd (+) 上下左右箭頭：以1 pixel 為單位改變高或寬
更多好用的快捷鍵，請戳這里，
設計與開發
在 Sketch 上折騰了共計5個小時后，我重回到 app 開發的職位。這時，我有了“不會再有大改動”的設計圖，就開始放心地繼續開發了。
自己做設計的一大好處是，任何時候我都可以回過頭來對設計做微調，然后導出需要的 asset（Sketch 都是矢量編輯，所以你可以輕松導出任意像素值的 asset），或者直接獲得位置、色值、字體等信息，大大減少了以往和設計師之間的溝通成本，提高了開發效率。
終于，在第16天，我們兼職完成了 Spreadeo 的首個版本，基本達到了我們2周完成產品的計劃。
設計與思考
做了兩年的 iOS 開發，不論是工作內還是自己的小項目，以前都是依賴著設計師給設計，我漸漸意識到當我沒有設計在手的時候，開發速度會大大地降低，尤其是搭建完基本的功能之后，大部分精力著重在界面和體驗時。
我現在才知道，其實這種感受的“罪魁禍首”并不是沒有設計，而是我自己對產品沒有把握。無論是工作內“不允許”有個人的把握，還是自己項目上我思緒萬千理不出頭緒的沒有把握，歸根結底是產品的“魂”不在我心里。
而設計，并不只是視覺和交互設計，它包含了對產品目的、功能、效果的探索和定義，它是一個定義問題、解決問題的無限改進過程。當這樣對設計有了把握后，開發也能自然提速。
不停地思考與學習 ing。
謝謝閱讀此文，希望它能對你多少有些幫助。
你可能會對我（一個不想只寫代碼的小碼農）的其他文章也感興趣：
- 我用什么來做 iOS app mockup：不會做設計的移動開發者不是好產品經理
- 反正我跳了 ：和我一起折騰人生
