使用Axure設計中大型的後台系統原型總結(下篇)，提供框架模板下載
在後台系統原型設計分享的上篇中，我們重點介紹了關於後台系統的框架結構，以及使用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圖表工具實例地址
ECharts Examples
Echarts提供的實例支持在線編輯和保存圖片，可以根據需要編輯對應的實例然後將圖片保存下來，基本可以滿足原型設計中常用的圖表類型的需要。後續我會整理一套常用的圖表類型的Axure元件庫與大家分享，有興趣的朋友可以關注一下。
5.使用母版管理常用元素；
了解Axure基本功能的朋友應該都知道母版功能，它可以用來管理一些比較通用的界面元素，可以快速拖動到不同的界面中並支持統一修改，善用母版功能讓你的設計效率提升不少。下面的截圖就是我在設計後台系統中所建立的母版，其中包含了通用的頂部或底部元素、常用的分頁插件和編輯器、常用的按紐元素等。
母版的創建有兩種方式，第一種是在編輯界面中選中對應的元素右擊選擇「轉換為母版」，第二種是在母版管理面板中點擊右上角第一個「添加母版」按紐進行創建。建議在創建的時候對母版進行命名，如果母版過多的話可以創建文件夾進行管理。
6.使用中繼器管理列表元素；
Axure里的中繼器元件是用於實現動態數據的效果的，但是利於它的特徵可以用來方便的管理列表元素。如果我們需要一個多行的數據列表，通常的做法是先創建好一行的元素，然後進行複製排列。如果這個數據列表有20行，我們就需要複製19行然後排列對齊，這個操作是一個很耗時而且麻煩的過程，對於有對齊強迫症的朋友來說更是惡夢。但是通過使用中繼器，我們只需要創建好一行的元素，然後將它複製到中繼器中，再在中斷器中批量增加19行，這樣的一個多行的數據排列就創建好了。
中繼器的創建方法很簡單，從軟體的元件面板中拖動到編輯界面中即可。新創建的中繼器默認有3行，你可以刪除掉裡面的元素，然後在裡面編輯自己所需要的元素即可。選中中繼器元件時在右側的屬性中，我們可以通過中斷器的行管理上方的圖標快速的新增和刪除行數。
在中繼器的樣式管理中，我們還可以對它的樣式、間距、布局方式進行設置。例如，你可以控制每行或每列顯示的數量，通過這些設置可以用它來創建類型更豐富的列表方式。
使用中繼器生成的列表效果
7.整理常用的交互元素及組件；
後台系統中常用的交互元素一般有菜單、圖標、按紐、表單等，根據後台業務功能的需要也會用到各種定製化的選擇及篩選組件。通常我會在原型中創建相關的模板頁面將交互元素及組件進行分類整理。這樣的做法出於以下的考慮：
- 第一，可以在設計過程中快速的復用相關的元素，在設計的時候可能需要用到某個元素時，不用再去以前做過的頁面中查找；
- 第二，可以將系統中統一通用的交互效果梳理出來，提供參考示例。例如，數據提交的反饋提示、數據載入反饋等交互效果；
- 第三，通過不斷的優化改造自己常用的元件類型，建立一套個人的Axure元件庫，方便在以後其它類似的項目中使用；
以上是整理的後台系統中常用的交互元件及組件的部分截圖，提供給大家進行參考。另外，分享給大家一套我整理的WEB元件庫，其中很多組件同樣適用於後台系統的原型設計。
AxureUX交互原型Web元件庫精簡版：
AxureUX交互原型Web元件庫精簡版，最佳的網頁原型設計元件庫 - AxureUX
8.圖標的使用技巧和推薦；
原型設計中需要用到圖標的可以通過很多方式獲取到，例如有各類海量的圖標庫搜索網站、免費的圖標素材下載，還有其它同行整理好的圖標元件庫，大家在百度中搜索一下都能找到相關的資源。我個人最常用的是阿里巴巴的團隊推出的圖標分享平台iconfont，推薦它的原因有兩個，首先它的圖標數量非常全面，目前收錄的圖標數量在160萬枚以上，只需要通過搜索功能就能快速檢索到自己需要的圖標。其次，這個平台裡面的圖標自定義顏色，提供SVGPNG等多種格式的下載。
SVG是一種矢量的圖標格式，你可以將下載到的SVG圖標直接拖入到Axure的編輯界面中，支持隨意縮放而且不會失真。在Axure 8.0的3312的以上版本中，新加入了可以將SVG圖標轉換為形狀的實用功能，只需要選中對應的SVG圖標右擊「轉換SVG圖片為形狀」即可。SVG圖標轉換為形狀後，除了支持隨意縮放之外，還可以根據需要修改顏色和外觀。如果你還沒有使用過這個功能建議趕緊嘗試一下，當然你的Axure版本首先需要升級到8.0.0.3312以上。
本人推薦的另一種是FontAwesome字體圖標方案，它的原理是使用字體方式實現的圖標效果，在Axure中可以通過字體的特性對FontAwesome圖標進行更改，包括：大小、顏色、陰影或者其它字體支持的效果。這種字體圖標可以運用到很多常用的場景里，例如，用它來實現按紐的交互樣式設置，用來取代默認的單選、複選、開關圖標。當你在表格或列表中使用到字體圖標時，可以非常的方便的像文本一樣進行編輯和修改。下面的表格中所到的圖片、開關、編輯等圖標都是使用了FontAwesome字體圖標。
FontAwesome字體圖標方案使用說明
FontAwesome字體圖標方案，Axure字體圖標元件庫 - AxureUX
9.不要糾結於細節的交互效果；
在進行後台系統原型設計時，不要將時間花費在細節的交互效果的實現上，例如：數據提交時成功和錯誤反饋、執行相關操作的確認提示、數據處理時的載入效果、下拉菜單的交互效果等等。有些追求高保真效果的同學會過度關注這些細節，會耗費很多時間在這些細節效果處理上，這樣不僅會影響到輸出效率而且意義不大。對於這類統一通用的交互效果，建議可以用一個專門的頁面將它們梳理出來，然後再在相關頁面中關聯的元件中進行備註說明。
到此為止，關於使用Axure設計後台系統原型的總結分享基本就結束了，如果對分享中的內容有疑問或者有什麼建議可以反饋給我。這個分享中還有一些可以繼續深入的細節或存在遺漏之處，以後將以其它的方式與大家繼續進行分享。最後，提供一套我製作後的後台系統框架源文件給大家，希望能給大家帶來一些參考和幫助。
後台管理系統框架原型模板下載：
https://pan.baidu.com/s/1dFs5p3z
本文由AxureUX原創及發布
歡迎訪問：Axure高質量原創模板及元件庫，Axure原型及教程分享，產品經理和交互設計師必備 - AxureUX
QQ交流群：60750209
推薦閱讀：