使用Axure設計中大型的後台系統原型總結(上篇)

03-31

在產品原型設計中，經常會涉及到後台系統原型的設計，如何設計出更規範標準的後台系統原型，是很多產品同行們都會遇到的一個問題。本人結合自己實際的多個後台系統項目經歷以及使用Axure的經驗技巧，從方便維護和便於復用等角度出發，總結出了這篇關於後台系統原型設計的分享內容，希望能幫助到一些有需要的朋友們。

01.確定框架結構和布局方案

在正式開始設計一套後台系統原型之前，我們需要先確定它的框架結構。我們都知道產品的框架結構相當於它骨架，對於原型設計來說是同樣的原理，當框架確定之後再填充完善裡面的功能模塊就會輕鬆很多了。後台系統的結構其實一般都比較固定，主要以下三個部分組成：

導航區域（Logo、導航菜單）；
功能區域（賬戶信息、系統消息、退出登錄）；
內容區域（數據列表、錄入表單）。

一般為了方便操作和在多個模塊中快速切換，後台系統的導航區域和功能區域都是固定在頁面的頂部或左側的，主要的刷新區域只有內容區域。所以我的做法是將三個部分放在一個框架頁面內，將內容區域使用內聯頁面進行鏈接，使用導航菜單實現內容頁面的切換。這樣的處理有幾方面的好處：

方便對內容頁面進行修改和維護，不需要在每個內容頁面中管理導航區域和功能區域；
可以結合函數實現自適應的瀏覽效果（第二部分會詳細說明）；
原型設計完成之後導出的文件會更輕量，載入起來會更快。

前面介紹到了後台系統的框架都比較固定，所以它的布局相對於前台產品來說其實更簡單清晰，目前主流的一般都是上下結構或左右結構兩種。這兩種結構一般能承載大部分中大型後台系統的設計需求，在實際的項目中可以根據需要選擇對應的框架。

以下是我使用Axure設計的一套後台系統模板，分別使用了兩種布局方式（只是框架頁不同，內容頁面是同一套），其中的內容區域都使用了內聯框架，點擊演示地址可以進行體驗。

左右結構框架

圖中的1為導航區域、2為功能區域、3為內容區域，使用內聯框架鏈接

演示地址：登錄界面

上下結構框架

圖中的1為一級導航區域、2為功能區域、3為二三級導航區域、4為內容區域，使用內聯框架鏈接。

演示地址：登錄界面

02. 在Axure中進行結構框架的搭建

如果我們已經選擇了一套框架和布局方案，第二步就可以在Axure中建立框架頁開始結構的搭建了。以上下結構的框架為例，在搭建框架時需要先新建一個頂部的動態面板（包含一級導航區域和功能區域）、一個左側的動態面板（包含二三級導航區域）、一個內聯框架。

圖中的1為頂部動態面板、2為左側動態面板、3為內容頁面內聯框架

界面中各部分元素的尺寸值分別是：頂部動態面板寬1366px，高50px、左側動態面板寬200px、高800px，內聯框架寬1166px、高800px。這套尺寸值並沒有嚴格的標準，在實際設計時可以根據需要進行調整，但是內聯框架的寬度的不能小於內容頁面的尺寸，否則在演示時內聯框架會出現橫向的滾動條。除此之外，還需要進行下列設置。

在框架頁面的樣式中設置頁面排列方式為居左對齊。

在左側動態面板屬性中設置「自動顯示垂直滾動條」。

在內容框架屬性中「選擇目標框架」，框架目標為載入時的默認顯示頁面。同時設置框架滾動條為「自動顯示或隱藏」，將「隱藏邊框」選框勾選。

03. 使用函數實現框架自適應效果

在完成框架結構的搭建並填充好菜單等基礎元素之後，如果我們需要實現演示時框架像真實的後台系統環境一樣在瀏覽器中的自適應效果該如何處理呢？這時我們需要用到動態面板的特性以及Axure的函數。

首先是頂部動態面板的處理，一般頂部區域都會有一個背景色，在動態面板的樣式中設置背景色就可以了。

設置完背景色之後需要再在動態面板的屬性中勾選「100%寬度」，這樣在預覽時就可以看到頂部區域的背景在瀏覽器實現了100%的填充效果。

實現框架自適應效果的關鍵是函數的運用，它的原理是運用頁面窗口尺寸改變時獲取瀏覽器窗口的高度和寬度，通過獲取到的高度和寬度值改變左側區域和內容框架的尺寸，實現在瀏覽器中的自適應效果。具體設置方法如下：

在頁面屬性中設置窗口尺寸改變時事件；
設置左側菜單(左側動態面板)高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那麼左側菜單的高度是800px-50px=750px；
設置內容框架(內聯框架)的高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那麼內聯框架的高度是800px-50px=750px；
設置內容框架(內聯框架)的寬度為：[[Window.width-200]]，200為左側菜單的寬度。例如瀏覽器寬度為1366px，那麼內聯框架的寬度是1366px-200px=1166px。

在頁面屬性中設置窗口尺寸改變時事件，利用函數實現自適應效果

以上就是通過動態面板和函數的設置實現的框架自適應效果的方法。其中有些細節可能需要大家在設計時進行一些摸索，不過如果你通過個方法搭建好了一個自適應的框架效果，是可以快速復用到其它類似的項目原型中的。

04. 使用動態面板和函數快速設置多層級菜單

一般在後台系統中都會有多層級菜單，以上下結構的框架為例，頂部動態面板區域中的菜單為一級菜單，左側動態面板為一級菜單對應的二級菜單。這個時候需要用到動態面板，實現點擊一級菜單時，二級菜單進行狀態切換的效果。一般的做法是在一級菜單中對應的元件上添加點擊事件，設置二級菜單的動態面板為指定的狀態。當有多個菜單的時候，單獨去設置每個一級菜單的點擊切換狀態是很麻煩的，而通過函數則不需要對每個菜單進行單獨設置。具體設置方法如下：

將二級菜單動態面板中對應的狀態名稱跟一級菜單的對應的元件文本內容修改為一致；
在一級菜單中對應的元件上添加點擊事件設置二級菜單動態面板狀態，選擇狀態為Value，設置狀態名稱或序號為：[[This.text]]；
這個設置的方法是能過[[This.text]]函數獲取當前元件的文本，然後設置目標動態面板狀態為當前文本對象。

只需要這兩步就搞定了多層級菜單的快速設置，這個方法是動態面板結合函數的一個小的運用，大家只需要靈活運用可以用來處理很多類型的交互效果，相信會大大提升你的效率。

這篇分享主要介紹了關於後台系統框架的搭建，有興趣的朋友可以參考一下其中的方法和技巧。為了便於大家能對一些知識點進行消化和理解，決定將這個分享分為上下兩篇發出來。在下篇中我將介紹關於後台系統原型設計的一些規範和細節處理技巧，同時還會提供一個框架模板的源文件供大家進行參考，請有需要的朋友關注。

Axure函數對於首次使用的朋友來說能會稍感複雜，不過只要理解了它的設置原理也是能快速掌握的。如果能掌握一些基礎函數的使用方法，是可以運用到很多原型相關的細節處理中的。本分享中只是涉及到了一部分基礎函數的使用，如果需要了解函數的更多使用方法可以訪問以下鏈接。

AxureRP 8函數及運算符說明文檔：AxureRP 8函數及運算符說明文檔 - AxureUX

本文由AxureUX原創及發布

歡迎訪問：Axure高質量原創模板及元件庫，Axure原型及教程分享，產品經理和交互設計師必備 - AxureUX

QQ交流群：60750209