原創文章，轉載請註明：轉載自Keegan小鋼
並標明原文連結：http://keeganlee.me/post/practice/20160903
微信訂閱號：keeganlee_me
寫於2016-09-03
成果
上一篇文章[原型篇]釋出之後，就開始設計UI了，包括Icon和介面UI，週一到週五晚上一般花兩到三到小時，週六日的時候則有五六個小時，最終用了一個星期多才設計完成。先直接展示下成果吧。
這是Android的Icon：
這是iOS的Icon：
這是介面UI：
Sketch
設計工具自然是用強大的Sketch，有多強大我就不多說了，網上的介紹文章已經很多。不過，我再講個故事。我在上一篇文章[原型篇]介紹了幾款我認為比較不錯的原型設計工具之後，提到了Sketch更適合做UI設計，而不是原型設計。然後，有一哥們就不服了，回覆說那些都是垃圾軟體，用Sketch + Flinto/Principle熟練的話做原型比磨刀還快，關鍵還能出效果圖。他們專案，用Sketch四天出110個頁面，再用Principle三天做完互動。且不說他的觀點對不對，但Sketch做介面設計效率可以很高則是真的。當然，因為我還只是個Sketch新手，所以，效率還達不到那麼高。
那麼，接下來，我講講我自己在使用Sketch設計這些UI的過程中遇到的一些坑，以及填坑的過程。也可以算是一份新手教程吧，不過，是從設計整個App的角度來講的。
首先，先從Sketch的下載安裝開始吧。正式版的Sketch需要99刀，我本著黑客精神，堅決用破解版(哎，還不是因為窮)。對了，Sketch只支援Mac，用Windows的小夥伴們還是乖乖用PS或AI吧，或者狠狠心買個Mac吧。Sketch的破解版我是在下面這個網站下載的，我每次需要找破解軟體時，基本都是在這個網站找的：
剛安裝完我就懵了，不知道該怎麼建立頁面啊？不像Photoshop，可以New一件指定大小的文件；Sketch New出來的就是另一個無限大小的畫布，讓我無從下手啊。無奈，只好乖乖先去看看使用者手冊，瞭解下Sketch的基本用法。不過，中文使用者手冊沒有官方手冊那麼詳細，另外，中文手冊還缺少了官方的那些示例動畫。但是，使用者手冊也只是介紹了一些基本的操作而已。
- 官方使用者手冊：www.sketchapp.com/learn/docum…
- 中文使用者手冊：www.sketchcn.com/sketch-chin…
首先，Sketch的工作介面分為四部分。頂部的是Toolbar，包含了所有重要的工具和操作。右邊的稱為Inspector，可以用來調整被選中的圖層的屬性。左邊是Layer List，列出了所有Page、Artboard和圖層。中間就是Canvas畫布了，所有設計就在這裡了。
其次，使用File -> New出來的是一個sketch檔案。一個sketch檔案中可以新建多個Page，每個Page對應一個無限的畫布，可以直接在畫布裡繪畫，但一般都會在畫布裡插入多個固定尺寸的Artboard，然後在Artboard裡繪畫。如下圖的例子，共有4個Page，名為UI的Page下為每個頁面分別建立了Artboard，每個Artboard排列開來的結果就是上圖的介面UI了。
插入一個Artboard可以通過Toolbar最左邊的Insert->Artboard選中，也可以通過快捷鍵A選中。選中之後，在介面右邊Inspector皮膚會列舉出很多可供選擇的尺寸，你可根據需要選定你想設計的尺寸，如下圖所示。我的介面Artboard就是選了iPhone 6那個尺寸。另外，也可以自己在畫布中拖動出喜歡的大小。
知道頁面怎麼新增之後，又發現，狀態列去哪找？經人提醒，才知道原來有模板這東西。Sketch原生就提供了一些很方便的模板，目前版本預設有6個模板，如下圖所示：
我的Android和iOS的Icon就是從上面的Android Icon Design和iOS App Icon兩個模板中複製過來的，另外，介面中的狀態列、標題欄、標籤欄、輸入框、按鈕等一些UI元件也是從iOS UI Design和Material Design模板中提供的元件複製過來的，然後再進行修改。另外，網上還有很多其他模板可供下載，也有圖示庫。我一般會從以下兩個網站尋找資源：
- Sketch App Sources：www.sketchappsources.com
- Sketch中國：www.sketchs.cn
其中，Sketch App Sources貌似不翻牆上不去。不過，它的資源很豐富，連iOS 10和Android N的UI資源都有，但Sketch中國是還沒有的。
我設計的介面元素大部分都是從模板或下載的資源中複製過來然後修改的。有幾個圖示因為沒找到滿意的資源才自己畫。
當我從模板中複製元件時，發現有些元件屬於Symbol型別。一開始不太明白Symbol與其他元件有何不同，後來搞清楚了才知道，這真是個好東西啊。舉個例子，App很多頁面的標題欄基本都一樣的，標題欄的寬高、背景、控制元件等都一樣，不同的可能就是需要更改標題。這種情況下，用Symbol就很合適了。使用Symbol定義標題欄，然後所有相關頁面統一使用該Symbol。那麼，如果需要做修改，比如更改背景顏色，那隻要修改了該Symbol，所有使用了該Symbol的頁面的標題欄也全部會更新。因為Symbol的這種特性，它就很適合用來定義如狀態列、標題欄、標籤欄、按鈕、頭像等多處使用的通用元件。
在製作過程中，發現有幾個快捷鍵很方便。對於選擇繪圖工具的A(Artboard)、R(Rectangle)、O(Oval)、U(Rounded)、T(Text)等就不說了，另外要說一個Option鍵。選中某個Artboard裡的某個圖層，按住Option鍵，會顯示出該圖層到所在Artboard各邊的距離。繼續按住Option鍵，然後移動你的滑鼠，就會發現，顯示的變成了所選中的圖層與滑鼠所在的圖層之間的相互距離。接著，繼續按住Option鍵，然後拖動該圖層，會看到有一個該圖層的副本，如果一直按著Option鍵不放，拖動結束後鬆開手指將會複製出一個新的圖層。如果鬆開手指前先放開了Option，則只是將原來的圖層移動了位置。複製完圖層之後，如果此時再按快捷鍵Command+D，就會重複之前的動作，即複製圖層。不斷按快捷鍵Command+D，就會不斷複製圖層了。我做了一個示例動畫如下圖：
Sketch還有個Mirror的功能，可以連上iOS裝置預覽效果圖，只要在App Store下載Sketch Mirror，然後用USB連上你的Mac即可在iPhone或iPad看到預覽圖。
最後再講下切圖。切圖非常簡單，選中你想匯出的圖層，然後在Inspector皮膚最底部點選加號新增你想匯出的倍數，繼續點加號可以增加多個不同倍數的匯出項，最後點選下面的[Export+圖層名]的按鈕，再給檔案改名和修改檔案存放位置即可。另外，選中整個Artboard還可以匯出整個介面的效果圖。
切圖時，主要是圖示，需要匯出1x、1.5x、2x、3x、4x五個尺寸的圖片，五個尺寸主要是為了更好地適配Android，而適配iOS只用2x和3x兩個尺寸即可。至於為什麼需要適配這麼多尺寸，就需要了解Android和iOS的一些UI尺寸的基礎知識了，關於這個，下面這篇文章已經講得很清楚了：
Material Design
我一直很喜歡MD(Material Design)，以前接手過的專案中，就一直很想嘗試MD。可是，那時候，公司的設計獅們並不懂MD，而且MD的設計規範內容也不少，而且還很細緻入微，沒那麼容易消化，因此，設計獅們很難設計出符合MD規範的UI出來。這次，做自己的專案，自己設計UI，終於有機會嘗試下MD了。
MD的設計規範真的很細，細到哪些元件應該設定多大陰影都作出了定義。不過，實際應用中，也沒必要完全遵照設計規範，最重要的是要懂得MD的核心思想。不過，對於MD的核心思想，我也還沒完全消化，畢竟我不是設計科班出身，半吊子的我還只能理解到一些比較粗淺的東西。建議每個設計獅都至少通讀一遍MD的官方文件，這樣才能深入瞭解MD的設計理念。下面只是根據我的理解對MD的一些闡釋，如有錯誤還請指正。
MD的目標是希望創造一種獨一無二的設計系統，在此係統的基礎之上，構建跨平臺和超越裝置尺寸的統一體驗。也就是說，不管是Android，還是iOS，不管是手機，還是平板，都能產生一致的體驗。
MD的環境是三維的，z軸是垂直於顯示平面的。引入z軸不是為了顯示3D視角，而是為了將不同material元素進行分層，不同層級的元素會有不同的z軸高度，會呈現出不同的光影關係。下圖就展示了兩種不同高度下的不同光影效果：
前面展示的UI介面效果圖中也可明顯看出不同陰影而呈現出分層的效果，比如每個頁面都有的導航欄。另外，MD的官方文件裡還給出了以下這張圖，標明瞭多種元素的靜止高度和動態高度偏移，其中，像Floating Action Button、Raised Button、Card等元素，點選時的效果是抬高了其高度，所以才會形成動態高度偏移。
MD還對動畫、顏色、圖示、影象，以及各種元件的設計，都做了詳細的描述。具體還是去檢視MD的官方文件，不過需要先翻牆才看得了。另外，極客學院也有做了一份翻譯，不過貌似已經有一年沒更新了。下面是這兩份文件的地址：
不過，我這次的設計，也並不是所有細節都按照MD的規範來做的。其實，就連Google自己的應用也有不遵照規範的地方。所以，無需拘泥於那些條條框框，最重要的是要理解其核心思想。
寫在最後
發現現在很多App設計貌似還是以iOS為主。但是，可知道，最新報告指出，2016年第二季度的Android市場佔有率為86.2%，而iOS為12.9%。Android市場佔有率從2014年7月開始就已經超過iOS了。但現在已經過去兩年了，不明白為什麼那麼多設計還是以iOS為主。其實，我並不推薦以iOS為主或以Android為主的設計，如果針對不同平臺分別設計不同UI，會有更好地體驗。另外，嘗試採用MD，也是可以統一不同平臺體驗的。
最後，再說一句：不懂設計的程式猿不是優秀的設計獅。做為離使用者最近的App程式猿，就應該懂一些UI設計的知識。
掃描以下二維碼即可關注訂閱號。
