[教學] Axure 假網站製作軟體入門 - BELLEAYA 雜七雜八創作小窩

Axure 假網站製作軟體入門什麼叫做「假網站」呢？其實就是一種網站通常是要讓客戶先大致瞭解網站的一些功能跟操作流程只是因為設計者畢竟不可能一次就 ... BELLEAYA雜七雜八創作小窩 跳到主文 因為太忙久久才更新一次請見諒 部落格全站分類：圖文創作 相簿 部落格 留言 名片 May03Thu201216:53 [教學]Axure假網站製作軟體入門    Axure假網站製作軟體入門 什麼叫做「假網站」呢？其實就是一種網站通常是要讓客戶先大致瞭解網站的一些功能跟操作流程只是因為設計者畢竟不可能一次就全部程式跟版面都到位做給客戶(不然有時要修改程式或介面真的會死人) 假網站就是透過模擬真的在操作的方式來demo給客戶看的東西比方還不用寫程式就可以模擬登入的功能(因為登入還要建資料庫、連線那些有的沒的) 而Axure這套軟體就是做假網站的一個不錯的選擇(唸法是Ak-sure)功能和介面還算蠻好上手的以下就簡單介紹一下入門的使用方式   基本介面大概長這樣子： 左上角是網站地圖在做之前可以先把整個網站的架構先規劃好 左邊中間則是一些網頁元件透過拖拉的方式拉到中間的製作區就可以 左下角則是樣板母片(master)功能就跟ppt的投影片母片差不多一般如果想要每頁的框架、banner、header、footer一樣的話就在這邊製作好再套用到每一頁就可以   所以就先示範一下一個假想的網站「ANOVA變異數分析地獄!!」首先先把網站地圖規劃完成按左上角的+就可以增加底下的子頁然後利用↑↓來改它的順序或者利用←或→來改網頁的層級 然後就是要開始放東西進網頁裡囉~首先我想要在首頁上面有選單可以選我就先從左邊中間的工具區點一下Wireframe選FlowFlow裡的東西用來做一些滑鼠滑過或按下的特效比較方便(不過如果會CSS程式的話其實用CSS就很方便了，這種功能就有點像a:hover的功用) 選完之後就出現這樣的元件了可以拿來設定成按鈕之類的 隨便拖幾個元件來當按鈕在上面連點兩下左鍵就可以打字 現在我想要讓他點了之後可以開頁面就像網頁上面的選單這樣先點選元件然後右上角的閃電就可以增加一些功能 像我希望他點滑鼠一下之後能夠開參考文獻的頁面我就點一下OnClick(滑鼠在上面按一下左鍵的意思)然後AddCase 之後就會出現這個對話框像我希望點了那個按鈕他可以直接在原本的頁面打開參考文獻那頁我左邊就選第一個OpenLinkinCurrentWindow然後右邊就選參考文獻那頁(上面那個Case1可以隨你自己修改，比方改成「點選連結」之類的)  選完之後按OK即可 ok了他右邊就會多一個Case1下面則有這個動作的簡單說明然後元件上也會多一個小數字的記號   那如果要讓連結可以開新網頁的話呢？(就是點了之後會開新視窗) 其實類似我這次就用參考文獻頁來示範一樣先新增一個按鍵想要讓它連到我的部落格 一樣先點選右邊的閃電再AddCase跳出這對話框之後左邊選OpenLinkinNewWindow/Tab 右邊則選Linktoanexternalurlorfile輸入你要連的網頁的網址 一樣點選ok後就會多一個1 那現在我們要怎麼知道它能跑呢？就是在整個軟體上面的工具列Generate→Prototype 點選後可以選要把你的假網站整包存在哪個地方然後可先選要用什麼瀏覽器開再按Generate就可以幫你發佈成網頁了   打開後就像剛剛做出的東西一樣了   當然上面是很基本很基本的功能他還有別的功能像是拉表格     或者新增一些頁面元件等等的 其中一個就是可以直接插圖片  選圖片來源之後 看你要不要把圖片依原尺寸放大基本上不用 就可以把圖片放進你規劃的區塊了   只是每一頁都要做同樣的動作的話很累幸好他有「母片」(Master)的功能有了母片我們就只需要做一個樣板然後讓需要套的網頁來套就可以 製作樣板母片的地方就在左下角那個框裡一樣按那個+就可以新增一個樣板母片   一般要做網頁上面的banner跟選單就用母片功能就不用每頁做習慣上我都稱之為header點選兩下之後打開 然後我把剛剛做好的那坨選單和圖片直接copy過來放 然後在Master那個框裡面的Header右鍵→AddToPages... 可選你要套用這個母片到哪些頁面 點選OK後就幫你套用了這時你如果去看看有套用的那些頁面就會發現它們都幫你長出那一坨選單了!而外框顯示是紅色的代表你不能去修改(要修改的話就要回到母片去更改) 同樣的要做網頁最下面的Footer也是照本宣科就不再多講囉   現在要再講另一個蠻常見的功能就是模擬使用者登入一般來說登入會有兩種情形一種是成功一種是失敗但因為真正的登出入還要建資料庫所以用假網站模擬這兩種可能的情形就比較省事(當然如果對於寫程式熟到跟抓癢一樣就另當別論) 我先把登入頁面、登入成功頁、登入失敗頁都先建在網站地圖中 當然要先把一些元件都先拉好 然後我們選取「登入」那個按鈕元件一樣是在右方閃電那邊增加case 這次作法跟之前連結沒兩樣我把這個case稱之為「成功」然後按OK 跟剛剛一樣按鈕上出現了一個1右邊那邊也顯示他成功的話就會到登入成功的頁面 不同的作法來了!現在要多另一個case一樣先選那個按鈕之後再AddCase一次 這次我就把上面名稱改成失敗然後讓他可以連到登入失敗頁 OK後就發現他右邊多了一個動作就是若失敗就到登入失敗頁 登入成功頁和登入失敗頁也先在上面加一些字知道是連到那一頁登入失敗頁就放一串「登入失敗!!」字好了   然後一樣先Generate→Prototype測試看看 進到那頁後帳密隨便打(因為沒差)點選登入鈕會發現他出現"成功"跟"失敗"兩個選項可以選如果你想讓客戶看看模擬成功登入的情形就點成功反之就讓他看看失敗頁 有這種功能就暫不需要建立資料庫、呼叫資料庫和寫判斷式了所以不會寫程式的人就有福囉!一樣可以先跟客戶談好網頁架構再請寫程式的人建     當然還有一個功能也很貼心畢竟做好假網站之後你還得一頁一頁講解其實很累Axure就可以幫你直接匯出網站的摘要! 點選Generate→Specification 選取你要儲存的地方 點Generate就會幫你跑出Word的摘要文件囉!   每一頁還幫你截圖非常貼心     基本上常見的入門功能就這樣當然整體來說仍然不簡單但最起碼不會寫程式或還不熟的設計者不需要先拼死拼活把整個系統後台都建好才去給客戶看先做好模擬的假網站有需要修改的部份一樣一清二楚之後真正製作時就比較省時省力了     當然對我來說直接寫php好像比較快XD         全站熱搜 創作者介紹 belleaya(愛) BELLEAYA雜七雜八創作小窩 belleaya(愛)發表在痞客邦留言(0)人氣() E-mail轉寄 全站分類：進修深造個人分類：網頁程式教學此分類上一篇：[教學]PHP一些常用到的語法 此分類下一篇：[教學][程式]用Processing寫特訓99 上一篇：[開箱]玻璃沾水筆 下一篇：[食記][台中]田樂漢堡ForFarm 歷史上的今天 2011:[漫畫]四格漫第3~4話「未來機器貓」 2011:[小說]香煎黑胡椒肉片 ▲top 留言列表 發表留言 文章分類 創作(11) 創作經驗分享(3)短篇小說(94)連載小說(1)電玩製作(3)影音創作(3)漫畫/小圖(17)數位藝廊(3)塗鴉(4)小愛PTT廢文(33)惡搞/搞笑KUSO(23)比賽(1) 生活(18) 真菌拍拍(0)植物拍拍(4)建築拍拍(1)動物拍拍(8)天空拍拍(19)食記-台北(7)食記-桃竹苗(30)食記-中彰投(56)食記-南部(3)遊記(46)電玩攻略/情報(35)影記/電影資料(6)開箱/收藏(10)閱讀/聽樂小記(22)閒聊/雜物/社會(16)爆笑KUSO(1)鍵盤速水茂虎道(4)雜七雜八生活(11) 學習(11) 管理/財務(4)文書/Office功能(6)看電影學英文(4)看笑話學英語(17)統計/資料分析/AI(10)學校課程/論文(9)繪圖軟體教學(10)好用軟體教學(5)網頁程式教學(9)科普/科學雜談(5)國英數物化生(10) 文章搜尋 最新文章 文章精選 文章精選 2021三月(3) 2021二月(2) 2019一月(2) 2018十二月(2) 2018十月(3) 2018六月(2) 2018四月(3) 2018三月(1) 2017六月(1) 2016十二月(2) 2016十一月(1) 2016七月(3) 2016六月(5) 2016五月(1) 2016三月(4) 2016二月(2) 2016一月(1) 2015十二月(7) 2015十一月(8) 2015十月(5) 2015九月(2) 2015八月(3) 2015七月(8) 2015六月(1) 2015五月(10) 2015四月(7) 2015三月(4) 2015二月(9) 2015一月(9) 2014十一月(6) 2014九月(1) 2014八月(9) 2014七月(3) 2014六月(2) 2014五月(2) 2014四月(2) 2014三月(5) 2014二月(12) 2014一月(5) 2013十二月(1) 2013十一月(4) 2013十月(1) 2013九月(9) 2013八月(16) 2013七月(17) 2013六月(10) 2013五月(10) 2013四月(4) 2013三月(7) 2013二月(6) 2013一月(9) 2012十二月(7) 2012十一月(8) 2012十月(6) 2012九月(5) 2012八月(8) 2012七月(11) 2012六月(7) 2012五月(6) 2012四月(6) 2012三月(6) 2012二月(10) 2012一月(8) 2011十二月(20) 2011十一月(12) 2011十月(8) 2011九月(16) 2011八月(5) 2011七月(6) 2011六月(3) 2011五月(9) 2011四月(7) 2011三月(8) 2011二月(5) 2011一月(8) 2010十二月(11) 2010十一月(10) 2010十月(11) 2010九月(19) 2010八月(55) 所有文章列表 熱門文章 參觀人氣 本日人氣： 累積人氣： POWEREDBY (登入) 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗