作者分享了自己做pc?web端產(chǎn)品后臺框架的設(shè)計過程，希望能夠?qū)δ愕脑驮O(shè)計工作帶來幫助。

本人前段事件做了專家管理產(chǎn)品的pc?web端產(chǎn)品，按照當(dāng)時的要求，制作了高保真的原型。在這個原型里面，實(shí)現(xiàn)了屏幕自適應(yīng)、菜單動態(tài)展示、列表頁面的排序分頁等功能，使用了動態(tài)面板、中繼器等元件，設(shè)計風(fēng)格上參考了螞蟻金服的ant?design，因?yàn)槭呛笈_管理系統(tǒng)，所以設(shè)計風(fēng)格上也比較緊湊，我把這個過程寫出來，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

頁面布局

在開始制作原型之前，先要做的是對頁面的布局。對于PC端的系統(tǒng)，一般常見的布局有下面的A、B兩種模式：

在本次原型里面，因?yàn)閿?shù)據(jù)和內(nèi)容比較多，我們考慮要做的緊湊一點(diǎn)，給用戶盡可能多的操作空間，所以采用A模式，具體各區(qū)域的智能如下所示：

• 上部區(qū)域：顯示產(chǎn)品logo、名稱、一級菜單?和?用戶菜單區(qū)域(主要包括系統(tǒng)消息、修改密碼、退出系統(tǒng)等功能)；
• 左側(cè)區(qū)域：顯示二級菜單、三級菜單，因?yàn)樵谏喜繀^(qū)域已經(jīng)有了一級菜單，對于一般的系統(tǒng)來說，菜單到了三級就可以，不簡易菜單層級過深；
• 右側(cè)區(qū)域：顯示具體的內(nèi)容區(qū)域，這塊區(qū)域就是具體的內(nèi)容頁面，包括面包屑導(dǎo)航和具體的內(nèi)容頁面；

頁面布局axure實(shí)現(xiàn)

對于上面的A模式的設(shè)計，用戶的操作模式如下：

1. 用戶點(diǎn)擊【上】區(qū)域的一級菜單，【左】區(qū)域展示對應(yīng)的二級菜單
2. 用戶點(diǎn)擊【左】區(qū)域的二級菜單，【右】區(qū)域顯示具體的操作頁面

按照這個需求，我們進(jìn)行這樣的操作：

1. 上區(qū)域拖入動態(tài)面板，命名為top_menu;
2. 左區(qū)域拖入動態(tài)面板，命名為left_menu;
3. 有區(qū)域拖入內(nèi)聯(lián)框架，命名為content；

實(shí)現(xiàn)頁面自適應(yīng)

因?yàn)殡娔X屏幕的尺寸不同，我們要制作原型，讓原型在展示的時候能夠自動適應(yīng)屏幕的大小。

（1）我們的原型是基于1366*768的分辨率進(jìn)行設(shè)計；

（2）頂部菜單top_menu的高度為固定的64，寬度為1366，并且設(shè)置該動態(tài)面板為100%寬度，這樣就能保證動態(tài)面板寬度適應(yīng)瀏覽器；

（3）設(shè)置左側(cè)菜單left_menu?的尺寸為 256*700 ；

（4）同樣設(shè)置內(nèi)容區(qū)域content的尺寸；

（5）現(xiàn)在到了最關(guān)鍵的一步，如果頁面尺寸發(fā)生變化，我們需要動態(tài)改變左側(cè)菜單left_menu的寬度和內(nèi)容區(qū)域content的高度，即在窗口尺寸發(fā)生變化的時候：

• 左側(cè)菜單left_menu的高度 =?窗口高度 –?頂部菜單top_menu高度
• 內(nèi)容區(qū)域content的高度 =?窗口高度 –?頂部菜單top_menu高度
• 內(nèi)容區(qū)域content的寬度 =?窗口寬度 –?左側(cè)菜單left_menu寬度

我通過在當(dāng)前頁面的頁面尺寸改變事件里面實(shí)現(xiàn)此功能：

頂部菜單實(shí)現(xiàn)

頂部菜單就是一級導(dǎo)航菜單，頂部菜單實(shí)現(xiàn)起來比較簡單，通過矩形制作就可以了，但是要注意頂部菜的交互，即在點(diǎn)擊美一個一級導(dǎo)航菜單的時候，都要展示對應(yīng)的左側(cè)菜單（左側(cè)菜單的實(shí)現(xiàn)后面會說）。

用戶菜單

在頂部菜單的右側(cè)，還有用戶菜單，用戶菜單就是大家通常使用的右上角菜單，包括消息列表、幫助、系統(tǒng)設(shè)置、退出系統(tǒng)等功能。對于用戶菜單，也需要動態(tài)面板來實(shí)現(xiàn)。并且隨著頁面大小的調(diào)整，用戶菜單也要向右移動對應(yīng)的位置。

即用戶菜單的位置 =?窗口寬度 –? 用戶菜單寬度 – 50 （50是調(diào)整距離，是用戶菜單的右側(cè)靠近瀏覽器右邊的距離）

用戶菜單的調(diào)整同樣要在頁面尺寸改變事件進(jìn)行設(shè)置。

左側(cè)菜單

左側(cè)菜單就是二級、三級菜單，同樣通過動態(tài)面板來實(shí)現(xiàn)，有幾個一級菜單，動態(tài)面板就要有幾個對應(yīng)的狀態(tài)，點(diǎn)擊一級菜單，就是動態(tài)的切換動態(tài)面板的狀態(tài)。

同樣，在每個二級、三級菜單里面，需要進(jìn)行菜單的展開、收起的交互。具體的實(shí)現(xiàn)方式是：

1. 每個二級菜單都是一個動態(tài)面板；
2. 面板里面有兩個狀態(tài)，展開和收起的狀態(tài)，
3. 用戶點(diǎn)擊收起、展開按鈕，切換動態(tài)面板狀態(tài)；
4. 這里要注意一點(diǎn)，要選擇【推動和拉動元件】，這樣在收起和展開的時候，其他的二級菜單的位置才會調(diào)整；

內(nèi)容的展示

內(nèi)容的展示比較簡單，就是在點(diǎn)擊菜單的時候，在content內(nèi)聯(lián)框架中打開具體的內(nèi)容頁面就可以了。

結(jié)果

到了這里，自適應(yīng)的高保真axure框架原型就做好了，想看演示的可以參考高保真演示。

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

題圖來自Unsplash，基于CC0協(xié)議