【前言】
本人前段事件做了專家管理產(chǎn)品的pc web端產(chǎn)品，按照當(dāng)時(shí)的要求煞檩，制作了高保真的原型处嫌。在這個(gè)原型里面，實(shí)現(xiàn)了屏幕自適應(yīng)斟湃、菜單動(dòng)態(tài)展示、列表頁(yè)面的排序分頁(yè)等功能檐薯，使用了動(dòng)態(tài)面板凝赛、中繼器等元件，設(shè)計(jì)風(fēng)格上參考了螞蟻金服的ant design坛缕，因?yàn)槭呛笈_(tái)管理系統(tǒng)墓猎，所以設(shè)計(jì)風(fēng)格上也比較緊湊，我把這個(gè)過(guò)程寫(xiě)出來(lái)赚楚，希望能夠?qū)Υ蠹矣兴鶐椭?/p>
【頁(yè)面布局】
在開(kāi)始制作原型之前毙沾，先要做的是對(duì)頁(yè)面的布局。對(duì)于PC端的系統(tǒng)宠页，一般常見(jiàn)的布局有下面的A左胞、B兩種模式：
在本次原型里面，因?yàn)閿?shù)據(jù)和內(nèi)容比較多举户，我們考慮要做的緊湊一點(diǎn)烤宙，給用戶盡可能多的操作空間，所以采用A模式俭嘁，具體各區(qū)域的智能如下所示：
上部區(qū)域：顯示產(chǎn)品logo躺枕、名稱、一級(jí)菜單 和 用戶菜單區(qū)域(主要包括系統(tǒng)消息供填、修改密碼拐云、退出系統(tǒng)等功能)；
左側(cè)區(qū)域：顯示二級(jí)菜單近她、三級(jí)菜單叉瘩，因?yàn)樵谏喜繀^(qū)域已經(jīng)有了一級(jí)菜單，對(duì)于一般的系統(tǒng)來(lái)說(shuō)泄私，菜單到了三級(jí)就可以房揭，不簡(jiǎn)易菜單層級(jí)過(guò)深备闲；
右側(cè)區(qū)域：顯示具體的內(nèi)容區(qū)域，這塊區(qū)域就是具體的內(nèi)容頁(yè)面捅暴，包括面包屑導(dǎo)航和具體的內(nèi)容頁(yè)面恬砂；
【頁(yè)面布局axure實(shí)現(xiàn)】
對(duì)于上面的A模式的設(shè)計(jì)，用戶的操作模式如下：
A蓬痒、用戶點(diǎn)擊【上】區(qū)域的一級(jí)菜單泻骤，【左】區(qū)域展示對(duì)應(yīng)的二級(jí)菜單
B、用戶點(diǎn)擊【左】區(qū)域的二級(jí)菜單梧奢，【右】區(qū)域顯示具體的操作頁(yè)面
按照這個(gè)需求狱掂，我們進(jìn)行這樣的操作：
A、上區(qū)域拖入動(dòng)態(tài)面板亲轨，命名為top_menu;
B趋惨、左區(qū)域拖入動(dòng)態(tài)面板，命名為left_menu;
C惦蚊、有區(qū)域拖入內(nèi)聯(lián)框架器虾，命名為content；
【實(shí)現(xiàn)頁(yè)面自適應(yīng)】
因?yàn)殡娔X屏幕的尺寸不同蹦锋，我們要制作原型兆沙，讓原型在展示的時(shí)候能夠自動(dòng)適應(yīng)屏幕的大小。
1莉掂、我們的原型是基于1366*768的分辨率進(jìn)行設(shè)計(jì)葛圃；
2、頂部菜單top_menu的高度為固定的64憎妙，寬度為1366库正，并且設(shè)置該動(dòng)態(tài)面板為100%寬度，這樣就能保證動(dòng)態(tài)面板寬度適應(yīng)瀏覽器尚氛；
3诀诊、設(shè)置左側(cè)菜單left_menu 的尺寸為 256*700 ；
4阅嘶、同樣設(shè)置內(nèi)容區(qū)域content的尺寸属瓣；
5、現(xiàn)在到了最關(guān)鍵的一步讯柔，如果頁(yè)面尺寸發(fā)生變化抡蛙，我們需要?jiǎng)討B(tài)改變左側(cè)菜單left_menu的寬度和內(nèi)容區(qū)域content的高度，即在窗口尺寸發(fā)生變化的時(shí)候：
左側(cè)菜單left_menu的高度 = 窗口高度 – 頂部菜單top_menu高度
內(nèi)容區(qū)域content的高度 = 窗口高度 – 頂部菜單top_menu高度
內(nèi)容區(qū)域content的寬度 = 窗口寬度 – 左側(cè)菜單left_menu寬度
我通過(guò)在當(dāng)前頁(yè)面的頁(yè)面尺寸改變事件里面實(shí)現(xiàn)此功能：
【頂部菜單實(shí)現(xiàn)】
頂部菜單就是一級(jí)導(dǎo)航菜單魂迄，頂部菜單實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單粗截，通過(guò)矩形制作就可以了，但是要注意頂部菜的交互捣炬，即在點(diǎn)擊美一個(gè)一級(jí)導(dǎo)航菜單的時(shí)候熊昌，都要展示對(duì)應(yīng)的左側(cè)菜單（左側(cè)菜單的實(shí)現(xiàn)后面會(huì)說(shuō)）
用戶菜單】
在頂部菜單的右側(cè)绽榛，還有用戶菜單，用戶菜單就是大家通常使用的右上角菜單婿屹，包括消息列表灭美、幫助、系統(tǒng)設(shè)置昂利、退出系統(tǒng)等功能届腐。對(duì)于用戶菜單，也需要?jiǎng)討B(tài)面板來(lái)實(shí)現(xiàn)蜂奸。并且隨著頁(yè)面大小的調(diào)整犁苏，用戶菜單也要向右移動(dòng)對(duì)應(yīng)的位置。
即用戶菜單的位置 = 窗口寬度 – 用戶菜單寬度 – 50 （50是調(diào)整距離扩所，是用戶菜單的右側(cè)靠近瀏覽器右邊的距離）
用戶菜單的調(diào)整同樣要在頁(yè)面尺寸改變事件進(jìn)行設(shè)置围详。
【左側(cè)菜單】
左側(cè)菜單就是二級(jí)、三級(jí)菜單碌奉，同樣通過(guò)動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)短曾，有幾個(gè)一級(jí)菜單，動(dòng)態(tài)面板就要有幾個(gè)對(duì)應(yīng)的狀態(tài)赐劣，點(diǎn)擊一級(jí)菜單，就是動(dòng)態(tài)的切換動(dòng)態(tài)面板的狀態(tài)哩都。
同樣魁兼，在每個(gè)二級(jí)、三級(jí)菜單里面漠嵌，需要進(jìn)行菜單的展開(kāi)咐汞、收起的交互。具體的實(shí)現(xiàn)方式是：
A儒鹿、每個(gè)二級(jí)菜單都是一個(gè)動(dòng)態(tài)面板化撕；
B、面板里面有兩個(gè)狀態(tài)约炎，展開(kāi)和收起的狀態(tài)植阴，
C、用戶點(diǎn)擊收起圾浅、展開(kāi)按鈕掠手，切換動(dòng)態(tài)面板狀態(tài)；
D狸捕、這里要注意一點(diǎn)喷鸽，要選擇【推動(dòng)和拉動(dòng)元件】，這樣在收起和展開(kāi)的時(shí)候灸拍，其他的二級(jí)菜單的位置才會(huì)調(diào)整做祝；
【內(nèi)容的展示】
內(nèi)容的展示比較簡(jiǎn)單砾省，就是在點(diǎn)擊菜單的時(shí)候，在content內(nèi)聯(lián)框架中打開(kāi)具體的內(nèi)容頁(yè)面就可以了混槐。
【結(jié)果】
到了這里编兄，自適應(yīng)的高保真axure框架原型就做好了，想看演示的可以參考?高保真演示
掃碼獲取更多axure高保真原型及產(chǎn)品資料纵隔。
