Axure 

Axure 假網站製作軟體入門

什麼叫做「假網站」呢?
其實就是一種網站
通常是要讓客戶先大致瞭解網站的一些功能跟操作流程
只是因為設計者畢竟不可能一次就全部程式跟版面都到位做給客戶
(不然有時要修改程式或介面真的會死人)

假網站就是透過模擬真的在操作的方式來demo給客戶看的東西
比方還不用寫程式就可以模擬登入的功能
(因為登入還要建資料庫、連線那些有的沒的)

而Axure這套軟體就是做假網站的一個不錯的選擇
(唸法是Ak-sure)
功能和介面還算蠻好上手的
以下就簡單介紹一下入門的使用方式

 

基本介面大概長這樣子:

Axure 01

左上角是網站地圖
在做之前可以先把整個網站的架構先規劃好

左邊中間則是一些網頁元件
透過拖拉的方式拉到中間的製作區就可以

左下角則是樣板母片(master)
功能就跟ppt的投影片母片差不多
一般如果想要每頁的框架、banner、header、footer一樣的話
就在這邊製作好再套用到每一頁就可以

 

所以就先示範一下一個假想的網站「ANOVA變異數分析地獄!!
首先先把網站地圖規劃完成
按左上角的+就可以增加底下的子頁
然後利用↑↓來改它的順序
或者利用←或→來改網頁的層級

Axure 01

然後就是要開始放東西進網頁裡囉~
首先我想要在首頁上面有選單可以選
我就先從左邊中間的工具區
點一下Wireframe
選Flow
Flow裡的東西用來做一些滑鼠滑過或按下的特效比較方便
(不過如果會CSS程式的話其實用CSS就很方便了,這種功能就有點像a:hover的功用)

Axure 02

選完之後就出現這樣的元件了
可以拿來設定成按鈕之類的

Axure 03

隨便拖幾個元件來當按鈕
在上面連點兩下左鍵就可以打字

Axure 04

現在我想要讓他點了之後可以開頁面
就像網頁上面的選單這樣
先點選元件
然後右上角的閃電
就可以增加一些功能

Axure 05

像我希望他點滑鼠一下之後能夠開參考文獻的頁面
我就點一下OnClick (滑鼠在上面按一下左鍵的意思)
然後Add Case

Axure 06

之後就會出現這個對話框
像我希望點了那個按鈕他可以直接在原本的頁面打開參考文獻那頁
我左邊就選第一個 Open Link in Current Window
然後右邊就選參考文獻那頁
(上面那個Case 1 可以隨你自己修改,比方改成「點選連結」之類的)

Axure 07

 選完之後按OK即可

Axure 08

ok了
他右邊就會多一個Case 1
下面則有這個動作的簡單說明
然後元件上也會多一個小數字的記號

Axure 09

 

那如果要讓連結可以開新網頁的話呢?
(就是點了之後會開新視窗)

其實類似
我這次就用參考文獻頁來示範
一樣先新增一個按鍵
想要讓它連到我的部落格

Axure 10

一樣先點選右邊的閃電再Add Case
跳出這對話框之後
左邊選Open Link in New Window/Tab

右邊則選Link to an external url or file
輸入你要連的網頁的網址

Axure 11

一樣點選ok後
就會多一個1

Axure 12

那現在我們要怎麼知道它能跑呢?
就是在整個軟體上面的工具列
Generate→Prototype

點選後可以選要把你的假網站整包存在哪個地方
然後可先選要用什麼瀏覽器開
再按Generate就可以幫你發佈成網頁了

Axure 13

 

打開後就像剛剛做出的東西一樣了

Axure 14

Axure 15

 

當然上面是很基本很基本的功能
他還有別的功能像是拉表格

Axure 16

 

Axure 17

 

Axure 18

或者新增一些頁面元件等等的

Axure 19

其中一個就是可以直接插圖片

Axure 20

 選圖片來源之後

Axure 21

看你要不要把圖片依原尺寸放大
基本上不用

Axure 22

就可以把圖片放進你規劃的區塊了

Axure 23

 

只是每一頁都要做同樣的動作的話很累
幸好他有「母片」(Master)的功能
有了母片
我們就只需要做一個樣板
然後讓需要套的網頁來套就可以

製作樣板母片的地方就在左下角那個框裡
一樣按那個+
就可以新增一個樣板母片

 

Axure 24

一般要做網頁上面的banner跟選單就用母片功能就不用每頁做
習慣上我都稱之為header
點選兩下之後打開

Axure 25

然後我把剛剛做好的那坨選單和圖片直接copy過來放

Axure 26

然後在Master那個框裡面的Header右鍵→Add To Pages...

Axure 27

可選你要套用這個母片到哪些頁面

Axure 28

點選OK後就幫你套用了
這時你如果去看看有套用的那些頁面
就會發現它們都幫你長出那一坨選單了!
而外框顯示是紅色的代表你不能去修改
(要修改的話就要回到母片去更改)

Axure 29

同樣的要做網頁最下面的Footer也是照本宣科
就不再多講囉

Axure 30

 

現在要再講另一個蠻常見的功能
就是模擬使用者登入
一般來說登入會有兩種情形
一種是成功一種是失敗
但因為真正的登出入還要建資料庫
所以用假網站模擬這兩種可能的情形就比較省事
(當然如果對於寫程式熟到跟抓癢一樣就另當別論)

我先把登入頁面、登入成功頁、登入失敗頁都先建在網站地圖中

Axure 31

當然要先把一些元件都先拉好

Axure 32

然後我們選取「登入」那個按鈕元件
一樣是在右方閃電那邊增加case

Axure 33

這次作法跟之前連結沒兩樣
我把這個case稱之為「成功」
然後按OK

Axure 34

跟剛剛一樣
按鈕上出現了一個1
右邊那邊也顯示他成功的話就會到登入成功的頁面

Axure 35

不同的作法來了!
現在要多另一個case
一樣先選那個按鈕之後
再Add Case一次

Axure 36

這次我就把上面名稱改成失敗
然後讓他可以連到登入失敗頁

Axure 37

OK後就發現他右邊多了一個動作
就是若失敗就到登入失敗頁

Axure 38

登入成功頁和登入失敗頁也先在上面加一些字知道是連到那一頁
登入失敗頁就放一串「登入失敗!!」字好了

Axure 39

 

然後一樣先Generate→Prototype
測試看看

進到那頁後帳密隨便打(因為沒差)
點選登入鈕會發現他出現"成功"跟"失敗"兩個選項可以選
如果你想讓客戶看看模擬成功登入的情形
就點成功
反之就讓他看看失敗頁

Axure 40

有這種功能就暫不需要建立資料庫、呼叫資料庫和寫判斷式了
所以不會寫程式的人就有福囉!
一樣可以先跟客戶談好網頁架構再請寫程式的人建

 

 

當然還有一個功能也很貼心
畢竟做好假網站之後
你還得一頁一頁講解其實很累
Axure就可以幫你直接匯出網站的摘要!

點選Generate→Specification

Axure 41

選取你要儲存的地方

Axure 42

點Generate就會幫你跑出Word的摘要文件囉!

 

Axure 43

每一頁還幫你截圖
非常貼心

Axure 44

 

 

基本上常見的入門功能就這樣
當然整體來說仍然不簡單
但最起碼
不會寫程式或還不熟的設計者
不需要先拼死拼活把整個系統後台都建好才去給客戶看
先做好模擬的假網站
有需要修改的部份一樣一清二楚
之後真正製作時就比較省時省力了

 

 

當然對我來說直接寫php好像比較快XD

 

 

 

 

創作者介紹
創作者 belleaya (愛) 的頭像
belleaya (愛)

B E L L E A Y A 雜七雜八創作小窩

belleaya (愛) 發表在 痞客邦 留言(0) 人氣()