一篇關(guān)于Axure的干貨教程，關(guān)于頂欄和側(cè)邊欄固定以及窗口自適應(yīng)的設(shè)計(jì)過程，希望對(duì)大家有所啟發(fā)。

在后臺(tái)系統(tǒng)中，常有側(cè)邊欄，不隨頁(yè)面內(nèi)容的滾動(dòng)而變化，且高度與瀏覽器等高。

第一步

新建一個(gè)母版1 做側(cè)邊欄，在母版中新建兩個(gè)動(dòng)態(tài)面板，一個(gè)作為背景使用，一個(gè)放置標(biāo)題使用。

第二部

（背景）動(dòng)態(tài)面板的顏色設(shè)置為 ?與標(biāo)題背景色一致。

（標(biāo)題）動(dòng)態(tài)面板內(nèi)新建元件作為標(biāo)題。

第三步

將（標(biāo)題）動(dòng)態(tài)面板 與（背景）動(dòng)態(tài)面板對(duì)齊。

設(shè)置 （背景）動(dòng)態(tài)面板的高度與瀏覽器高度一致?？蓪?shí)現(xiàn)左側(cè)欄高度自適應(yīng)。

第四步

將（背景）動(dòng)態(tài)面板 和（標(biāo)題）動(dòng)態(tài)面板 ?固定到瀏覽器，實(shí)現(xiàn)內(nèi)容滾動(dòng)時(shí)，側(cè)邊欄不會(huì)跟隨滾動(dòng)。

第五步

新建一個(gè)母版2 做頂欄。在母版中新建兩個(gè)動(dòng)態(tài)面板，一個(gè)做為背景，一個(gè)作為登錄用戶名。

第六步

設(shè)置（背景）動(dòng)態(tài)面板和（用戶名）動(dòng)態(tài)面板對(duì)齊，

（背景）動(dòng)態(tài)面板的顏色設(shè)置為 ?與（用戶名）背景色一致。

（用戶名）動(dòng)態(tài)面板內(nèi)新建元件為 用戶名稱。

設(shè)置 （背景）動(dòng)態(tài)面板的寬度與瀏覽器寬度一致?？蓪?shí)現(xiàn)頂欄寬度自適應(yīng)。

頂欄寬度自適應(yīng)也可以選擇 動(dòng)態(tài)面板屬性 ?勾選（100%寬度）

第七步

要使（管理員）三個(gè)字，隨著瀏覽器窗口的變化而跟隨一直在右邊。

可設(shè)置（管理員）的位置為 （背景）動(dòng)態(tài)面板的右邊位置 減去 200像素（因?yàn)槲以O(shè)置的 管理員 三字寬度為120像素，所以減200就使得 管理員 三字一直在瀏覽器范圍內(nèi)，并距右邊距為80像素。）

選擇剛剛添加的“局部變量”（可在 添加局部變量時(shí) 自行改名）。

設(shè)置局部變量（就是 背景 動(dòng)態(tài)面板） 的右邊（right）減去200像素。

[[LVAR1.right-200]]

第八步

（管理員）三字可以隨瀏覽器窗口大小而移動(dòng)，需要給它限定一個(gè)范圍，不能跑到最左邊。

可以給它設(shè)置移動(dòng)邊界。

第九步

與側(cè)邊欄同樣的方法，固定頂欄到瀏覽器，使其不隨內(nèi)容的滾動(dòng)而滾動(dòng)。

預(yù)覽：

完成。

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