如何用Axure做出高保真的個人網站

大家好！我是一名UX設計師，希望可以與共同喜歡探索用戶體驗的朋友們一起成長！我會不定期地更新一些有關用戶體驗方面的文章。本文主要分享：無需ui和前端制作個人網站，只需一個Axure就能搞定！

越來越多的人想要創建自己的個人網站，把自己平時工作的總結和收藏分享出來，整理到自己的個人網站中，不僅能幫助同行互相學習，更是自己能力的體現。我自己用axure做了一個個人網站，以本網站為例，來為大家講解如何用axure做出高保真的個人網站。

如果后期維護量較頻繁的，還是建議正常開發網站，并且需要有后臺進行日后維護。axure制作網站只適合維護量較小且簡單的網站。

一、正常網站開發流程和axure制作網站對比

1. 正常流程

2. axure制作流程

二、什么的樣個人網站不適合用axure制作 1. 需要后臺維護

所謂的后臺維護指得就是需要開發一個官網后臺，日常通過后臺上傳新文章、新內容等信息。axure只能做出展示效果，所以該場景下不適用axure制作網站。

2. 頁面數量和內容較多

首先axure制作的網站導出的html文件較大，相比正常前端開發出來的網站要大好多。如果網站整體頁面較多，或單獨某一個頁面內容／圖片較多。網站加載較慢，所以該場景下不適合用axure制作網站。

3. 有復雜的動效和交互

現在大多數復雜的動效和交互都是用h5、css3做的，過去我們可能還會看到網站上有flash或AE做的動效。目前大多數都是用flash、AE做出效果后，前端轉換成代碼實現。從而讓網站瀏覽更加流暢。如果再axure里加復雜的動效和交互，那么絕對會影響網站的加載速度，從而大大降低了網站的瀏覽效率。

三、axure制作網站難點講解 1. 整體尺寸把控

本網站做的效果是內容區域寬度固定，背景寬度自適應。

（1）內容區域寬度

考慮到主流的顯示器分辨率，我設置的內容區域寬度為1200px。所有內容和圖片都要放在這1200px以內?？稍陧撁嬷欣粋€參考線，拉到橫坐標1200的位置。在做設計的時候從最左側開始就可以了，不需要給左側留出空間，下一條會講到頁面居中的方法。

（2）整體頁面居中

之所以上一條說到不給左側留空間，是因為我們要把頁面設置成居中對齊。選擇項目－頁面樣式編輯，在頁面排版中選擇第二個，居中對齊。選擇這個選項后，在axure畫圖時頁面依然是在最左側，在瀏覽器預覽時整個頁面就會居中顯示。

（3）背景寬度自適應

如果網站一個頁面的背景都是同一個顏色，那么直接在當前頁面點擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。

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

2. 導航

我做的導航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因為頁面內容較多時，用戶滾動到下面后，直接就可以看到導航并進行操作。

制作過程：

（1）拉一個動態面板，導航的高度即為動態面板的高度，寬度拉到1200px。（寬度一定要拉倒內容區域的寬度，因為要在動態面板里面放導航的內容）

（2）設置動態面板背景顏色（即為導航背景顏色），勾選100%寬度。

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

導航文字：導航的文字需要放在動態面板里，文字需要有3種狀態，當前頁面狀態、鼠標懸停狀態、正常狀態。

3. banner處理

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

純色背景banner制作過程：

類似上面的教學，用動態面板來實現banner背景色的自適應。

文字盡量用axure打上去，少用圖片。

banner配圖需要用photoshop來處理，最后存成透明背景png的格式。然后把該圖片拉axure文件里。

非純色背景banner制作過程：

需要把banner背景修飾成非常寬的圖片，有條件的情況下設置成5000px。動態面板的樣式中選擇背景圖片－導入那張圖片。在屬性中勾選100%寬度。

文字盡量用axure打上去，少用圖片。（如果有需要，可以將文字一并處理到背景圖中導入）

4. 按鈕的效果

所有可點擊的圖形按鈕、文字按鈕都需要有3種狀態，正常狀態、鼠標懸停狀態、鼠標按下狀態。

在屬性－交互樣式設置中設置鼠標懸停和鼠標按下的效果。

5. 二維碼的效果

制作過程：

（1）拉一個動態面板里面放二維碼圖片，放到圖標下面的位置上。

（2）選擇固定到瀏覽器，水平固定選擇居中（根據網站尺寸，調整邊距），垂直固定選擇上，勾選始終保持頂部。

（3）給導航動態面板中的二維碼圖標加兩個事件，如圖：

6. 跳轉非本網站的鏈接

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

四、注意事項

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

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

2. 注意細節

既然是高保真，就不能做的像低保真那樣粗糙，整個網站的字體、字號、間距、顏色等細節問題。都要像ui設計一樣注重細節。

3. 交互效果統一

可點擊的區域，比如文章，鼠標懸停的時候要有一個變化，比如外發光、描邊等效果。要遵循設計原型，給用戶每一個操作都有及時的反饋。

4. 圖片壓縮

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

5. 購買域名

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

五、發布上線

這個我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網搜一下。

關鍵詞： 高保真 原型設計 廣告條

上一篇：在制作網站時如何有效進行外鏈建設

下一篇：“技術宅”制作“網游游戲禮包網站”釣魚盜號非法獲利被