使用Axure設(shè)計中,大型的后臺系統(tǒng)原型總結(jié)(上篇)
在產(chǎn)品原型設(shè)計中,經(jīng)常會涉及到后臺系統(tǒng)原型的設(shè)計,如何設(shè)計出更規(guī)范標(biāo)準(zhǔn)的后臺系統(tǒng)原型,是很多產(chǎn)品同行們都會遇到的一個問題。本人結(jié)合自己實(shí)際的多個后臺系統(tǒng)項目經(jīng)歷以及使用Axure的經(jīng)驗技巧,從方便維護(hù)和便于復(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)相當(dāng)于它骨架,對于原型設(shè)計來說是同樣的原理,當(dāng)框架確定之后再填充完善里面的功能模塊就會輕松很多了。后臺系統(tǒng)的結(jié)構(gòu)其實(shí)一般都比較固定,主要以下三個部分組成:
- 導(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)頁面進(jìn)行鏈接,使用導(dǎo)航菜單實(shí)現(xiàn)內(nèi)容頁面的切換。這樣的處理有幾方面的好處:
- 方便對內(nèi)容頁面進(jìn)行修改和維護(hù),不需要在每個內(nèi)容頁面中管理導(dǎo)航區(qū)域和功能區(qū)域;
- 可以結(jié)合函數(shù)實(shí)現(xiàn)自適應(yīng)的瀏覽效果(第二部分會詳細(xì)說明);
- 原型設(shè)計完成之后導(dǎo)出的文件會更輕量,加載起來會更快。
前面介紹到了后臺系統(tǒng)的框架都比較固定,所以它的布局相對于前臺產(chǎn)品來說其實(shí)更簡單清晰,目前主流的一般都是上下結(jié)構(gòu)或左右結(jié)構(gòu)兩種。這兩種結(jié)構(gòu)一般能承載大部分中大型后臺系統(tǒng)的設(shè)計需求,在實(shí)際的項目中可以根據(jù)需要選擇對應(yīng)的框架。
以下是我使用Axure設(shè)計的一套后臺系統(tǒng)模板,分別使用了兩種布局方式(只是框架頁不同,內(nèi)容頁面是同一套),其中的內(nèi)容區(qū)域都使用了內(nèi)聯(lián)框架,點(diǎn)擊演示地址可以進(jì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中進(jìn)行結(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。這套尺寸值并沒有嚴(yán)格的標(biāo)準(zhǔn),在實(shí)際設(shè)計時可以根據(jù)需要進(jìn)行調(diào)整,但是內(nèi)聯(lián)框架的寬度的不能小于內(nèi)容頁面的尺寸,否則在演示時內(nèi)聯(lián)框架會出現(xiàn)橫向的滾動條。除此之外,還需要進(jìn)行下列設(shè)置。
在框架頁面的樣式中設(shè)置頁面排列方式為居左對齊。
在左側(cè)動態(tài)面板屬性中設(shè)置“自動顯示垂直滾動條”。
在內(nèi)容框架屬性中“選擇目標(biāo)框架”,框架目標(biāo)為加載時的默認(rèn)顯示頁面。同時設(shè)置框架滾動條為“自動顯示或隱藏”,將“隱藏邊框”選框勾選。
3. 使用函數(shù)實(shí)現(xiàn)框架自適應(yīng)效果
在完成框架結(jié)構(gòu)的搭建并填充好菜單等基礎(chǔ)元素之后,如果我們需要實(shí)現(xiàn)演示時框架像真實(shí)的后臺系統(tǒng)環(huán)境一樣在瀏覽器中的自適應(yīng)效果該如何處理呢?這時我們需要用到動態(tài)面板的特性以及Axure的函數(shù)。
首先是頂部動態(tài)面板的處理,一般頂部區(qū)域都會有一個背景色,在動態(tài)面板的樣式中設(shè)置背景色就可以了。
設(shè)置完背景色之后需要再在動態(tài)面板的屬性中勾選“100%寬度”,這樣在預(yù)覽時就可以看到頂部區(qū)域的背景在瀏覽器實(shí)現(xiàn)了100%的填充效果。
實(shí)現(xiàn)框架自適應(yīng)效果的關(guān)鍵是函數(shù)的運(yùn)用,它的原理是運(yùn)用頁面窗口尺寸改變時獲取瀏覽器窗口的高度和寬度,通過獲取到的高度和寬度值改變左側(cè)區(qū)域和內(nèi)容框架的尺寸,實(shí)現(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ù)實(shí)現(xiàn)自適應(yīng)效果
以上就是通過動態(tài)面板和函數(shù)的設(shè)置實(shí)現(xiàn)的框架自適應(yīng)效果的方法。其中有些細(xì)節(jié)可能需要大家在設(shè)計時進(jìn)行一些摸索,不過如果你通過個方法搭建好了一個自適應(yīng)的框架效果,是可以快速復(fù)用到其它類似的項目原型中的。
4. 使用動態(tài)面板和函數(shù)快速設(shè)置多層級菜單
一般在后臺系統(tǒng)中都會有多層級菜單,以上下結(jié)構(gòu)的框架為例,頂部動態(tài)面板區(qū)域中的菜單為一級菜單,左側(cè)動態(tài)面板為一級菜單對應(yīng)的二級菜單。這個時候需要用到動態(tài)面板,實(shí)現(xiàn)點(diǎn)擊一級菜單時,二級菜單進(jìn)行狀態(tài)切換的效果。一般的做法是在一級菜單中對應(yīng)的元件上添加點(diǎn)擊事件,設(shè)置二級菜單的動態(tài)面板為指定的狀態(tài)。當(dāng)有多個菜單的時候,單獨(dú)去設(shè)置每個一級菜單的點(diǎn)擊切換狀態(tài)是很麻煩的,而通過函數(shù)則不需要對每個菜單進(jìn)行單獨(dú)設(shè)置。具體設(shè)置方法如下:
- 將二級菜單動態(tài)面板中對應(yīng)的狀態(tài)名稱跟一級菜單的對應(yīng)的元件文本內(nèi)容修改為一致;
- 在一級菜單中對應(yīng)的元件上添加點(diǎn)擊事件設(shè)置二級菜單動態(tài)面板狀態(tài),選擇狀態(tài)為Value,設(shè)置狀態(tài)名稱或序號為:[[This.text]];
- 這個設(shè)置的方法是能過[[This.text]]函數(shù)獲取當(dāng)前元件的文本,然后設(shè)置目標(biāo)動態(tài)面板狀態(tài)為當(dāng)前文本對象。
只需要這兩步就搞定了多層級菜單的快速設(shè)置,這個方法是動態(tài)面板結(jié)合函數(shù)的一個小的運(yùn)用,大家只需要靈活運(yùn)用可以用來處理很多類型的交互效果,相信會大大提升你的效率。
這篇分享主要介紹了關(guān)于后臺系統(tǒng)框架的搭建,有興趣的朋友可以參考一下其中的方法和技巧。為了便于大家能對一些知識點(diǎn)進(jìn)行消化和理解,決定將這個分享分為上下兩篇發(fā)出來。在下篇中我將介紹關(guān)于后臺系統(tǒng)原型設(shè)計的一些規(guī)范和細(xì)節(jié)處理技巧,同時還會提供一個框架模板的源文件供大家進(jìn)行參考,請有需要的朋友關(guān)注。
Axure函數(shù)對于首次使用的朋友來說能會稍感復(fù)雜,不過只要理解了它的設(shè)置原理也是能快速掌握的。如果能掌握一些基礎(chǔ)函數(shù)的使用方法,是可以運(yùn)用到很多原型相關(guān)的細(xì)節(jié)處理中的。本分享中只是涉及到了一部分基礎(chǔ)函數(shù)的使用,如果需要了解函數(shù)的更多使用方法可以訪問以下鏈接。
AxureRP 8函數(shù)及運(yùn)算符說明文檔:http://www.axureux.com/home/functions.html
本文由 @windir?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
(題圖由作者提供)
講的很好,可以發(fā)份原型嗎?謝謝。hongshishan@126.com
太厲害了,球球資源了大牛!2500198070@qq.com
大佬,想要一份原型進(jìn)行學(xué)習(xí),我的郵箱:1905940850@qq.com
太厲害了,球球資源了大牛!1010099848@qq.com
點(diǎn)贊關(guān)注了,跪求源文件,謝謝了,1365354406@qq.com
看了文章,覺得很厲害,立馬點(diǎn)贊,要是能發(fā)一份原型學(xué)習(xí)參考下,就更棒了!
4511410141@qq.com,跪謝大神!
跪求一份源文件,非常感謝!1142332563@qq.com
膜拜大佬,可以發(fā)我一份原型學(xué)習(xí)一下嗎?非常感謝 3151939728@qq.com
寫得太好了,能麻煩發(fā)一份原型到我郵箱嗎?非常感謝~~ zhanyc2006@126.com
寫的很好 能麻煩發(fā)一份原型文件嗎? 4512138@qq.com 十分感謝
膜拜大神,問下可以分享模板原型供學(xué)習(xí)下么,非常感謝哈,郵箱:1092982046@qq.com
你好 很佩服你的產(chǎn)品設(shè)計能力 也想緊跟步伐 方便把這兩套演示模板分享給我學(xué)習(xí)不 謝謝。 郵箱:842583494@qq.com
您好能把原型發(fā)我一份嗎?1559822982@qq.com謝謝了
大佬,我先膜拜一下再說要求。我想用你的這套原型學(xué)習(xí)一下可以不?我的郵箱是1941915230@qq.com