我在一年前寫過一篇文章：，比較火，文章標(biāo)題也透露了兩個(gè)重要信息：工具是“Axure”，主要特點(diǎn)是“快”。

Axure作為一款老牌設(shè)計(jì)工具，是產(chǎn)品經(jīng)理必備的工具。近幾年，一款名為Axure的設(shè)計(jì)軟件火了起來，逐漸成為互聯(lián)網(wǎng)從業(yè)者的新寵。它不僅可以用來畫交互，還是一款UI設(shè)計(jì)的強(qiáng)大工具。所以Axure制作的內(nèi)容的一大特點(diǎn)就是美觀。本文將嘗試講解如何使用Axure制作精美的APP原型。當(dāng)然，只要你熟練掌握，速度也是夠快的。

首先需要說明的是，本文并非入門教程，如果對(duì)某些內(nèi)容不熟悉，建議先閱讀使用手冊(cè)。

···① ···

附帶模板

很人性化的一點(diǎn)就是自帶了很多模板，對(duì)于繪制交互來說完全夠用，省去了在網(wǎng)上各種非正式渠道找資源的麻煩。如果你是老用戶，還不知道自帶模板功能，那你真的需要好好反省一下了。

其中有兩款A(yù)PP相關(guān)的模板，分別是《iOS用戶界面設(shè)計(jì)》和《》，顧名思義，分別是用于設(shè)計(jì)ios界面和界面的。以ios為例，模板中包含了各種常用的控件：狀態(tài)欄、導(dǎo)航欄、彈窗、鍵盤等，當(dāng)我們需要的時(shí)候，直接使用就可以，不僅方便，而且非常精致。如果研究和拆解一下這些官方控件的制作過程，可以給我們提供很多設(shè)計(jì)思路，比如如何將各種形狀組合成想要的圖形，如何利用填充和陰影達(dá)到想要的視覺效果……這部分就不詳細(xì)講解了，留給大家自己去發(fā)現(xiàn)吧。

··· ②···

APP原型風(fēng)格

了解了APP內(nèi)置界面模板的使用方法之后，我們首先來討論一下哪種風(fēng)格更適合APP原型。

2.1 候選人風(fēng)格

在插入畫板的時(shí)候軟件會(huì)提供一些常見的設(shè)備尺寸供用戶選擇，我們需要用到的是（375×667px），為什么一定要用呢？很重要的一點(diǎn)就是因?yàn)樯厦嬲f的內(nèi)置模板，iOS界面所有控件尺寸都是以該尺寸為基準(zhǔn)的，直接用就可以了。如果用plus或者se手機(jī)機(jī)型尺寸，控件尺寸和畫板尺寸標(biāo)準(zhǔn)不一致，需要手動(dòng)調(diào)整，極其繁瑣。

當(dāng)我們?cè)谕粋€(gè)畫布（或頁面）中插入多個(gè)畫板時(shí)，所有畫板都會(huì)自動(dòng)以 100px 的間距排列，然后在每個(gè)畫板上進(jìn)行一些設(shè)計(jì)并填充相關(guān)元素后，就會(huì)形成一個(gè)交互稿，如下圖所示：

看上去整潔美觀，所以這種樣式比較適合從全局角度展示所有APP頁面的交互樣式，但并不適合作為交付物給開發(fā)、測(cè)試人員在實(shí)際工作中使用。主要問題如下：

標(biāo)注信息無法體現(xiàn)，包括“頁面間的跳轉(zhuǎn)關(guān)系”、“相關(guān)交互邏輯的描述性拷貝”，因?yàn)楫嫲逋獾脑責(zé)o法顯示和導(dǎo)出，如上，一個(gè)頁面就是一個(gè)畫板，所以畫板外的“箭頭”或者“文字”都無法使用；

功能點(diǎn)的結(jié)構(gòu)化展示相對(duì)欠缺，如上文所說，這種形式比較適合全局展示，但在實(shí)際項(xiàng)目操作中會(huì)拆分成多個(gè)相關(guān)獨(dú)立的功能點(diǎn)，每個(gè)主功能點(diǎn)又會(huì)分為正常的主流程和多個(gè)異常的分支流程。同時(shí)對(duì)于分支流程，也不一定需要將信息呈現(xiàn)在整個(gè)頁面，很可能局部模塊展示就足夠了。

對(duì)于第一個(gè)問題，其實(shí)有專門用于注釋的插件，比如直接用插件進(jìn)行注釋雖然方便，但是格式太受限制，非常不靈活，特別是需要頻繁修改的時(shí)候，所以嘗試了兩次之后，最終放棄了。

2.2 采用一種風(fēng)格

在拒絕了上面提到的APP原型風(fēng)格之后，我們?nèi)绾卫闷渌L(fēng)格來解決遇到的一些問題呢？

在 中，導(dǎo)出是以畫板或切片為單位的，所以我們可以根據(jù)需要自由控制一個(gè)畫板的大小，而不是局限于一頁為一個(gè)畫板。比如你需要全局展示APP的整體風(fēng)格，那么就可以把APP的所有頁面放在一個(gè)畫板里。如果你只是想講解某個(gè)特定的功能點(diǎn)，那么可以只把涉及到的APP頁面放在一個(gè)畫板里。

各個(gè)具體的APP頁面該如何體現(xiàn)呢？很簡(jiǎn)單，一個(gè)常規(guī)的APP頁面用一個(gè)375×667px的矩形框來表示，也許你已經(jīng)注意到，這個(gè)尺寸正好是默認(rèn)畫板的大小，使用這個(gè)尺寸的矩形的好處是，所有內(nèi)置控件依然可以無縫使用。

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

如圖sketch修改畫板顏色，有幾點(diǎn)使用習(xí)慣可以參考：

對(duì)于每一個(gè)畫板或者某個(gè)功能模塊sketch修改畫板顏色，可以在宏觀層面用一句話概括功能點(diǎn)，幫助讀者快速知道接下來的交互是針對(duì)哪個(gè)具體功能的。如圖左上角的標(biāo)題所示，這表明這是一個(gè)“添加在線客服”相關(guān)的需求；

你可以給每個(gè)具體頁面起一個(gè)小標(biāo)題，幫助讀者快速定位到這是哪個(gè)頁面，比如圖中“1.1個(gè)人中心”和“1.2在線客服”兩個(gè)頁面標(biāo)題。同時(shí)當(dāng)需要參考其他相關(guān)頁面時(shí)，也可以通過1.1、1.2的序號(hào)快速定位；

對(duì)于每頁的批注信息，可以采用固定的專用顏色進(jìn)行區(qū)分，怕選顏色的朋友可以直接從全局顏色庫中選取一種。另外，批注部分可以放在相關(guān)頁面的右側(cè)或者底部，具體選擇可根據(jù)信息量等實(shí)際情況考慮；

畫板中的相關(guān)元素可以按照關(guān)聯(lián)性靈活分組，例如可以將1.1和1.2兩個(gè)頁面分成兩大組，同時(shí)每個(gè)大組還可以按照“頁面”和“注釋”部分進(jìn)行分組。當(dāng)然，層級(jí)關(guān)系還可以進(jìn)一步挖掘，例如“注釋”組可以進(jìn)一步按照“文本”和“箭頭”維度進(jìn)行分組，具體維度和粒度可根據(jù)個(gè)人習(xí)慣確定。

③

使用控件的提示

說完了原型樣式，我們?cè)賮碚f說控件的使用技巧，主要包括組件和文本樣式。

3.1 組件

上面提到了，內(nèi)置模板包含了很多常用的控件，我們可以直接基于內(nèi)置模板進(jìn)行設(shè)計(jì)，也可以新建一個(gè)文件作為模板，然后根據(jù)情況把需要用到的控件復(fù)制過來。我個(gè)人比較喜歡后者，因?yàn)楹芏鄷r(shí)候我們不需要那么多，需要的時(shí)候提取出來就可以了。除了直接使用內(nèi)置控件，還可以自己創(chuàng)建，并且可以靈活維護(hù)多套模板，在不同項(xiàng)目中使用。

不管是哪種使用形式，控件的使用都會(huì)涉及到一個(gè)很重要的功能點(diǎn)，那就是“/”。內(nèi)置模板中的控件其實(shí)都是以組件的形式存在的，可以幫助我們很方便地在多個(gè)頁面和畫板中復(fù)用一組內(nèi)容，其實(shí)和Axure中的主控功能類似。比如APP端常用的單元格控件，就可以將幾種常用的類型維護(hù)為組件，需要用的時(shí)候直接拖過來就可以，使用起來非常快捷方便。

除了“狀態(tài)欄”、“導(dǎo)航欄”、“鍵盤”等系統(tǒng)級(jí)組件外，針對(duì)具體項(xiàng)目，還可以將常用的模塊創(chuàng)建為組件。例如，針對(duì)電商項(xiàng)目中常用的產(chǎn)品模板，可以以“/??ntal”、“/”的形式創(chuàng)建組件，這樣可以快速、持續(xù)地復(fù)用。

還有一個(gè)命名小技巧可以參考，使用符號(hào)“/”來分層命名，在“/”符號(hào)前有相同名稱的元件會(huì)自動(dòng)歸為一組，分類之后，我們?cè)诓迦朐r(shí)可以快速定位，尤其是在元件較多的情況下。

在使用“組件”功能時(shí)，我們經(jīng)常會(huì)遇到視覺樣式相同，但文字不同的情況，比如上文提到的“按鈕”控件和“單元格”控件。這個(gè)問題完美解決了。我們?cè)诓迦虢M件時(shí)，可以用特定的文字覆蓋原有組件的文字，甚至不透明度、混合形式、陰影都可以自定義。如下圖所示，我從同一個(gè)組件插入了三個(gè)按鈕，每個(gè)按鈕都可以配置不同的文字和不透明度。

總結(jié)一下，我們可以直接復(fù)制內(nèi)置的控件（以組件的形式），也可以自己制作一些常用的模塊作為組件。組合成一個(gè)項(xiàng)目專用的組件庫，在繪制交互時(shí)可以直接復(fù)用，也支持自定義文案、不透明度等，效率和美觀度都有保證。

3.2 文本樣式

“組件”功能的核心使用場(chǎng)景是一些元素經(jīng)常需要在不同的地方復(fù)用，字體和圖層也是如此。在項(xiàng)目的交互稿中，使用的樣式種類有限，如果每個(gè)元素都單獨(dú)維護(hù)，會(huì)顯得繁瑣?！拔淖謽邮健焙汀皥D層樣式”功能完美解決了這個(gè)問題。對(duì)于文字和圖形元素，在“檢查器”中選擇需要共享的樣式，就可以快速應(yīng)用顏色、陰影、不透明度等樣式配置，無需再做重復(fù)的樣式配置，非常方便。

你可以根據(jù)需要整理一套常用的樣式規(guī)范，比如“正文中的一般文字”，統(tǒng)一采用“微軟雅黑，顏色值#，字號(hào)18pt”的樣式；前面提到的“頁面注釋描述”，統(tǒng)一采用“微軟雅黑，顏色值#，字號(hào)20pt”的樣式……將規(guī)范維護(hù)為共享樣式文本，在需要的地方直接復(fù)用，這樣既提高了效率，又保證了交互稿的統(tǒng)一性和美觀性。

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

··· ④···

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

上面我們討論了原型設(shè)計(jì)的一些思路，那么不同項(xiàng)目、不同版本的原型應(yīng)該如何維護(hù)？有哪些方法可以同步原型給團(tuán)隊(duì)成員？

4.1 原型文件維護(hù)

需要注意的一點(diǎn)是，上面提到的“組件”和“文本樣式”都是保存在某個(gè)文件中的，無法在不同文件之間共享。而且這兩個(gè)東西都和項(xiàng)目息息相關(guān)，所以我更喜歡一個(gè)項(xiàng)目維護(hù)一個(gè)文件，比如“某個(gè)應(yīng)用的APP原型”文件。

用一個(gè)頁面（或者畫布）呈現(xiàn)一個(gè)版本的原型內(nèi)容，再用一個(gè)畫板呈現(xiàn)某一頁面/版本中某個(gè)功能模塊的原型內(nèi)容。當(dāng)然主要思路就是這樣，特殊情況也可以靈活調(diào)整。比如對(duì)于應(yīng)用的第一個(gè)版本，原型內(nèi)容會(huì)非常多，也可以用多個(gè)頁面來呈現(xiàn)。

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

4.2 導(dǎo)出與分享

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

最后推薦一款插件，—— 下載地址：http://www.zgxue.com//2017/04/22/.html 這款插件非常強(qiáng)大，導(dǎo)出只是它的其中一個(gè)功能（我使用這款插件導(dǎo)出HTML格式的原型），更多的功能大家可以自行探索。

⑤

總結(jié)

以上基本就是設(shè)計(jì)APP原型的整體思路了，輸出的視覺效果會(huì)非常精美，完全達(dá)到高保真原型的水平，熟練使用的話，生產(chǎn)效率會(huì)非常高，如果能在同樣甚至更短的時(shí)間內(nèi)設(shè)計(jì)出更加精美的原型，何樂而不為呢？

當(dāng)然該設(shè)計(jì)思路不僅適用于APP端，同樣適用于Web端項(xiàng)目，只需要改變頁面大小以及相關(guān)控件即可。

在公眾號(hào)回復(fù)“模板”，即可獲取包含文章截圖的文件。

如有侵權(quán)請(qǐng)聯(lián)系刪除！