中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

本人前段事件做了專家管理產(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è)過程寫出來，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

頁(yè)面布局

在開始制作原型之前，先要做的是對(duì)頁(yè)面的布局。對(duì)于PC端的系統(tǒng)，一般常見的布局有下面的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)來說，菜單到了三級(jí)就可以，不簡(jiǎn)易菜單層級(jí)過深；
• 右側(cè)區(qū)域：顯示具體的內(nèi)容區(qū)域，這塊區(qū)域就是具體的內(nèi)容頁(yè)面，包括面包屑導(dǎo)航和具體的內(nèi)容頁(yè)面；

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

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

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

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

1. 上區(qū)域拖入動(dòng)態(tài)面板，命名為top_menu;
2. 左區(qū)域拖入動(dòng)態(tài)面板，命名為left_menu;
3. 有區(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寬度

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

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

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

用戶菜單

在頂部菜單的右側(cè)，還有用戶菜單，用戶菜單就是大家通常使用的右上角菜單，包括消息列表、幫助、系統(tǒng)設(shè)置、退出系統(tǒng)等功能。對(duì)于用戶菜單，也需要?jiǎng)討B(tà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í)菜單，同樣通過動(dòng)態(tà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)行菜單的展開、收起的交互。具體的實(shí)現(xiàn)方式是：

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

內(nèi)容的展示

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

結(jié)果

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

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

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