點擊上方藍字，+關注行設視覺

黑馬家族成員原創發布于行設視覺，轉載請注明出處。

作者 |?時光若刻

http://www.woshipm.com/rp/2527010.html

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

最終效果瀏覽

https://uedart.com/demo/templatesWebKit2/index.html

一、組件構建思路

1.1 確定模塊

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

1.2 細化各個模塊內容

根據1.1定義的9大模塊，對每個模塊進行模塊細分，這個結構定義就將作為后續我們制作導航的依據。

1.3 按流程執行制作

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

二、組件框架制作

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

2.1 框架界面布局

2.2.1 Axure 樹形頁面框架

按照1.2細化后的模塊內容進行Axure整體頁面的樹形結構整理，用來指導后續的制作以及為下面制作框架頁面的跳轉提供對應的頁面。

2.2.2 展示框架界面布局

定義好框架界面布局指導后面的內容制作。

框架布局結果展示：

內容區頁面布局結果展示：

2.2 頂部導航母版制作

我們來討論一下關于頂部導航的制作方式。

幾個關鍵點：

• 多頁面統一

• 導航自適應

• 切換菜單

針對這幾個關鍵點我們分別采取的方法是：

2.2.1 多頁面統一

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

2.2.2 導航自適應

采用動態面板的自適應100%對導航的背景層做自適應拉伸，這樣就可以保持導航的滿屏顯示。

uedart logo固定在左側，切換菜單動態面板估計在右側。

2.2.3 切換菜單

制作選項組，實現此5個菜單的切換選中效果，只有一個觸發選中，并設置好所有子菜單的點擊事件：點擊觸發選中和點擊跳轉頁面。

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

2.3 左側折疊導航制作

我們來討論一下關于側邊導航的制作方式。

幾個關鍵點：

• 內容滾動

• 折疊菜單

2.3.1 內容滾動

內容垂直滾動這樣效果還是容易實現的，我們左側的折疊導航采用動態面板的形式來制作，控制固定的高度，當動態面板里的內容超過固定高度即可實現滾動效果。

2.3.2 折疊菜單

折疊菜單的制作稍微復雜一點，但當我們將其拆解開來，你會發現其實一樣，制作起來也是非常的so easy。

• 折疊菜單的兩種狀態：展開、收起

• 切換點擊內容跳轉事件

(1)折疊菜單狀態的切換

這邊我們仍然采用的是動態面板的制作形式(會發現動態面板在Axure制作中是非常好用的)，動態面板我們設置兩種狀態的切換：一種是折疊菜單展開的形體，一種是折疊菜單收起的形體。

細節處理：兩個動態面板直接留出1px的距離可以解決掉相關折疊動作操作后動態菜單移位問題。

(2)切換點擊跳轉

設置相關子菜單的選項組，這個在上面一步我們已經進行了相關設置，并設置了第一個子菜單的選中，復制做第二個模塊的菜單時要講其他的選中狀態取消，側邊菜單選項組有且只能默認一個選中，如果預覽選中效果出不來，可能的原因就是設置了多個默認選中。

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

2.4 內容區搭建

內容區我們做的非常簡單，采用了一個內聯框架來做后續內容頁面的加載。

內部的頁面主要分為：標題欄、分割線、留白、主頁面區。

標題欄、分割線的制作依然使用的是動態面板的制作思路，勾選100%寬度選項，即可實現適配不同網頁寬度。后續頁面按照制作好的標準頁面模板進行復制制作。

2.5 頁面結構完善

以上4步我們已經將組件框架的大部分內容完成了，到達這一環節千萬不要掉以輕心，我們要整體檢查一次我們的模擬結果，我們會發現還有兩處細節沒有達成：

載入頁面后各導航的選中狀態處理

側邊導航已經內聯框架的自適應

第1條的完善相對簡單一些，置于頁面后，設置頁面載入選項，進行相關選中與內聯內容區加載設置即可。

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

三、規范制作

3.1 顏色規范制作

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

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

UEDART的色彩主調也是通過這樣的方式來提取實現并根據具體的模塊加以排版的調整，形成了UEDART全套的色彩規劃模本。

3.2 字體規范制作

字體規范的制作，這個相對來說簡單一些，UI設計中都會有一套完整的字體使用規范，我們也可以借用UI設計的規范來進行復用，將我們的字體也進行規范化的調整。

3.3 其他元素規范制作

其他相關元素的規范制作：尺寸規范、分割線規范、標注規范。

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

3.4 按鈕規范制作

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

? ? ? a.按用途：焦點按鈕、普通按鈕、幽靈按鈕、禁用按鈕、功能按鈕、危險按鈕；

? ? ? ?b.按功能：操作按鈕、帶圖標功能按鈕、下拉展開功能按鈕。

并制作相關懸停與選中效果，方便后面的復用。

3.5 圖標規范制作

圖標分為幾大類：常用圖標、面性圖標、線性圖標、品牌圖標、Ant圖標。

這里為了方便后續使用，我采用了svg格式的圖標類型進行制作，圖標大小統一48px的大小進行排布。

為了后續圖標庫能夠更好的應用，特此做了圖標對應的Axure的rplib格式組件。

3.6 常用小部件制作

進行常用小部件的制作，輸入框、選擇器、選擇控件、數據驗證、滑塊選擇等，將此類小部件效果固化后，你會發現再去做其他頁面的構建得心應手。

3.7 其他頁面的搭建制作

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

結語

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

相關閱讀

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

《不只是“設計”，產品思維賦予設計新動力！》

感謝你的閱讀支持 · 歡迎留言互動

-------------------------------------------

多一點行動? ·? 多一分設想

—

總結

以上是生活随笔為你收集整理的axure 组件_技巧分享 | Axure后台组件制作的全过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。