考慮到主流的顯示器分辨率，我設(shè)置的內(nèi)容區(qū)域?qū)挾葹?200px。所有內(nèi)容和圖片都要放在這1200px以內(nèi)?？稍陧撁嬷欣粋€(gè)參考線，拉到橫坐標(biāo)1200的位置。在做設(shè)計(jì)的時(shí)候從最左側(cè)開始就可以了，不需要給左側(cè)留出空間，下一條會(huì)講到頁面居中的方法。

（2）整體頁面居中

之所以上一條說到不給左側(cè)留空間，是因?yàn)槲覀円秧撁嬖O(shè)置成居中對(duì)齊。選擇項(xiàng)目－頁面樣式編輯，在頁面排版中選擇第二個(gè)，居中對(duì)齊。選擇這個(gè)選項(xiàng)后，在axure畫圖時(shí)頁面依然是在最左側(cè)，在瀏覽器預(yù)覽時(shí)整個(gè)頁面就會(huì)居中顯示。

（3）背景寬度自適應(yīng)

如果網(wǎng)站一個(gè)頁面的背景都是同一個(gè)顏色，那么直接在當(dāng)前頁面點(diǎn)擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。

如果一個(gè)頁面不同模塊有不同的背景色，那么我們需要用動(dòng)態(tài)面板來實(shí)現(xiàn)。首先拉一個(gè)動(dòng)態(tài)面板，高度設(shè)置到你需要的高度，寬度隨意，不過為了方便在這個(gè)模塊上加內(nèi)容，建議寬度拉倒跟網(wǎng)頁內(nèi)容寬度一樣，比如1200px。然后在樣式里設(shè)計(jì)你需要的背景顏色，然后勾選100%寬度。在瀏覽器預(yù)覽后，該模塊的背景色就是自適應(yīng)各個(gè)分辨率了。

2. 導(dǎo)航

我做的導(dǎo)航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因?yàn)轫撁鎯?nèi)容較多時(shí)，用戶滾動(dòng)到下面后，直接就可以看到導(dǎo)航并進(jìn)行操作。

制作過程：

（1）拉一個(gè)動(dòng)態(tài)面板，導(dǎo)航的高度即為動(dòng)態(tài)面板的高度，寬度拉到1200px。（寬度一定要拉倒內(nèi)容區(qū)域的寬度，因?yàn)橐趧?dòng)態(tài)面板里面放導(dǎo)航的內(nèi)容）

（2）設(shè)置動(dòng)態(tài)面板背景顏色（即為導(dǎo)航背景顏色），勾選100%寬度。

（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒有其它內(nèi)容需要覆蓋在導(dǎo)航上就勾選上，我的導(dǎo)航右側(cè)有一個(gè)二維碼需要覆蓋在導(dǎo)航上，所以我的沒有勾選。（沒有勾選的要注意設(shè)計(jì)完所有頁面時(shí)，要把導(dǎo)航的動(dòng)態(tài)面板放到圖層最上層。）

導(dǎo)航文字：導(dǎo)航的文字需要放在動(dòng)態(tài)面板里，文字需要有3種狀態(tài)，當(dāng)前頁面狀態(tài)、鼠標(biāo)懸停狀態(tài)、正常狀態(tài)。

3. banner處理

banner的圖是整個(gè)網(wǎng)站中最大的圖片，這里不建議大家直接把banner圖放到axure文件里，既不能自適應(yīng)，又影響了加載速度。

純色背景banner制作過程：

• 類似上面的教學(xué)，用動(dòng)態(tài)面板來實(shí)現(xiàn)banner背景色的自適應(yīng)。
• 文字盡量用axure打上去，少用圖片。
• banner配圖需要用photoshop來處理，最后存成透明背景png的格式。然后把該圖片拉axure文件里。

非純色背景banner制作過程：

• 需要把banner背景修飾成非常寬的圖片，有條件的情況下設(shè)置成5000px。動(dòng)態(tài)面板的樣式中選擇背景圖片－導(dǎo)入那張圖片。在屬性中勾選100%寬度。
• 文字盡量用axure打上去，少用圖片。（如果有需要，可以將文字一并處理到背景圖中導(dǎo)入）

4. 按鈕的效果

所有可點(diǎn)擊的圖形按鈕、文字按鈕都需要有3種狀態(tài)，正常狀態(tài)、鼠標(biāo)懸停狀態(tài)、鼠標(biāo)按下狀態(tài)。

在屬性－交互樣式設(shè)置中設(shè)置鼠標(biāo)懸停和鼠標(biāo)按下的效果。

5. 二維碼的效果

我做的二維碼效果是鼠標(biāo)懸停在導(dǎo)航右側(cè)二維碼圖標(biāo)時(shí)，由上向下推出二維碼，鼠標(biāo)離開時(shí)，由下向上收回二維碼。

制作過程：

（1）拉一個(gè)動(dòng)態(tài)面板里面放二維碼圖片，放到圖標(biāo)下面的位置上。

（2）選擇固定到瀏覽器，水平固定選擇居中（根據(jù)網(wǎng)站尺寸，調(diào)整邊距），垂直固定選擇上，勾選始終保持頂部。

（3）給導(dǎo)航動(dòng)態(tài)面板中的二維碼圖標(biāo)加兩個(gè)事件，如圖：

6. 跳轉(zhuǎn)非本網(wǎng)站的鏈接

網(wǎng)站中有一些文章、推薦等模塊，點(diǎn)擊后跳轉(zhuǎn)的是非本網(wǎng)站中的鏈接，我們需要對(duì)可點(diǎn)擊的區(qū)域加點(diǎn)擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：

四、注意事項(xiàng)

1. 能用文本盡量少插入圖片

比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進(jìn)來。嘗試用axure進(jìn)行排版。

2. 注意細(xì)節(jié)

既然是高保真，就不能做的像低保真那樣粗糙，整個(gè)網(wǎng)站的字體、字號(hào)、間距、顏色等細(xì)節(jié)問題。都要像ui設(shè)計(jì)一樣注重細(xì)節(jié)。

3. 交互效果統(tǒng)一

可點(diǎn)擊的區(qū)域，比如文章，鼠標(biāo)懸停的時(shí)候要有一個(gè)變化，比如外發(fā)光、描邊等效果。要遵循設(shè)計(jì)原型，給用戶每一個(gè)操作都有及時(shí)的反饋。

4. 圖片壓縮

盡量把用到的每一張圖都進(jìn)行壓縮，前提是保證圖片質(zhì)量不會(huì)被看出來降低。

5. 購買域名

這個(gè)大家可以自行選擇，去騰訊云、阿里云購買，哪個(gè)便宜買哪個(gè)。域名后綴盡量選擇常見的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來選擇。

五、發(fā)布上線

這個(gè)我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網(wǎng)搜一下。不用花錢買服務(wù)器，這里有一個(gè)注冊(cè)與使用的教學(xué)希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332

上傳完去域名后臺(tái)管理解析一下就可以嘍！

作者：高杰，微信號(hào)公眾號(hào)：UX設(shè)計(jì)師高杰，從事交互設(shè)計(jì)和用戶體驗(yàn)工作。

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

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