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

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

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

一、前言

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

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

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

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

二、定制元件庫的思路

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

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

拆分產(chǎn)品工作

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

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

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

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

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

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

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

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

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

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

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

之所以你從網(wǎng)上下載的元件庫不太好用，是因?yàn)槲醋裱韵略瓌t。

配色只使用黑白灰

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

使用默認(rèn)元件加工而成

因?yàn)槭悄J(rèn)元件，所以原型的視覺風(fēng)格都是統(tǒng)一的配色黑白灰，統(tǒng)一的控件樣式。

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

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

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

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

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

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

元件尺寸基于同一機(jī)型制作而成

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

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

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

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

四、頁面組件

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

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

頁面框架

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

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

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

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

至于你選擇帶狀態(tài)欄的375×667，還是不帶狀態(tài)欄的375x(667-20狀態(tài)欄)，因人而異。我因?yàn)橐笞约旱?a href="http://www.codemsi.com/rp/623635.html" target="_blank" rel="noopener noreferrer"> APP原型可以在手機(jī)上完美體驗(yàn)，所以選擇的是375×647。

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

視覺組件

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

五、交互組件

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

常見提示

常見的toast提示、alert彈窗、小紅點(diǎn)。

鍵盤

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

手勢

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

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

七、邏輯要點(diǎn)

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

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

八、畫圖建模

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

功能流程

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

頁面流程

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

實(shí)體關(guān)系模型

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

狀態(tài)機(jī)

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

用例圖

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

九、其他

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

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

頁面狀態(tài)

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

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

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

十、總結(jié)

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

相關(guān)閱讀

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

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

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

如何繪畫狀態(tài)機(jī)來描述業(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)載。