建網(wǎng)站保姆教程——網(wǎng)站原型設(shè)計(jì)

時(shí)間：2023-09-29 20:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 20:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

建網(wǎng)站保姆教程——網(wǎng)站原型設(shè)計(jì)：

上一節(jié)講了怎么做一個(gè)簡(jiǎn)單的網(wǎng)站

簡(jiǎn)單到只有一行字：“你好，這是我的第一個(gè)網(wǎng)站”

這個(gè)網(wǎng)站也太簡(jiǎn)單了

我想增加一些內(nèi)容，展示我的個(gè)人信息

有圖片、有文字、還有社交平臺(tái)的聯(lián)系方式

要怎么做呢？

建高樓大廈有設(shè)計(jì)圖紙

建筑工人再根據(jù)圖紙施工

建網(wǎng)站跟建高樓大廈類似

我們可以先用原型設(shè)計(jì)軟件，如Axure設(shè)計(jì)一個(gè)網(wǎng)站原型

然后再由研發(fā)人員實(shí)現(xiàn)網(wǎng)站的各種功能

Axure是專業(yè)的原型設(shè)計(jì)軟件

它不僅可以用來(lái)設(shè)計(jì)交互性的網(wǎng)站

也可以設(shè)計(jì)手機(jī)APP

是產(chǎn)品經(jīng)理設(shè)計(jì)原型的主流工具

Axure軟件主界面如下圖所示



主要分為六大區(qū)域：菜單欄、工具欄、頁(yè)面、元件、畫面、交互

設(shè)計(jì)原型就像堆樂(lè)高積木一樣

Axure中的<元件>區(qū)提供了很多組裝的元件

你可以把其中的元件拖到<畫布>中

在畫布中隨意擺放各種元件的位置

你還可以在<工具欄>對(duì)元件進(jìn)行快速排版

在<交互>中設(shè)計(jì)元件的各種交互動(dòng)作

<頁(yè)面>是對(duì)畫布的分類，規(guī)劃原型的結(jié)構(gòu)


<菜單欄>中是更多原型相關(guān)功能的設(shè)置

做網(wǎng)站主要用到的元件有“圖片”、“文本標(biāo)簽”

交互動(dòng)作主要是鼠標(biāo)點(diǎn)擊跳轉(zhuǎn)

先在<頁(yè)面>中新建一個(gè)頁(yè)面，命名為“主頁(yè)”

我們先為網(wǎng)站建個(gè)導(dǎo)航欄

在<元件>中拖幾個(gè)“文本標(biāo)簽”到<畫布>中

更改成導(dǎo)航的名字

如首頁(yè)、科技、汽車、攝影、編程、教程、軟件



大家可以根據(jù)自己做的網(wǎng)站設(shè)計(jì)網(wǎng)站導(dǎo)航欄


給網(wǎng)站LOGO預(yù)留一個(gè)位置

打算在導(dǎo)航欄左邊放置一個(gè)網(wǎng)站LOGO

從<元件>中拖一個(gè)“占位符”輸入文字LOGO

在工具欄中設(shè)置占位符的大小為L(zhǎng)OGO的大小



網(wǎng)站的導(dǎo)航欄就已經(jīng)做好了



在菜單欄中選擇<發(fā)布>，然后選擇<預(yù)覽>

就可以在瀏覽器中預(yù)覽我們?cè)O(shè)計(jì)的網(wǎng)站了


導(dǎo)航設(shè)計(jì)好之后接下來(lái)設(shè)計(jì)主頁(yè)的主要內(nèi)容


我業(yè)務(wù)愛(ài)好喜歡攝影

所以我想展示我拍攝的照片

從<元件>中拖入兩個(gè)“圖片”元件

照片上還要寫作品的名字

再?gòu)?lt;元件>中拖入兩個(gè)“文本標(biāo)簽”

左右排版兩張圖片，并設(shè)置每張圖片大小為400*300



網(wǎng)站底部留社交媒體的鏈接

社交媒體網(wǎng)站的LOGO可以從其官網(wǎng)上下載粘貼到Axure中

鏈接跳轉(zhuǎn)屬于交互動(dòng)作

選中社交媒體的LOGO，在<交互>面板中點(diǎn)擊“交互”，切面到交互選項(xiàng)



點(diǎn)擊“單擊時(shí)→打開(kāi)鏈接”

社交媒體是一個(gè)URL，所以選擇“鏈接到URL或文件路徑”



輸入你的社交賬號(hào)主頁(yè)的網(wǎng)頁(yè)地址

并點(diǎn)開(kāi)“更多選項(xiàng)”，在“打開(kāi)在”選項(xiàng)中選擇“新窗口/新標(biāo)簽”




圖片添加了鏈接后在畫布會(huì)顯示一個(gè)閃電的標(biāo)志



在瀏覽器中預(yù)覽點(diǎn)擊該圖片瀏覽器就會(huì)打開(kāi)鏈接的網(wǎng)址


最后在底部的左邊增加一行版權(quán)信息，讓網(wǎng)站看起來(lái)更對(duì)稱



首頁(yè)要展示的內(nèi)容結(jié)構(gòu)就基本做好了

你可以根據(jù)自己的想法增加修改首頁(yè)的內(nèi)容

也可以創(chuàng)建更多的頁(yè)面

讓網(wǎng)站豐富起來(lái)


這節(jié)課就先簡(jiǎn)單熟悉Axure的界面吧

了解更多