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

語言: CN / TW / HK

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

一、你也是原型苦手嗎?

產品經理的軟件技能裏,原型工具可以説是產品經理吃飯的家當,我個人常用的原型工具是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抓緊創作!