分享個(gè)人在繪制PC端web網(wǎng)站交互原型中一些設(shè)計(jì)技巧，enjoy~

技巧一：搭建導(dǎo)航框架頁(yè)面

當(dāng)自己還是一個(gè)小白時(shí)，開(kāi)始著手設(shè)計(jì)web界面時(shí)，最容易犯的一個(gè)錯(cuò)誤就是：基本每一個(gè)頁(yè)面的繪制都是頂部導(dǎo)航、左側(cè)導(dǎo)航、右側(cè)則為頁(yè)面內(nèi)容。

如下所示：

當(dāng)設(shè)計(jì)的頁(yè)面比較多時(shí)，一旦改變了側(cè)導(dǎo)航的命名或者更改了跳轉(zhuǎn)鏈接，就得把所有的頁(yè)面的導(dǎo)航都替換掉，操作十分的復(fù)雜冗余。

通過(guò)后面的課外學(xué)習(xí)后，才懂得了利用【內(nèi)聯(lián)框架】來(lái)實(shí)現(xiàn)頁(yè)面內(nèi)容之間的切換。只要搭建一個(gè)框架頁(yè)面即可，不用重復(fù)復(fù)制粘貼。

布局排版如下：

只需要給導(dǎo)航中的模塊名稱(chēng)添加【鼠標(biāo)點(diǎn)擊時(shí)】，在內(nèi)聯(lián)框架中鏈接到某一個(gè)頁(yè)面即可，設(shè)置如下：

技巧二：響應(yīng)式布局的設(shè)計(jì)

繪制原型時(shí)，我們可以先設(shè)置為中等屏幕1366 X 768的高度，然后，再給元件添加“載入時(shí)”尺寸變化的交互事件。以上面的框架頁(yè)面來(lái)講，我們可以將【頂部導(dǎo)航】的背景框?qū)挾仍O(shè)置為：[[Window.width]]，直接延伸為窗口的尺寸，其高度不變。

同時(shí)，將【側(cè)導(dǎo)航】的高度設(shè)置為：[[Window.height-頂部欄的高度]]，寬度不變，將【內(nèi)聯(lián)框架】的寬度設(shè)置為：[[Window.width-側(cè)導(dǎo)航寬度]]，高度設(shè)置為：[[Window.height-頂部欄的高度]]。

這樣，加載框架頁(yè)面時(shí)，即可元件的尺寸即可全屏鋪滿預(yù)覽。

技巧三：將頁(yè)面標(biāo)題框轉(zhuǎn)化為母版

我們可以給“頁(yè)面標(biāo)題框”添加“載入時(shí)”文本的交互事件，設(shè)置為：元件 》設(shè)置文本 》勾選“當(dāng)前元件”》，將文本值設(shè)置為[[PageName]]，這樣可以直接獲取左側(cè)列表的頁(yè)面標(biāo)題，省去人工再次輸入的繁瑣。

同時(shí)將其轉(zhuǎn)為母版，這樣后期想要變更標(biāo)題導(dǎo)航框的樣式，只需要在母版中更改一次，即能將所有其他頁(yè)面引用的“標(biāo)題導(dǎo)航框”樣式一起更改。

設(shè)置如下：

技巧四：將彈窗提示轉(zhuǎn)化為母版。

使用頻率最高的彈窗就是提交和刪除的操作提示，我們可以將其轉(zhuǎn)為動(dòng)態(tài)面板，且垂直水平居中定位瀏覽器彈出，然后再轉(zhuǎn)為母版，? 這樣全站所有的刪除提示彈窗都引用此母版提示彈窗，后期的優(yōu)化調(diào)整非常便捷高效。

同理，我們可以將頁(yè)面的其他共用彈窗和模塊，如頁(yè)腳等都轉(zhuǎn)化為母版管理。

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

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