使用Axure設計中，大型的後臺系統原型總結

使用Axure設計中，大型的後臺系統原型總結

2018年4月16日luodonggan

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

1. 肯定框架結構和佈局方案

在正式開始設計一套後臺系統原型以前，咱們須要先肯定它的框架結構。咱們都知道產品的框架結構至關於它骨架，對於原型設計來講是一樣的原理，當框架肯定以後再填充完善裏面的功能模塊就會輕鬆不少了。後臺系統的結構其實通常都比較固定，主要如下三個部分組成：

• 導航區域（Logo、導航菜單）；

• 功能區域（帳戶信息、系統消息、退出登陸）；

• 內容區域（數據列表、錄入表單）。

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

• 方便對內容頁面進行修改和維護，不須要在每一個內容頁面中管理導航區域和功能區域；

• 能夠結合函數實現自適應的瀏覽效果（第二部分會詳細說明）；

• 原型設計完成以後導出的文件會更輕量，加載起來會更快。

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

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

左右結構框架

點擊查看演示

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

上下結構框架

點擊查看演示

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

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

若是咱們已經選擇了一套框架和佈局方案，第二步就能夠在Axure中創建框架頁開始結構的搭建了。以上下結構的框架爲例，在搭建框架時須要先新建一個頂部的動態面板（包含一級導航區域和功能區域）、一個左側的動態面板（包含二三級導航區域）、一個內聯框架。

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

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

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

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

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

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

在完成框架結構的搭建並填充好菜單等基礎元素以後，若是咱們須要實現演示時框架像真實的後臺系統環境同樣在瀏覽器中的自適應效果該如何處理呢？這時咱們須要用到動態面板的特性以及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。

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

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

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

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

• 將二級菜單動態面板中對應的狀態名稱跟一級菜單的對應的元件文本內容修改成一致；

• 在一級菜單中對應的元件上添加點擊事件設置二級菜單動態面板狀態，選擇狀態爲Value，設置狀態名稱或序號爲：[[This.text]]；

• 這個設置的方法是能過[[This.text]]函數獲取當前元件的文本，而後設置目標動態面板狀態爲當前文本對象。

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

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

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

AxureRP 8函數及運算符說明文檔：http://www.axureux.com/home/functions.html

 

在後臺系統原型設計分享的上篇中，咱們重點介紹了關於後臺系統的框架結構，以及使用Axure搭建自適應框架的應用技巧。

在今天的下篇中將爭對相關細節進行更深刻的介紹，其中的內容可能有一些零散和瑣碎，不過但願也能爲你們帶來一些有用的幫助。同時，本文後面將會提供一套系統框架的.rp的源文件下載，能夠結合本分享中的相關內容進行參考使用。

自上篇分享發出來之後收到了不少朋友的支持和反饋，好評程度有點超出了個人預期。你們的支持讓我很受鼓舞，我將繼續堅持分享一些關於原型設計方面看似無用卻很實用的小知識，謝謝你們。

1.關於框架自適應的補充

在上篇分享中介紹了使用函數獲取瀏覽器窗口的寬高值，而後賦值給相關的界面元素以實現框架的自適應效果。其中有一部分設置我在源文件中實現了可是沒有展開進行說明，有些觀察比較細緻的朋友發現了並提出了相關的疑問，因此爭對這部分再詳細說明一下。

在頁面屬性的「窗口尺寸改變時」的事件中，你們能夠看到兩個條件用例。1是設置當窗口的寬度大於1366時，2是設置當窗口的寬度小於1366時，這兩個條件用例中所設置的相關元素的寬度是不同的。

截圖標註1，當窗口的寬度大於1366時：

• 設置左側菜單(左側動態面板)高度爲：[[Window.height-50]]，50爲頂部菜單的高度。例如瀏覽器窗口高度爲800px，那麼左側菜單的高度是800px-50px=750px；

• 設置內容框架(內聯框架)的高度爲：[[Window.height-50]]，50爲頂部菜單的高度。例如瀏覽器窗口高度爲800px，那麼內聯框架的高度是800px-50px=750px；

• 設置內容框架(內聯框架)的寬度爲：[[Window.width-200]]，200爲左側菜單的寬度。例如瀏覽器寬度爲1366px，那麼內聯框架的寬度是1366px-200px=1166px。

截圖標註2，當窗口的寬度小於1366時：

• 設置左側菜單(左側動態面板)高度爲：[[Window.height-50]]，50爲頂部菜單的高度。例如瀏覽器窗口高度爲800px，那麼左側菜單的高度是800px-50px=750px；

• 設置內容框架(內聯框架)的高度爲：[[Window.height-50]]，50爲頂部菜單的高度。例如瀏覽器窗口高度爲800px，那麼內聯框架的高度是800px-50px=750px；

對比一下會發現，當窗口的寬度小於1366px時未設置內容框架的寬度，這樣設置的主要目的是爲了避免讓內聯框架出現橫向滾動條。若是在將低於1366px的屏幕分辨率上演示時，會出現內容頁面的寬度超出獲取到的內聯框架寬度的狀況，這時在框架頁中的內聯框架就會顯示出橫向滾動條。經過這個設置能夠保證內聯框架始終不會出現橫向滾條，只會出現頁面的橫向條滾動條。固然，若是你不須要在低於1366px的屏幕分辨率進行演示，就能夠不須要進行這樣的設置。

截圖標註3，設置功能區域的絕對位置。

這個設置的做用是獲取瀏覽器窗口的寬度，減去功能區域動態面板的寬度，使功能區域的動態面板始終保持定位在最界面的右側區域。

2.梳理功能分類和創建站點地圖

在開始進行相關功能頁面設計以前，咱們須要先對後臺功能進行整體的梳理和分類，這個工做我通常會藉助腦圖工具來進行。後臺系統功能主要是對前端業務進行管理，因此梳理過程當中必須重點關注前端的業務邏輯，這是體現產品人員對需求或業務理解程度的一個重要方面。科學合理的功能分類能使得開發人員快速的理解需求，同時也直接會影響到系統上線後的用戶使用體驗。(順便吐槽一句，可能不少公司的後臺系統沒有用戶體驗一說。)

功能梳理須要遵循從粗到細的過程，首先整理出一級大類的功能結構，再基於大類思考它須要哪些子功能，以及子功能中關聯的各項參數設置。以一個電商平臺後臺系統舉例，它的一級大類基本包含了：訂單管理、商品管理、會員管理、庫存管理、內容管理、運營管理、財務管理、統計查詢、系統設置等，其中訂單管理的子功能通常由訂單的查詢和訂單相關屬性設置組成。

在這個思考整理的過程當中，咱們能夠將功能分類用腦圖列出來。在功能分類時儘可能把相關聯的子功能或模塊放在同一個大類中，同時須要注意分類的層級深度不宜過深。分類的層級深度關聯到導航菜單的設計，通常來講層級控制在二三級之內最好，最好不要超過四級。

若是功能分類已經基本整理完成以後，接下來就可使用Axure的頁面管理功能來創建站點地圖了。通常來講在開發一箇中大型的系統項目時，基本都有多個迭代的過程，並不是是一次完成設計和開發。站點地圖能讓咱們大體評估整個系統設計的工做量，同時能夠根據優先級來安排相關的迭代工做。這個工做方法一樣適用於其它中大型產品的原型設計工做流程。

3.關於功能內容頁面的設計

在開始內容頁面的設計以前，咱們首先須要定義頁面的設計尺寸標準。若是以1366px的窗口寬度爲例，咱們已經在框架頁面中設置了一個寬度爲200px的左側菜單，那麼演示時內聯框架的寬度是1366px-200px=1166px，根據這個寬度咱們將內容頁面的設計尺寸寬度設爲1100px較爲合適。若是你的屏幕分辨率較高，內容頁面的設計寬度能夠稍微設置大一點，但最好不要超過1300px。

定義頁面的設計尺寸須要用到參考線，能夠經過從標尺區域向內容區域拖動新建縱向或橫向的參考線，選中對應的參考線右擊能夠將它鎖它或進行更多的設置。下面的截圖中是我使用參考線的效果，兩邊分別保留了20px的留白區域。

須要強調的是，內容頁面中的內容區域是沒有辦法實現自適應寬度的，咱們須要在頁面的屬性中將排列方式設置爲居中排列。當在較高的屏幕分辨率中進行演示時，內容頁面中的內容區域會居中顯示，頁面兩邊會有留白的效果。

在內容頁面的頂部會有當前頁面的標題顯示，經過[[PageName]]函數能夠自動獲取到當前頁面的標題，不須要單獨設置每一個內容頁面的標題。設置方法是在標題元件中設置載入時事件，設置載入時設置當前元件的文本爲[[PageName]]。

以上幾點就是關於功能內容頁面的一些基本設置，咱們能夠設置按照上述設置建立一個頁面模板。後臺系統的頁面類型通常主要是兩類：一類是數據查詢類，主要由篩選區域、數據列表組成；一類是參數設置類，主要由表單字段、數據錄入組成。咱們能夠基於這兩類頁面類型建立模板，而後經過複製的方式進行復用，這樣能夠大大提高設計效率。

數據查詢類界面

參數設置類界面

4.關於統計圖表的設計

統計圖表是後臺系統中比較常見的一種展現形式，因爲Axure中沒有提供圖表相關的元件，因此用它來製做圖表是一件使人頭疼的事情。爲了解決這個的問題，咱們能夠藉助圖表工具生成對應的圖表效果，而後將它生成圖片複製到原型中。我推薦使用百度的圖表工具Echarts，它是一套開源的數據可視化工具，提供了各種豐富的圖表類型，包括經常使用的餅圖、柱狀圖、雷達圖等。

Echarts圖表工具實例地址http://echarts.baidu.com/examples.html

Echarts提供的實例支持在線編輯和保存圖片，能夠根據須要編輯對應的實例而後將圖片保存下來，基本能夠知足原型設計中經常使用的圖表類型的須要。後續我會整理一套經常使用的圖表類型的Axure元件庫與你們分享，有興趣的朋友能夠關注一下。

5.使用母版管理經常使用元素

瞭解Axure基本功能的朋友應該都知道母版功能，它能夠用來管理一些比較通用的界面元素，能夠快速拖動到不一樣的界面中並支持統一修改，善用母版功能讓你的設計效率提高很多。下面的截圖就是我在設計後臺系統中所創建的母版，其中包含了通用的頂部或底部元素、經常使用的分頁插件和編輯器、經常使用的按紐元素等。

母版的建立有兩種方式，第一種是在編輯界面中選中對應的元素右擊選擇「轉換爲母版」，第二種是在母版管理面板中點擊右上角第一個「添加母版」按紐進行建立。建議在建立的時候對母版進行命名，若是母版過多的話能夠建立文件夾進行管理。

6.使用中繼器管理列表元素

Axure裏的中繼器元件是用於實現動態數據的效果的，可是利於它的特徵能夠用來方便的管理列表元素。若是咱們須要一個多行的數據列表，一般的作法是先建立好一行的元素，而後進行復制排列。

若是這個數據列表有20行，咱們就須要複製19行而後排列對齊，這個操做是一個很耗時並且麻煩的過程，對於有對齊強迫症的朋友來講更是惡夢。可是經過使用中繼器，咱們只須要建立好一行的元素，而後將它複製到中繼器中，再在中斷器中批量增長19行，這樣的一個多行的數據排列就建立好了。

中繼器的建立方法很簡單，從軟件的元件面板中拖動到編輯界面中便可。新建立的中繼器默認有3行，你能夠刪除掉裏面的元素，而後在裏面編輯本身所須要的元素便可。選中中繼器元件時在右側的屬性中，咱們能夠經過中斷器的行管理上方的圖標快速的新增和刪除行數。

在中繼器的樣式管理中，咱們還能夠對它的樣式、間距、佈局方式進行設置。例如，你能夠控制每行或每列顯示的數量，經過這些設置能夠用它來建立類型更豐富的列表方式。

使用中繼器生成的列表效果

7.整理經常使用的交互元素及組件

後臺系統中經常使用的交互元素通常有菜單、圖標、按紐、表單等，根據後臺業務功能的須要也會用到各類定製化的選擇及篩選組件。一般我會在原型中建立相關的模板頁面將交互元素及組件進行分類整理。這樣的作法出於如下的考慮：

• 第一，能夠在設計過程當中快速的複用相關的元素，在設計的時候可能須要用到某個元素時，不用再去之前作過的頁面中查找；

• 第二，能夠將系統中統一通用的交互效果梳理出來，提供參考示例。例如，數據提交的反饋提示、數據加載反饋等交互效果；

• 第三，經過不斷的優化改造本身經常使用的元件類型，創建一套我的的Axure元件庫，方便在之後其它相似的項目中使用；

以上是整理的後臺系統中經常使用的交互元件及組件的部分截圖，提供給你們進行參考。另外，分享給你們一套我整理的WEB元件庫，其中不少組件一樣適用於後臺系統的原型設計。

AxureUX交互原型Web元件庫精簡版：http://www.axureux.com/home/librariesweblite.html

8.圖標的使用技巧和推薦

原型設計中須要用到圖標的能夠經過不少方式獲取到，例若有各種海量的圖標庫搜索網站、免費的圖標素材下載，還有其它同行整理好的圖標元件庫，你們在百度中搜索一下都能找到相關的資源。我我的最經常使用的是阿里巴巴的團隊推出的圖標分享平臺iconfont，推薦它的緣由有兩個，首先它的圖標數量很是全面，目前收錄的圖標數量在160萬枚以上，只須要經過搜索功能就能快速檢索到本身須要的圖標。其次，這個平臺裏面的圖標自定義顏色，提供SVG\PNG等多種格式的下載。

SVG是一種矢量的圖標格式，你能夠將下載到的SVG圖標直接拖入到Axure的編輯界面中，支持隨意縮放並且不會失真。在Axure 8.0的3312的以上版本中，新加入了能夠將SVG圖標轉換爲形狀的實用功能，只須要選中對應的SVG圖標右擊「轉換SVG圖片爲形狀」便可。SVG圖標轉換爲形狀後，除了支持隨意縮放以外，還能夠根據須要修改顏色和外觀。若是你尚未使用過這個功能建議趕忙嘗試一下，固然你的Axure版本首先須要升級到8.0.0.3312以上。

本人推薦的另外一種是FontAwesome字體圖標方案，它的原理是使用字體方式實現的圖標效果，在Axure中能夠經過字體的特性對FontAwesome圖標進行更改，包括：大小、顏色、陰影或者其它字體支持的效果。這種字體圖標能夠運用到不少經常使用的場景裏，例如，用它來實現按紐的交互樣式設置，用來取代默認的單選、複選、開關圖標。當你在表格或列表中使用到字體圖標時，能夠很是的方便的像文本同樣進行編輯和修改。下面的表格中所到的圖片、開關、編輯等圖標都是使用了FontAwesome字體圖標。

FontAwesome字體圖標方案使用說明：http://www.axureux.com/home/fontawesome.html

9.不要糾結於細節的交互效果；

在進行後臺系統原型設計時，不要將時間花費在細節的交互效果的實現上，例如：數據提交時成功和錯誤反饋、執行相關操做的確認提示、數據處理時的加載效果、下拉菜單的交互效果等等。有些追求高保真效果的同窗會過分關注這些細節，會耗費不少時間在這些細節效果處理上，這樣不只會影響到輸出效率並且意義不大。對於這類統一通用的交互效果，建議能夠用一個專門的頁面將它們梳理出來，而後再在相關頁面中關聯的元件中進行備註說明。

到此爲止，關於使用Axure設計後臺系統原型的總結分享基本就結束了，若是對分享中的內容有疑問或者有什麼建議能夠反饋給我。這個分享中還有一些能夠繼續深刻的細節或存在遺漏之處，之後將以其它的方式與你們繼續進行分享。最後，提供一套我製做後的後臺系統框架源文件給你們，但願能給你們帶來一些參考和幫助。

後臺管理系統框架原型模板下載：https://pan.baidu.com/s/1dFbAm5r