如何用Axure制作壹個高保真的個人網站

如何用Axure制作壹個高保真的個人網站？越來越多的人想創建自己的個人網站，分享自己平時的工作總結和收藏，整理成自己的個人網站，既能幫助同行相互學習，又能體現自己的能力。我用axure做了壹個個人網站。以這個網站為例，我們來看看如何用Axure制作壹個高保真的個人網站！如果後期維護頻繁，建議正常開發網站，以後維護需要壹個後臺。Axure的網站只適合維護量小，簡單的網站。1.普通網站開發流程與axure網站的比較。1.正常流程。2.axure生產流程。2.什麽樣的個人網站不適合axure？1.需要後臺維護。所謂後臺維護，是指需要在官網開發壹個後臺，每天通過後臺上傳新文章、新內容等信息。Axure只能做展示效果，所以Axure不適合在這種場景下做網站。2.有很多頁面和內容。首先axure的網站導出的html文件比較大，比正常前端開發的網站大很多。如果整個網站有很多頁面，或者單個頁面包含的內容/圖片比較多。網站加載很慢，所以axure不適合在這種場景下制作網站。3.有復雜的動態效應和相互作用。目前，大多數復雜的動作和交互都是用h5和css3完成的。以前我們也可能在網站上看到flash或者AE做的動作。目前大部分都是用flash和AE把前端轉換成代碼實現的。讓網站瀏覽更流暢。如果在axure中加入復雜的動態效果和交互，肯定會影響網站的加載速度，從而大大降低網站的瀏覽效率。3.解釋制作axure網站的困難。1.整體尺寸控制。這個網站的效果是內容區域寬度固定，背景寬度自適應。(1)內容區域的寬度。考慮到主流的顯示分辨率，我將內容區域的寬度設置為1200px。所有內容和圖片都要放在1200px以內。可以在頁面上拉壹條參考線到橫坐標1200的位置。設計的時候可以從最左邊開始，不給左邊留空間。接下來，我們將討論頁面居中的方法。(2)整頁居中。之前的文章之所以說不能留空格，是因為我們要設置頁面居中對齊。選擇項目-頁面樣式編輯，然後選擇頁面布局中的第二個選項。選擇此選項時，重要官方繪制時，頁面仍在最左側，瀏覽器預覽時，整個頁面將顯示在中央。(3)自適應背景寬度。如果網站上某個頁面的背景顏色相同，直接點擊當前頁面的空白處，然後選擇樣式-背景顏色，選擇妳需要的顏色。如果壹個頁面的不同模塊有不同的背景顏色，那麽我們就需要用動態面板來實現。首先拉壹個動態面板，設置高度到妳需要的高度，寬度可選。但是為了給這個模塊添加內容，建議寬度要和網頁內容的寬度壹樣，比如1200px。然後在樣式中設計妳需要的背景色，然後勾選寬度100%。在瀏覽器預覽後，模塊的背景顏色將根據每個分辨率進行調整。2.導航。我的導航效果是固定在瀏覽器頂部的。之所以要固定在瀏覽器的頂部，是因為當頁面很多的時候，用戶可以通過滾動到底部直接看到和操作導航。制造流程:(1)拉壹個動態面板，導航高度是動態面板的高度，寬度拉至1200px。(Width必須下拉內容區域的寬度，因為導航內容要放在動態面板中)(2)設置動態面板的背景色(即導航背景色)，勾選寬度100%。(3)在屬性中，選擇固定到瀏覽器，並選擇固定到瀏覽器窗口，水平和垂直。永遠保持底部在頂部。如果沒有其他內容覆蓋導航，請檢查。我的導航右側有壹個二維碼需要覆蓋，所以我的沒有勾選。(如果沒有勾選，設計所有頁面的時候註意把導航動態面板放在最上面。導航文本:導航文本需要放在動態面板中，文本需要有三種狀態:當前頁面狀態、鼠標懸停狀態和正常狀態。3.橫幅處理。橫幅的圖片是整個網站最大的圖片。不建議將banner圖片直接放入axure文件中，這樣會不具有自適應性，影響加載速度。純色背景banner的制作技術:和上面的教學類似，使用動態面板實現banner背景顏色的自適應。盡量用斧頭打字，少用圖片。橫幅的圖片需要經過photoshop處理，最後保存為png格式，背景透明。然後把圖片拉進axure文件。非實物背景banner的制作流程:需要將banner背景裝飾成非常寬的畫面，有條件的話設置為5000px。在動態面板樣式中選擇背景圖片-導入圖片。檢查屬性中100%的寬度。盡量用斧頭打字，少用圖片。(如有必要，可將文本處理成背景圖像並導入)4 .按鈕的效果。所有可點擊的圖形按鈕和文本按鈕都需要有三種狀態:正常狀態、鼠標懸停狀態和鼠標按下狀態。在屬性交互樣式設置中設置鼠標懸停和鼠標按壓的效果。5.二維碼的作用。我的二維碼的效果是鼠標懸停在導航右側的二維碼圖標上，從上到下推出二維碼，鼠標從下到上離開並收回二維碼。制作過程:(1)在動態面板中拉壹個二維碼圖片，放在圖標下方。(2)在瀏覽器上選擇固定，選擇水平居中(根據網站大小調整邊距)，選擇垂直固定。選中以始終保持頂部。(3)在導航動態面板中的二維碼圖標上添加兩個事件，如圖:6。跳轉到本網站之外的鏈接。網站上有壹些文章、推薦等模塊。點擊後，我們跳轉到壹個不在這個網站上的鏈接。我們需要向可點擊區域添加點擊事件，鏈接到外部鏈接，並在新的瀏覽器窗口中打開它們。具體操作如下:四、註意事項。1.盡量少插入圖片和文字。比如橫幅上的文字，裏面的各種文字推薦，盡量不要以圖片的形式放出來。試著用axure排版。2.註意細節。既然是高保真，就不能像低保真壹樣粗糙，整個網站的字體、大小、間距、顏色等細節。註意ui設計等細節。3.統壹的交互效果。可點擊的區域，比如文章，鼠標懸停的時候應該會有變化，比如外部燈光，筆畫等效果。按照設計原型，每次操作都給用戶及時反饋。4.圖像壓縮。在不降低圖像質量的情況下，盡量壓縮您使用的每張圖片。5.買個域名。妳可以選擇從騰訊雲和阿裏雲買哪個更便宜。盡量選擇常見的域名後綴，如cn、com等。第壹個字母可以用拼音選擇，也可以用自己的名字拼寫。5.在線發布。這就是如何用Axure制作壹個高保真的個人網站。如果想學習更多Axure教程，可以來。課程體系完善:從軟件入門到分類教程，從理論知識到職場實戰，打造了壹體化的學習和內容服務體系。