在產(chǎn)品原型設(shè)計中，經(jīng)常會涉及到后臺系統(tǒng)原型的設(shè)計，如何設(shè)計出更規(guī)范標準的后臺系統(tǒng)原型，是很多產(chǎn)品同行們都會遇到的一個問題。本人結(jié)合自己實際的多個后臺系統(tǒng)項目經(jīng)歷以及使用Axure的經(jīng)驗技巧，從方便維護和便于復(fù)用等角度出發(fā)，總結(jié)出了這篇關(guān)于后臺系統(tǒng)原型設(shè)計的分享內(nèi)容，希望能幫助到一些有需要的朋友們。

1. 確定框架結(jié)構(gòu)和布局方案

在正式開始設(shè)計一套后臺系統(tǒng)原型之前，我們需要先確定它的框架結(jié)構(gòu)。我們都知道產(chǎn)品的框架結(jié)構(gòu)相當于它骨架，對于原型設(shè)計來說是同樣的原理，當框架確定之后再填充完善里面的功能模塊就會輕松很多了。后臺系統(tǒng)的結(jié)構(gòu)其實一般都比較固定，主要以下三個部分組成：

• 導(dǎo)航區(qū)域（Logo、導(dǎo)航菜單）；
• 功能區(qū)域（賬戶信息、系統(tǒng)消息、退出登錄）；
• 內(nèi)容區(qū)域（數(shù)據(jù)列表、錄入表單）。

一般為了方便操作和在多個模塊中快速切換，后臺系統(tǒng)的導(dǎo)航區(qū)域和功能區(qū)域都是固定在頁面的頂部或左側(cè)的，主要的刷新區(qū)域只有內(nèi)容區(qū)域。所以我的做法是將三個部分放在一個框架頁面內(nèi)，將內(nèi)容區(qū)域使用內(nèi)聯(lián)頁面進行鏈接，使用導(dǎo)航菜單實現(xiàn)內(nèi)容頁面的切換。這樣的處理有幾方面的好處：

• 方便對內(nèi)容頁面進行修改和維護，不需要在每個內(nèi)容頁面中管理導(dǎo)航區(qū)域和功能區(qū)域；
• 可以結(jié)合函數(shù)實現(xiàn)自適應(yīng)的瀏覽效果（第二部分會詳細說明）；
• 原型設(shè)計完成之后導(dǎo)出的文件會更輕量，加載起來會更快。

前面介紹到了后臺系統(tǒng)的框架都比較固定，所以它的布局相對于前臺產(chǎn)品來說其實更簡單清晰，目前主流的一般都是上下結(jié)構(gòu)或左右結(jié)構(gòu)兩種。這兩種結(jié)構(gòu)一般能承載大部分中大型后臺系統(tǒng)的設(shè)計需求，在實際的項目中可以根據(jù)需要選擇對應(yīng)的框架。

以下是我使用Axure設(shè)計的一套后臺系統(tǒng)模板，分別使用了兩種布局方式（只是框架頁不同，內(nèi)容頁面是同一套），其中的內(nèi)容區(qū)域都使用了內(nèi)聯(lián)框架，點擊演示地址可以進行體驗。

左右結(jié)構(gòu)框架

點擊查看演示

圖中的1為導(dǎo)航區(qū)域、2為功能區(qū)域、3為內(nèi)容區(qū)域，使用內(nèi)聯(lián)框架鏈接。

上下結(jié)構(gòu)框架

點擊查看演示

圖中的1為一級導(dǎo)航區(qū)域、2為功能區(qū)域、3為二三級導(dǎo)航區(qū)域、4為內(nèi)容區(qū)域，使用內(nèi)聯(lián)框架鏈接。

2. 在Axure中進行結(jié)構(gòu)框架的搭建

如果我們已經(jīng)選擇了一套框架和布局方案，第二步就可以在Axure中建立框架頁開始結(jié)構(gòu)的搭建了。以上下結(jié)構(gòu)的框架為例，在搭建框架時需要先新建一個頂部的動態(tài)面板（包含一級導(dǎo)航區(qū)域和功能區(qū)域）、一個左側(cè)的動態(tài)面板（包含二三級導(dǎo)航區(qū)域）、一個內(nèi)聯(lián)框架。

圖中的1為頂部動態(tài)面板、2為左側(cè)動態(tài)面板、3為內(nèi)容頁面內(nèi)聯(lián)框架

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

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

在左側(cè)動態(tài)面板屬性中設(shè)置“自動顯示垂直滾動條”。

在內(nèi)容框架屬性中“選擇目標框架”，框架目標為加載時的默認顯示頁面。同時設(shè)置框架滾動條為“自動顯示或隱藏”，將“隱藏邊框”選框勾選。

3. 使用函數(shù)實現(xiàn)框架自適應(yīng)效果

在完成框架結(jié)構(gòu)的搭建并填充好菜單等基礎(chǔ)元素之后，如果我們需要實現(xiàn)演示時框架像真實的后臺系統(tǒng)環(huán)境一樣在瀏覽器中的自適應(yīng)效果該如何處理呢？這時我們需要用到動態(tài)面板的特性以及Axure的函數(shù)。

首先是頂部動態(tài)面板的處理，一般頂部區(qū)域都會有一個背景色，在動態(tài)面板的樣式中設(shè)置背景色就可以了。

設(shè)置完背景色之后需要再在動態(tài)面板的屬性中勾選“100%寬度”，這樣在預(yù)覽時就可以看到頂部區(qū)域的背景在瀏覽器實現(xiàn)了100%的填充效果。

實現(xiàn)框架自適應(yīng)效果的關(guān)鍵是函數(shù)的運用，它的原理是運用頁面窗口尺寸改變時獲取瀏覽器窗口的高度和寬度，通過獲取到的高度和寬度值改變左側(cè)區(qū)域和內(nèi)容框架的尺寸，實現(xiàn)在瀏覽器中的自適應(yīng)效果。具體設(shè)置方法如下：

• 在頁面屬性中設(shè)置窗口尺寸改變時事件；
• 設(shè)置左側(cè)菜單(左側(cè)動態(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。

在頁面屬性中設(shè)置窗口尺寸改變時事件，利用函數(shù)實現(xiàn)自適應(yīng)效果

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

4. 使用動態(tài)面板和函數(shù)快速設(shè)置多層級菜單

一般在后臺系統(tǒng)中都會有多層級菜單，以上下結(jié)構(gòu)的框架為例，頂部動態(tài)面板區(qū)域中的菜單為一級菜單，左側(cè)動態(tài)面板為一級菜單對應(yīng)的二級菜單。這個時候需要用到動態(tài)面板，實現(xiàn)點擊一級菜單時，二級菜單進行狀態(tài)切換的效果。一般的做法是在一級菜單中對應(yīng)的元件上添加點擊事件，設(shè)置二級菜單的動態(tài)面板為指定的狀態(tài)。當有多個菜單的時候，單獨去設(shè)置每個一級菜單的點擊切換狀態(tài)是很麻煩的，而通過函數(shù)則不需要對每個菜單進行單獨設(shè)置。具體設(shè)置方法如下：

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

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

這篇分享主要介紹了關(guān)于后臺系統(tǒng)框架的搭建，有興趣的朋友可以參考一下其中的方法和技巧。為了便于大家能對一些知識點進行消化和理解，決定將這個分享分為上下兩篇發(fā)出來。在下篇中我將介紹關(guān)于后臺系統(tǒng)原型設(shè)計的一些規(guī)范和細節(jié)處理技巧，同時還會提供一個框架模板的源文件供大家進行參考，請有需要的朋友關(guān)注。

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

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

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

（題圖由作者提供）