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

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

而我這篇文章側(cè)重于講方法論。從定義元件庫的結(jié)構(gòu)，到如何設(shè)計每個元件。點擊預(yù)覽元件庫。

一、前言

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

這些元件庫當(dāng)然不錯，但是存在幾個問題。

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

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

二、定制元件庫的思路

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

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

拆分產(chǎn)品工作

移動端原型的具體設(shè)計有四步驟：

定架構(gòu)→畫頁面→加交互→寫邏輯

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

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

元件庫的結(jié)構(gòu)

按照上述的產(chǎn)品工作拆分，可以得到對應(yīng)的元件庫結(jié)構(gòu)。

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

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

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

接下來我們一一來講解如何設(shè)計。

三、元件庫的設(shè)計原則

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

配色只使用黑白灰

勿用彩色，這樣不會影響視覺設(shè)計師定義視覺風(fēng)格的思路，以及不會誤導(dǎo)視覺設(shè)計師。

使用默認元件加工而成

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

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

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

盡量不要導(dǎo)入位圖

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

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

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

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

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

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

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

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

四、頁面組件

由于定架構(gòu)這個比較復(fù)雜，大部分初級PM不懂。

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

頁面框架

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

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

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

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

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

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

視覺組件

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

五、交互組件

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

常見提示

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

鍵盤

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

手勢

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

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

七、邏輯要點

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

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

八、畫圖建模

這個屬于進階技能，有些復(fù)雜。但是一旦學(xué)會，你的畫原型體系應(yīng)該比較健全了。

功能流程

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

頁面流程

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

實體關(guān)系模型

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

狀態(tài)機

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

用例圖

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

九、其他

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

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

頁面狀態(tài)

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

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

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

十、總結(jié)

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

相關(guān)閱讀

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

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

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

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

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

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

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

#專欄作家#

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

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