HPX台南讀書會-Axure RP基礎課程

課程大綱
前言 Axure RP手把手實戰
• 使用者經驗設計流程簡介 • 練習範例介紹： HPX台南吃喝玩
樂交流平台
• 雛型(Prototyping)設計概 • Sitemap簡介
念 • 練習一-建立Sitemap
• Masters簡介
• 雛型(Prototyping)設計工 • Page Properties簡介
具 • Widgets簡介
• 練習二-建立Wireframe
• 網站資訊架構 • 進階Widgets使用
(Information • 練習三-進階Widgets使用
Architecture for WWW) • General Prototype(輸出雛型)
• Specification(規格文件)
概念 • Publish to AxShare
• Axure RP相關學習資源

2

本次基礎課程…
• 使用版本：AxureRP Pro 6.5 (Ver.6.5.0.3012)
• 會提到的
– 基礎使用者經驗設計流程，雛型(Prototyping)設計與工具，基礎
網站資訊架構(Information Architecture)概念
– 使用者操作介面介紹
– 手把手案例操作練習
• 不會提到的
– 網站企劃，使用性測試，使用者體驗(UX)
– 如何自訂Widget Libraries
– 如何進行多人(大於2人)共同開發
– 如何依據不同角色設定不同需看到的文件資訊(Specification)
– 互動設計與進階互動設計(參數等)
– Mobile雛形設計與實機DEMO
• 那，不會提到的怎麼辦?
– 如果有進階課程再與各位共同學習^^”

3

• 楊梭逸 Carter Yang
• 工作經歷：
– 2012/01~迄今，總經理特助(兼品管部經理)
– 2010/06~2011/12，視覺設計組(兼品管部)經理
– 2006/04~2010/12，專案經理
• 專注領域：
– 專案管理，網頁與多媒體設計，網站企劃，使用者
體驗與互動，Drupal CMS，CMMI，品質管理
• 興趣：
– 數位攝影與錄影
本投影片部分資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com

4

課程大綱
• 前言
– 使用者經驗設計流程簡介
– 雛型(Prototyping)設計概念
– 雛型(Prototyping)設計工具
– 網站資訊架構(Information Architecture for
WWW)概念
• Axure RP手把手實戰

5

使用者經驗設計流程
研究
需求

驗證
N

設計構思
http://www.usablebrands.ch/usability_.html

6

模型屋

Prototype(雛形)
可供討論的模型或樣品

樣品屋透視圖

圖片來源：http://house.hinet.net/img/xml_13/7889323/7889323-10.jpg 圖片來源： http://homepage18.seed.net.tw/cgi/file_view.pl/TH.CJ0yww

8

低擬真 VS.高擬真(1)
Low Fidelity(低擬真) High Fidelity(高擬真)

• 不像最終設計成品 • 接近最終設計成品
• 好處 • 好處
– 很快，有東西可以討論 – 有更具體的東西討論
– 可以專注在High-level – 專注在更多設計細節
的設計觀念 – 驗證各種角度的使用者
– 探討主要的架構與功能經驗
– 更容易發散思考不受拘 – 開發工作的工程師更容
束易理解
– 客戶(老闆)更容易理解
9

低擬真 VS.高擬真(2)
Low Fidelity(低擬真) High Fidelity(高擬真)

10

設計流程中，二者都具有意義

低擬真高擬真
Prototype
(Sketch手繪草稿)
= Prototype

實際設計產品時，
大家都希望看到更真實的設計

低擬真高擬真
Prototype
(Sketch手繪草稿) < Prototype

11

Prototyping的方法
• Wireframe prototyping
• Paper prototyping
• Storyboard prototyping
• Digital prototyping
• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping
• Coded prototyping (including scripting
and HTML)

12

Wireframe prototyping Paper prototyping

http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/
P5uDxoEfz1w/s1600/lmf_paper_prototype.gif

13

Storyboard prototyping

混搭mix
Paper – Digital prototyping

http://www.youtube.com/watch?v=GrV2SZuRPv0

14

Blank model prototyping Wizard of Oz prototyping

http://www.youtube.com/watch?v=_aoo_N-7AYk

15

Video Prototyping Code Prototyping

http://www.youtube.com/watch?v=BpWM0FNPZSs http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/

56秒-64秒

16

雛形工具演化經驗
17

MS Word + MS Visio

19

HTML/PS(直接做網頁或圖)

Adobe Dreamweaver/Photoshop

MS Visual Studio

20

MS PowerPoint MS Word + MS Visio HTML/PS Axure RP

22

工具
常用雛形工具簡介
23

廣義雛型工具 for Web/AP(1)
• Diagram Tools (General Purpose)
– MS Visio
– MS PowerPoint
– MS Word
– MS Excel
– Pencil Project (Plug-in Firefox)
– OmniGraffle (Mac OS X, Mac版的Visio)
– Cacoo
• Graphics Tool
– Photoshop / Illustrator / Firework / FlashMX

24

廣義雛型工具 for Web/AP(2)
• Purpose-Built (For Software Application or Web)
– Axure RP
– iRise Studio
– Prototype Composer
– GUI Design Studio (Caretta)
– MockupScreens
– Balsamiq Mockups
• Developing Tool
– Adobe Dreamweaver
– MS FrontPage,Express Web,MS Visual Studio
• Aid.(其他輔助軟體)
– XMinid
– FastStone Capture

25

Balsamiq Mockups(Free)

http://www.balsamiq.com/products/mockups
26

Cacoo(Free)

http://cacoo.com/
更多簡介：http://playpcesor.blogspot.com/2011/04/cacoo.html

27

其他雛形設計輔助軟體
Xmind FastStone Capture
心智圖(需求整理) 螢幕畫面擷取編輯

更多簡介：
http://briian.com/?p=5713

http://www.xmind.net/

28

資料來源：http://www.inspiredm.com/wp-content/uploads/2011/10/informationarchitecture.jpg

29

網站資訊架構(IA for WWW)概念(1)

資料來源：布丁布丁吃什麼？，http://pulipuli.blogspot.com/2010/03/blog-post.html
30


31


32


33

課程大綱
• 前言
• Axure RP手把手實戰
– 練習範例介紹： HPX台南吃喝玩樂交流平台
– Sitemap簡介
– 練習一-建立Sitemap
– Masters簡介
– Page Properties簡介
– Widgets簡介
– 練習二-建立Wireframe
– 進階Widgets使用
– 練習三-進階Widgets使用
– General Prototype(輸出雛型)
– Specification(規格文件)
– Publish to AxShare
– Axure RP相關學習資源

35

需求訪談
圖片來源：http://pic002.cnblogs.com/images/2010/14032/2010111217383632.jpg

36

練習範例-HPX台南吃喝玩樂交流平台(1)
• 需求訪談紀錄表
備註：
– (客戶)高階需求以下為虛擬人
• 訪談對象：老闆(Richard) 名，若有雷同
• 訪談內容：純屬巧合
– 歡樂!歡樂!!歡樂!!!
– 學不到東西沒關係，歡樂最重要!!!!(誤)
– (客戶)聯絡人需求
• 訪談對象：網站管理者(Nor)
• 訪談內容：
– 要能夠讓管理者方便操作，並且可以線上編輯內容
– 要能夠線上讓一般網友進行會員申請
– 要能夠及時將最新訊息發布在網站上
– 要能夠透過行事曆方式並提供查詢功能，快速了解活動
– 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚
的區分出進行中，已結束的資訊
– 網友需求
• 訪談對象：成員(Wan Chen)
• 訪談內容：
– 希望可以線上報名參加讀書會或其他活動
– 希望可以將每次聚會活動照片方便的發布在平台上
– 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到
37

• 需求訪談紀錄表(Highlight 關鍵字)
備註：
– (客戶)高階需求以下為虛擬人
• 訪談對象：老闆(Richard) 名，若有雷同
• 訪談內容：純屬巧合
– 歡樂!歡樂!!歡樂!!!
– 學不到東西沒關係，歡樂最重要!!!!(誤)
– (客戶)聯絡人需求
• 訪談對象：網站管理者(Nor)
• 訪談內容：
– 要能夠讓管理者方便操作，並且可以線上編輯內容
– 要能夠線上讓一般網友進行會員申請
– 要能夠及時將最新訊息發布在網站上
– 要能夠透過行事曆方式並提供查詢功能，快速了解活動
– 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚
的區分出進行中，已結束的資訊
– 網友需求
• 訪談對象：成員(Wan Chen)
• 訪談內容：
– 希望可以線上報名參加讀書會或其他活動
– 希望可以將每次聚會活動照片方便的發布在平台上
– 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到
38

• 網站功能列表
– 最新消息
– 讀書會簡介
• 成立宗旨
• 加入會員
– 活動行事曆
– 書籍與成員
• 進行中書籍
• 已結束書籍
• 心得分享
– 吃喝玩樂剪影
• 2012/04/15-《不為難自己的練習》讀書聚會
• 2012/04/22-架站前的實作花絮!!
– 線上報名
– 網站地圖

39

官方線上支援
與討論區連結最近開啟過
的檔案清單
開啟新檔案

D
B
A
D
C

E
1.軟體不會自動更新，需手動
2.團隊中強烈建議使用相同版
若希望下次不要顯示本
歡迎畫面，直接進入 3.舊版本無法開啟新版本檔案
編輯區請打勾 (如v5無法開v6的版本)

40

(點選後可隱藏左側) (點選後可最大化或最小化) (點選後可隱藏右側)

Menu Bar
Toolbar

Sitemap
Widgets
Properties
Wireframe

Widgets

Dynamic
Panel
Masters Page Properties Manager

專案層級：Sitemap，Masters
框線層級：Wireframe，Page Properties ，Dynamic Panel Manager ，Widgets
組件層級：Widgets Properties
41

Sitemap簡介
• 新增(Add)，刪除(Delete)，複製(Duplicate)，
重新命名(Rename)，調整順序(Move)，
搜尋(Search)

42

練習一、建立Sitemap(1)
• 步驟一：操作Sitemap相關功能
小技巧：
• 滑鼠左鍵選擇頁面後可直接拖動頁
面，以調整頁面的層級和位置關係
• 頁面修改名稱方式可參照
Windows中文件重命名方式，左
鍵單擊選中頁面後，再次單擊頁面
可直接修改頁面名稱
• 如果頁面之間已經做了按鈕跳轉等
操作，改變頁面的層級關係或重新
命名頁面並不會影響已有的鏈結

43

練習一、建立Sitemap(2)
• 步驟二：並依據練習範例網
站功能列表，建立Sitemap
• 步驟三：利用Generate
Flow Diagram，建立網站
地圖
– 先打開欲產生之頁面，再將
滑鼠點選頂層頁面，再點選
Generate Flow Diagram，
並選擇”Standard”
或”Right Hanging”

44

Masters簡介(1)
• 共用區塊(Masters)提供在設計過程中可以
重複使用的Widget
• 概念說明圖：

45

Masters簡介(2)
• 口訣：一步通到底
• 好處：
– 省時，減少重工避
免錯誤
– 維持一致性
– 減少檔案大

46

Page Properties簡介
應用如：
• 客戶的需求描述
• 客戶的回饋
Page Notes： • 設計上需注意處
輸入頁面的註解 • 給不同角色看的UX
資訊

應用如：
• 換頁的時候，要延
後幾秒
• 頁面讀入後，顯示
Page Interactions：什麼資訊
設定該面的互動效果

應用如：
• 呈現手繪的效果
• 頁面至中(預設靠左)
Page Formatting： • 頁面背景顏色或圖
案
設定該面的格式

47

Widgets簡介(1)
• Widgets可提供繪製雛
形時得相關組件，除使
用內建外也可透過匯入
方式外掛更多的組件
– Wireframe：常用的使
用者介面組件
– Flow：用來繪製流程圖
的組件
– 如要更換不同類型，可
點選左上角下拉選擇
– 如果組件過多，同樣也
可透過左上角Search功
能快速找到

48

Widgets簡介(2)
• 試試看這些常用的Widgets：
Wireframe Flow

使用者處理程序

端點(開始
決策點
或結束)

備註：流程圖畫法有一定規則，需近
NOTE
一步了解請參考以下關鍵字：Flow
Chart，UML，XP，RUP，AUP，
EUP

49

練習二、建立Wireframe(1)
• 步驟一：依據練習範例需求定義功能描述
– 依據不同使用者需求，將相關需求描述建立於
對應頁面中的Page Notes

小技巧：
除輸入文字外，可調整字形，粗體，斜體，底線，與顏色

50

• 步驟二：建立頁面引導線(Guides)
• 使用960 Grid:12 Column • 將Guides鎖定與隱藏
建立引導線(Guides) (需要的話)

51

• 步驟三：使用Wireframe建立頁面與Masters
• 建立頁面資訊架構(頁首/頁 • 建立Masters
尾/主導覽列/次導覽列/內
容區/麵包屑)

B

A 小技巧： C
小技巧： Ctrl+A：全選後選擇
使用 Rectangle Convert To Master
52

• 步驟四：將建立起來
的Masters套用至全 C

部頁面
– 先將內容版型中的文 B
字描述刪除(目前所在
位置保留)
A
– 點選內容版型按右鍵，
選擇Add To Pages…
– 勾選希望加入Master
的頁面，按下OK後，
及完成套用

53

• 步驟五：依據練習範例需求於
Master
建立選單
– 使用Menu(Horizontal) 小技巧
– 建立第一層選單，再建立第二層選單 C

E
A
D
B
– 使用Qucik Link…快速建立頁面連結
– 選擇對應連結頁面並重複動作
– 設定Rollover/Selected Style
NOTE Table, Menu (Vertical/Horizontal) Widgets比較
耗效能
54

• 步驟六：使用其他Widgets於Master建立
頁面組件
– 點選快速鍵F5(General Prototype)，產生雛形

55

進階Widgets使用(1)
• 除了自己做組件(Widgets)外，用他人做好
的可以大幅度加快雛形的製作速度
• 雛形的設計精神：快!快!!快!!!不要拘泥於
技術
– http://www.axure.com/download-widget-libraries

56

進階Widgets使用(2)
• 如何下載與安裝？
– 至以上範例網頁中下載並解
壓縮，.rplib
為Widgets的格式
– 放到C:Users電腦名稱
DocumentsMy Axure RP
Libraries
– 若已開啟AxureRP，請重新
開啟，及會出現於Widgets
的下拉選單中

57

練習三、進階Widgets使用(1)
• 步驟一：依據練習範例需求
定義，使用外部Widgets建
立雛形
– Slider_Library_by_truemat
ter.rplib
– CalendarPicker_Y!DSK.rpli
b
– WidgetLib_v1.rplib
– Icons from Axure
(32x32).rplib
• 請各位可以依照範例檔進行
試做

58

• 步驟二：依據練習範例需求定義，使用內
建Widgets建立完整雛形

59

• 步驟三：完成以上步驟建置調整，完成雛
形
– 點選快速鍵F5(General Prototype)，產生雛形檢視

60

General Prototype(輸出雛型)
• 將製作的雛型產生成
HTML格式，方便提供
給其他人觀看
• 須留意選擇顯示的瀏覽
器
• 若希望在雛形中看到
LOGO，可將LOGO一
併設定於雛形設定中；
另LOGO的尺寸要先調
好，不然會不成比例
• 建議：
– 只更新現在開啟的頁面
到網站雛形
61

Specification(規格文件)
• 利用Specification功
能，輸出Microsoft
Word格式的需求書
或功能性規格文件
(Specification)
• 建議：
– 路徑常常讓人找不到，
需特別依據該路徑找
尋對應文件
– 只要把必要的項目輸
出到規格文件中
– 預設規格文件標題改
成中文
62

Publish to AxShare(1)
A
• 使用前請務必先註冊
B
• 發佈到網路上供其他人線
上進行觀看與評論，減少
自行架站或傳送給其他使
用者不知如何觀看的問題 C
• 若不希望公開，請務必設
定密碼
• 上傳完成後，會提供一個
專屬連結，可直接於瀏覽
器中輸入該連結即可瀏覽
• 若希望於網站上管理其他
雛形，請進入以下連結：
http://share.axure.com/

63

Publish to AxShare(2)

小技巧：
可點選左上角的長方形方格，可將
左側縮起

Page Notes ：
點選Page Notes，可看到之前於頁
面上輸入的註解

Discuss：
可透過Discuss讓客戶或其他使用者，
直接於該頁面上進行留言或審查

64

本次成果!!!

http://share.axure.com/1BCTL1
密碼： 2012HPX
65

其他補充
• 操作小技巧
– 重疊的物件，按住上層物件久一點，放掉後可選取下層物件
– 以方向鍵移動Widget
– 按住【Shift】鍵拖曳Widget可以水平或垂直移動Widget，或是配合鍵盤方
向鍵大幅移動
– 善用Hot Key (跟Office軟體Hot Key相同)
• CTRL-A : 全選
• CTRL-C : Copy
• CTRL-X : Cut
• CTRL-V : Paste
– 只要更新一頁Re-generate one page (CTRL-F5)
– Copy Excel的表格內容 Paste as “Image”
• 檔案版本管理：內建備份機制，但建議以日期為單位，分開儲存
– 路徑：C:Users電腦名稱AppDataLocalTempAxure-6-5-Pro
• 在Google Chrome無法看到作品，怎麼辦？

66

Axure RP相關學習資源
圖片來源：http://news.xinhuanet.com/internet/2010-09/08/12532236_11n.jpg

67

Axure RP相關學習資源(1)
• Axure RP中文社區，網址：
http://www.axure.org/

68

• 悠識數位-Axure RP線上課程，網址：
http://userxper.com/axure_tutorial

69

• Axure RP User's Club，網址：
https://www.facebook.com/groups/axure.club.ux/

請記得
加入
社團!!!

70

• (實體課程)悠識數位，
網址：
http://userxper.com/
• 課程班別：
– Axure RP新手入門班
– Axure RP原型設計工作
坊-以Web/Mobile介面
為例(定期課程)

71

Axure RP相關學習資源(5)-1
• (書籍)Axure RP 6 Prototyping
Essentials，網址：
http://www.packtpub.com/ax
ure-rp-6-prototyping-
essentials-for-compelling-
interactive/book
• 目前華語世界尚未推出
Axure RP的書籍，而
英語世界也僅有該本唯
一參考手冊

72

Axure RP相關學習資源(5)-2
• Chapter 1: Prototyping Fundamentals
– 從不同觀點來看UX，算是入門背景知識的補充
• Chapter 2: Axure Basics—the User Interface
– 最基本的操作介面說明，不困難可輕鬆閱讀
• Chapter 3: Prototype Construction Basics
– 用Use Case Diagram觀點作為範例介紹再帶出基本功能，頗為特別
• Chapter 4: Interactivity 101
– 簡易的互動說明，可快速入手瞭解
• Chapter 5: Advanced Interactions
– 進階的互動說明，很多沒做過，加上英文不好，不是看的很懂
• Chapter 6: Widget Libraries
– 其中對於自訂並與團隊分享之作法有具體說明
• Chapter 7: Managing Prototype Change
– 說明如果管理雛形的設計流程與整體樣貌（非版本控管）
• Chapter 8: Functional Specifications
– 說明如何產出Word文件格式與相關設定
• Chapter 9: Collaboration
– 說明如何透過SVN進行多人開發與版本控管
73

• Axure 官方網站
– 網址：http://www.axure.com/
• Sample Prototypes
– 網址： http://www.axure.com/sample-prototypes
• Online Training
– 網址： http://www.axure.com/training
• Video Tutorials
– 網址： http://www.axure.com/videos
• 手把手教學
– 網址： http://www.axure.com/tutorials
• Widget Libraries
– 網址： http://www.axure.com/download-widget-libraries

74

• 2tan.net-鳳凰涅磐，網址：
http://www.2tan.net/default.asp?tag=Axure+rp&dist
ype=list
• IT民工 or IT精英，網址：
http://www.itfarmer.com.cn/?cat=20

75

聯絡資料
• 基本資料
– 楊梭逸
– bhm@mail.linkchain.tw
• 個人網絡名片
– http://about.me/bhm
• 個人部落格
– http://www.bhm.idv.tw/blog/
• AxureRP使用心得雜亂談
– http://axurerp.blogspot.com/

77

HPX台南讀書會-Axure RP基礎課程

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a HPX台南讀書會-Axure RP基礎課程

Semelhante a HPX台南讀書會-Axure RP基礎課程 (20)

Mais de Souyi Yang

Mais de Souyi Yang (20)

HPX台南讀書會-Axure RP基礎課程