010-56180833

優化技術

SEM營銷 / SE0營銷 / SMM營銷技術

善實戰SEO高端人才的智慧結晶

OPTIMIZATION TECHNIQUE

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

網站管理員 - 瀏覽: 2018-06-23

大家好!我是一名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,大家可以上網搜一下。

關鍵詞: 個人網站

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

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

COPYRIGHT ? 2006-2019 北京藍纖科技有限公司 ALL RIGHTS RESERVED     京ICP備13006508號    京公網安備11010502025264

天堂网www,天堂www天堂在线资源,天堂最新版www 日本真人做人试看60分钟| 欧美另类videosbest| 情侣作爱视频实拍| 韩国精品一区二区在线观看| 成在线人永久免费视频播放| 国产成人综合久久精品| 欧美情侣性视频| pronhub| 亚洲中文字幕一区二区三区| 网站福利你们会回来感谢我的| 高清无码午夜福利在线观看| poronodrome另类极品| old欧美老妇videos| 第一次处破女18分钟| 老妇肥熟凸凹丰满刺激| 波多野结衣办公室双飞| 东北中年夫妇白天自拍破解| 男人桶女人到高潮视频免费| 野花视频在线观看最新| chinaboy亚洲solo| 成年免费a级毛片免费看| 丰满的峰乳喷奶水| 日日拍夜夜嗷嗷叫|日日摸| 人人狠狠综合久久综合88亚洲| 岳的又大又紧水又多| japanesefreel日本jav| 快点快弄我哦我不了了| 亚洲婷婷五月色香综合缴情| 清纯白嫩大学生正在播放| 老师你的胸好大 在线观看| 极品少妇xxxx| http://www.qaaran.com