需要先申明的一點(diǎn)，本文不是一篇sketch的入門教程，如果對(duì)sketch一點(diǎn)不熟悉的話，建議先看一遍sketch用戶手冊(cè)。

一年前寫過(guò)一篇文章：如何用Axure快速制作APP交互原型，相對(duì)來(lái)說(shuō)還算比較受歡迎。從文章的標(biāo)題也能看出兩點(diǎn)重要信息：工具是「Axure」，主要特點(diǎn)是「快速」。

Axure作為一個(gè)老牌的設(shè)計(jì)工具，算是產(chǎn)品經(jīng)理入門必備，而最近幾年火起來(lái)的一個(gè)設(shè)計(jì)軟件——sketch，則異軍突起，逐漸成為了互聯(lián)網(wǎng)從業(yè)人員的新寵，不僅僅可以拿來(lái)畫交互，也是UI設(shè)計(jì)的利器。所以，用sketch產(chǎn)出的內(nèi)容有一個(gè)很大的特點(diǎn)就是顏值高，這篇文章就嘗試講解一下如何用「sketch」制作「精致」的APP原型，當(dāng)然只要使用熟練，速度也是足夠快的。

1. sketch自帶模板

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

其中，APP相關(guān)的模板有兩個(gè)“iOS用戶界面設(shè)計(jì)”和“Material Design”，顧名思義，分別用來(lái)設(shè)計(jì)ios界面和Android界面。以ios為例，模板中包含了常用的各種控件：狀態(tài)欄、導(dǎo)航欄、彈窗、鍵盤等等，當(dāng)我們需要的時(shí)候，直接拿過(guò)來(lái)用，不僅省事而且非常精致，并且如果我們多去研究并拆解一下官方的這些控件的制作過(guò)程，能給我們提供很多設(shè)計(jì)思路，比如如何用各種形狀拼合成想要的圖形，如何利用填充和陰影達(dá)到想要的視覺(jué)效果……這部分就不展開(kāi)講解了，留給你自己去發(fā)現(xiàn)。

2. APP原型樣式

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

2.1 待選樣式

在Sketch中插入畫板的時(shí)候，軟件會(huì)提供一些常用設(shè)備的尺寸供用戶選擇，我們需要用到的是iPhone6（375×667px），為什么一定要采用iPhone6呢？非常重要的一點(diǎn)，是因?yàn)樯线吿岬降膕ketch自帶模板，iOS界面的所有控件大小全部是以iPhone6尺寸為基準(zhǔn)的，拿過(guò)來(lái)可以直接使用。如果采用了plus或se的手機(jī)型號(hào)尺寸，控件大小和畫板大小標(biāo)準(zhǔn)不一致，還得需要人為調(diào)整，異常的繁瑣。

當(dāng)我們?cè)谕粋€(gè)畫布（或稱為頁(yè)面）下插入多個(gè)iPhone6畫板時(shí)，sketch會(huì)自動(dòng)排列所有的畫板，間隔100px。然后經(jīng)過(guò)一番設(shè)計(jì)，在各個(gè)畫板上填充相關(guān)元素之后，大概就形成了這樣一份交互稿，如下圖：

看上去，整齊劃一、非常美觀，所以這種樣式比較適合從全局的角度來(lái)展示APP所有頁(yè)面的交互樣式，但并不適用于作為交付物，提供給開(kāi)發(fā)和測(cè)試同學(xué)在實(shí)際工作中使用，主要的問(wèn)題有以下兩點(diǎn)：

1. 標(biāo)注信息無(wú)法體現(xiàn)，標(biāo)注信息包括了“頁(yè)面之間的跳轉(zhuǎn)關(guān)系”和“相關(guān)交互邏輯的說(shuō)明性文案”。在sketch內(nèi)，由于位于畫板之外的元素?zé)o法顯示并導(dǎo)出，如上，即以一個(gè)iPhone6頁(yè)面為一個(gè)畫板，造成畫板之外的“箭頭”或“文字”就無(wú)法派上用場(chǎng)；
2. 功能點(diǎn)結(jié)構(gòu)化的展示比較欠缺，上面也提到了，這種形式比較適合進(jìn)行全局展現(xiàn)，但在實(shí)際項(xiàng)目運(yùn)作中，會(huì)拆分成多個(gè)相關(guān)的獨(dú)立功能點(diǎn)，并且每個(gè)主要功能點(diǎn)，又要分為正常主干流程和多個(gè)異常分支流程，同時(shí)對(duì)于分支流程來(lái)說(shuō)，不一定需要整個(gè)頁(yè)面做信息呈現(xiàn)，很可能局部模塊展示就足夠了。

針對(duì)第1個(gè)問(wèn)題，其實(shí)也有專門用來(lái)做標(biāo)注的sketch插件，比如Notebook，直接用插件做標(biāo)注雖然方便，但是格式太受限，非常的不靈活，尤其是經(jīng)常需要修改時(shí)候，所以在我試用了兩次之后，最終還是放棄了。

2.2 采用樣式

否定了上邊提到的APP原型樣式后，我們又該如何通過(guò)其它的樣式來(lái)解決遇到的一些問(wèn)題呢？

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

那每個(gè)具體的APP頁(yè)面該怎么體現(xiàn)呢，很簡(jiǎn)單，通過(guò)一個(gè)375×667px 的矩形框來(lái)表示一個(gè)常規(guī)的APP頁(yè)，或許你已經(jīng)注意到了，這個(gè)尺寸正好是sketch默認(rèn)的iPhone6畫板的大小，采用這個(gè)尺寸矩形的好處就是，所有自帶的控件仍可以繼續(xù)無(wú)縫的使用。

這樣做的另一個(gè)好處，APP頁(yè)面之外可以體現(xiàn)更多的元素，比如表示跳轉(zhuǎn)關(guān)系的“箭頭”，比如解釋性“文字”，比如表示分支流程的“局部模塊”

如圖所以，其中有幾點(diǎn)使用習(xí)慣可以參考一下：

1. 可以針對(duì)每個(gè)畫板或者某個(gè)功能模塊，宏觀上用一句話概括一下功能點(diǎn)，從而幫助閱讀者能快速的知道下面的交互針對(duì)哪個(gè)具體功能，如圖中左上角的標(biāo)題所示，說(shuō)明這是與“增加在線客服”相關(guān)的需求；
2. 可以對(duì)每個(gè)具體的頁(yè)面取一個(gè)小標(biāo)題，從而幫助閱讀者快速定位這是哪一個(gè)頁(yè)面，如圖中“1.1 個(gè)人中心”、“1.2 在線客服”兩個(gè)頁(yè)面標(biāo)題，同時(shí)在需要引用其它相關(guān)頁(yè)面的時(shí)候，也可以通過(guò)1.1、1.2的序號(hào)進(jìn)行快速定位；
3. 對(duì)于每個(gè)頁(yè)面的注釋信息，可以采用一個(gè)固定的特殊顏色來(lái)進(jìn)行區(qū)分，對(duì)于顏色選擇恐懼癥來(lái)說(shuō)，直接從sketch全局顏色庫(kù)中選擇一個(gè)即可，另外注釋部分放置的位置，可以在相關(guān)頁(yè)面的右側(cè)，也可以在下側(cè)，具體怎么選擇可以根據(jù)信息多少等實(shí)際情況來(lái)考慮；
4. 對(duì)畫板中相關(guān)的元素根據(jù)相關(guān)性進(jìn)行靈活的編組，比如可以將如圖所示的1.1和1.2兩個(gè)頁(yè)面編成兩個(gè)大組，同時(shí)對(duì)每個(gè)大組，再根據(jù)“頁(yè)面”和“注釋”兩部分分別編組，當(dāng)然層級(jí)可以繼續(xù)下探，比如“注釋”組中可以根據(jù)“文字”、“箭頭”維度繼續(xù)分組，具體維度的和粒度，可以根據(jù)個(gè)人習(xí)慣而定；

3. 控件使用技巧

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

3.1 組件

上邊提到過(guò)，sketch自帶模板中包含了很多常用控件，我們可以直接在自帶的模板基礎(chǔ)上進(jìn)行設(shè)計(jì)，也可以自己創(chuàng)建一個(gè)新文件作為模板，然后根據(jù)情況，將需要使用到的控件復(fù)制過(guò)來(lái)用。我個(gè)人傾向于后一種，因?yàn)楹芏鄷r(shí)候不需要這么多，按需提取即可，另外除了直接采用自帶控件，自己也可以創(chuàng)建，同時(shí)可以靈活的維護(hù)多套模板，使用在不同的項(xiàng)目中。

無(wú)法采用哪種使用形式，控件的使用中都會(huì)涉及到了一個(gè)非常重要的sketch功能點(diǎn)，那就是“組件/Symbol”，sketch自帶模板中的控件實(shí)際上就是組件的形式，它能夠幫助我們方便的在多個(gè)頁(yè)面和畫板中重復(fù)運(yùn)用某組內(nèi)容，其實(shí)類似于Axure中的母版功能。比如APP端常用的cell控件，可以將常用的幾種類型維護(hù)成組件，需要使用的時(shí)候，直接拖過(guò)來(lái)用，方便快捷。

除了系統(tǒng)層面的“狀態(tài)欄”、“導(dǎo)航欄”、“鍵盤”等組件，針對(duì)特定的項(xiàng)目，自己也可以將常用的某個(gè)模塊創(chuàng)建為組件，比如電商項(xiàng)目中常用的商品模板，可以創(chuàng)建“商品/橫排”“商品/豎排”兩種形式的組件，從而可以不斷的快速?gòu)?fù)用。

并且有個(gè)命名的小技巧可以參考一下，通過(guò)符號(hào)“/ ”進(jìn)行名稱的層級(jí)劃分，sketch會(huì)自動(dòng)將“/”符號(hào)之前名稱相同的組件歸為一組，分門別類之后，我們?cè)诓迦虢M件的時(shí)候就能快速定位，尤其是組件比較多的時(shí)候。

在使用“組件”功能的時(shí)候，我們會(huì)經(jīng)常遇到一種情況，視覺(jué)樣式都是一樣的，但是文案有不同，比如“按鈕”控件，和上邊提到的“cell”控件。sketch非常完美的解決了這個(gè)問(wèn)題，當(dāng)我們插入一個(gè)組件后，可以用特定的文字去覆蓋原有組件的文字，甚至不透明度、混合形式、陰影都可以自定義。如下圖所示，我從同一個(gè)組件插入了三個(gè)按鈕，每個(gè)都可以配置不同的文案和不透明度。

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

3.2 文本樣式

“組件”功能的核心使用場(chǎng)景就是某些元素經(jīng)常需要復(fù)用在不同地方，字體和圖層也如此。在一個(gè)項(xiàng)目的交互稿中，使用到的樣式種類是有限的，如果對(duì)每個(gè)元素如果都單獨(dú)維護(hù)，會(huì)比較繁瑣，sketch中的“文本樣式”和“圖層樣式”功能就完美解決了這個(gè)問(wèn)題，針對(duì)文字和圖形元素，在“檢查器”中選擇需要共享的樣式，能夠快速的將顏色、陰影、不透明度等樣式配置套用過(guò)來(lái)，而不再需要做重復(fù)性的樣式配置，非常的便捷。

可以根據(jù)需要，整理一套自己常用的樣式規(guī)范，比如”正文常規(guī)性文字”，統(tǒng)一采用“微軟雅黑，色值#ffffff，字號(hào)18pt”的樣式，在之前提到的“頁(yè)面注釋說(shuō)明”，統(tǒng)一采用“微軟雅黑，色值#5CD600，字號(hào)20pt”…….將規(guī)范維護(hù)成共享的樣式文本，在需要的地方直接復(fù)用即可，不僅僅提高了效率，并且保證了交互稿統(tǒng)一美觀性。

熟練使用“組件”和“文本樣式”，不僅僅是在創(chuàng)建的時(shí)候能提高效率，尤其是在涉及修改時(shí)，你會(huì)發(fā)現(xiàn)只要修改一處，全局同步調(diào)整完成，那種快速帶來(lái)的痛快感更加明顯。當(dāng)然效率的提升是一方面，通過(guò)不斷復(fù)用標(biāo)準(zhǔn)精致的控件，采用統(tǒng)一規(guī)范的文本樣式，也保障了交互稿整體的美觀性。

4. 原型文件維護(hù)和導(dǎo)出

原型設(shè)計(jì)的一些思路說(shuō)的差不多了，那不同項(xiàng)目以及不同版本的原型該怎么維護(hù)比較合適，將原型同步給團(tuán)隊(duì)成員的方式有哪些呢？

4.1 原型文件維護(hù)

需要注意的一點(diǎn)是，上邊提到的“組件”和“文本樣式”，它們均保存在某一文件中，并不能在不同文件中共享，并且這兩個(gè)東西是跟項(xiàng)目有比較大的相關(guān)性，所以我比較傾向于一個(gè)項(xiàng)目維護(hù)一個(gè)sketch文件，比如“某某應(yīng)用APP端原型”文件。

以一個(gè)頁(yè)面（或稱為畫布）呈現(xiàn)一個(gè)版本的原型內(nèi)容，然后在某個(gè)頁(yè)面/版本內(nèi)，以一個(gè)畫板呈現(xiàn)一個(gè)功能點(diǎn)模塊的原型內(nèi)容。當(dāng)然，主體思路是這樣的，特殊情況也可以做靈活的調(diào)整，比如對(duì)應(yīng)用的第一個(gè)版本來(lái)說(shuō)，原型內(nèi)容會(huì)非常多，也可以分成多個(gè)頁(yè)面來(lái)呈現(xiàn)。

這樣做，不僅僅是“組件”和“文本樣式”可以在一個(gè)項(xiàng)目?jī)?nèi)復(fù)用，其它相關(guān)的元素，比如某個(gè)頁(yè)面，或者某個(gè)畫板，都可以更加方便的復(fù)用。

4.2 導(dǎo)出和共享

然后簡(jiǎn)單說(shuō)一下導(dǎo)出，對(duì)于交互稿來(lái)說(shuō)，基本上以畫板為單位進(jìn)行導(dǎo)出就夠了，至于是圖片格式，還是PDF等其它格式，以團(tuán)隊(duì)內(nèi)其他成員普遍接受的形式既可。當(dāng)然也可以用插件，以HTML的格式進(jìn)行導(dǎo)出，我常用的就是這一種，好處就是以網(wǎng)頁(yè)形式打開(kāi)，在左側(cè)可以看到所有畫板的列表，也就是某個(gè)版本內(nèi)所有的功能點(diǎn)信息，相互切換也比較方便。

最后推薦一個(gè)sketch插件，sketch-measure 下載地址：https://github.com/utom/sketch-measure 這塊插件功能非常強(qiáng)大，導(dǎo)出只是其中一個(gè)（我就是用這塊插件來(lái)導(dǎo)出html格式原型），更多功能可以自己去探索。

5. 總結(jié)

以上，基本就是用sketch設(shè)計(jì)APP原型的整體思路，產(chǎn)出物從視覺(jué)上看會(huì)非常精致，完全達(dá)到了高保真原型的水準(zhǔn)，使用熟練的話，制作效率也非常高。在同樣甚至更短的時(shí)間內(nèi)，如果能設(shè)計(jì)出更精致的原型，何樂(lè)而不為呢？

當(dāng)然，設(shè)計(jì)思路不僅僅適用APP端，也同樣適用于web端項(xiàng)目，只需要將頁(yè)面大小和相關(guān)控件更換一下就可以。

若要文中截圖內(nèi)容的sketch文件，歡迎交流。

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @劉鵬（微信公眾號(hào)：pengideas ） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可，禁止轉(zhuǎn)載。