Axure 假網站製作軟體入門
什麼叫做「假網站」呢？
其實就是一種網站
通常是要讓客戶先大致瞭解網站的一些功能跟操作流程
只是因為設計者畢竟不可能一次就全部程式跟版面都到位做給客戶
(不然有時要修改程式或介面真的會死人)
假網站就是透過模擬真的在操作的方式來demo給客戶看的東西
比方還不用寫程式就可以模擬登入的功能
(因為登入還要建資料庫、連線那些有的沒的)
而Axure這套軟體就是做假網站的一個不錯的選擇
(唸法是Ak-sure)
功能和介面還算蠻好上手的
以下就簡單介紹一下入門的使用方式
基本介面大概長這樣子：
左上角是網站地圖
在做之前可以先把整個網站的架構先規劃好
左邊中間則是一些網頁元件
透過拖拉的方式拉到中間的製作區就可以
左下角則是樣板母片(master)
功能就跟ppt的投影片母片差不多
一般如果想要每頁的框架、banner、header、footer一樣的話
就在這邊製作好再套用到每一頁就可以
所以就先示範一下一個假想的網站「ANOVA變異數分析地獄!!」
首先先把網站地圖規劃完成
按左上角的+就可以增加底下的子頁
然後利用↑↓來改它的順序
或者利用←或→來改網頁的層級
然後就是要開始放東西進網頁裡囉~
首先我想要在首頁上面有選單可以選
我就先從左邊中間的工具區
點一下Wireframe
選Flow
Flow裡的東西用來做一些滑鼠滑過或按下的特效比較方便
(不過如果會CSS程式的話其實用CSS就很方便了，這種功能就有點像a:hover的功用)
選完之後就出現這樣的元件了
可以拿來設定成按鈕之類的
隨便拖幾個元件來當按鈕
在上面連點兩下左鍵就可以打字
現在我想要讓他點了之後可以開頁面
就像網頁上面的選單這樣
先點選元件
然後右上角的閃電
就可以增加一些功能
像我希望他點滑鼠一下之後能夠開參考文獻的頁面
我就點一下OnClick (滑鼠在上面按一下左鍵的意思)
然後Add Case
之後就會出現這個對話框
像我希望點了那個按鈕他可以直接在原本的頁面打開參考文獻那頁
我左邊就選第一個 Open Link in Current Window
然後右邊就選參考文獻那頁
(上面那個Case 1 可以隨你自己修改，比方改成「點選連結」之類的)
選完之後按OK即可
ok了
他右邊就會多一個Case 1
下面則有這個動作的簡單說明
然後元件上也會多一個小數字的記號
那如果要讓連結可以開新網頁的話呢？
(就是點了之後會開新視窗)
其實類似
我這次就用參考文獻頁來示範
一樣先新增一個按鍵
想要讓它連到我的部落格
一樣先點選右邊的閃電再Add Case
跳出這對話框之後
左邊選Open Link in New Window/Tab
右邊則選Link to an external url or file
輸入你要連的網頁的網址
一樣點選ok後
就會多一個1
那現在我們要怎麼知道它能跑呢？
就是在整個軟體上面的工具列
Generate→Prototype
點選後可以選要把你的假網站整包存在哪個地方
然後可先選要用什麼瀏覽器開
再按Generate就可以幫你發佈成網頁了
打開後就像剛剛做出的東西一樣了
當然上面是很基本很基本的功能
他還有別的功能像是拉表格
或者新增一些頁面元件等等的
其中一個就是可以直接插圖片
選圖片來源之後
看你要不要把圖片依原尺寸放大
基本上不用
就可以把圖片放進你規劃的區塊了
只是每一頁都要做同樣的動作的話很累
幸好他有「母片」(Master)的功能
有了母片
我們就只需要做一個樣板
然後讓需要套的網頁來套就可以
製作樣板母片的地方就在左下角那個框裡
一樣按那個+
就可以新增一個樣板母片
一般要做網頁上面的banner跟選單就用母片功能就不用每頁做
習慣上我都稱之為header
點選兩下之後打開
然後我把剛剛做好的那坨選單和圖片直接copy過來放
然後在Master那個框裡面的Header右鍵→Add To Pages...
可選你要套用這個母片到哪些頁面
點選OK後就幫你套用了
這時你如果去看看有套用的那些頁面
就會發現它們都幫你長出那一坨選單了!
而外框顯示是紅色的代表你不能去修改
(要修改的話就要回到母片去更改)
同樣的要做網頁最下面的Footer也是照本宣科
就不再多講囉
現在要再講另一個蠻常見的功能
就是模擬使用者登入
一般來說登入會有兩種情形
一種是成功一種是失敗
但因為真正的登出入還要建資料庫
所以用假網站模擬這兩種可能的情形就比較省事
(當然如果對於寫程式熟到跟抓癢一樣就另當別論)
我先把登入頁面、登入成功頁、登入失敗頁都先建在網站地圖中
當然要先把一些元件都先拉好
然後我們選取「登入」那個按鈕元件
一樣是在右方閃電那邊增加case
這次作法跟之前連結沒兩樣
我把這個case稱之為「成功」
然後按OK
跟剛剛一樣
按鈕上出現了一個1
右邊那邊也顯示他成功的話就會到登入成功的頁面
不同的作法來了!
現在要多另一個case
一樣先選那個按鈕之後
再Add Case一次
這次我就把上面名稱改成失敗
然後讓他可以連到登入失敗頁
OK後就發現他右邊多了一個動作
就是若失敗就到登入失敗頁
登入成功頁和登入失敗頁也先在上面加一些字知道是連到那一頁
登入失敗頁就放一串「登入失敗!!」字好了
然後一樣先Generate→Prototype
測試看看
進到那頁後帳密隨便打(因為沒差)
點選登入鈕會發現他出現"成功"跟"失敗"兩個選項可以選
如果你想讓客戶看看模擬成功登入的情形
就點成功
反之就讓他看看失敗頁
有這種功能就暫不需要建立資料庫、呼叫資料庫和寫判斷式了
所以不會寫程式的人就有福囉!
一樣可以先跟客戶談好網頁架構再請寫程式的人建
當然還有一個功能也很貼心
畢竟做好假網站之後
你還得一頁一頁講解其實很累
Axure就可以幫你直接匯出網站的摘要!
點選Generate→Specification
選取你要儲存的地方
點Generate就會幫你跑出Word的摘要文件囉!
每一頁還幫你截圖
非常貼心
基本上常見的入門功能就這樣
當然整體來說仍然不簡單
但最起碼
不會寫程式或還不熟的設計者
不需要先拼死拼活把整個系統後台都建好才去給客戶看
先做好模擬的假網站
有需要修改的部份一樣一清二楚
之後真正製作時就比較省時省力了
當然對我來說直接寫php好像比較快XD
留言列表
創作 (11)