使用Axure設(shè)計(jì)中,大型的后臺(tái)系統(tǒng)原型總結(jié)(上篇)
在產(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)框架
圖中的1為導(dǎo)航區(qū)域、2為功能區(qū)域、3為內(nèi)容區(qū)域,使用內(nèi)聯(lián)框架鏈接。
上下結(jié)構(gòu)框架
圖中的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)載。
(題圖由作者提供)
看了一眼演示,跪著退出來(lái)了 ?? ,立馬注冊(cè)回復(fù),厲害啊
看了開(kāi)頭,直接點(diǎn)贊
大梨,請(qǐng)問(wèn)怎么把echart圖表放到axure里面?
還是通過(guò)內(nèi)聯(lián)框架,里面編輯鏈接就可以了
在本地用內(nèi)聯(lián)框架鏈接,不過(guò)有點(diǎn)麻煩吧,哈哈~
直接鏈接到本地的echart文件嗎?
流弊呀
你這個(gè)這么搞,搞死人的,開(kāi)發(fā)都是理想狀態(tài),跟開(kāi)源系統(tǒng)后臺(tái)真像,架構(gòu)這塊也能這么玩,不是根據(jù)業(yè)務(wù)來(lái)的吧
這個(gè)框架不是給開(kāi)發(fā)用的,而是用于原型設(shè)計(jì)的,主要目的還是為了提供設(shè)計(jì)效率和方便維護(hù)。
大神,你這樣搞,設(shè)計(jì)都沒(méi)飯吃了啊,對(duì)于間距要求不高的可以直接拿來(lái)開(kāi)發(fā)的原型啊,畢竟設(shè)計(jì)出的圖到最后也不一定能還原實(shí)現(xiàn) ?? ??
專門(mén)登陸來(lái)點(diǎn)贊
十分感謝~
點(diǎn)擊二級(jí)菜單,三級(jí)菜單會(huì)聯(lián)動(dòng)出現(xiàn)的那個(gè)小三角是怎么實(shí)現(xiàn)的啊?
是通過(guò)函數(shù)實(shí)現(xiàn)的定位。
內(nèi)容區(qū)域的自適應(yīng)有沒(méi)有好的方法實(shí)現(xiàn)
內(nèi)容區(qū)域是沒(méi)有辦法實(shí)現(xiàn)自適應(yīng)的。
跪著看完的,受益匪淺,設(shè)計(jì)思想很受用,期待下篇!
謝謝支持哈~
在期待你的下一篇文章和火爆場(chǎng)景。
axure大神!
文中沒(méi)有提到工具欄,為什么有個(gè)工具欄的設(shè)置
哈哈!眼神真尖啊,這塊工具欄指的就是上面提到的功能區(qū)域,這個(gè)設(shè)置的作用是定位它始終處于瀏覽的最右側(cè)。我沒(méi)有展開(kāi)來(lái)講,但下篇中提供的源文件中可以看到這個(gè)設(shè)置。
好厲害的原型
很棒
原型上有色彩會(huì)影響視覺(jué)設(shè)計(jì)
框架是目前比較流行的,況且作者拿線框圖給我們看也說(shuō)不過(guò)去。這原型很好看的
容易被原型上色彩影響的設(shè)計(jì)肯定不是好設(shè)計(jì),哈哈?。?! 并不是所有的原型都必須做成黑白灰的,原型配色可用來(lái)區(qū)分視覺(jué)層級(jí),掌握一點(diǎn)簡(jiǎn)單的配色技巧也是有必要的,具體要看團(tuán)隊(duì)協(xié)作的需要。
期待下篇!
做了多久
一下下
nice 期待下篇 很詳細(xì) 贊
非常棒?。〔坏貌毁?!
原型做的太棒啦
很好。。
請(qǐng)教:內(nèi)聯(lián)框架怎么實(shí)現(xiàn)自適應(yīng)???頂部的導(dǎo)航欄通過(guò)動(dòng)態(tài)面板自適應(yīng)了,下面的內(nèi)聯(lián)框架沒(méi)有跟著自適應(yīng),而且滾動(dòng)條是怎么實(shí)現(xiàn)不顯示還能滾動(dòng)的呢 ??
里面已經(jīng)介紹了,內(nèi)聯(lián)框架的寬度是根據(jù)函數(shù)獲取瀏覽器寬度實(shí)現(xiàn)自適應(yīng)的。而滾動(dòng)條設(shè)置成了“自動(dòng)顯示或隱藏”,當(dāng)內(nèi)聯(lián)框架中目標(biāo)頁(yè)面的高度超出時(shí)才會(huì)顯示縱向的滾動(dòng)條。
sorry,寬度的沒(méi)留意到。 滾動(dòng)條設(shè)置為超過(guò)才顯示,那么超過(guò)的情況會(huì)出現(xiàn)一個(gè)內(nèi)聯(lián)框架的滾動(dòng)條還有一個(gè)瀏覽器的滾動(dòng)條啊,這個(gè)我看你的案例里面是沒(méi)有的,就只有一個(gè)瀏覽器的滾動(dòng)條,怎么實(shí)現(xiàn)呢
通過(guò)這種自適應(yīng)方式,瀏覽器的滾動(dòng)條是不會(huì)顯示出來(lái)的,只會(huì)出現(xiàn)內(nèi)聯(lián)框架的縱向滾動(dòng)條。
66666!可否分享源文件呢 ??
好想求源文件 ??
我在下篇分享中會(huì)將框架源文件發(fā)出來(lái)的,請(qǐng)關(guān)注。
跪求
贊
梨哥棒棒噠.
我梨哥哥依然如此棒! ?? 學(xué)到了!
大梨出奇跡
很贊!繼續(xù)耕耘 ??
感謝分享,自適應(yīng)那里學(xué)到了!