一個(gè)多月前圆雁，我開(kāi)始幫 Johnny 為他的 Spreadeo 做 iOS app。我倆白天都在公司上班（他是某 labs 的后臺(tái)程序員帆谍，我是某 startup 的 iOS 程序員）伪朽，為了避免和公司有知識(shí)產(chǎn)權(quán)糾紛，我們都嚴(yán)格地只在下班時(shí)間和周末做這個(gè)項(xiàng)目：他負(fù)責(zé)搭建服務(wù)器和數(shù)據(jù)庫(kù)汛蝙、提供 API烈涮，我負(fù)責(zé)做 app。
我們的產(chǎn)品 Spreadeo
在此之前的一個(gè)多月里窖剑，我們已經(jīng)為了這個(gè) idea 做過(guò)簡(jiǎn)單的 mockup（好用的app mockup 工具）跃脊、和客戶(hù)約見(jiàn)過(guò)、并和一個(gè) mentor 保持著聯(lián)系苛吱，所以開(kāi)始做產(chǎn)品的時(shí)候，我們對(duì)功能器瘪、界面已經(jīng)有了一些把握翠储。
然而第3天，在按照 mockup 開(kāi)發(fā)了基本功能和2個(gè)界面后橡疼，作為「無(wú)設(shè)計(jì)不 app」的我深深覺(jué)得接下來(lái)寫(xiě)的每一行代碼都將會(huì)因?yàn)樵O(shè)計(jì)的不確定而浪費(fèi)掉至少50%的開(kāi)發(fā)時(shí)間（mockup 和做 app 時(shí)需要的設(shè)計(jì)是很不同的）援所。接下來(lái)的4天，我暫停了 app 開(kāi)發(fā)欣除，尋找設(shè)計(jì)師朋友幫忙住拭。雖然找的都是認(rèn)識(shí)的朋友，可是第一次為了這樣初期的項(xiàng)目尋找設(shè)計(jì)師历帚，加上時(shí)間的緊迫滔岳，最終沒(méi)有獲得一個(gè)合適的設(shè)計(jì)。
于是挽牢，在第7天晚上躺在床上輾轉(zhuǎn)難眠的3小時(shí)里谱煤，我在腦中勾畫(huà)出 app 的各個(gè)視覺(jué)細(xì)節(jié)、交互體驗(yàn)禽拔、界面轉(zhuǎn)換邏輯刘离，甚至是色彩基調(diào)、logo 設(shè)計(jì)理念睹栖，并決定自己嘗試做設(shè)計(jì)——如果一天做不出來(lái)硫惕，我就放棄改善設(shè)計(jì)的念頭，完全按照 mockup 去做野来，不再 bibi恼除。
Sketch
知道 Sketch 是幾個(gè)月前和公司的設(shè)計(jì)師進(jìn)行了為期一周的 hack week，小哥強(qiáng)力向我推薦了這個(gè)比 Photoshop 容易上手梁只、功能豐富缚柳、適合做產(chǎn)品設(shè)計(jì)的工具埃脏。當(dāng)時(shí)我就想找機(jī)會(huì)嘗試一下，只是當(dāng)時(shí) Sketch 的資源較少秋忙，我也沒(méi)有想要做的設(shè)計(jì)彩掐，「無(wú)想法無(wú)設(shè)計(jì)」，一直拖到了它出了第三個(gè)版本才下載（不幸的是售價(jià)從之前的$50漲到了$80）灰追。
關(guān)于 Sketch 和 Photoshop 的比較網(wǎng)上有很多堵幽，我就不贅述了。機(jī)緣巧合的是我正好那段時(shí)間在 Medium 上又看到了一篇夸贊 Sketch 的文章弹澎，并在簡(jiǎn)單搜索之后朴下，發(fā)現(xiàn)了不少非常棒的 Sketch 的免費(fèi)素材資源，于是選擇了它而不是 PS 來(lái)為 Spreadeo 做設(shè)計(jì)苦蒿。
事實(shí)證明殴胧，Sketch 真是太好用了。
從好的素材資源開(kāi)始
Sketch 的素材資源非常好找佩迟，官網(wǎng)上就有不少团滥，我個(gè)人非常喜歡 Sketch App Sources，資源豐富且有搜索功能报强。
雖然有那么多資源灸姊，但其實(shí)做 app 需要的素材很簡(jiǎn)單。如果你仔細(xì)想想你見(jiàn)過(guò)的大部分 app（除了游戲類(lèi)）秉溉，你會(huì)發(fā)現(xiàn)它們大都是由長(zhǎng)方形力惯、圓形等基本形狀組成的，而真正值得尋找的素材是圖標(biāo) icons召嘶。
我用的資源基本上都來(lái)自 SketchActive 和 teehanlax父晶。
其他素材可以到要用時(shí)慢慢找，切忌在開(kāi)始設(shè)計(jì)前花太多時(shí)間準(zhǔn)備素材弄跌，因?yàn)閷?duì)于像我這樣的 newbie 來(lái)說(shuō)只有在直觀地運(yùn)用單個(gè)的素材到設(shè)計(jì)中后才能判斷它的好壞诱建，純粹的素材搜集只會(huì)讓人迷失方向。
以 engineer 的思維來(lái) visualize 腦中的東西
以下就是我在2天內(nèi)完成的設(shè)計(jì)（不包括幾個(gè)后續(xù)添加的頁(yè)面和 others 里后來(lái)為網(wǎng)站做的素材）碟绑。
作為一個(gè)開(kāi)發(fā)者俺猿，我沒(méi)法給出專(zhuān)業(yè)的設(shè)計(jì)建議，只能告訴大家我用到的不錯(cuò)的功能和心得格仲，還望專(zhuān)業(yè)設(shè)計(jì)師包涵/指教押袍。
用 Artboard 分隔界面
編程的時(shí)候我們用 view controller 來(lái)分隔每個(gè)界面，在 Sketch 里凯肋，我們用 artboard谊惭。
把 artboard 設(shè)置成640 x 1136的大小，這就是一個(gè) iPhone 4 英寸屏幕等像素的長(zhǎng)方形（更多相關(guān)尺寸請(qǐng)見(jiàn) iOS 7 design cheat sheet）。在完成一個(gè)界面設(shè)計(jì)后圈盔，可以復(fù)制這個(gè) artboard 并重命名為下一個(gè)界面豹芯，也可以在界面旁邊新建一個(gè) artboard。
在每個(gè) artboard 里驱敲，所有的元素的位置都是以左上角為原點(diǎn)的铁蹈，就像使用 .xib 文件一樣，你可以精確地把一個(gè)元素放到想放的位置众眨。在你拖動(dòng)一個(gè)元素的時(shí)候握牧，Sketch 還提供了自動(dòng)對(duì)齊、居中等功能娩梨，幫助你更好地布局沿腰。
用 Mirror 在手機(jī)上實(shí)時(shí)查看
Mirror 顧名思義，就是把你在 Sketch 里的設(shè)計(jì)實(shí)時(shí)地映射到手機(jī)上的 app狈定。在手機(jī)上打開(kāi) Mirror 并和 Sketch 鏈接后颂龙，你可以看到每個(gè)單個(gè) artboard，感覺(jué)就像是在手機(jī)上看著一個(gè)真正的 app 一樣纽什，只不過(guò)沒(méi)有任何交互厘托。
Mirror 非常有用，因?yàn)樵陔娔X上看設(shè)計(jì)的感受和在手機(jī)上是完全不同的稿湿，而且即便沒(méi)有真正的交互，你也可以感受到哪些控件的位置對(duì)手勢(shì)不友好押赊，并作出修改饺藤。
拖拽出來(lái)的構(gòu)圖：巧用基本圖形
正如上文提到的，一個(gè)普通的 app 一般是由基本圖形組成的流礁，我們的Spreadeo 也不例外涕俗。
在下圖中，我用2個(gè)長(zhǎng)方形分隔出 navigation bar 和 tab bar神帅，用圓角方形做卡片再姑，用圓形和特殊字體做了卡片上的水印，又用圓形做了 tab bar 上被選中 tab 下面的高亮小點(diǎn)找御。
你還可以把幾個(gè)圖形進(jìn)行整合元镀，比如卡片水印就是兩個(gè)同心圓相減變成的一個(gè)環(huán)。你也可以用 mask 來(lái)保證某些元素保持你想要的形狀霎桅，比如上圖中卡片的背景圖和黑色漸變就是被圓角方形 mask 住栖疑，保持了卡片的圓角。
最后滔驶，你可以把幾個(gè)元素（包括圖形和文字）歸為一個(gè) group遇革，方便復(fù)制和移動(dòng)位置。
陰影、漸變萝快、毛玻璃背景锻霎、字體
圖形的新建和移動(dòng)不難，但要想添加一點(diǎn)設(shè)計(jì)感揪漩，就要嘗試用陰影旋恼、漸變等效果，而這些在 Sketch 里都非常容易設(shè)置氢拥，點(diǎn)幾下鼠標(biāo)再輸入幾個(gè)數(shù)字蚌铜，你就可以輕松獲得這些效果。
你也許想嫩海，這些功能 PS 里也有啊冬殃。但如果你和我一樣是設(shè)計(jì)新手，你就會(huì)感謝 Sketch：你不用像在 PS 里那樣叁怪，在某個(gè)圖層的眾多選項(xiàng)里尋找你需要的效果审葬，Sketch 已經(jīng)精簡(jiǎn)地把這些效果直接放在你面前供你勾選和設(shè)置，沒(méi)有額外的彈窗奕谭，一切改動(dòng)實(shí)時(shí)地顯示在 artboard 里涣觉，毫無(wú)新手障礙。
另外血柳，Sketch 提供非常豐富的字體庫(kù)官册，你可以選中所有想改的字，同時(shí)修改它們的字體并添加效果难捌。
巧用 Symbol
在制作了幾個(gè)界面后膝宁，也許你會(huì)碰到一個(gè)問(wèn)題：如果我想同時(shí)改變所有 artboard 里的 tab bar 的背景色，怎么辦根吁？
當(dāng)然员淫，你可以用 Command 同時(shí)選中這些長(zhǎng)方形并修改顏色。你也可以用一個(gè)更聰明的方式：把 tab bar 設(shè)置成一個(gè) symbol击敌。這樣介返，只要你在一個(gè) artboard 里修改這個(gè) symbol 里的任何一個(gè)元素的任何屬性（文字、字體沃斤、背景色圣蝎、陰影效果等），這個(gè)變化都會(huì)自動(dòng)傳遞到這個(gè)其他 artboard 上衡瓶。這在微調(diào)色調(diào)捅彻、位置時(shí)，大大提高了工作效率鞍陨。
借鑒步淹、學(xué)習(xí)从隆、迭代
不得不說(shuō)，做設(shè)計(jì)離不開(kāi)借鑒缭裆。
也許你和我一樣键闺，在腦袋里想得明明白白，“這是張卡片”澈驼、“這是個(gè)按鈕”辛燥，可是并不知道什么樣的效果能讓一個(gè)簡(jiǎn)單的圖形準(zhǔn)確地表現(xiàn)出它的 affordance。我就遇到了按鈕怎么都不像按鈕的尷尬情況缝其。這時(shí)候挎塌，下載幾個(gè)相關(guān)的或者備受好評(píng)的 app，研究研究他們?cè)谔幚砟硞€(gè)圖形的用的時(shí)什么方式内边，就會(huì)獲得不少幫助榴都。
當(dāng)然如果你有一個(gè)設(shè)計(jì)師朋友，那么拿你的設(shè)計(jì)去問(wèn)問(wèn) ta 吧漠其。我就在我的設(shè)計(jì)師朋友那獲得了不少超棒的建議嘴高，你可以看到我的 archive 里對(duì)兩個(gè)核心的界面都設(shè)計(jì)過(guò)幾個(gè)不同的版本。
快捷鍵
當(dāng)當(dāng)當(dāng)和屎，作為程序員的我當(dāng)然對(duì)快捷鍵情有獨(dú)鐘（其實(shí)設(shè)計(jì)師也一樣啦）拴驮，我就在此推薦我用到的快捷鍵。
- R：添加長(zhǎng)方形
- O：添加圓形
- T：添加文字
- Cmd (+) +：放大 canvas
- Cmd (+) -：縮小 canvas
- Cmd (+) 0：縮放 canvas 到實(shí)際大小
- Cmd (+) 1：居中 canvas
- Alt：顯示元素間距離
- Alt (+) Cmd：顯示 group 里元素間距離
- Shift (+) 上下左右箭頭：以10 pixels 為單位改變 Y 或 X 值
- Cmd (+) 上下左右箭頭：以1 pixel 為單位改變高或?qū)?/li>
更多好用的快捷鍵柴信，請(qǐng)戳這里套啤，
設(shè)計(jì)與開(kāi)發(fā)
在 Sketch 上折騰了共計(jì)5個(gè)小時(shí)后，我重回到 app 開(kāi)發(fā)的職位随常。這時(shí)潜沦，我有了“不會(huì)再有大改動(dòng)”的設(shè)計(jì)圖，就開(kāi)始放心地繼續(xù)開(kāi)發(fā)了线罕。
自己做設(shè)計(jì)的一大好處是，任何時(shí)候我都可以回過(guò)頭來(lái)對(duì)設(shè)計(jì)做微調(diào)窃判，然后導(dǎo)出需要的 asset（Sketch 都是矢量編輯钞楼，所以你可以輕松導(dǎo)出任意像素值的 asset），或者直接獲得位置袄琳、色值询件、字體等信息，大大減少了以往和設(shè)計(jì)師之間的溝通成本唆樊，提高了開(kāi)發(fā)效率宛琅。
終于，在第16天逗旁，我們兼職完成了 Spreadeo 的首個(gè)版本嘿辟，基本達(dá)到了我們2周完成產(chǎn)品的計(jì)劃舆瘪。
設(shè)計(jì)與思考
做了兩年的 iOS 開(kāi)發(fā)，不論是工作內(nèi)還是自己的小項(xiàng)目红伦，以前都是依賴(lài)著設(shè)計(jì)師給設(shè)計(jì)英古，我漸漸意識(shí)到當(dāng)我沒(méi)有設(shè)計(jì)在手的時(shí)候，開(kāi)發(fā)速度會(huì)大大地降低昙读，尤其是搭建完基本的功能之后召调，大部分精力著重在界面和體驗(yàn)時(shí)。
我現(xiàn)在才知道蛮浑，其實(shí)這種感受的“罪魁禍?zhǔn)住辈⒉皇菦](méi)有設(shè)計(jì)唠叛，而是我自己對(duì)產(chǎn)品沒(méi)有把握。無(wú)論是工作內(nèi)“不允許”有個(gè)人的把握沮稚，還是自己項(xiàng)目上我思緒萬(wàn)千理不出頭緒的沒(méi)有把握艺沼，歸根結(jié)底是產(chǎn)品的“魂”不在我心里。
而設(shè)計(jì)壮虫，并不只是視覺(jué)和交互設(shè)計(jì)澳厢，它包含了對(duì)產(chǎn)品目的、功能囚似、效果的探索和定義剩拢，它是一個(gè)定義問(wèn)題、解決問(wèn)題的無(wú)限改進(jìn)過(guò)程饶唤。當(dāng)這樣對(duì)設(shè)計(jì)有了把握后徐伐，開(kāi)發(fā)也能自然提速。
不停地思考與學(xué)習(xí) ing募狂。
謝謝閱讀此文办素，希望它能對(duì)你多少有些幫助。
你可能會(huì)對(duì)我（一個(gè)不想只寫(xiě)代碼的小碼農(nóng)）的其他文章也感興趣：
- 我用什么來(lái)做 iOS app mockup：不會(huì)做設(shè)計(jì)的移動(dòng)開(kāi)發(fā)者不是好產(chǎn)品經(jīng)理
- 反正我跳了 ：和我一起折騰人生
