說起Axure，做產(chǎn)品的朋友再熟悉不過了，它是我們在日程工作中最常見的原型制作軟件之一，今天分享的文章，主要是教大家如何使用Axure打造簡單的個(gè)人網(wǎng)站，不會(huì)編程我們依然可以做網(wǎng)站。

演示地址：https://vip.uedart.com/demo/UEDART_019/index.html

接下去將分為幾個(gè)步驟去闡述：

1. 這些我們必須知道的小知識

• axure是可以生成html文件的，這為我們使用它來制作網(wǎng)站提供了可能性
• axure只能搭建小型的個(gè)人網(wǎng)站 ，他不具備數(shù)據(jù)庫，比較適合做展示類的網(wǎng)站
• 和普通網(wǎng)站構(gòu)建一樣，我們需要購買域名和購置虛擬服務(wù)器

2. 利用xmind思維導(dǎo)圖，對我們要構(gòu)建的網(wǎng)站進(jìn)行知識整理

舉個(gè)例子，我構(gòu)建的是一個(gè)小型個(gè)人展示站

包含以下主要內(nèi)容：網(wǎng)址導(dǎo)航、常用工具、實(shí)用資源、案例展示，通過思維導(dǎo)出對其內(nèi)容進(jìn)行

整理如下圖所示：

3. 整理好了內(nèi)容所需，接下去我們進(jìn)入制作部分

因?yàn)槲覀兪抢肁xure去制作網(wǎng)站，在我們平時(shí)工作的流程常常是，原型-設(shè)計(jì)-前端-開發(fā)，而這里我們只需進(jìn)行原型和設(shè)計(jì)，這里將不再有前后關(guān)系，為了節(jié)約時(shí)間，我們可以把Axure當(dāng)做設(shè)計(jì)工具，直接進(jìn)行頁面設(shè)計(jì)，里面所需的圖片素材可以用ps輔助設(shè)計(jì)。

創(chuàng)建一個(gè)項(xiàng)目文件夾用來整理此網(wǎng)站涉及到的全部資源素材

對網(wǎng)站全局配色、字體、樣式進(jìn)行布局

采用的是藍(lán)色調(diào)，可以看下我的主色、輔助色的配色如下

利用母版進(jìn)行top導(dǎo)航的設(shè)計(jì)

導(dǎo)航布局如下，采用了頂部導(dǎo)航的方式，設(shè)置了動(dòng)態(tài)面板并將此轉(zhuǎn)化成母版用于多個(gè)頁面

設(shè)置導(dǎo)航頻道的點(diǎn)擊效果與跳轉(zhuǎn)

如下圖所示，有懸停效果和點(diǎn)擊跳轉(zhuǎn)的設(shè)置

網(wǎng)址導(dǎo)航欄目的左側(cè)菜單設(shè)置，滑塊移動(dòng)位置的y坐標(biāo)按具體位置設(shè)置，每個(gè)元素都要設(shè)置

左側(cè)導(dǎo)航在滾動(dòng)時(shí)觸發(fā)具體欄目類別，采用的是熱區(qū)范圍來觸發(fā)，當(dāng)窗口滾動(dòng)時(shí)觸發(fā)相應(yīng)的類別選中

利用柵格系統(tǒng)對網(wǎng)站進(jìn)行布局

布置完畢將柵格去除（紫紅色是1200px寬度的邊界）

每個(gè)元件盡可能的規(guī)范，再進(jìn)行下一步

拿網(wǎng)址導(dǎo)航頁做示例，每個(gè)單元模塊標(biāo)題，網(wǎng)址卡片、左側(cè)導(dǎo)航的排布盡可能規(guī)范統(tǒng)一，立馬包含了各種元素的基本規(guī)范如：字體大小、顏色、寬度、懸停交互效果點(diǎn)擊跳轉(zhuǎn)效果

合理利用中繼器做頁面的數(shù)據(jù)關(guān)聯(lián)

常用工具與實(shí)用資源頁面，采用了中繼器來制作，在中繼器的微型數(shù)據(jù)表中，插入對應(yīng)字段后，關(guān)聯(lián)每項(xiàng)參數(shù)的內(nèi)容（對元件名稱進(jìn)行命名），以后增加一條數(shù)據(jù)對應(yīng)改變其內(nèi)容即可。

如下圖包含了圖片，標(biāo)簽，標(biāo)題，詳情描述幾個(gè)內(nèi)容，在中繼器中就要有相應(yīng)的字段來進(jìn)行控制

4. 制作完畢，接下去要解決的是如何把生成的網(wǎng)站，能讓其它人進(jìn)行訪問

（1）我們需要一個(gè)域名，可以到阿里云萬網(wǎng)去購買https://wanwang.aliyun.com/，我選擇的域名是uedart.com的域名；

（2）我們還需要一個(gè)服務(wù)器，我選擇的是海外云虛擬機(jī)，不需要備案可以在阿里云進(jìn)行購買；

（3）都準(zhǔn)備好之后，我們要做的是按照阿里云的步驟進(jìn)行虛擬機(jī)的設(shè)置布局，下載Filezilla進(jìn)行關(guān)聯(lián)，將我們axure生成的文件進(jìn)行上傳，上傳之后，我們再進(jìn)行域名的解析，即可通過域名對我們的網(wǎng)站進(jìn)行外網(wǎng)訪問。

5. 可能遇到的問題，工具欄明明在生成的時(shí)候關(guān)閉了，上傳之后還是出現(xiàn)了

可以將index和start的html刪除，復(fù)制第一個(gè)頁面的html改名成index重新上傳即可

總結(jié)

至此通過以上5個(gè)步奏，我們利用Axure完成了一個(gè)小型網(wǎng)站設(shè)計(jì)與制作，當(dāng)然這并不是一個(gè)傳統(tǒng)意義上的網(wǎng)站開發(fā)，只是借此向大家介紹下，利用Axure的html生成，我們可以簡單的處理一個(gè)網(wǎng)站的制作，如果只是個(gè)人的網(wǎng)站，且不需要過多的復(fù)雜功能，此方法足以滿足各位的需求，大家也可以利用這樣發(fā)方式來制作自己的網(wǎng)站。

謝謝大家的觀看！

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

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