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

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

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

1.1 確定模塊

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

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

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

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

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

二、組件框架制作

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

2.1 框架界面布局

2.2.1 Axure 樹形頁(yè)面框架

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

2.2.2 展示框架界面布局

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

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

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

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

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

幾個(gè)關(guān)鍵點(diǎn)：

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

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

2.2.1 多頁(yè)面統(tǒng)一

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

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

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

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

2.2.3 切換菜單

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

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

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

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

幾個(gè)關(guān)鍵點(diǎn)：

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

2.3.1 內(nèi)容滾動(dòng)

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

2.3.2 折疊菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、規(guī)范制作

3.1 顏色規(guī)范制作

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

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

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

3.2 字體規(guī)范制作

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

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

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

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

3.4 按鈕規(guī)范制作

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

• 按用途：焦點(diǎn)按鈕、普通按鈕、幽靈按鈕、禁用按鈕、功能按鈕、危險(xiǎn)按鈕；
• 按功能：操作按鈕、帶圖標(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)類型進(jìn)行制作，圖標(biāo)大小統(tǒng)一48px的大小進(jìn)行排布。

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

3.6 常用小部件制作

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

3.7 其他頁(yè)面的搭建制作

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

結(jié)語(yǔ)

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

相關(guān)閱讀

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

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

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

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