本文介紹的關于如何打造高品質(zhì)Axure組件的思路，希望能夠給大家?guī)硪恍┬碌乃悸吠卣购椭R補給。

提高效率是節(jié)約時間成本的唯一途徑，產(chǎn)品組件庫地打造可以有效的幫助我們解決一部分問題。

為什么要建立組件庫？

減少重復性工作，讓產(chǎn)品整體風格更統(tǒng)一，提高原型效率。

組件概念由來已久，我們生活中的許多事物都應用了組件/模塊的概念。如樂高積木的概念，基礎小積木的多次組合，構建出完全不一樣的整體。不管是產(chǎn)品、設計、開發(fā)，在我們的工作中，如果合理運用了“組件庫”我們的工作將會事半功倍。

基礎元件

最終組合

最終效果：http://www.uedart.com/demo.html

實施目標

那只針對產(chǎn)品而言，如何構建一套適合產(chǎn)品設計的組件庫呢？本文通過web前端的組件打造的實際案例向各位介紹如何進行“組件庫”的搭建。

我們起初都會有很多計劃，立很多Flag，真正能做到的確是少之又少，如何保證自己的執(zhí)行力，是我們收獲成功的重要手段。

不妨將產(chǎn)品常用的項目管理職能運用到本次的組件制作中，推動本次Web端的組件構建。

具體實施

1. 組件結構打造——基礎夯實

根據(jù)目標導向?qū)?大模塊進行結構，細分如下：

2. 組件框架構建——外殼確定

確定好細分結構內(nèi)容后，可以開始著手制作組件的框架，用以展示組件方便查看與制作，我會根據(jù)以下幾方面著重考慮 。

（1）適用性

瀏覽的適用性：支持筆記本1366*768、大屏1920*1080的顯示屏瀏覽。

結構的適用性：此結構具有通用性，不僅滿足本組件的展示，作為一個展示類的框架可以適用于很多場景，如：簡單官網(wǎng)的展示、文章瀏覽的展示。如果大家需要構建自己的組件，也可以活用此框架來構建自己全新的組件庫。

（2）便捷性

好的交互組件除了其內(nèi)容，更主要的其易用便捷性，故此才有了此組件框架的構建，目的就是為了可以更加便捷的查看與查找，我按照大模塊進行了頻道切換，各自細節(jié)拆分的板塊也能看進行快速的切換查看。

這樣整體的交互切換就十分便捷，能夠快速的找到對應的板塊進行效果查看進行復制使用。為了更加方便的使用，后期迭代版本2.0正在考慮rplib的組件格式的整理輸出，更加方便大家的使用。

（3）拓展性

除了能夠適用于此六大模塊內(nèi)容的展示外，如有新的模塊加入也能夠很好的拓展其內(nèi)容，我在框架里加入了模塊這一頻道，為的就是后期的迭代版本擁有更多的可能性，拓展一些常用的流程性組件，如：登入/注冊、支付、設置、發(fā)布、列表流等常用組件流。

3. 組件設計規(guī)范——筋脈打通

確定好了組件框架，接下來就是內(nèi)容的整合制作，在制作過程前可以優(yōu)先確立設計的規(guī)范，這有助于我們統(tǒng)一各組件頁面的風格，讓整體組件更具品牌性。

（1）設計規(guī)范——色彩定調(diào)

定義色彩：確定主色、輔助色、點綴色、背景色。

字體顏色：深、中、淺。

如有需要還可以設定暗色模式的色彩風格，現(xiàn)在mac新系統(tǒng)的暗色模式十分流行，大家也可以嘗試一下，我這邊為了通用性，在設計顏色時就已經(jīng)考慮到了暗色模式，字體顏色做了一些修改，主色、輔助色、點綴色可以兼容。

（2）設計規(guī)范——字體大小

在設計規(guī)范中，字體大小也是不能忽視的，大小的定義可以區(qū)分信息，讓內(nèi)容排版更有層級，提高組件整體的可閱讀性。

（3）設計規(guī)范——元素定義

元素的定義，可能起初大家對這個不大明白，我這邊簡單描述下，所謂的元素即組件中的最小單元，很多組件大多是由這些最小單元組合而成的，一旦這些元素定義完成之后，后面的組件制作就相當容易。所以，在我們制作中，我們可以優(yōu)先把這部分的元素制作完善細化，以方便后面復雜組件的組合。

4. 組件內(nèi)容制作——肉體塑造

第1階段：低保真組件內(nèi)容制作

按照組件結構為指導，初期制作低保真組件，豐富每個模塊的元件內(nèi)容，這個階段不需要過度重視動效與顏色。

第2階段：確立組件規(guī)范

進行規(guī)劃的確立，用于指導后期高保真組件優(yōu)化的方向，有的同學會問：“什么時候進行規(guī)劃確立最為合適？”

我的回答：

這要依據(jù)起初項目團隊的成員，以及各個成員的特點而定。

如果本身制作低保真的成員本身就有一套比較完善的低保真制作流程，這個高保真的規(guī)范確立大可在低保真進行到一大半的時候確立，用于指導后期高保真優(yōu)化的方向。

如果制作低保真的成員本身就很疑惑不知道如何下手保證統(tǒng)一性，這個規(guī)范可以在起初幾個頁面制作完畢時進行制定，指導低保真同學的設計制作。

本項目的團隊屬于第一種情況，本身OMINI.BASS的制作水平很高，這樣我在后期的優(yōu)化工作也減輕了不少負擔，更多的是色調(diào)統(tǒng)一、小細節(jié)處理、動效優(yōu)化、排版優(yōu)化的工作

第3階段：依據(jù)規(guī)劃進行組件優(yōu)化

既然已經(jīng)制定了規(guī)劃，所有的細節(jié)處理就必須按照既定的規(guī)范去實行，確保細節(jié)的統(tǒng)一，組件的品牌性。

本次高保真優(yōu)化大家依然可以分幾個步驟去實行（這樣的分步處理方式可能是我做任何工作都喜歡采用的方式）把目標確立后，細化工作內(nèi)容，拆分每個內(nèi)容分配具體完成的時間，可以高效的預估完成任務的時長，這樣也能夠很順利的推動項目進展。

• 第1輪優(yōu)化：顏色、字體、大小基礎定義規(guī)劃的調(diào)整；
• 第2輪優(yōu)化：交互細節(jié)優(yōu)化處理；
• 第3輪優(yōu)化：這個階段我放在了排版的過程中。

第4階段：按照排版進行組件內(nèi)容的重排版

當高保真第2輪優(yōu)化進行完畢后，我就可以我的排版整合工作，這個過程主要干兩件事：查缺補漏、細節(jié)終審。

1. 查驗有沒有落掉的組件以及計劃初期定好的頁面內(nèi)容；
2. 瀏覽一次所有的生成頁面的跳轉(zhuǎn)交互，確保細節(jié)的完整性。

內(nèi)容梳理說明

1. 排版布局

我們在制作的過程中的流程是優(yōu)先制作低保真，制作低保真的時候沒有太過注重排版性，這是基于時間效率的考量，后期高保真優(yōu)化過程必然是需要重新調(diào)整相關的細節(jié)尺寸，這時候再進行更改細分板塊的內(nèi)容排版更為合理，在時間效率上也不會造成時間的重復浪費。

本次排版主要是考慮到左右的閱讀格式，左側(cè)導航切換板塊，右側(cè)進行內(nèi)容瀏覽。

2. 交互制作

（1）懸停交互

背景顏色變化的懸停效果：

字體顏色變化的懸停效果：

（2）彈窗交互

彈窗交互的動作統(tǒng)一，我的彈窗的交互參數(shù)基本保持一致，動畫模式：逐漸 時間：300ms。

（3）加載動效

加載動效分為兩類：一類背景層不受影響，這時候我們可以輸出帶背景的gif格式。

一類背景層受影響，這時候我們必須輸出透明背景的gif格式。

展示效果

最終展示效果瀏覽查看網(wǎng)址：http://www.uedart.com/demo.html

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

題圖來自Unsplash，基于CC0協(xié)議