如何用sketch製作精緻的APP原型

01-31

一年前寫過一篇文章：如何用Axure快速製作APP交互原型，相對來說還算比較受歡迎。從文章的標題也能看出兩點重要信息：工具是「Axure」，主要特點是「快速」。

Axure作為一個老牌的設計工具，算是產品經理入門必備，而最近幾年火起來的一個設計軟體——sketch，則異軍突起，逐漸成為了互聯網從業人員的新寵，不僅僅可以拿來畫交互，也是UI設計的利器。所以，用sketch產出的內容有一個很大的特點就是顏值高，這篇文章就嘗試講解一下如何用「sketch」製作「精緻」的APP原型，當然只要使用熟練，速度也是足夠快的。

需要先申明的一點，本文不是一篇sketch的入門教程，如果對sketch一點不熟悉的話，建議先看一遍sketch用戶手冊。

1. sketch自帶模板

Sketch做的非常人性化的一點，就是自帶了很多模板，而且用來畫交互完全夠用，省去了從網上各種非正規渠道找資源的麻煩，如果你是sketch的老用戶，而不知道自帶模板功能的話，真的是要面壁思過了。

其中，APP相關的模板有兩個「iOS用戶界面設計」和「Material Design」，顧名思義，分別用來設計ios界面和Android界面。以ios為例，模板中包含了常用的各種控制項：狀態欄、導航欄、彈窗、鍵盤等等，當我們需要的時候，直接拿過來用，不僅省事而且非常精緻，並且如果我們多去研究並拆解一下官方的這些控制項的製作過程，能給我們提供很多設計思路，比如如何用各種形狀拼合成想要的圖形，如何利用填充和陰影達到想要的視覺效果......這部分就不展開講解了，留給你自己去發現。

2. APP原型樣式

知道利用sketch自帶的APP界面模板之後，我們首先討論一下APP原型採用哪個樣式比較合適。

2.1 待選樣式

在Sketch中插入畫板的時候，軟體會提供一些常用設備的尺寸供用戶選擇，我們需要用到的是iPhone6（375×667px），為什麼一定要採用iPhone6呢？非常重要的一點，是因為上邊提到的sketch自帶模板，iOS界面的所有控制項大小全部是以iPhone6尺寸為基準的，拿過來可以直接使用。如果採用了plus或se的手機型號尺寸，控制項大小和畫板大小標準不一致，還得需要人為調整，異常的繁瑣。

當我們在同一個畫布（或稱為頁面）下插入多個iPhone6畫板時，sketch會自動排列所有的畫板，間隔100px。然後經過一番設計，在各個畫板上填充相關元素之後，大概就形成了這樣一份交互稿，如下圖：

看上去，整齊劃一、非常美觀，所以這種樣式比較適合從全局的角度來展示APP所有頁面的交互樣式，但並不適用於作為交付物，提供給開發和測試同學在實際工作中使用，主要的問題有以下兩點：

標註信息無法體現，標註信息包括了「頁面之間的跳轉關係」和「相關交互邏輯的說明性文案」。在sketch內，由於位於畫板之外的元素無法顯示並導出，如上，即以一個iPhone6頁面為一個畫板，造成畫板之外的「箭頭」或「文字」就無法派上用場；
功能點結構化的展示比較欠缺，上面也提到了，這種形式比較適合進行全局展現，但在實際項目運作中，會拆分成多個相關的獨立功能點，並且每個主要功能點，又要分為正常主幹流程和多個異常分支流程，同時對於分支流程來說，不一定需要整個頁面做信息呈現，很可能局部模塊展示就足夠了。

針對第1個問題，其實也有專門用來做標註的sketch插件，比如Notebook，直接用插件做標註雖然方便，但是格式太受限，非常的不靈活，尤其是經常需要修改時候，所以在我試用了兩次之後，最終還是放棄了。

2.2 採用樣式

否定了上邊提到的APP原型樣式後，我們又該如何通過其它的樣式來解決遇到的一些問題呢？

在sketch中，是以畫板或切片為單位進行導出的，所以我們可以根據需要，自由把握一個畫板的大小，而不是局限於以一個iPhone6頁面為一個畫板。比如如果需要全局展示APP整體樣式，則可以將所有APP頁面放在一個畫板中，如果只是講解某個具體的功能點，則可以只將涉及到的APP頁面放在一個畫板中。

那每個具體的APP頁面該怎麼體現呢，很簡單，通過一個375×667px 的矩形框來表示一個常規的APP頁，或許你已經注意到了，這個尺寸正好是sketch默認的iPhone6畫板的大小，採用這個尺寸矩形的好處就是，所有自帶的控制項仍可以繼續無縫的使用。

這樣做的另一個好處，APP頁面之外可以體現更多的元素，比如表示跳轉關係的「箭頭」，比如解釋性「文字」，比如表示分支流程的「局部模塊」

如圖所以，其中有幾點使用習慣可以參考一下：

可以針對每個畫板或者某個功能模塊，宏觀上用一句話概括一下功能點，從而幫助閱讀者能快速的知道下面的交互針對哪個具體功能，如圖中左上角的標題所示，說明這是與「增加在線客服」相關的需求；
可以對每個具體的頁面取一個小標題，從而幫助閱讀者快速定位這是哪一個頁面，如圖中「1.1 個人中心」、「1.2 在線客服」兩個頁面標題，同時在需要引用其它相關頁面的時候，也可以通過1.1、1.2的序號進行快速定位；
對於每個頁面的注釋信息，可以採用一個固定的特殊顏色來進行區分，對於顏色選擇恐懼症來說，直接從sketch全局顏色庫中選擇一個即可，另外注釋部分放置的位置，可以在相關頁面的右側，也可以在下側，具體怎麼選擇可以根據信息多少等實際情況來考慮；
對畫板中相關的元素根據相關性進行靈活的編組，比如可以將如圖所示的1.1和1.2兩個頁面編成兩個大組，同時對每個大組，再根據「頁面」和「注釋」兩部分分別編組，當然層級可以繼續下探，比如「注釋」組中可以根據「文字」、「箭頭」維度繼續分組，具體維度的和粒度，可以根據個人習慣而定；

3. 控制項使用技巧

講完了原型樣式，下面說一下控制項的使用技巧，主要有組件和文本樣式兩部分

3.1 組件

上邊提到過，sketch自帶模板中包含了很多常用控制項，我們可以直接在自帶的模板基礎上進行設計，也可以自己創建一個新文件作為模板，然後根據情況，將需要使用到的控制項複製過來用。我個人傾向於後一種，因為很多時候不需要這麼多，按需提取即可，另外除了直接採用自帶控制項，自己也可以創建，同時可以靈活的維護多套模板，使用在不同的項目中。

無法採用哪種使用形式，控制項的使用中都會涉及到了一個非常重要的sketch功能點，那就是「組件/Symbol」，sketch自帶模板中的控制項實際上就是組件的形式，它能夠幫助我們方便的在多個頁面和畫板中重複運用某組內容，其實類似於Axure中的母版功能。比如APP端常用的cell控制項，可以將常用的幾種類型維護成組件，需要使用的時候，直接拖過來用，方便快捷。

除了系統層面的「狀態欄」、「導航欄」、「鍵盤」等組件，針對特定的項目，自己也可以將常用的某個模塊創建為組件，比如電商項目中常用的商品模板，可以創建「商品/橫排」「商品/豎排」兩種形式的組件，從而可以不斷的快速復用。

並且有個命名的小技巧可以參考一下，通過符號「/ 」進行名稱的層級劃分，sketch會自動將「/」符號之前名稱相同的組件歸為一組，分門別類之後，我們在插入組件的時候就能快速定位，尤其是組件比較多的時候。

在使用「組件」功能的時候，我們會經常遇到一種情況，視覺樣式都是一樣的，但是文案有不同，比如「按鈕」控制項，和上邊提到的「cell」控制項。sketch非常完美的解決了這個問題，當我們插入一個組件後，可以用特定的文字去覆蓋原有組件的文字，甚至不透明度、混合形式、陰影都可以自定義。如下圖所示，我從同一個組件插入了三個按鈕，每個都可以配置不同的文案和不透明度。

綜上，我們可以直接複製sketch中自帶的控制項（以組件形式存在），也可以自己把常用的某些模塊創建為組件，這些就組合成了針對某個項目的特定組件庫，在畫交互的時候直接可以復用，並且還支持文案、不透明度等自定義，效率和美觀性都得到了保障。

3.2 文本樣式

「組件」功能的核心使用場景就是某些元素經常需要復用在不同地方，字體和圖層也如此。在一個項目的交互稿中，使用到的樣式種類是有限的，如果對每個元素如果都單獨維護，會比較繁瑣，sketch中的「文本樣式」和「圖層樣式」功能就完美解決了這個問題，針對文字和圖形元素，在「檢查器」中選擇需要共享的樣式，能夠快速的將顏色、陰影、不透明度等樣式配置套用過來，而不再需要做重複性的樣式配置，非常的便捷。

可以根據需要，整理一套自己常用的樣式規範，比如」正文常規性文字」，統一採用「微軟雅黑，色值#ffffff，字型大小18pt」的樣式，在之前提到的「頁面注釋說明」，統一採用「微軟雅黑，色值#5CD600，字型大小20pt」.......將規範維護成共享的樣式文本，在需要的地方直接復用即可，不僅僅提高了效率，並且保證了交互稿統一美觀性。

熟練使用「組件」和「文本樣式」，不僅僅是在創建的時候能提高效率，尤其是在涉及修改時，你會發現只要修改一處，全局同步調整完成，那種快速帶來的痛快感更加明顯。當然效率的提升是一方面，通過不斷復用標準精緻的控制項，採用統一規範的文本樣式，也保障了交互稿整體的美觀性。

4. 原型文件維護和導出

原型設計的一些思路說的差不多了，那不同項目以及不同版本的原型該怎麼維護比較合適，將原型同步給團隊成員的方式有哪些呢？

4.1 原型文件維護

需要注意的一點是，上邊提到的「組件」和「文本樣式」，它們均保存在某一文件中，並不能在不同文件中共享，並且這兩個東西是跟項目有比較大的相關性，所以我比較傾向於一個項目維護一個sketch文件，比如「某某應用APP端原型」文件。

以一個頁面（或稱為畫布）呈現一個版本的原型內容，然後在某個頁面/版本內，以一個畫板呈現一個功能點模塊的原型內容。當然，主體思路是這樣的，特殊情況也可以做靈活的調整，比如對應用的第一個版本來說，原型內容會非常多，也可以分成多個頁面來呈現。

這樣做，不僅僅是「組件」和「文本樣式」可以在一個項目內復用，其它相關的元素，比如某個頁面，或者某個畫板，都可以更加方便的復用。

4.2 導出和共享

然後簡單說一下導出，對於交互稿來說，基本上以畫板為單位進行導出就夠了，至於是圖片格式，還是PDF等其它格式，以團隊內其他成員普遍接受的形式既可。當然也可以用插件，以HTML的格式進行導出，我常用的就是這一種，好處就是以網頁形式打開，在左側可以看到所有畫板的列表，也就是某個版本內所有的功能點信息，相互切換也比較方便。

最後推薦一個sketch插件，sketch-measure 下載地址：utom/sketch-measure 這塊插件功能非常強大，導出只是其中一個（我就是用這塊插件來導出html格式原型），更多功能可以自己去探索。

5. 總結

以上，基本就是用sketch設計APP原型的整體思路，產出物從視覺上看會非常精緻，完全達到了高保真原型的水準，使用熟練的話，製作效率也非常高。在同樣甚至更短的時間內，如果能設計出更精緻的原型，何樂而不為呢？

當然，設計思路不僅僅適用APP端，也同樣適用於web端項目，只需要將頁面大小和相關控制項更換一下就可以。

歡迎關注公眾號「產品之路」：pengideas，回復「sketch模板」可獲得包含文中截圖內容的sketch文件。