【前言】
本人前段事件做了專家管理產品的pc web端產品，按照當時的要求，製作了高保真的原型。在這個原型裏面，實現了屏幕自適應、菜單動態展示、列表頁面的排序分頁等功能，使用了動態面板、中繼器等元件，設計風格上參考了螞蟻金服的ant design，因爲是後臺管理系統，所以設計風格上也比較緊湊，我把這個過程寫出來，希望能夠對大家有所幫助。
【頁面佈局】
在開始製作原型之前，先要做的是對頁面的佈局。對於PC端的系統，一般常見的佈局有下面的A、B兩種模式：
在本次原型裏面，因爲數據和內容比較多，我們考慮要做的緊湊一點，給用戶儘可能多的操作空間，所以採用A模式，具體各區域的智能如下所示：
上部區域：顯示產品logo、名稱、一級菜單 和 用戶菜單區域(主要包括系統消息、修改密碼、退出系統等功能)；
左側區域：顯示二級菜單、三級菜單，因爲在上部區域已經有了一級菜單，對於一般的系統來說，菜單到了三級就可以，不簡易菜單層級過深；
右側區域：顯示具體的內容區域，這塊區域就是具體的內容頁面，包括麪包屑導航和具體的內容頁面；
【頁面佈局axure實現】
對於上面的A模式的設計，用戶的操作模式如下：
A、用戶點擊【上】區域的一級菜單，【左】區域展示對應的二級菜單
B、用戶點擊【左】區域的二級菜單，【右】區域顯示具體的操作頁面
按照這個需求，我們進行這樣的操作：
A、上區域拖入動態面板，命名爲top_menu;
B、左區域拖入動態面板，命名爲left_menu;
C、有區域拖入內聯框架，命名爲content；
【實現頁面自適應】
因爲電腦屏幕的尺寸不同，我們要製作原型，讓原型在展示的時候能夠自動適應屏幕的大小。
1、我們的原型是基於1366*768的分辨率進行設計；
2、頂部菜單top_menu的高度爲固定的64，寬度爲1366，並且設置該動態面板爲100%寬度，這樣就能保證動態面板寬度適應瀏覽器；
3、設置左側菜單left_menu 的尺寸爲 256*700 ；
4、同樣設置內容區域content的尺寸；
5、現在到了最關鍵的一步，如果頁面尺寸發生變化，我們需要動態改變左側菜單left_menu的寬度和內容區域content的高度，即在窗口尺寸發生變化的時候：
左側菜單left_menu的高度 = 窗口高度 – 頂部菜單top_menu高度
內容區域content的高度 = 窗口高度 – 頂部菜單top_menu高度
內容區域content的寬度 = 窗口寬度 – 左側菜單left_menu寬度
我通過在當前頁面的頁面尺寸改變事件裏面實現此功能：
【頂部菜單實現】
頂部菜單就是一級導航菜單，頂部菜單實現起來比較簡單，通過矩形制作就可以了，但是要注意頂部菜的交互，即在點擊美一個一級導航菜單的時候，都要展示對應的左側菜單（左側菜單的實現後面會說）
用戶菜單】
在頂部菜單的右側，還有用戶菜單，用戶菜單就是大家通常使用的右上角菜單，包括消息列表、幫助、系統設置、退出系統等功能。對於用戶菜單，也需要動態面板來實現。並且隨着頁面大小的調整，用戶菜單也要向右移動對應的位置。
即用戶菜單的位置 = 窗口寬度 – 用戶菜單寬度 – 50 （50是調整距離，是用戶菜單的右側靠近瀏覽器右邊的距離）
用戶菜單的調整同樣要在頁面尺寸改變事件進行設置。
【左側菜單】
左側菜單就是二級、三級菜單，同樣通過動態面板來實現，有幾個一級菜單，動態面板就要有幾個對應的狀態，點擊一級菜單，就是動態的切換動態面板的狀態。
同樣，在每個二級、三級菜單裏面，需要進行菜單的展開、收起的交互。具體的實現方式是：
A、每個二級菜單都是一個動態面板；
B、面板裏面有兩個狀態，展開和收起的狀態，
C、用戶點擊收起、展開按鈕，切換動態面板狀態；
D、這裏要注意一點，要選擇【推動和拉動元件】，這樣在收起和展開的時候，其他的二級菜單的位置纔會調整；
【內容的展示】
內容的展示比較簡單，就是在點擊菜單的時候，在content內聯框架中打開具體的內容頁面就可以了。
【結果】
到了這裏，自適應的高保真axure框架原型就做好了，想看演示的可以參考 高保真演示
掃碼獲取更多axure高保真原型及產品資料。
