PM基本功 | 如何製作一個屬於自己的Axure元件庫

畫原型是每個產品經理的基本功，很多人平常工作用的都是原型產品中預設的元件庫，但想要提高效率，就需要做一個高效的、完全貼合自己使用習慣的元件庫。本文作者對此展開了分析，希望對你有幫助。

一、你也是原型苦手嗎？

產品經理的軟體技能裡，原型工具可以說是產品經理吃飯的家當，我個人常用的原型工具是Axure。當我是個剛入門的小菜鳥時，用Axure畫原型線稿，用的是預設的元件庫，每次都把對應的元件拖動出來進行更改。比如在製作一個表單時，就要經歷以下步驟：

1. 拖出一個文字標籤元件作為欄位名標籤。必要時要加上* 必填標記並且要改成紅色字色
2. 拉出一個單行文字輸入框元件，按規範改一下元件的寬度、高度、圓角
3. 重複1、2直到完成表單設計

當我成為了一名熟練的畫圖仔之後，我知道了還有元件庫這種東西，於是我下載了好多個元件庫，但是用的時候，我發現別人的元件庫要不做的特別龐大（大廠的設計規範元件庫，事無鉅細），檢索元件時花費的時間更多了，要不就是殘缺的半成品，總之就是效率不高，所以相當長一段時間內，我都是用預設的元件庫。

前不久，我受高人指點： 做一個自己的元件庫是產品經理必須經歷的試煉。 我醍醐灌頂，現在我需要的不是機械化地快速重複，而是找到變革工具讓效率有質的飛躍，而當前我需要的就是一個高效的、完全貼合我使用習慣的元件庫。汽車跑的比馬車快，可不是因為輪子蹬的比馬蹄快。

二、STEP1：把每個元件畫一遍

萬事開頭難，起初我並沒有對“我的元件庫應該具備哪些內容“有一個明確的答案，於是根據 產品經理先做MVP再迭代優化 的DNA，我準備把所有的元件一個個實現，這是最笨的也是最實在的辦法。

於是乎我把常見的網頁框架元件，如網頁頭部、主導航選單、按鈕等，以及表單元件，如單行文字、下拉選框等元件，都逐一實現。因為平時對元件的基本屬性調整都比較熟悉，這一步進展的很快，馬上我就得到了第一版的”p仔元件庫v1.0″.

這個1.0版本，每個元件都是獨立的，而且有些元件，根據互動不同我還做了區分，比如帶清除的下拉選框和帶搜尋的下拉選框。我花了挺多時間在完善元件的互動上。

然而我很快就發現了亟須優化的點：元件庫應該按照某種分類準則進行合併，否則找元件的效率太低了。

三、STEP2：元件庫的分類合併

在學習了別人成熟元件庫的分類方式後，我決定採取如下分法：

1. 基礎元件（哪都可以用）
2. 介面元件（web列表頁這類介面）
3. 彈出元件（彈出表單、對話方塊）
4. 提示元件（徽標、氣泡和提示）
5. 常用icon
6. 常用記錄表格

這裡只是在1.0的基礎上，建立了資料夾對元件進行歸類，在資料夾下，依舊是獨立一個個的元件。

隨後我想起了一個問題， 為什麼我見過的大廠設計規範，都是做的大元件而不是獨立元件呢？ 大元件的意思是，比如按鈕元件，裡面其實包含了關鍵按鈕、普通按鈕、提示按鈕等幾個基礎元件。

（有讚的按鈕大元件，並不是只有1個元件）

為什麼要把相同性質的元件放在同一個“大元件”裡呢？經過DIY的元件庫1.0後發現，如果元件都是獨立的，使用時找元件是在axure介面的左下角元件區域，axure的元件區一般會比較小，檢索效率低。

（axure工作介面的元件視窗是比較小的）

那麼封裝成大元件後，用的時候先拖到畫布裡，再直接選取想要的元件複製出來就行。因為畫布的空間大，而且允許縮放，再加上自己對自己元件庫的熟悉，檢索效率要比在元件工作窗中檢索定位的效率要高。操作步驟如下：

1. 把大元件拉到畫布中；
2. 在畫布中選中想要的元件，用ctrl+滑鼠左鍵拖拽複製；
3. 用完後將大元件在畫布中移除。

（大元件拖拽到畫布，用拖拽複製，用完後再把大元件刪去）

相比散裝元件， 大元件的優勢在於畫圖時元件的檢索效率上，畫布中的檢索效率要大大優於元件視窗。 如果沒有體驗過從1.0到2.0的迭代過程，其實很難感知到這一層做法的優勢。

四、STEP3：元件庫的加減法

1. 加法怎麼做？

在多個專案的錘鍊下，會發現網頁框架、上傳元件，甚至是B端最常用的web列表頁，彈出表單都是高頻元件。 做元件庫的最大目的就是提高效率，而不是執著於元件的抽象和原子化。 高頻使用的元件都適合放到元件庫裡。

比如B端的列表頁，基本都需要支援批量匯入資料，那直接把匯入資料的彈窗、匯入中、匯入結果等封裝成一個元件，那用到批量匯入業務的原型，只需要把這個”批量匯入資料“的元件拉出來使用即可。

（批量匯入資料元件，包括預設情況、上傳中以及結果頁）

2. 減法怎麼做？

有些業務可能不適用預設尺寸或樣式，需要進行定製化改動，那我們還需要 讓元件庫有良好的擴充套件性。

我發現之前花費了大力氣的元件互動，這時候反而成了一個麻煩，因為元件包含了動態面板以及更多元素，改一個尺寸可能牽扯到多個面板內多個元素的改動，但是axure不允許跨面板選中同時改動，因此只能一個個去改，並且極容易改漏了地方。

比如一個帶清除的下拉選框元件，如果僅需要改變寬度，就需要更改：選框的動態面板寬度、動態面板內矩形的寬度、調整清除icon定位、下拉列表的面板寬度、下拉列表中繼器中的選項矩形寬度，涉及多達5處調整，這和元件庫追求效率的核心訴求背道而馳。

（示例：帶取消的下拉選框，擴充套件時涉及至少5處調整）

所以我刪繁就簡，把帶互動的元件都統一做一個靜態版的用於原型展示。動態版本保留在元件庫，在需要展示或者定義互動的時候作為說明，但是具體原型中，只使用靜態元件，保持高效擴充套件。

做了減法的下拉選框元件，擴充套件時只需要關注基本屬性，更多的屬性和互動通過備註進行說明：

最後總結一下製作元件庫的3個關鍵步驟：

1. 逐一製作每個元件，感受一下基礎的屬性修改，快速做出MVP；
2. 把元件進行分類分組，並把同類項封裝成1個大元件，效率再次躍升；
3. 根據個人使用場景進行自我迭代，給元件庫做加減法，可以封裝更大的元件，也可以簡化為完全靜態的原型製作法。

五、御劍於心，人劍合一

我想起以前玩仙劍奇俠傳，就很崇拜劍仙，御劍而行，人劍合一，那是劍的最高境界。Axure就是產品經理的手中劍，除了“唯手熟爾”，更需要人劍合一的認知突破。

產品經理的核心價值，並不在於對axure的熟練使用，因為沒有一個職業會把熟練使用工具當成核心價值，但是隻有提高自己的工具熟練度，才能有更多的時間和精力可以投入到對需求的思考和實現的權衡上。

持續思考，持續升級自己，這不正是做產品經理最大的樂趣嗎？[]~(￣▽￣)~*

本文由@產品經理P仔 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。

給作者打賞，鼓勵TA抓緊創作！