PM基本功 | 如何製作一個屬於自己的Axure元件庫
畫原型是每個產品經理的基本功,很多人平常工作用的都是原型產品中預設的元件庫,但想要提高效率,就需要做一個高效的、完全貼合自己使用習慣的元件庫。本文作者對此展開了分析,希望對你有幫助。
一、你也是原型苦手嗎?
產品經理的軟體技能裡,原型工具可以說是產品經理吃飯的家當,我個人常用的原型工具是Axure。當我是個剛入門的小菜鳥時,用Axure畫原型線稿,用的是預設的元件庫,每次都把對應的元件拖動出來進行更改。比如在製作一個表單時,就要經歷以下步驟:
- 拖出一個文字標籤元件作為欄位名標籤。必要時要加上* 必填標記並且要改成紅色字色
- 拉出一個單行文字輸入框元件,按規範改一下元件的寬度、高度、圓角
- 重複1、2直到完成表單設計
當我成為了一名熟練的畫圖仔之後,我知道了還有元件庫這種東西,於是我下載了好多個元件庫,但是用的時候,我發現別人的元件庫要不做的特別龐大(大廠的設計規範元件庫,事無鉅細),檢索元件時花費的時間更多了,要不就是殘缺的半成品,總之就是效率不高,所以相當長一段時間內,我都是用預設的元件庫。
前不久,我受高人指點: 做一個自己的元件庫是產品經理必須經歷的試煉。 我醍醐灌頂,現在我需要的不是機械化地快速重複,而是找到變革工具讓效率有質的飛躍,而當前我需要的就是一個高效的、完全貼合我使用習慣的元件庫。汽車跑的比馬車快,可不是因為輪子蹬的比馬蹄快。
二、STEP1:把每個元件畫一遍
萬事開頭難,起初我並沒有對“我的元件庫應該具備哪些內容“有一個明確的答案,於是根據 產品經理先做MVP再迭代優化 的DNA,我準備把所有的元件一個個實現,這是最笨的也是最實在的辦法。
於是乎我把常見的網頁框架元件,如網頁頭部、主導航選單、按鈕等,以及表單元件,如單行文字、下拉選框等元件,都逐一實現。因為平時對元件的基本屬性調整都比較熟悉,這一步進展的很快,馬上我就得到了第一版的”p仔元件庫v1.0″.
這個1.0版本,每個元件都是獨立的,而且有些元件,根據互動不同我還做了區分,比如帶清除的下拉選框和帶搜尋的下拉選框。我花了挺多時間在完善元件的互動上。
然而我很快就發現了亟須優化的點:元件庫應該按照某種分類準則進行合併,否則找元件的效率太低了。
三、STEP2:元件庫的分類合併
在學習了別人成熟元件庫的分類方式後,我決定採取如下分法:
- 基礎元件(哪都可以用)
- 介面元件(web列表頁這類介面)
- 彈出元件(彈出表單、對話方塊)
- 提示元件(徽標、氣泡和提示)
- 常用icon
- 常用記錄表格
這裡只是在1.0的基礎上,建立了資料夾對元件進行歸類,在資料夾下,依舊是獨立一個個的元件。
隨後我想起了一個問題, 為什麼我見過的大廠設計規範,都是做的大元件而不是獨立元件呢? 大元件的意思是,比如按鈕元件,裡面其實包含了關鍵按鈕、普通按鈕、提示按鈕等幾個基礎元件。
(有讚的按鈕大元件,並不是只有1個元件)
為什麼要把相同性質的元件放在同一個“大元件”裡呢?經過DIY的元件庫1.0後發現,如果元件都是獨立的,使用時找元件是在axure介面的左下角元件區域,axure的元件區一般會比較小,檢索效率低。
(axure工作介面的元件視窗是比較小的)
那麼封裝成大元件後,用的時候先拖到畫布裡,再直接選取想要的元件複製出來就行。因為畫布的空間大,而且允許縮放,再加上自己對自己元件庫的熟悉,檢索效率要比在元件工作窗中檢索定位的效率要高。操作步驟如下:
- 把大元件拉到畫布中;
- 在畫布中選中想要的元件,用ctrl+滑鼠左鍵拖拽複製;
- 用完後將大元件在畫布中移除。
(大元件拖拽到畫布,用拖拽複製,用完後再把大元件刪去)
相比散裝元件, 大元件的優勢在於畫圖時元件的檢索效率上,畫布中的檢索效率要大大優於元件視窗。 如果沒有體驗過從1.0到2.0的迭代過程,其實很難感知到這一層做法的優勢。
四、STEP3:元件庫的加減法
1. 加法怎麼做?
在多個專案的錘鍊下,會發現網頁框架、上傳元件,甚至是B端最常用的web列表頁,彈出表單都是高頻元件。 做元件庫的最大目的就是提高效率,而不是執著於元件的抽象和原子化。 高頻使用的元件都適合放到元件庫裡。
比如B端的列表頁,基本都需要支援批量匯入資料,那直接把匯入資料的彈窗、匯入中、匯入結果等封裝成一個元件,那用到批量匯入業務的原型,只需要把這個”批量匯入資料“的元件拉出來使用即可。
(批量匯入資料元件,包括預設情況、上傳中以及結果頁)
2. 減法怎麼做?
有些業務可能不適用預設尺寸或樣式,需要進行定製化改動,那我們還需要 讓元件庫有良好的擴充套件性。
我發現之前花費了大力氣的元件互動,這時候反而成了一個麻煩,因為元件包含了動態面板以及更多元素,改一個尺寸可能牽扯到多個面板內多個元素的改動,但是axure不允許跨面板選中同時改動,因此只能一個個去改,並且極容易改漏了地方。
比如一個帶清除的下拉選框元件,如果僅需要改變寬度,就需要更改:選框的動態面板寬度、動態面板內矩形的寬度、調整清除icon定位、下拉列表的面板寬度、下拉列表中繼器中的選項矩形寬度,涉及多達5處調整,這和元件庫追求效率的核心訴求背道而馳。
(示例:帶取消的下拉選框,擴充套件時涉及至少5處調整)
所以我刪繁就簡,把帶互動的元件都統一做一個靜態版的用於原型展示。動態版本保留在元件庫,在需要展示或者定義互動的時候作為說明,但是具體原型中,只使用靜態元件,保持高效擴充套件。
做了減法的下拉選框元件,擴充套件時只需要關注基本屬性,更多的屬性和互動通過備註進行說明:
最後總結一下製作元件庫的3個關鍵步驟:
- 逐一製作每個元件,感受一下基礎的屬性修改,快速做出MVP;
- 把元件進行分類分組,並把同類項封裝成1個大元件,效率再次躍升;
- 根據個人使用場景進行自我迭代,給元件庫做加減法,可以封裝更大的元件,也可以簡化為完全靜態的原型製作法。
五、御劍於心,人劍合一
我想起以前玩仙劍奇俠傳,就很崇拜劍仙,御劍而行,人劍合一,那是劍的最高境界。Axure就是產品經理的手中劍,除了“唯手熟爾”,更需要人劍合一的認知突破。
產品經理的核心價值,並不在於對axure的熟練使用,因為沒有一個職業會把熟練使用工具當成核心價值,但是隻有提高自己的工具熟練度,才能有更多的時間和精力可以投入到對需求的思考和實現的權衡上。
持續思考,持續升級自己,這不正是做產品經理最大的樂趣嗎?[]~( ̄▽ ̄)~*
本文由@產品經理P仔 原創釋出於人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供資訊儲存空間服務。
給作者打賞,鼓勵TA抓緊創作!
- 為什麼你的東西越貴越好賣?
- 初創公司如何建立持續增長私域?流量圍繞公司,使用者經營圍繞公司
- 如何用產品思維去優雅地“拒絕”?
- 產品運營那50件事兒(5):如何做好客戶資產的反饋機制?
- 如何以用例驅動設計,寫出更高質量的PRD?
- 來談談,如何用程式設計師思維服務設計
- 下載量Top 1的內容社交軟體 —— TikTok產品分析&競品分析
- SaaS產品增效 | 小程式類產品設計方法探索
- 倉儲物流機器人:快倉、海柔創新“極速前進”
- 提升使用者分享率的N個套路(上),讓你睡覺的時候使用者依然增長
- 初創公司使用者定位的“域態經營”,解決從0~1轉入經營的問題
- 電商平臺首頁搜尋功能互動設計研究
- PM基本功 | 如何製作一個屬於自己的Axure元件庫
- 智慧汽車的產品體驗和創新
- “直播電商”帶貨場景分析
- 購票加速包能加速?買個心安罷了
- 如何為未來的車設計HMI?
- 內容創業公司到底管人還是管內容?“沙盤概念”經營你的公司
- 內容創業做培訓,必然失敗:在使用者需要當中活下去
- 設計問題中的不確定性