在產(chǎn)品原型設(shè)計(jì)中，經(jīng)常會(huì)涉及到后臺(tái)系統(tǒng)原型的設(shè)計(jì)，如何設(shè)計(jì)出更規(guī)范標(biāo)準(zhǔn)的后臺(tái)系統(tǒng)原型，是很多產(chǎn)品同行們都會(huì)遇到的一個(gè)問(wèn)題。本人結(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)容，希望能幫助到一些有需要的朋友們。

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

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

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

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

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

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

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

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

點(diǎn)擊查看演示

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

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

點(diǎn)擊查看演示

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

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

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

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

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

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

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

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

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

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

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

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

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

• 在頁(yè)面屬性中設(shè)置窗口尺寸改變時(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。

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

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

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

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

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

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

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

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

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

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

（題圖由作者提供）