編輯導語：本文作者將通過ToolBar這個在移動端產品較為常見的組件，教大家如何快速高效的創(chuàng)建一個規(guī)范，且便于維護管理的可復用組件。

下圖對組件的標注，只是為了方便講解這個案例，實際的制作并不需要按照該標準進行。

為了保持頁面的一致性，這里選擇用黑色的矩形代替系統(tǒng)的圖片組件；在不強調繪制高保真原型時，使用矩形代替圖片會讓原型的制作更加的靈活。

一、ToolBar組件標準化制作流程

如果按照常規(guī)的方式去繪制一個具有一定規(guī)范的原型（如上圖所示），是一件非常困難的事情，即便你是一個使用Axure非常熟練的人。

由于組件與組件之間的約束關系會隨著組件數量的增多而變得復雜，從而使得組件的拖拽，或是對齊、居中等操作變的繁瑣；雖然我們可以通過組件的組合來減少這種約束關系，但并不能從根本上解決效率底下的問題，我想這應該是很多產品經理不愿去設計規(guī)范產品原型的原因之一。

那么我們如果按照下面這種方法進行組件的設計會怎樣？

從上面的操作可以看出，我們減少了按鈕與按鈕之間、按鈕與ToolBar背景占位矩形之間的約束，從而讓組件的排版變得簡單；通過對按鈕單元組件的復制、粘貼、拖拽，配合智能參考線，組件吸附等功能的輔助，便能夠快速的創(chuàng)建一個具有規(guī)范的靜態(tài)ToolBar組件。

在產品原型的設計當中，組件樣式的設置相對其位置的擺放而言，比較簡單而且可控，合理的使用會極大的提升你的繪制效率。

Axure支持四則運算，所以在一些涉及到數字的地方，我們可以通過直接輸入計算邏輯來達到我們的目的；比如設置【文本標簽】寬度時，我們直接入數375/4，也就是ToolBar的寬度/按鈕個數，即可得到文本的寬度值。

對于組件相對位置的調整，除了常規(guī)的做法以外，我們還可以通過下面的步驟進行：

對于ToolBar這個組件來講，我們知道它有兩種狀態(tài)：選中和未選中。

常規(guī)方式下我們會對圖標和文本的色值進行分別設置，但是當組件的數量變多時，這種調整就會變得比較繁瑣，尤其是我們對組件進行組合操作之后；可如果我們通過調整組件的透明度發(fā)現一樣能夠達到目的，而且這個過程相對簡單，更容易操作。

到這里我們不難看出，繪制一個具有一定規(guī)范的原型（組件），其實并不復雜，但前提是我們找對了方法。

接下來，我們通過產品迭代的思路，對ToolBar這個組件進行一定的優(yōu)化，使其具有復用的可能；而這才是提升原型繪制效率的根本，我們要善于從Axure的學習、使用中創(chuàng)建屬于自己的組件庫。

二、ToolBar組件的優(yōu)化

ToolBar組件中的按鈕個數決定了頁面調用的次數，當組件位于不同的頁面中時，如果組件發(fā)生了變化，那么修改起來會變得非常麻煩，反倒不如重新設計；所以我們需要對ToolBar組件進行調整，讓跨頁面修改變得簡單。

母版能夠很好的解決跨頁面修改的問題，但也會帶來一些新的問題：母版中組件的結構及樣式一旦設定，所調用的頁面會與其保持一致，采用這種方式會導致ToolBar的選中未選中的樣式無法設置。

通過樣式交互以及添加對應的交互事件，能夠幫助我們解決這個問題。

雖然這樣設置能夠解決ToolBar按鈕選中未選中樣式的問題，而且制作的過程也并不是很復雜，但使用起來還是比較麻煩，因為我們需要在調用ToolBar母版的每個頁面都做按鈕的選中操作；此外，為了能夠很準確的選中目標按鈕，可能還需要對按鈕進行命名，所以我們還需要進一步的完善該方案。

在原型頁面的命名中，一般來講會與ToolBar上的按鈕文字保持一致，所以我們可以通過這個特點設定判斷的條件：當按鈕的文本與頁面名稱一致時，選中對應的【文本按鈕】和【圖標】（事件添加在文本按鈕上），當該組件加載后會根據判斷結果進行按鈕的選中操作，并不需要人為再手動操作，是不是很方便。

這樣，我們設計的ToolBar組件在跨頁面修改方面變的更加容易，同時使用也變得簡單了起來。

三、ToolBar組件的進一步優(yōu)化

通過母版，我們解決了ToolBar跨頁面修改的問題，但是對于母版內組件的修改卻并沒有改善，比如我們要將4個按鈕修改成3個或5個；雖然說重新做一個也不難，但如果能在現有的基礎上進行修改，那豈不是更為方便。

從結構上看，ToolBar組件是一個標準按鈕單元 * N的結構，對于這類結構使用中繼器則是最好的選擇，將設計好的標準按鈕單元替換中繼器中默認的組件，并按下面的流程操作就可以創(chuàng)建出標準的ToolBar組件。

當我們需要將4個按鈕的ToolBar調整成為5個時，只需要對中繼器里的組件進行調整，同時修改對應的數據，便可很快的實現ToolBar組件整體的調整。

通過本文，我們完成了一個規(guī)范原型組件從0到1的設計，從1到N的優(yōu)化，最終的產出是一個可復用，便于修改的標準化的ToolBar組件。

寫在結尾的話：如果在學習軟件、繪制原型的過程中，把產出的作品當作是一個產品去對待，那么收獲的產品思維是不是會更加的實用？

作者：GrowingPM；公眾號：GrowingPM

本文由 @曹蜀黍 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議。