視覺設計師有自己的組件來定義視覺規(guī)范，前端工程師有系統(tǒng)SDK自帶的UIkit調用，而我們產品經理也應該有一套適合自己的元件庫來提升畫原型的效率。

網上有不少文章叫你如何使用Axure的元件庫功能，側重于講工具使用。

而我這篇文章側重于講方法論。從定義元件庫的結構，到如何設計每個元件。點擊預覽元件庫。

一、前言

有不少大公司提供了Axure元件庫可以下載回來使用，比如餓了么用戶端Web元件庫、阿里巴巴后臺Web元件庫、Axure官方元件庫，小樓的APP元件庫。

這些元件庫當然不錯，但是存在幾個問題。

• 不是為自己設計的，不知道運用到什么場景
• 帶有強烈的公司風格，無法通用，只能借鑒
• 配色有強烈的視覺風格，很難適合自己
• 很多元件是截圖，不太通用
• 有很多無用的元件，不知道該刪除還是保留

建議每個PM為自己定制元件庫并長期更新，這樣能夠極大的提升自己設計原型的效率，而且可以保證原型整體的視覺統(tǒng)一。

二、定制元件庫的思路

該元件庫存放了一個個元件，而且必須是常用的。并且需要保證這些元件在設計其他手機APP的時候，也大部分適用。

從PM畫原型的工作中，我們其實梳理出大概有哪些工作，哪些可以轉化成通用元件。

拆分產品工作

移動端原型的具體設計有四步驟：

定架構→畫頁面→加交互→寫邏輯

• 定架構的過程中，畫業(yè)務流程、功能流程、頁面流程的時候，需要用到哪些圖形。
• 畫頁面的過程中，大概有哪些常見的組件呢。有頁面本身、視覺組件等。
• 加交互的過程中，大概有哪些東西呢，比如彈窗、吐司提示，模態(tài)視圖等。有時候也需要用手勢表示一下邏輯，畢竟Axure的手勢對移動端支持不夠。
• 寫邏輯的過程中，可能需要用到一些常見的邏輯，也可以放進去。這一點看各自的需求。

需要注意的是，雖然我們遵循Axure的命名規(guī)則叫它元件庫，但本質上和Axure默認的Default、flow、icon元件庫是有區(qū)別的。前者側重于功能組件，后者側重于最細粒度的控件。事實上前者是控件的組合，稱之為組件庫其實更合適。

元件庫的結構

按照上述的產品工作拆分，可以得到對應的元件庫結構。

請注意Axure的元件庫在載入的時候，不支持多級目錄。請盡量設置成一級。

或者像我這樣命名多層目錄，雖然是多層，但是最終載入的時候，自己還是能夠清晰理解的。

最終載入元件庫的效果如下：

接下來我們一一來講解如何設計。

三、元件庫的設計原則

之所以你從網上下載的元件庫不太好用，是因為未遵循以下原則。

配色只使用黑白灰

勿用彩色，這樣不會影響視覺設計師定義視覺風格的思路，以及不會誤導視覺設計師。

使用默認元件加工而成

因為是默認元件，所以原型的視覺風格都是統(tǒng)一的配色黑白灰，統(tǒng)一的控件樣式。

默認元件大家都很熟悉，當在rp中插入該元件庫中的組件，如需二次修改也很方便。

默認元件不自帶交互不帶注釋不帶有命名，如果你使用網上下載的元件，那么有很多干擾信息，定制元件庫的時候修改起來特別麻煩。

盡量不要導入位圖

往往該圖表示了一定含義，無法用到在其他項目。

很占空間，如果二次壓縮又會模糊。

補充一點，有時候需要圖標表示重點內容，可以導入svg的矢量圖來配合著設計組件。不占空間而且通用。

元件尺寸基于同一機型制作而成

如果不是基于某一機型的分辨率制作，那會導致制作的原型中的控件，尺寸不協(xié)調，不專業(yè)，并且視覺設計師很難理解功能。

以iPhone6/6s/7的邏輯分辨率制作

也就是375×667，以這個分辨率制作的原型，可以基本適配所有的iOS和Android機型，所以倒推回來，元件庫也應該以這個尺寸來設計。

具體的可以查看我的文章《為什么375×667是移動端原型的最佳分辨率》，以及《如何在Axure中正確設置APP原型的尺寸》。

四、頁面組件

由于定架構這個比較復雜，大部分初級PM不懂。

我們先從最簡單常見的頁面組件來講，也就是APP中最常見的視覺組件、基礎功能。

頁面框架

我所謂的頁面框架是指這個. 每設計一個頁面都需要用到的公用部分。

你也可以在rp文件中定義可脫離母版來多次使用，但是其他rp不通用。所以還是推薦用元件庫的方式來滿足重復使用的需求。

頁面框架有帶手機框和不帶手機框兩類。特別反感使用帶手機框的頁面框架。除了花哨沒有任何價值。而且無法設計超過一屏幕高度的內容。

如果不帶手機框，就不會有這個問題。此時還有2種做法：帶狀態(tài)欄和不帶狀態(tài)欄。

至于你選擇帶狀態(tài)欄的375×667，還是不帶狀態(tài)欄的375x(667-20狀態(tài)欄)，因人而異。我因為要求自己的 APP原型可以在手機上完美體驗，所以選擇的是375×647。

但是不管選哪種，你設計的其他元件如果需要包含頁面框架，都應該遵循該標準。

視覺組件

Axure默認元件庫中自帶了一些常見控件，這里不重復做。我只做常見的視覺組件，以及常見的小功能單元。

五、交互組件

將常見的交互組件提取出來，大概有以下三種。

常見提示

常見的toast提示、alert彈窗、小紅點。

鍵盤

常見的一些鍵盤，使用的是截圖。盡量少用，除非必要。

手勢

常用的大概有八種，iOS官方人機交互設計規(guī)范中定義了。而Android官方定義了28種，很多華而不實，不用也罷。

手勢元件可以在Axure無法做出你的交互，或者做起來很麻煩的時候，直接用它來快速表示。

七、邏輯要點

我把所有常見的控件的邏輯，都梳理了一遍。比如你要寫密碼框、手機號輸入框等的邏輯，直接使用和修改值即可。

時間有限，我只做了2個。大家可以根據(jù)自己的需求，參考這篇文章來制作APP文本框通用的輸入規(guī)則。

八、畫圖建模

這個屬于進階技能，有些復雜。但是一旦學會，你的畫原型體系應該比較健全了。

功能流程

相關的介紹，可以查看我的文章《如何正確地畫出頁面流程圖》。

頁面流程

相關的介紹，可以查看我的文章《如何正確的畫出功能流程圖》。

實體關系模型

相關的介紹，可以查看我的文章《如何用ER圖繪制業(yè)務實體模型》。

狀態(tài)機

相關的介紹，可以查看我的文章《如何繪畫狀態(tài)機來描述業(yè)務的變化》。

用例圖

屬于UML的范疇，了解即可。

九、其他

當然也可能還有其他的，根據(jù)自身需求而定。

不建議把獨立的圖標導入到這個“組件庫”，請單獨使用FontAwesome或者SVG元件庫等。

頁面狀態(tài)

另外頁面狀態(tài)也可以加進去，比較常用。

不過也可以作為全局規(guī)范寫到單獨的頁面給到視覺設計師、前端工程師。

詳見我的文章《移動端APP應該如何定義頁面規(guī)范》和《全面通用的移動端產品規(guī)范V2.0》。

十、總結

強烈推薦每個PM定制一份適合于自己的元件庫，絕對會讓你提升工作效率，而且可以梳理自己對組件、控件以及架構的理解。

相關閱讀

如何正確地畫出頁面流程圖

如何正確的畫出功能流程圖

如何用ER圖繪制業(yè)務實體模型

如何繪畫狀態(tài)機來描述業(yè)務的變化

APP文本框通用的輸入規(guī)則

移動端APP應該如何定義頁面規(guī)范

全面通用的移動端產品規(guī)范V2.0

#專欄作家#

浪子，業(yè)務型PM，浪子PRD系列51prd.com，公眾號langzisay。

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