PM基本功

首頁 > 科技

PM基本功

來源:去哪玩 釋出時間:2022-09-26 16:51

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

一、你也是原型苦手嗎?

產品經理的軟體技能裡,原型工具可以說是產品經理吃飯的家當,我個人常用的原型工具是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. 用完後將大元件在畫布中移除。

上一篇:決定股價的因... 下一篇:三星拆分晶片...
猜你喜歡
熱門閱讀
同類推薦