|
一個(gè)多月前，我開始幫 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ù)庫、提供 API，我負(fù)責(zé)做 app。 我們的產(chǎn)品 Spreadeo在此之前的一個(gè)多月里，我們已經(jīng)為了這個(gè) idea 做過簡(jiǎn)單的 mockup、和客戶約見過、并和一個(gè) mentor 保持著聯(lián)系，所以開始做產(chǎn)品的時(shí)候，我們對(duì)功能、界面已經(jīng)有了一些把握。 然而第3天，在按照 mockup 開發(fā)了基本功能和2個(gè)界面后，作為「無設(shè)計(jì)不 app」的我深深覺得接下來寫的每一行代碼都將會(huì)因?yàn)樵O(shè)計(jì)的不確定而浪費(fèi)掉至少50%的開發(fā)時(shí)間（mockup 和做 app 時(shí)需要的設(shè)計(jì)是很不同的）。接下來的4天，我暫停了 app 開發(fā)，尋找設(shè)計(jì)師朋友幫忙。雖然找的都是認(rèn)識(shí)的朋友，可是第一次為了這樣初期的項(xiàng)目尋找設(shè)計(jì)師，加上時(shí)間的緊迫，最終沒有獲得一個(gè)合適的設(shè)計(jì)。 于是，在第7天晚上躺在床上輾轉(zhuǎn)難眠的3小時(shí)里，我在腦中勾畫出 app 的各個(gè)視覺細(xì)節(jié)、交互體驗(yàn)、界面轉(zhuǎn)換邏輯，甚至是色彩基調(diào)、logo 設(shè)計(jì)理念，并決定自己嘗試做設(shè)計(jì)——如果一天做不出來，我就放棄改善設(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 的資源較少，我也沒有想要做的設(shè)計(jì)，「無想法無設(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 來為 Spreadeo 做設(shè)計(jì)。 事實(shí)證明，Sketch 真是太好用了。 從好的素材資源開始Sketch 的素材資源非常好找，官網(wǎng)上就有不少，我個(gè)人非常喜歡 Sketch App Sources，資源豐富且有搜索功能。 雖然有那么多資源，但其實(shí)做 app 需要的素材很簡(jiǎn)單。如果你仔細(xì)想想你見過的大部分 app（除了游戲類），你會(huì)發(fā)現(xiàn)它們大都是由長(zhǎng)方形、圓形等基本形狀組成的，而真正值得尋找的素材是圖標(biāo) icons。 我用的資源基本上都來自 SketchActive 和 teehanlax。 其他素材可以到要用時(shí)慢慢找，切忌在開始設(shè)計(jì)前花太多時(shí)間準(zhǔn)備素材，因?yàn)閷?duì)于像我這樣的 newbie 來說只有在直觀地運(yùn)用單個(gè)的素材到設(shè)計(jì)中后才能判斷它的好壞，純粹的素材搜集只會(huì)讓人迷失方向。 以 engineer 的思維來 visualize 腦中的東西以下就是我在2天內(nèi)完成的設(shè)計(jì)（不包括幾個(gè)后續(xù)添加的頁面和 others 里后來為網(wǎng)站做的素材）。 作為一個(gè)開發(fā)者，我沒法給出專業(yè)的設(shè)計(jì)建議，只能告訴大家我用到的不錯(cuò)的功能和心得，還望專業(yè)設(shè)計(jì)師包涵/指教。 用 Artboard 分隔界面 編程的時(shí)候我們用 view controller 來分隔每個(gè)界面，在 Sketch 里，我們用 artboard。 把 artboard 設(shè)置成640 x 1136的大小，這就是一個(gè) iPhone 4 英寸屏幕等像素的長(zhǎng)方形（更多相關(guān)尺寸請(qǐng)見 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ī)上打開 Mirror 并和 Sketch 鏈接后，你可以看到每個(gè)單個(gè) artboard，感覺就像是在手機(jī)上看著一個(gè)真正的 app 一樣，只不過沒有任何交互。 Mirror 非常有用，因?yàn)樵陔娔X上看設(shè)計(jì)的感受和在手機(jī)上是完全不同的，而且即便沒有真正的交互，你也可以感受到哪些控件的位置對(duì)手勢(shì)不友好，并作出修改。 拖拽出來的構(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 來保證某些元素保持你想要的形狀，比如上圖中卡片的背景圖和黑色漸變就是被圓角方形 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è)置，沒有額外的彈窗，一切改動(dòng)實(shí)時(shí)地顯示在 artboard 里，毫無新手障礙。 另外，Sketch 提供非常豐富的字體庫，你可以選中所有想改的字，同時(shí)修改它們的字體并添加效果。 巧用 Symbol 在制作了幾個(gè)界面后，也許你會(huì)碰到一個(gè)問題：如果我想同時(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í)、迭代 不得不說，做設(shè)計(jì)離不開借鑒。 也許你和我一樣，在腦袋里想得明明白白，“這是張卡片”、“這是個(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ì)去問問 ta 吧。我就在我的設(shè)計(jì)師朋友那獲得了不少超棒的建議，你可以看到我的 archive 里對(duì)兩個(gè)核心的界面都設(shè)計(jì)過幾個(gè)不同的版本。 快捷鍵 當(dāng)當(dāng)當(dāng)，作為程序員的我當(dāng)然對(duì)快捷鍵情有獨(dú)鐘（其實(shí)設(shè)計(jì)師也一樣啦），我就在此推薦我用到的快捷鍵。
更多好用的快捷鍵，請(qǐng)戳這里， 設(shè)計(jì)與開發(fā)在 Sketch 上折騰了共計(jì)5個(gè)小時(shí)后，我重回到 app 開發(fā)的職位。這時(shí)，我有了“不會(huì)再有大改動(dòng)”的設(shè)計(jì)圖，就開始放心地繼續(xù)開發(fā)了。 自己做設(shè)計(jì)的一大好處是，任何時(shí)候我都可以回過頭來對(duì)設(shè)計(jì)做微調(diào)，然后導(dǎo)出需要的 asset（Sketch 都是矢量編輯，所以你可以輕松導(dǎo)出任意像素值的 asset），或者直接獲得位置、色值、字體等信息，大大減少了以往和設(shè)計(jì)師之間的溝通成本，提高了開發(fā)效率。 終于，在第16天，我們兼職完成了 Spreadeo 的首個(gè)版本，基本達(dá)到了我們2周完成產(chǎn)品的計(jì)劃。 設(shè)計(jì)與思考做了兩年的 iOS 開發(fā)，不論是工作內(nèi)還是自己的小項(xiàng)目，以前都是依賴著設(shè)計(jì)師給設(shè)計(jì)，我漸漸意識(shí)到當(dāng)我沒有設(shè)計(jì)在手的時(shí)候，開發(fā)速度會(huì)大大地降低，尤其是搭建完基本的功能之后，大部分精力著重在界面和體驗(yàn)時(shí)。 我現(xiàn)在才知道，其實(shí)這種感受的“罪魁禍?zhǔn)住辈⒉皇菦]有設(shè)計(jì)，而是我自己對(duì)產(chǎn)品沒有把握。無論是工作內(nèi)“不允許”有個(gè)人的把握，還是自己項(xiàng)目上我思緒萬千理不出頭緒的沒有把握，歸根結(jié)底是產(chǎn)品的“魂”不在我心里。 而設(shè)計(jì)，并不只是視覺和交互設(shè)計(jì)，它包含了對(duì)產(chǎn)品目的、功能、效果的探索和定義，它是一個(gè)定義問題、解決問題的無限改進(jìn)過程。當(dāng)這樣對(duì)設(shè)計(jì)有了把握后，開發(fā)也能自然提速。 不停地思考與學(xué)習(xí) ing。 |
|
|
