'技巧分享：Axure後臺組件製作的全過程'

Axure 設計軟件 WebKit 臺式電腦筆記本電腦人人都是產品經理 2019-09-04

最終效果瀏覽：https://uedart.com/demo/templatesWebKit2/index.html

最終效果瀏覽：https://uedart.com/demo/templatesWebKit2/index.html

一、組件構建思路

1.1 確定模塊

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

最終效果瀏覽：https://uedart.com/demo/templatesWebKit2/index.html

一、組件構建思路

1.1 確定模塊

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

1.2 細化各個模塊內容

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

最終效果瀏覽：https://uedart.com/demo/templatesWebKit2/index.html

一、組件構建思路

1.1 確定模塊

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

1.2 細化各個模塊內容

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

1.3 按流程執行製作

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

最終效果瀏覽：https://uedart.com/demo/templatesWebKit2/index.html

一、組件構建思路

1.1 確定模塊

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

1.2 細化各個模塊內容

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

1.3 按流程執行製作

二、組件框架製作

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

最終效果瀏覽：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整體頁面的樹形結構整理，用來指導後續的製作以及為下面製作框架頁面的跳轉提供對應的頁面。

最終效果瀏覽：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 展示框架界面佈局

定義好框架界面佈局指導後面的內容製作。

最終效果瀏覽：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 展示框架界面佈局

定義好框架界面佈局指導後面的內容製作。

框架佈局結果展示：

最終效果瀏覽：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 展示框架界面佈局

定義好框架界面佈局指導後面的內容製作。

框架佈局結果展示：

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

最終效果瀏覽：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固定在左側，切換菜單動態面板估計在右側。

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

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

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

3.4 按鈕規範製作

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

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

並製作相關懸停與選中效果，方便後面的複用。

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

3.4 按鈕規範製作

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

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

並製作相關懸停與選中效果，方便後面的複用。

3.5 圖標規範製作

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

這裡為了方便後續使用，我採用了svg格式的圖標類型進行製作，圖標大小統一48px的大小進行排布。

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

3.4 按鈕規範製作

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

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

並製作相關懸停與選中效果，方便後面的複用。

3.5 圖標規範製作

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

這裡為了方便後續使用，我採用了svg格式的圖標類型進行製作，圖標大小統一48px的大小進行排布。

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

3.4 按鈕規範製作

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

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

並製作相關懸停與選中效果，方便後面的複用。

3.5 圖標規範製作

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

這裡為了方便後續使用，我採用了svg格式的圖標類型進行製作，圖標大小統一48px的大小進行排布。

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

3.6 常用小部件製作

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

最終效果瀏覽：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 多頁面統一

2.2.2 導航自適應

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

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

2.2.3 切換菜單

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

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

2.3 左側摺疊導航製作

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

幾個關鍵點：

內容滾動
摺疊菜單

2.3.1 內容滾動

2.3.2 摺疊菜單

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

摺疊菜單的兩種狀態：展開、收起
切換點擊內容跳轉事件

（1）摺疊菜單狀態的切換

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

（2）切換點擊跳轉

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

2.4 內容區搭建

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

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

2.5 頁面結構完善

載入頁面後各導航的選中狀態處理
側邊導航已經內聯框架的自適應

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

三、規範製作

3.1 顏色規範製作

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

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

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

3.2 字體規範製作

3.3 其他元素規範製作

其他相關元素的規範製作：尺寸規範、分割線規範、標註規範。

這裡的規範主要是根據自己的所需自行定製自己想要的元素，並加以規範說明。

3.4 按鈕規範製作

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

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

並製作相關懸停與選中效果，方便後面的複用。

3.5 圖標規範製作

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

這裡為了方便後續使用，我採用了svg格式的圖標類型進行製作，圖標大小統一48px的大小進行排布。

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

3.6 常用小部件製作

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

3.7 其他頁面的搭建制作

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

結語

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