作者分享了自己做pc web端產品後臺框架的設計過程，希望能夠對你的原型設計工作帶來幫助。
本人前段事件做了專家管理產品的pc web端產品，按照當時的要求，製作了高保真的原型。在這個原型裡面，實現了屏幕自適應、菜單動態展示、列表頁面的排序分頁等功能，使用了動態面板、中繼器等元件，設計風格上參考了螞蟻金服的ant design，因為是後臺管理系統，所以設計風格上也比較緊湊，我把這個過程寫出來，希望能夠對大家有所幫助。
在開始製作原型之前，先要做的是對頁面的布局。對於PC端的系統，一般常見的布局有下面的A、B兩種模式：
在本次原型裡面，因為數據和內容比較多，我們考慮要做的緊湊一點，給用戶儘可能多的操作空間，所以採用A模式，具體各區域的智能如下所示：
對於上面的A模式的設計，用戶的操作模式如下：
按照這個需求，我們進行這樣的操作：
因為電腦屏幕的尺寸不同，我們要製作原型，讓原型在展示的時候能夠自動適應屏幕的大小。
（1）我們的原型是基於1366*768的解析度進行設計；
（2）頂部菜單top_menu的高度為固定的64，寬度為1366，並且設置該動態面板為100%寬度，這樣就能保證動態面板寬度適應瀏覽器；
（3）設置左側菜單left_menu 的尺寸為 256*700 ；
（4）同樣設置內容區域content的尺寸；
（5）現在到了最關鍵的一步，如果頁面尺寸發生變化，我們需要動態改變左側菜單left_menu的寬度和內容區域content的高度，即在窗口尺寸發生變化的時候：
我通過在當前頁面的頁面尺寸改變事件裡面實現此功能：
頂部菜單就是一級導航菜單，頂部菜單實現起來比較簡單，通過矩形製作就可以了，但是要注意頂部菜的交互，即在點擊美一個一級導航菜單的時候，都要展示對應的左側菜單（左側菜單的實現後面會說）。
在頂部菜單的右側，還有用戶菜單，用戶菜單就是大家通常使用的右上角菜單，包括消息列表、幫助、系統設置、退出系統等功能。對於用戶菜單，也需要動態面板來實現。並且隨著頁面大小的調整，用戶菜單也要向右移動對應的位置。
即用戶菜單的位置 = 窗口寬度 – 用戶菜單寬度 – 50 （50是調整距離，是用戶菜單的右側靠近瀏覽器右邊的距離）
用戶菜單的調整同樣要在頁面尺寸改變事件進行設置。
左側菜單就是二級、三級菜單，同樣通過動態面板來實現，有幾個一級菜單，動態面板就要有幾個對應的狀態，點擊一級菜單，就是動態的切換動態面板的狀態。
同樣，在每個二級、三級菜單裡面，需要進行菜單的展開、收起的交互。具體的實現方式是：
內容的展示比較簡單，就是在點擊菜單的時候，在content內聯框架中打開具體的內容頁面就可以了。
到了這裡，自適應的高保真axure框架原型就做好了，想看演示的可以參考高保真演示。
本文由 @馬白龍 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議