大家好，前一段時間我剛剛分享了一篇《打造高品質(zhì)Axure組件庫就是這么簡單》，意在分享給大家一個完整的打造axure組件的思維路徑。本文著重于整體制作的技巧思路分享，希望大家通過本文的閱讀能夠?qū)W到對自己有用的知識。

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

一、組件構(gòu)建思路

1.1 確定模塊

確定制作大模塊類別，這邊我將WebKit后臺組件分為了以下9大模塊：

1.2 細化各個模塊內(nèi)容

根據(jù)1.1定義的9大模塊，對每個模塊進行模塊細分，這個結(jié)構(gòu)定義就將作為后續(xù)我們制作導(dǎo)航的依據(jù)。

1.3 按流程執(zhí)行制作

按照之前前端組件打造的流程依次進行以下流程的實施，接下去我將會著重對“框架制作”和“規(guī)范制定”的執(zhí)行做深入剖析，為大家打開組件制作的神秘面紗。

二、組件框架制作

如何使用Axure做自適應(yīng)的框架適配不同的顯示器屏幕，分為以下5個步驟給大家講解如何快速只做一個框架層。

2.1 框架界面布局

2.2.1 Axure 樹形頁面框架

按照1.2細化后的模塊內(nèi)容進行Axure整體頁面的樹形結(jié)構(gòu)整理，用來指導(dǎo)后續(xù)的制作以及為下面制作框架頁面的跳轉(zhuǎn)提供對應(yīng)的頁面。

2.2.2 展示框架界面布局

定義好框架界面布局指導(dǎo)后面的內(nèi)容制作。

框架布局結(jié)果展示：

內(nèi)容區(qū)頁面布局結(jié)果展示：

2.2 頂部導(dǎo)航母版制作

我們來討論一下關(guān)于頂部導(dǎo)航的制作方式。

幾個關(guān)鍵點：

• 多頁面統(tǒng)一
• 導(dǎo)航自適應(yīng)
• 切換菜單

針對這幾個關(guān)鍵點我們分別采取的方法是：

2.2.1 多頁面統(tǒng)一

采用母版進行頂部導(dǎo)航的制作，這邊我采用的是母版套動態(tài)面板的組合形式以達到導(dǎo)航欄的自適應(yīng)長度變化。母版的好處是多頁面使用時，如果需要改動元素，只需要改動母版即可，其他頁面會統(tǒng)一進行變化，這一點和sketch軟件的組件功能有相似之處。

2.2.2 導(dǎo)航自適應(yīng)

采用動態(tài)面板的自適應(yīng)100%對導(dǎo)航的背景層做自適應(yīng)拉伸，這樣就可以保持導(dǎo)航的滿屏顯示。

uedart logo固定在左側(cè)，切換菜單動態(tài)面板估計在右側(cè)。

2.2.3 切換菜單

制作選項組，實現(xiàn)此5個菜單的切換選中效果，只有一個觸發(fā)選中，并設(shè)置好所有子菜單的點擊事件：點擊觸發(fā)選中和點擊跳轉(zhuǎn)頁面。

然后選擇所有子菜單一起設(shè)置對應(yīng)的懸停與選中效果，這邊我采用的變化選項為：字體顏色、填充顏色、不透明度。

2.3 左側(cè)折疊導(dǎo)航制作

我們來討論一下關(guān)于側(cè)邊導(dǎo)航的制作方式。

幾個關(guān)鍵點：

• 內(nèi)容滾動
• 折疊菜單

2.3.1 內(nèi)容滾動

內(nèi)容垂直滾動這樣效果還是容易實現(xiàn)的，我們左側(cè)的折疊導(dǎo)航采用動態(tài)面板的形式來制作，控制固定的高度，當(dāng)動態(tài)面板里的內(nèi)容超過固定高度即可實現(xiàn)滾動效果。

2.3.2 折疊菜單

折疊菜單的制作稍微復(fù)雜一點，但當(dāng)我們將其拆解開來，你會發(fā)現(xiàn)其實一樣，制作起來也是非常的so easy。

• 折疊菜單的兩種狀態(tài)：展開、收起
• 切換點擊內(nèi)容跳轉(zhuǎn)事件

（1）折疊菜單狀態(tài)的切換

這邊我們?nèi)匀徊捎玫氖莿討B(tài)面板的制作形式（會發(fā)現(xiàn)動態(tài)面板在Axure制作中是非常好用的），動態(tài)面板我們設(shè)置兩種狀態(tài)的切換：一種是折疊菜單展開的形體，一種是折疊菜單收起的形體。

細節(jié)處理：兩個動態(tài)面板直接留出1px的距離可以解決掉相關(guān)折疊動作操作后動態(tài)菜單移位問題。

（2）切換點擊跳轉(zhuǎn)

設(shè)置相關(guān)子菜單的選項組，這個在上面一步我們已經(jīng)進行了相關(guān)設(shè)置，并設(shè)置了第一個子菜單的選中，復(fù)制做第二個模塊的菜單時要講其他的選中狀態(tài)取消，側(cè)邊菜單選項組有且只能默認一個選中，如果預(yù)覽選中效果出不來，可能的原因就是設(shè)置了多個默認選中。

設(shè)置每個子菜單的點擊效果，這邊因為內(nèi)容區(qū)我們還沒有制作，我們可以等待內(nèi)容區(qū)搭建完成后進行此步的設(shè)置。

2.4 內(nèi)容區(qū)搭建

內(nèi)容區(qū)我們做的非常簡單，采用了一個內(nèi)聯(lián)框架來做后續(xù)內(nèi)容頁面的加載。

內(nèi)部的頁面主要分為：標(biāo)題欄、分割線、留白、主頁面區(qū)。

標(biāo)題欄、分割線的制作依然使用的是動態(tài)面板的制作思路，勾選100%寬度選項，即可實現(xiàn)適配不同網(wǎng)頁寬度。后續(xù)頁面按照制作好的標(biāo)準(zhǔn)頁面模板進行復(fù)制制作。

2.5 頁面結(jié)構(gòu)完善

以上4步我們已經(jīng)將組件框架的大部分內(nèi)容完成了，到達這一環(huán)節(jié)千萬不要掉以輕心，我們要整體檢查一次我們的模擬結(jié)果，我們會發(fā)現(xiàn)還有兩處細節(jié)沒有達成：

1. 載入頁面后各導(dǎo)航的選中狀態(tài)處理
2. 側(cè)邊導(dǎo)航已經(jīng)內(nèi)聯(lián)框架的自適應(yīng)

第1條的完善相對簡單一些，置于頁面后，設(shè)置頁面載入選項，進行相關(guān)選中與內(nèi)聯(lián)內(nèi)容區(qū)加載設(shè)置即可。

第2條的完善，我們將采用條件語句來進行判斷不同情況下的適配參數(shù)調(diào)整，我們一開始的布局頁面寬度是1440px，這里我們就采用瀏覽頁面加載的寬度與1440px的大小關(guān)系來進行設(shè)置，這樣可以適配大多數(shù)的筆記本與臺式機的瀏覽。

三、規(guī)范制作

3.1 顏色規(guī)范制作

在之前的一篇文章《不只是“設(shè)計”，產(chǎn)品思維賦予設(shè)計新動力！》我有寫到過關(guān)于情緒板提取色彩進行產(chǎn)品色彩定調(diào)的過程。

情緒板的提過程：關(guān)鍵詞提取、關(guān)鍵詞拓展、圖庫收集、顏色提取、顏色衍變。

UEDART的色彩主調(diào)也是通過這樣的方式來提取實現(xiàn)并根據(jù)具體的模塊加以排版的調(diào)整，形成了UEDART全套的色彩規(guī)劃模本。

3.2 字體規(guī)范制作

字體規(guī)范的制作，這個相對來說簡單一些，UI設(shè)計中都會有一套完整的字體使用規(guī)范，我們也可以借用UI設(shè)計的規(guī)范來進行復(fù)用，將我們的字體也進行規(guī)范化的調(diào)整。

3.3 其他元素規(guī)范制作

其他相關(guān)元素的規(guī)范制作：尺寸規(guī)范、分割線規(guī)范、標(biāo)注規(guī)范。

這里的規(guī)范主要是根據(jù)自己的所需自行定制自己想要的元素，并加以規(guī)范說明。

3.4 按鈕規(guī)范制作

按鈕的制作，將常用的按鈕歸類制作：

• 按用途：焦點按鈕、普通按鈕、幽靈按鈕、禁用按鈕、功能按鈕、危險按鈕；
• 按功能：操作按鈕、帶圖標(biāo)功能按鈕、下拉展開功能按鈕。

并制作相關(guān)懸停與選中效果，方便后面的復(fù)用。

3.5 圖標(biāo)規(guī)范制作

圖標(biāo)分為幾大類：常用圖標(biāo)、面性圖標(biāo)、線性圖標(biāo)、品牌圖標(biāo)、Ant圖標(biāo)。

這里為了方便后續(xù)使用，我采用了svg格式的圖標(biāo)類型進行制作，圖標(biāo)大小統(tǒng)一48px的大小進行排布。

為了后續(xù)圖標(biāo)庫能夠更好的應(yīng)用，特此做了圖標(biāo)對應(yīng)的Axure的rplib格式組件。

3.6 常用小部件制作

進行常用小部件的制作，輸入框、選擇器、選擇控件、數(shù)據(jù)驗證、滑塊選擇等，將此類小部件效果固化后，你會發(fā)現(xiàn)再去做其他頁面的構(gòu)建得心應(yīng)手。

3.7 其他頁面的搭建制作

按照一開始定下的頁面結(jié)構(gòu)，加上定好的規(guī)范進行其他頁面的逐步制作，這個過程是相對耗時的，我們可以給自己定一個計劃，一天完成多少個頁面（低保真），后面再來逐步調(diào)整對應(yīng)的高保真效果，這樣做起來會快速很多

結(jié)語

希望大家通過本文的學(xué)習(xí)，都能夠快速搭建并且制作出自己的組件規(guī)范，活學(xué)活用，將知識真正的掌握起來。筆者也會繼續(xù)努力前行，為大家分享更多更好的知識點。

相關(guān)閱讀

《打造高品質(zhì)Axure組件庫，就是這么簡單！》

《不只是“設(shè)計”，產(chǎn)品思維賦予設(shè)計新動力！》

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

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