高雄和春資工系-Axure RP基礎課程

課程大綱 前言與概念

(09:00~09:45)

• 使用者經驗設計流程簡介

• 雛型(Prototyping)設計概念

• 雛型(Prototyping)設計工具

• 網站資訊架構(Information Architecture for WWW)概念

Axure RP手把手實戰

(09:55~12:00) • 練習範例介紹 • Sitemap簡介 • 練習一-建立Sitemap • Masters簡介 • Page Properties簡介 • Widgets簡介 • 練習二-建立Wireframe • 進階Widgets使用 • 練習三-進階Widgets使用 • General Prototype(輸出雛型) • Specification(規格文件) • Publish to AxShare • Axure RP相關學習資源

2

本次基礎課程…

• 使用版本：AxureRP Pro 6.5 (Ver. 6.5.0.3040) • 會提到的

– 基礎使用者經驗設計流程，雛型(Prototyping)設計與工具 – 網站資訊架構(IA for WWW)基礎概念 – AxureRP使用者操作介面介紹 – AxureRP手把手案例操作練習

• 不會提及/操作到的 – 網站企劃，使用性測試，使用者體驗(UX) – 如何自訂Widget Libraries – 如何進行多人(大於2人)共同開發 – 如何依據不同角色設定不同需看到的文件資訊

(Specification) – 互動設計與進階互動設計(參數等) – Mobile雛形設計與實機DEMO

3

• 楊梭逸 Carter Yang

• 工作經歷：

– 2012/01~迄今 ， 經理

– 2010/06~2011/12，視覺設計組(兼品管部)經理

– 2006/04~2010/12，專案經理

• 專注領域：

– 專案管理，網頁與多媒體設計，網站行銷與企劃，使用者體驗與互動，Drupal CMS，CMMI，品質管理

4

Who am I ?

課程大綱

• 前言

– 使用者經驗設計流程簡介

– 雛型(Prototyping)設計概念

– 雛型(Prototyping)設計工具

– 網站資訊架構(Information Architecture for WWW)概念

• Axure RP手把手實戰

5

使用者經驗設計流程

6

http://www.usablebrands.ch/usability_.html

N

研究 需求

構思 設計

驗證

7

Prototype 雛形

Prototype 雛形

8

模型屋

樣品屋

Prototype(雛形)

可供討論的模型或樣品

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

透視圖

低擬真 VS.高擬真(1)

Low Fidelity(低擬真)

• 不像最終設計成品

• 好處 – 很快，有東西可以討論

– 可以專注在High-level的設計觀念

– 探討主要的架構與功能

– 更容易發散思考不受拘束

High Fidelity(高擬真)

• 接近最終設計成品

• 好處 – 有更具體的東西討論

– 專注在更多設計細節

– 驗證各種角度的使用者經驗

– 開發工作的工程師更容易理解

– 客戶(老闆)更容易理解

9

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

10

11

高擬真 Prototype

低擬真 Prototype (Sketch手繪草稿)

=

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

實際設計產品時，

大家都希望看到更真實的設計

高擬真 Prototype

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

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

13

Wireframe prototyping Paper prototyping

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

14

Storyboard prototyping

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

混搭mix

Paper – Digital prototyping

15

Blank model prototyping Wizard of Oz prototyping

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

16

http://www.youtube.com/watch?v=BpWM0FNPZSs 56秒-64秒

Video Prototyping Code Prototyping

http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/

17

雛形工具演化經驗

MS PowerPoint

18

MS Word + MS Visio

19

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

20

Adobe Dreamweaver/Photoshop

MS Visual Studio

Axure RP

21

22

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

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)

26

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

Cacoo(Free)

27

http://cacoo.com/

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

Axure RP (付費軟體)-1

• Axure RP 可以做什麼？ – 專案規劃，框線繪製，雛型設計，自動化文件 – 著重於「功能性設計」

• Axure RP 不可以做什麼？ – 視覺或圖像設計 – 繪圖軟體 – 系統開發環境

• Axure RP設計用途有何？ – 桌面應用程式 – 瀏覽器為主的應用程式或網站 – 行動應用程式或網站

28

Axure RP (付費軟體)-2

• Axure RP Pro 可做到的功能遠遠超乎您的需求…

– 多人共同編輯(Collaboration, Shared Projects for Teams)

– 客製化規格文件(Specifications)

– 進階互動功能(Interactions)

29

其他雛形設計輔助軟體

30

Xmind

心智圖(需求整理) FastStone Capture 螢幕畫面擷取編輯

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

http://www.xmind.net/

網站資訊架構

31

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

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

32

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

資料來源：http://www.louisrosenfeld.com/home/bloug_archive/images/010725b.gif

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

33

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

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

34

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

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

35

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

36

Q&A

課程大綱

• 前言 • Axure RP手把手實戰

– 練習範例介紹： HAPPY讀書交流平台 – Sitemap簡介 – 練習一-建立Sitemap – Masters簡介 – Page Properties簡介 – Widgets簡介 – 練習二-建立Wireframe – 進階Widgets使用 – 練習三-進階Widgets使用 – General Prototype(輸出雛型) – Specification(規格文件) – Publish to AxShare – Axure RP相關學習資源

37

38

需求訪談

練習範例-HAPPY知識交流平台(1)

• 需求訪談紀錄表 – 高階需求

• 訪談對象：老闆(Peter) • 訪談內容：

– 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等) – 希望可以知道學生有沒有在用功(誤!)

• 訪談對象：網站管理者(Carter) • 訪談內容：

– 要能夠讓管理者方便操作，並且可以線上編輯內容 – 要能夠線上讓一般網友進行會員申請，但需要進行審核作業(系上成員才可加入) – 一般網友僅能夠瀏覽，不能夠參與讀書會討論 – 要能夠及時將最新訊息發布在網站上讓成員知道 – 要能夠舉辦活動；並透過行事曆方式並提供查詢功能，快速了解活動 – 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚

的區分出進行中，已結束的資訊

• 訪談對象：學生(Jason) • 訪談內容：

– 希望可以線上報名參加讀書會或其他小組舉辦的活動 – 希望可以將每次聚會活動照片方便的發布在平台上 – 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到

39

練習範例-HAPPY知識交流平台(2)

• 需求訪談紀錄表(Highlight 關鍵字) – 高階需求

• 訪談對象：老闆(Peter) • 訪談內容：

– 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等) – 希望可以知道學生有沒有在用功(誤!)

• 訪談對象：網站管理者(Carter) • 訪談內容：

– 要能夠讓管理者方便操作，並且可以線上編輯內容 – 要能夠線上讓一般網友進行會員申請，但需要進行審核作業(系上成員才可加入) – 一般網友僅能夠瀏覽，不能夠參與讀書會討論 – 要能夠及時將最新訊息發布在網站上讓成員知道 – 要能夠舉辦活動；並透過行事曆方式並提供查詢功能，快速了解活動 – 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚

的區分出進行中，已結束的資訊

• 訪談對象：學生(Jason) • 訪談內容：

– 希望可以線上報名參加讀書會或其他小組舉辦的活動 – 希望可以將每次聚會活動照片方便的發布在平台上 – 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到

40

練習範例-HAPPY知識交流平台(3)

• 網站功能列表 – 最新消息 – 讀書會簡介

• 成立宗旨 • 加入會員(需審核)

– 活動行事曆 – 書籍與成員

• 進行中書籍 • 已結束書籍 • 心得分享

– 吃喝玩樂剪影 • 2012/09/20-《不為難自己

的練習》讀書聚會 • 2012/09/25-架站前的實作

花絮!!

– 線上報名 – 網站地圖

41

• 角色定義 – 網站管理者

– 網站全部管理功能 – …(略)

– 系上師生 – 瀏覽活動行事曆 – 參與書籍與成員的

討論 – 撰寫讀書心得 – 發表活動照片 – 線上報名活動

– 一般網友 – 瀏覽書籍與成員

42

B

E

C

D

最近開啟過的檔案清單

開啟新檔案

1.軟體不會自動更新，需手動 2.團隊中強烈建議使用相同版本 3.舊版本無法開啟新版本檔案(如v5無法開v6的版本)

A

官方線上支援與討論區連結

若希望下次不要顯示歡迎畫面，直接進入

編輯區請打勾

D

43

Sitemap

Widgets

Masters

Wireframe

Page Properties

Widgets

Properties

Dynamic

Panel

Manager

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

Menu Bar

Toolbar

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

Sitemap簡介

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

44

練習一、建立Sitemap(1)

• 步驟一：操作Sitemap相關功能

45

小技巧： • 滑鼠左鍵選擇頁面後可直接拖動頁

面，以調整頁面的層級和位置關係 • 頁面修改名稱方式可參照

Windows中文件重命名方式，左鍵單擊選中頁面後，再次單擊頁面可直接修改頁面名稱

• 如果頁面之間已經做了按鈕跳轉等操作，改變頁面的層級關係或重新命名頁面並不會影響已有的鏈結

練習一、建立Sitemap(2)

• 步驟二：並依據練習範例網站功能列表，建立Sitemap

• 步驟三：利用Generate Flow Diagram，建立網站地圖

– 先打開欲產生之頁面，再將滑鼠點選頂層頁面，再點選Generate Flow Diagram，並選擇”Standard”或”Right Hanging”

46

練習一、建立Sitemap(3)

• 建立完成後，即會於畫面中看到網站地圖，如下

47

小技巧： • 請先開啟「網站地圖」頁面，再針對希望產生的節點層次進行

產生。不一定要產生全部的地圖，要產生局部的地圖也是可行。

Masters簡介(1)

• 共用區塊(Masters)提供在設計過程中可以重複使用的Widget

• 概念說明圖：

48

Masters簡介(2)

• 口訣：一步通到底

• 好處：

– 省時，減少重工避免錯誤

– 維持一致性

– 減少檔案大

49

Page Properties簡介

50

Page Notes： 輸入頁面的註解

Page Interactions： 設定該面的互動效果

Page Formatting： 設定該面的格式

應用如： • 客戶的需求描述 • 客戶的回饋 • 設計上需注意處 • 給不同角色看的UX

資訊

應用如： • 換頁的時候，要延

後幾秒 • 頁面讀入後，顯示

什麼資訊

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

案

Widgets簡介(1)

• Widgets可提供繪製雛形時得相關組件，除使用內建外也可透過匯入方式外掛更多的組件 – Wireframe：常用的使

用者介面組件 – Flow：用來繪製流程圖

的組件 – 如要更換不同類型，可

點選左上角下拉選擇 – 如果組件過多，同樣也

可透過左上角Search功能快速找到

51

Widgets簡介(2)

• 試試看這些常用的Widgets：

52

Flow Wireframe

使用者 處理程序

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

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

NOTE

練習二、建立Wireframe(1)

• 步驟一：依據練習範例需求定義功能描述

– 依據不同使用者需求，將相關需求描述建立於對應頁面中的Page Notes

53

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

練習二、建立Wireframe(2)

• 步驟二：建立頁面引導線(Guides)

54

• 使用960 Grid:12 Column建立引導線(Guides)

• 將Guides鎖定與隱藏(需要的話)

960 Grid = 習字簿

55

圖片來源：http://i1138.photobucket.com/albums/n535/bforboy1/P1030232-2.jpg?t=1312204898

圖片來源：http://www.bo368.com/uploadfile/2011090210013265_s.jpg

圖片來源： http://pic.pimg.tw/constancec1/1315268733-3544631392.jpg?v=1315268734

練習二、建立Wireframe(3)

• 步驟三：使用Wireframe建立頁面與Masters

56

• 建立頁面資訊架構(頁首/頁尾/主導覽列/次導覽列/內容區/麵包屑)

• 建立Masters

A

B

C 小技巧： Ctrl+A：全選 後 選擇 Convert To Master

小技巧： 使用 Rectangle

練習二、建立Wireframe(4)

• 步驟四：將建立起來的Masters套用至全部頁面 – 先將內容版型中的文

字描述刪除(目前所在位置保留)

– 點選內容版型按右鍵，選擇Add To Pages…

– 勾選希望加入Master的頁面，按下OK後，及完成套用

57

B

A

C

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

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

練習二、建立Wireframe(5)

58

小技巧

A

B

C

D

E

NOTE

練習二、建立Wireframe(6)

• 步驟六：使用其他Widgets於Master建立頁面組件

– 點選快速鍵F5(General Prototype)，產生雛形

59

小技巧： 圖片插入時可使用Ctrl+滑鼠滾輪放大縮小比例進行微調

進階Widgets使用(1)

• 除了自己做組件(Widgets)外，用他人做好的可以大幅度加快雛形的製作速度

• 雛形的設計精神：快!快!!快!!! 不要拘泥於技術 – http://www.axure.com/download-widget-libraries

60

進階Widgets使用(2) • 如何下載與安裝？

– 至以上範例網頁中下載並解壓縮，.rplib 為Widgets的格式

– 放到C:\Users\電腦名稱\Documents\My Axure RP Libraries

– 若已開啟AxureRP，請重新開啟，及會出現於Widgets的下拉選單中

61

練習三、進階Widgets使用(1)

• 步驟一：依據練習範例需求定義，使用外部Widgets建立雛形 – Slider_Library_by_truem

atter.rplib – CalendarPicker_Y!DSK.r

plib – WidgetLib_v1.rplib – Icons from Axure

(32x32).rplib

• 請各位可以依照範例檔進行試做

62

練習三、進階Widgets使用(2)

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

63

練習三、進階Widgets使用(3)

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

64

General Prototype(輸出雛型)

• 將製作的雛型產生成HTML格式，方便提供給其他人觀看

• 須留意選擇顯示的瀏覽器

• 若希望在雛形中看到LOGO，可將LOGO一併設定於雛形設定中；另LOGO的尺寸要先調好，不然會不成比例

• 建議： – 只更新現在開啟的頁面

到網站雛形

65

Specification(規格文件)

• 利用Specification功能，輸出Microsoft Word格式的需求書或功能性規格文件(Specification)

• 建議： – 路徑常常讓人找不到，

需特別依據該路徑找尋對應文件

– 只要把必要的項目輸出到規格文件中

– 預設規格文件標題改成中文 66

Publish to AxShare(1)

67

Publish to AxShare(2)

• 使用前請務必先註冊 • 發佈到網路上供其他人線

上進行觀看與評論，減少自行架站或傳送給其他使用者不知如何觀看的問題

• 若不希望公開，請務必設定密碼

• 上傳完成後，會提供一個專屬連結，可直接於瀏覽器中輸入該連結即可瀏覽

• 若希望於網站上管理其他雛形，請進入以下連結：http://share.axure.com/

68

A

B

C

Publish to AxShare(3)

69

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

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

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

本次成果!!!

70

http://share.axure.com/K36VWO 密碼：2012

其他補充 • 操作小技巧

– 重疊的物件，按住上層物件久一點，放掉後可選取下層物件 – 以方向鍵移動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\電腦名稱\AppData\Local\Temp\Axure-6-5-Pro

• 在Google Chrome無法看到作品，怎麼辦？

71

72

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

Axure RP相關學習資源(1)-社群

• Axure RP中文社區，網址：http://www.axure.org/

73

Axure RP相關學習資源(2)-社群

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

74

請記得加入 社團!!!

Axure RP相關學習資源(3)-課程

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

75

Axure RP相關學習資源(4)

• (實體課程)悠識數位，網址：http://userxper.com/

• 課程班別：

– [台南] Axure RP原型設計及網站專案需求分析 (10月26日週五)

– http://userxper.com/blog/archives/5794

76

Axure RP相關學習資源(5)-書籍

• (實體\書籍)Axure RP 6 Prototyping Essentials，網址：http://www.packtpub.com/axure-rp-6-prototyping-essentials-for-compelling-interactive/book

• 目前華語世界尚未推出Axure RP的書籍

• 發行：2012年1月

77

Axure RP相關學習資源(5)-書籍

• 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進行多人開發與版本控管

78

Axure RP相關學習資源(5)-書籍

• (電子書籍)Axure for Mobile，網址： http://www.axureformobile.com/2012/09/the-axure-for-mobile-ebook-is-out/

• 目錄： http://bit.ly/QLh1rq

• 試讀： http://www.amazon.com/gp/reader/B009F12FGM/ref=sib_dp_kd#reader-link

• 發行：2012/9/22

79

Axure RP相關學習資源(6)-網站

• 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

80

Axure RP相關學習資源(7) -網站

• 2tan.net-鳳凰涅磐，網址：http://www.2tan.net/default.asp?tag=Axure+rp&distype=list

• IT民工 or IT精英，網址：http://www.itfarmer.com.cn/?cat=20

• Axure for Mobile，網址： http://www.axureformobile.com/

• AxureWorld，網址： http://www.axureworld.org/

81

82

聯絡資料

• 基本資料 – 楊梭逸 – [email protected] – 0952-641875

• 個人Facebook – https://www.facebook.com/souyiyang

• 個人網絡名片 – http://about.me/bhm

• 個人部落格 – http://www.bhm.idv.tw/blog/

83

84

Q&A

85

圖片來源：http://www.facebook.com/photo.php?fbid=4469474304636&set=o.193650057338848&type=1&relevant_count=1&ref=nf