本人結(jié)合自己實(shí)際的多個(gè)后臺(tái)系統(tǒng)項(xiàng)目經(jīng)歷以及使用Axure的經(jīng)驗(yàn)技巧，從方便維護(hù)和便于復(fù)用等角度出發(fā)，總結(jié)出了這篇關(guān)于后臺(tái)系統(tǒng)原型設(shè)計(jì)的分享內(nèi)容，希望能幫助到一些有需要的朋友們。

在后臺(tái)系統(tǒng)原型設(shè)計(jì)分享的上篇中，我們重點(diǎn)介紹了關(guān)于后臺(tái)系統(tǒng)的框架結(jié)構(gòu)，以及使用Axure搭建自適應(yīng)框架的應(yīng)用技巧。

在今天的下篇中將爭(zhēng)對(duì)相關(guān)細(xì)節(jié)進(jìn)行更深入的介紹，其中的內(nèi)容可能有一些零散和瑣碎，不過(guò)希望也能為大家?guī)?lái)一些有用的幫助。同時(shí)，本文后面將會(huì)提供一套系統(tǒng)框架的.rp的源文件下載，可以結(jié)合本分享中的相關(guān)內(nèi)容進(jìn)行參考使用。

自上篇分享發(fā)出來(lái)以后收到了很多朋友的支持和反饋，好評(píng)程度有點(diǎn)超出了我的預(yù)期。大家的支持讓我很受鼓舞，我將繼續(xù)堅(jiān)持分享一些關(guān)于原型設(shè)計(jì)方面看似無(wú)用卻很實(shí)用的小知識(shí)，謝謝大家。

1.關(guān)于框架自適應(yīng)的補(bǔ)充

在上篇分享中介紹了使用函數(shù)獲取瀏覽器窗口的寬高值，然后賦值給相關(guān)的界面元素以實(shí)現(xiàn)框架的自適應(yīng)效果。其中有一部分設(shè)置我在源文件中實(shí)現(xiàn)了但是沒(méi)有展開(kāi)進(jìn)行說(shuō)明，有些觀察比較細(xì)致的朋友發(fā)現(xiàn)了并提出了相關(guān)的疑問(wèn)，所以爭(zhēng)對(duì)這部分再詳細(xì)說(shuō)明一下。

在頁(yè)面屬性的“窗口尺寸改變時(shí)”的事件中，大家可以看到兩個(gè)條件用例。1是設(shè)置當(dāng)窗口的寬度大于1366時(shí)，2是設(shè)置當(dāng)窗口的寬度小于1366時(shí)，這兩個(gè)條件用例中所設(shè)置的相關(guān)元素的寬度是不一樣的。

截圖標(biāo)注1，當(dāng)窗口的寬度大于1366時(shí)：

• 設(shè)置左側(cè)菜單(左側(cè)動(dòng)態(tài)面板)高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那么左側(cè)菜單的高度是800px-50px=750px；
• 設(shè)置內(nèi)容框架(內(nèi)聯(lián)框架)的高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那么內(nèi)聯(lián)框架的高度是800px-50px=750px；
• 設(shè)置內(nèi)容框架(內(nèi)聯(lián)框架)的寬度為：[[Window.width-200]]，200為左側(cè)菜單的寬度。例如瀏覽器寬度為1366px，那么內(nèi)聯(lián)框架的寬度是1366px-200px=1166px。

截圖標(biāo)注2，當(dāng)窗口的寬度小于1366時(shí)：

• 設(shè)置左側(cè)菜單(左側(cè)動(dòng)態(tài)面板)高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那么左側(cè)菜單的高度是800px-50px=750px；
• 設(shè)置內(nèi)容框架(內(nèi)聯(lián)框架)的高度為：[[Window.height-50]]，50為頂部菜單的高度。例如瀏覽器窗口高度為800px，那么內(nèi)聯(lián)框架的高度是800px-50px=750px；

對(duì)比一下會(huì)發(fā)現(xiàn)，當(dāng)窗口的寬度小于1366px時(shí)未設(shè)置內(nèi)容框架的寬度，這樣設(shè)置的主要目的是為了不讓內(nèi)聯(lián)框架出現(xiàn)橫向滾動(dòng)條。如果在將低于1366px的屏幕分辨率上演示時(shí)，會(huì)出現(xiàn)內(nèi)容頁(yè)面的寬度超出獲取到的內(nèi)聯(lián)框架寬度的情況，這時(shí)在框架頁(yè)中的內(nèi)聯(lián)框架就會(huì)顯示出橫向滾動(dòng)條。通過(guò)這個(gè)設(shè)置可以保證內(nèi)聯(lián)框架始終不會(huì)出現(xiàn)橫向滾條，只會(huì)出現(xiàn)頁(yè)面的橫向條滾動(dòng)條。當(dāng)然，如果你不需要在低于1366px的屏幕分辨率進(jìn)行演示，就可以不需要進(jìn)行這樣的設(shè)置。

截圖標(biāo)注3，設(shè)置功能區(qū)域的絕對(duì)位置。

這個(gè)設(shè)置的作用是獲取瀏覽器窗口的寬度，減去功能區(qū)域動(dòng)態(tài)面板的寬度，使功能區(qū)域的動(dòng)態(tài)面板始終保持定位在最界面的右側(cè)區(qū)域。

2.梳理功能分類和建立站點(diǎn)地圖

在開(kāi)始進(jìn)行相關(guān)功能頁(yè)面設(shè)計(jì)之前，我們需要先對(duì)后臺(tái)功能進(jìn)行總體的梳理和分類，這個(gè)工作我一般會(huì)借助腦圖工具來(lái)進(jìn)行。后臺(tái)系統(tǒng)功能主要是對(duì)前端業(yè)務(wù)進(jìn)行管理，所以梳理過(guò)程中必須重點(diǎn)關(guān)注前端的業(yè)務(wù)邏輯，這是體現(xiàn)產(chǎn)品人員對(duì)需求或業(yè)務(wù)理解程度的一個(gè)重要方面?？茖W(xué)合理的功能分類能使得開(kāi)發(fā)人員快速的理解需求，同時(shí)也直接會(huì)影響到系統(tǒng)上線后的用戶使用體驗(yàn)。(順便吐槽一句，可能很多公司的后臺(tái)系統(tǒng)沒(méi)有用戶體驗(yàn)一說(shuō)。)

功能梳理需要遵循從粗到細(xì)的過(guò)程，首先整理出一級(jí)大類的功能結(jié)構(gòu)，再基于大類思考它需要哪些子功能，以及子功能中關(guān)聯(lián)的各項(xiàng)參數(shù)設(shè)置。以一個(gè)電商平臺(tái)后臺(tái)系統(tǒng)舉例，它的一級(jí)大類基本包含了：訂單管理、商品管理、會(huì)員管理、庫(kù)存管理、內(nèi)容管理、運(yùn)營(yíng)管理、財(cái)務(wù)管理、統(tǒng)計(jì)查詢、系統(tǒng)設(shè)置等，其中訂單管理的子功能一般由訂單的查詢和訂單相關(guān)屬性設(shè)置組成。

在這個(gè)思考整理的過(guò)程中，我們可以將功能分類用腦圖列出來(lái)。在功能分類時(shí)盡量把相關(guān)聯(lián)的子功能或模塊放在同一個(gè)大類中，同時(shí)需要注意分類的層級(jí)深度不宜過(guò)深。分類的層級(jí)深度關(guān)聯(lián)到導(dǎo)航菜單的設(shè)計(jì)，一般來(lái)說(shuō)層級(jí)控制在二三級(jí)以內(nèi)最好，最好不要超過(guò)四級(jí)。

如果功能分類已經(jīng)基本整理完成之后，接下來(lái)就可以使用Axure的頁(yè)面管理功能來(lái)建立站點(diǎn)地圖了。一般來(lái)說(shuō)在開(kāi)發(fā)一個(gè)中大型的系統(tǒng)項(xiàng)目時(shí)，基本都有多個(gè)迭代的過(guò)程，并非是一次完成設(shè)計(jì)和開(kāi)發(fā)。站點(diǎn)地圖能讓我們大致評(píng)估整個(gè)系統(tǒng)設(shè)計(jì)的工作量，同時(shí)可以根據(jù)優(yōu)先級(jí)來(lái)安排相關(guān)的迭代工作。這個(gè)工作方法同樣適用于其它中大型產(chǎn)品的原型設(shè)計(jì)工作流程。

3.關(guān)于功能內(nèi)容頁(yè)面的設(shè)計(jì)

在開(kāi)始內(nèi)容頁(yè)面的設(shè)計(jì)之前，我們首先需要定義頁(yè)面的設(shè)計(jì)尺寸標(biāo)準(zhǔn)。如果以1366px的窗口寬度為例，我們已經(jīng)在框架頁(yè)面中設(shè)置了一個(gè)寬度為200px的左側(cè)菜單，那么演示時(shí)內(nèi)聯(lián)框架的寬度是1366px-200px=1166px，根據(jù)這個(gè)寬度我們將內(nèi)容頁(yè)面的設(shè)計(jì)尺寸寬度設(shè)為1100px較為合適。如果你的屏幕分辨率較高，內(nèi)容頁(yè)面的設(shè)計(jì)寬度可以稍微設(shè)置大一點(diǎn)，但最好不要超過(guò)1300px。

定義頁(yè)面的設(shè)計(jì)尺寸需要用到參考線，可以通過(guò)從標(biāo)尺區(qū)域向內(nèi)容區(qū)域拖動(dòng)新建縱向或橫向的參考線，選中對(duì)應(yīng)的參考線右擊可以將它鎖它或進(jìn)行更多的設(shè)置。下面的截圖中是我使用參考線的效果，兩邊分別保留了20px的留白區(qū)域。

需要強(qiáng)調(diào)的是，內(nèi)容頁(yè)面中的內(nèi)容區(qū)域是沒(méi)有辦法實(shí)現(xiàn)自適應(yīng)寬度的，我們需要在頁(yè)面的屬性中將排列方式設(shè)置為居中排列。當(dāng)在較高的屏幕分辨率中進(jìn)行演示時(shí)，內(nèi)容頁(yè)面中的內(nèi)容區(qū)域會(huì)居中顯示，頁(yè)面兩邊會(huì)有留白的效果。

在內(nèi)容頁(yè)面的頂部會(huì)有當(dāng)前頁(yè)面的標(biāo)題顯示，通過(guò)[[PageName]]函數(shù)可以自動(dòng)獲取到當(dāng)前頁(yè)面的標(biāo)題，不需要單獨(dú)設(shè)置每個(gè)內(nèi)容頁(yè)面的標(biāo)題。設(shè)置方法是在標(biāo)題元件中設(shè)置載入時(shí)事件，設(shè)置載入時(shí)設(shè)置當(dāng)前元件的文本為[[PageName]]。

以上幾點(diǎn)就是關(guān)于功能內(nèi)容頁(yè)面的一些基本設(shè)置，我們可以設(shè)置按照上述設(shè)置創(chuàng)建一個(gè)頁(yè)面模板。后臺(tái)系統(tǒng)的頁(yè)面類型一般主要是兩類：一類是數(shù)據(jù)查詢類，主要由篩選區(qū)域、數(shù)據(jù)列表組成；一類是參數(shù)設(shè)置類，主要由表單字段、數(shù)據(jù)錄入組成。我們可以基于這兩類頁(yè)面類型創(chuàng)建模板，然后通過(guò)復(fù)制的方式進(jìn)行復(fù)用，這樣可以大大提升設(shè)計(jì)效率。

數(shù)據(jù)查詢類界面

參數(shù)設(shè)置類界面

4.關(guān)于統(tǒng)計(jì)圖表的設(shè)計(jì)

統(tǒng)計(jì)圖表是后臺(tái)系統(tǒng)中比較常見(jiàn)的一種展示形式，由于Axure中沒(méi)有提供圖表相關(guān)的元件，所以用它來(lái)制作圖表是一件令人頭疼的事情。為了解決這個(gè)的問(wèn)題，我們可以借助圖表工具生成對(duì)應(yīng)的圖表效果，然后將它生成圖片復(fù)制到原型中。我推薦使用百度的圖表工具Echarts，它是一套開(kāi)源的數(shù)據(jù)可視化工具，提供了各類豐富的圖表類型，包括常用的餅圖、柱狀圖、雷達(dá)圖等。

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

Echarts提供的實(shí)例支持在線編輯和保存圖片，可以根據(jù)需要編輯對(duì)應(yīng)的實(shí)例然后將圖片保存下來(lái)，基本可以滿足原型設(shè)計(jì)中常用的圖表類型的需要。后續(xù)我會(huì)整理一套常用的圖表類型的Axure元件庫(kù)與大家分享，有興趣的朋友可以關(guān)注一下。

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

了解Axure基本功能的朋友應(yīng)該都知道母版功能，它可以用來(lái)管理一些比較通用的界面元素，可以快速拖動(dòng)到不同的界面中并支持統(tǒng)一修改，善用母版功能讓你的設(shè)計(jì)效率提升不少。下面的截圖就是我在設(shè)計(jì)后臺(tái)系統(tǒng)中所建立的母版，其中包含了通用的頂部或底部元素、常用的分頁(yè)插件和編輯器、常用的按紐元素等。

母版的創(chuàng)建有兩種方式，第一種是在編輯界面中選中對(duì)應(yīng)的元素右擊選擇“轉(zhuǎn)換為母版”，第二種是在母版管理面板中點(diǎn)擊右上角第一個(gè)“添加母版”按紐進(jìn)行創(chuàng)建。建議在創(chuàng)建的時(shí)候?qū)δ赴孢M(jìn)行命名，如果母版過(guò)多的話可以創(chuàng)建文件夾進(jìn)行管理。

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

Axure里的中繼器元件是用于實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的效果的，但是利于它的特征可以用來(lái)方便的管理列表元素。如果我們需要一個(gè)多行的數(shù)據(jù)列表，通常的做法是先創(chuàng)建好一行的元素，然后進(jìn)行復(fù)制排列。

如果這個(gè)數(shù)據(jù)列表有20行，我們就需要復(fù)制19行然后排列對(duì)齊，這個(gè)操作是一個(gè)很耗時(shí)而且麻煩的過(guò)程，對(duì)于有對(duì)齊強(qiáng)迫癥的朋友來(lái)說(shuō)更是惡夢(mèng)。但是通過(guò)使用中繼器，我們只需要?jiǎng)?chuàng)建好一行的元素，然后將它復(fù)制到中繼器中，再在中斷器中批量增加19行，這樣的一個(gè)多行的數(shù)據(jù)排列就創(chuàng)建好了。

中繼器的創(chuàng)建方法很簡(jiǎn)單，從軟件的元件面板中拖動(dòng)到編輯界面中即可。新創(chuàng)建的中繼器默認(rèn)有3行，你可以刪除掉里面的元素，然后在里面編輯自己所需要的元素即可。選中中繼器元件時(shí)在右側(cè)的屬性中，我們可以通過(guò)中斷器的行管理上方的圖標(biāo)快速的新增和刪除行數(shù)。

在中繼器的樣式管理中，我們還可以對(duì)它的樣式、間距、布局方式進(jìn)行設(shè)置。例如，你可以控制每行或每列顯示的數(shù)量，通過(guò)這些設(shè)置可以用它來(lái)創(chuàng)建類型更豐富的列表方式。

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

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

后臺(tái)系統(tǒng)中常用的交互元素一般有菜單、圖標(biāo)、按紐、表單等，根據(jù)后臺(tái)業(yè)務(wù)功能的需要也會(huì)用到各種定制化的選擇及篩選組件。通常我會(huì)在原型中創(chuàng)建相關(guān)的模板頁(yè)面將交互元素及組件進(jìn)行分類整理。這樣的做法出于以下的考慮：

• 第一，可以在設(shè)計(jì)過(guò)程中快速的復(fù)用相關(guān)的元素，在設(shè)計(jì)的時(shí)候可能需要用到某個(gè)元素時(shí)，不用再去以前做過(guò)的頁(yè)面中查找；
• 第二，可以將系統(tǒng)中統(tǒng)一通用的交互效果梳理出來(lái)，提供參考示例。例如，數(shù)據(jù)提交的反饋提示、數(shù)據(jù)加載反饋等交互效果；
• 第三，通過(guò)不斷的優(yōu)化改造自己常用的元件類型，建立一套個(gè)人的Axure元件庫(kù)，方便在以后其它類似的項(xiàng)目中使用；

以上是整理的后臺(tái)系統(tǒng)中常用的交互元件及組件的部分截圖，提供給大家進(jìn)行參考。另外，分享給大家一套我整理的WEB元件庫(kù)，其中很多組件同樣適用于后臺(tái)系統(tǒng)的原型設(shè)計(jì)。

AxureUX交互原型Web元件庫(kù)精簡(jiǎn)版：http://www.axureux.com/home/librariesweblite.html

8.圖標(biāo)的使用技巧和推薦

原型設(shè)計(jì)中需要用到圖標(biāo)的可以通過(guò)很多方式獲取到，例如有各類海量的圖標(biāo)庫(kù)搜索網(wǎng)站、免費(fèi)的圖標(biāo)素材下載，還有其它同行整理好的圖標(biāo)元件庫(kù)，大家在百度中搜索一下都能找到相關(guān)的資源。我個(gè)人最常用的是阿里巴巴的團(tuán)隊(duì)推出的圖標(biāo)分享平臺(tái)iconfont，推薦它的原因有兩個(gè)，首先它的圖標(biāo)數(shù)量非常全面，目前收錄的圖標(biāo)數(shù)量在160萬(wàn)枚以上，只需要通過(guò)搜索功能就能快速檢索到自己需要的圖標(biāo)。其次，這個(gè)平臺(tái)里面的圖標(biāo)自定義顏色，提供SVG\PNG等多種格式的下載。

SVG是一種矢量的圖標(biāo)格式，你可以將下載到的SVG圖標(biāo)直接拖入到Axure的編輯界面中，支持隨意縮放而且不會(huì)失真。在Axure 8.0的3312的以上版本中，新加入了可以將SVG圖標(biāo)轉(zhuǎn)換為形狀的實(shí)用功能，只需要選中對(duì)應(yīng)的SVG圖標(biāo)右擊“轉(zhuǎn)換SVG圖片為形狀”即可。SVG圖標(biāo)轉(zhuǎn)換為形狀后，除了支持隨意縮放之外，還可以根據(jù)需要修改顏色和外觀。如果你還沒(méi)有使用過(guò)這個(gè)功能建議趕緊嘗試一下，當(dāng)然你的Axure版本首先需要升級(jí)到8.0.0.3312以上。

本人推薦的另一種是FontAwesome字體圖標(biāo)方案，它的原理是使用字體方式實(shí)現(xiàn)的圖標(biāo)效果，在Axure中可以通過(guò)字體的特性對(duì)FontAwesome圖標(biāo)進(jìn)行更改，包括：大小、顏色、陰影或者其它字體支持的效果。這種字體圖標(biāo)可以運(yùn)用到很多常用的場(chǎng)景里，例如，用它來(lái)實(shí)現(xiàn)按紐的交互樣式設(shè)置，用來(lái)取代默認(rèn)的單選、復(fù)選、開(kāi)關(guān)圖標(biāo)。當(dāng)你在表格或列表中使用到字體圖標(biāo)時(shí)，可以非常的方便的像文本一樣進(jìn)行編輯和修改。下面的表格中所到的圖片、開(kāi)關(guān)、編輯等圖標(biāo)都是使用了FontAwesome字體圖標(biāo)。

FontAwesome字體圖標(biāo)方案使用說(shuō)明：http://www.axureux.com/home/fontawesome.html

9.不要糾結(jié)于細(xì)節(jié)的交互效果；

在進(jìn)行后臺(tái)系統(tǒng)原型設(shè)計(jì)時(shí)，不要將時(shí)間花費(fèi)在細(xì)節(jié)的交互效果的實(shí)現(xiàn)上，例如：數(shù)據(jù)提交時(shí)成功和錯(cuò)誤反饋、執(zhí)行相關(guān)操作的確認(rèn)提示、數(shù)據(jù)處理時(shí)的加載效果、下拉菜單的交互效果等等。有些追求高保真效果的同學(xué)會(huì)過(guò)度關(guān)注這些細(xì)節(jié)，會(huì)耗費(fèi)很多時(shí)間在這些細(xì)節(jié)效果處理上，這樣不僅會(huì)影響到輸出效率而且意義不大。對(duì)于這類統(tǒng)一通用的交互效果，建議可以用一個(gè)專門(mén)的頁(yè)面將它們梳理出來(lái)，然后再在相關(guān)頁(yè)面中關(guān)聯(lián)的元件中進(jìn)行備注說(shuō)明。

到此為止，關(guān)于使用Axure設(shè)計(jì)后臺(tái)系統(tǒng)原型的總結(jié)分享基本就結(jié)束了，如果對(duì)分享中的內(nèi)容有疑問(wèn)或者有什么建議可以反饋給我。這個(gè)分享中還有一些可以繼續(xù)深入的細(xì)節(jié)或存在遺漏之處，以后將以其它的方式與大家繼續(xù)進(jìn)行分享。最后，提供一套我制作后的后臺(tái)系統(tǒng)框架源文件給大家，希望能給大家?guī)?lái)一些參考和幫助。

后臺(tái)管理系統(tǒng)框架原型模板下載：https://pan.baidu.com/s/1dFbAm5r

本文由 @windir?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議