1. 唯一上課時允許facebook的課程？ XD
• Axure RP User's Club
http://on.fb.me/axure-user-club

2. 關於悠識, 關於 Richard
UserXper Web User Experience – Software / Training / Planning -2-

3. 網站/Mobile App規劃 (悠識服務1)
• 制定策略 strategy plan
• 規劃藍圖 wireframe
• 設計模型 prototype
• 使用者測試 user testing
• 撰寫規格 specification

4. 快速原型軟體-Axure RP (悠識服務2)
一半以上財星百大企業,
超過3萬個專業團隊選擇Axure RP

5. Axure RP軟體客戶
• 台灣
– 網路：Yahoo奇摩, 博客來, 巴哈姆特, 104人力銀行, 地圖
日記
– 軟體：趨勢科技, 友訊D-Link, 凌網科技, 華創車電, 華寶通
訊,圓剛科技, 凌誠科技, 神達, 台達電, 致伸科技
– 網路行銷: 達彼思廣告, 知世, 安捷達, 米蘭, 網路基因, 富
爾特, 不來梅, 奇禾, 聯網, 生命樹, 摩奇, 多奇, 喬立達, 阿物
國際, 恆基, 網路行動, 久大資訊, 樂倍達, …
– 其他：玉山銀行, 工研院, NII
• 大陸
– 微軟亞洲研究院, 百度, 中達電, iResearch, 上海征途, 法國
電信
– 騰訊, 網易, 阿里巴巴, 淘寶網, 當當網, 支付寶, Mapbar,
金蝶軟件, …

6. 訓練課程 (悠識服務3)
• 企業內訓或公開課程
• 包括：
– 網站企劃工作流程
– Mobile Application 設計與規劃實務
– User-Centered Design
– 使用者研究
– 易用性研究
– 網站建置新手指南
– 網站結合Facebook應用
– 網站流量分析及訪客行為解讀
– 簡報專業訓練
– 網路新創模式觀察與分析
– 資訊架構與介面模式
等等…

7. 使用者研究 (悠識服務4)
• 行為觀察及分析
– 流量分析工具 Traffic analytic tool (Google Analytics Report)
– 可用性測試 Usability test
– 點擊熱圖 Click Heatmap (WaClick 產品)
– 眼動分析 Eye tracking
• 認知與理解
– 卡片分類 Card sorting
• 機會探索挖掘 (目標使用者研究，並非網站現況分析)
– 深度訪談 User Interview
– 脈絡訪查 Contextual Inquiry
– 焦點團體 Focus Group

8. 點擊熱圖追蹤服務 (WaClick)

9. Usability Test 可用性測試

10. 卡片分類法 – 探索使用者的認知

11. 深度訪談 人物誌 (機會挖掘)

12. 蔡明哲 Richard Tsai
• 悠識數位 首席資訊架構師 Chief Information Architect
– 專長
• 網站企劃，網路行銷, 專案管理, 系統分析, 資料庫行銷
– 過去
• 企劃顧問，專案總監，客服總監，技術總監，行銷企畫經理，知識研究部經
理，軟體工程師，專案經理，產品經理，廣告AE..
– UiGathering協會監事 / IAI / UPA
– HPX founder
• 幫助客戶
– 找出網站設計或企劃的問題
– 提供網站Usability的建議
– 提供網站企劃及Prototype Design的服務
– 提供網站企劃的內功心法/秘笈/工具

13. 網站/App 企劃
學習架構
Prototype位於什麽階段?

14. 如何成為網站企劃高手？
資訊架構, 使用者經驗, 介面設計, 互動設計,
【1】基本功 使用者研究, 使用者測試,
品牌與視覺, 網路行銷, 資訊技術. …
HTML, Flash, Javascript, CSS,
【2】步驟與方法 Visualization, Copy(文案),
研究方法，調查方法，
專案管理, 工作流程, 溝通技巧, …
Axure RP,
MS Office, Mindmap,
【3】工具 Google Search, Google Analytics,
Sketch, Card Sorting,
Camtasia, Morae, FastStone, ZoomIt …

15. 企劃流程與工具

16. UserXper Web User Experience – Software / Training / Planning -16-

17. 紙/筆

18. Paper Wireframe

19. Concept ( by Mind Map)

20. Prototyping工具
• Diagram Tools (General Purpose)
– VISIO / PowerPoint / Word / Excel
– Pencil Project (plug-in Firefox)
– OmniGraffle (Mac OS X, Mac版的Visio)
• Graphics Tool
– Photoshop / Illustrator / Firework / FlashMX

21. 模型屋
Prototype:
可供討論的模型或樣品
www.sexinsex.net/luntan/thread-1704273-1-1.html
樣品屋 透視圖
http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html
http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267

22. Low Fidelity
• 不像最終設計成品
• 好處
– 很快….有東西可以討論
– 可以專注在High-level的設計觀念
– 探討主要的架構與功能
– 更容易發散思考不受拘束

23. High Fidelity
• 接近最終設計成品
• 好處
– 有更具體的東西可以討論
– 專注在更多的設計細節
– 驗證各種角度的使用者經驗
– 開發工作的工程師更容易理解
– 客戶(老闆)更容易理解

24. 設計流程中，二者都具有意義
Low Fidelity High Fidelity
Prototype
(Sketch手繪草稿) = Prototype
UserXper Web User Experience – Software / Training / Planning -24-

25. 實際設計產品時，
大家都希望看到更真實的設計
Low Fidelity High Fidelity
Prototype < Prototype
UserXper Web User Experience – Software / Training / Planning -25-

26. 廣義的Prototyping 形式
• Wireframe prototyping
• Storyboard prototyping
• Paper prototyping
• Digital prototyping
• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping
• Coded prototyping (including scripting
and HTML)

27. Wireframe prototyping Paper prototyping
http://www.youtube.com/watch?v=GrV2SZuRPv0
http://www.youtube.com/watch?v=ykJ60H4Qkvg

28. Paper prototyping
Storyboard prototyping
Digital prototyping

29. Blank model prototyping
Wizard of Oz prototyping

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

31. Axure RP 最佳網站原型設計工具
網站企劃工具六合一
網站架構/示意圖/流程圖/原型設計/互動設計/規格文件

32. UserXper Web User Experience – Software / Training / Planning -32-

33. 案例
• Website
• Web Application
• Desktop Application
• Mobile Application

34. Axure RP - Part 1 基本操作
UserXper Web User Experience – Software / Training / Planning -34-

35. Axure RP Pro入門
六個步驟
• 定義 資訊架構(sitemap)
• 使用widget
• 畫wireframe
• 建立link
• 加上註解
• 自訂 master (template)
最後產生(generate)
– HTML prototype
– 規格文件

36. 4.建立link
3.畫wireframe
1.定義
sitemap
1 4
3
2,內建 5
widget
5.Widget
/ Page的
2 註解說明
6.自訂
5
共用template
6

37. 1. 定義資訊架構 (sitemap)

38. 定義資訊架構, 繪製page flow
• 把已經想好架構, 輸入到 [sitemap窗格]
• 自動產生 Page Flow
• Page Flow 不等於 UI Flow

39. 2. 使用 default widget
widget for Wireframe widget for Flow

40. 3. 畫wireframe

41. 輸出Prototype/Spec的預設folder
• 不特別指定輸出的目錄, 則放在 “我的文件” 目錄
– My Axure RP Prototypes : 放Prototype (html檔案)
– My Axure RP Reports : 放指定輸出的report檔( xls檔案)
– My Axure RP Specifications : 放指定輸出的規格文件 (word檔案)

42. 4. 建立link (OnClick Event)
2
1

43. 4. 建立link (OnClick Event)
3

44. 4. 建立link (OnClick Event) 4.建立
link

45. 5. 加上註解 (Annotation / Page Notes)
5
5 5.Widget
/ Page的
註解說明

46. 6. 自訂 master (共用區塊template)
6.自訂共用區
域template
6

47. 自訂 master 的屬性 (Behavior)
• 放在背景 (共用) Background
• 放在前景 (共用) Normal
• 前景, 且不共用 Custom Widget

48. Page屬性
•Page屬性：預設頁面樣式或製作自定樣式
•頁面對齊：將網頁置左或置中對齊 (只在HTML上才看得到效果)>根據最左
邊和最右邊的物件置中。
•背景顏色：給頁面背景顏色(不是在背景上放個大矩形！)
•背景圖片：匯入圖片當背景，可以設定重複延展。
•重複：將背景圖片水平、垂直或水平垂直重複延展。

49. 素描效果(Sketch Effects)
• 更多樂趣
• 任何階段都能使用手繪風格
• 溝通時更可聚焦在結構、互動和功能上
• Sketchiness(手繪程度)
– 顏色： 整個頁面變成灰階
– 字體：可使用手寫字體
– 線寬：物件框線的寬度

50. Page說明格式化

51. 規格文件功能
UserXper Web User Experience – Software / Training / Planning -51-

52. Generate Spec 目錄
• PC: 全選後 按F9
• Mac
Command、Shift、Option、u

53. 規格文件的版型
• 一欄或兩欄
• Column Break---
-＂分隔兩欄
• 指定內容排列
• Screenshot可設
定隱藏背景、素描
風格、改變大小

54. Widget Libraries
UserXper Web User Experience – Software / Training / Planning -54-

55. 使用Widget Libraries (下載安裝)
http://axure.com > How-To > Widget Libraries

56. 觀念/技巧補充
• Axure RP檔案管理及回復版本
• 與其他Office文件的圖形交換
• 善用Hot Key (跟Office軟體Hot Key相同)
– CTRL-A : 全選
– CTRL-C : Copy
– CTRL-X : Cut
– CTRL-V : Paste
• 只要更新一頁Re-generate one page (CTRL-F5)

57. Axure RP - Part 2 互動設計
UserXper Web User Experience – Software / Training / Planning -57-

58. Axure RP - Part 2 互動設計
1. Axure RP 互動設計概念
2. 各種互動表現的特性與動作描述
3. Dynamic Panel的狀態(State)控制
4. Page Level的互動設計
5. TabView(頁籤)的效果設計及其他

59. 觸發事件(Event)、狀況 (Case)、動作型態(Action)
• 當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一個
事件(Event)。
• 每一個觸發事件都可以有一或多個狀況(Case)
一個按鈕的OnClick 觸發事件可以有兩個狀況：
– Case 1 link到某頁
– Case2 則link至另一頁 。
• 而每一個狀況 (Case)又可以執行一或多個動作型態(Action)
• 動作型態(Action)，必須進一步定義動作描述(Action
Description)。
– 比如「Open Link in Current Window」的Action，就是Hyperlink的表
現，需要定義link到哪一頁。

60. 基本的 Axure RP 觸發事件 Event
• 以滑鼠點擊 - OnClick
• 滑鼠的指標移動到物件之上 - OnMouseEnter
• 滑鼠的指標移動出物件之外 - OnMouseOut
• 滑鼠的指標進入文字輸入狀態 - OnFocus
• 滑鼠的指標離開文字輸入狀態 - OnLostFocus
• 敲鍵盤 - OnKeyUp
• 瀏覽器下載畫面 - OnPageLoad

61. 進階的 Axure RP 觸發事件 Event
(多數是僅能用於Dynamic Panel的操控)

62. 1 2
3

63. 狀況 (Case)
邏輯判斷(Condition)
指定動作
定義動作
所有可用的動作

64. Dynamic Panel (Axure 互動設計的魔法棒)
• 透明的容器
• 內含很多個插槽
–Dynamic Panel – Panel 1
•State 1 (預設一個插槽)

65. Dynamic Panel (Axure 互動設計的魔法棒)
• State (of Dynamic Panel)
– 小頁面
– Panel中的State至少一個 (或一個以上)

66. 顯示/關閉簡易說明視窗
• 效果呈現
– Tap (onClick) Show Panel
– Tap (onClick) Hide Panel
• 練習 LightBox設計

67. 顯示/關閉簡易說明視窗
Event Case Action
On Click Case 1 Toggle - Show Panel
On Click Case 1 Toggle －Hide Panel

68. 相同動作觸發兩個不同的狀況
• 呈現效果：
– 登入成功與失敗各自有不同的顯示方式
• 二種作法：
1. 直接置入兩個Case 簡單
2. 條件式判斷 稍難

69. 設計登入按鍵的互動 (OnClick)
Event Case Action
等待0.5秒
Wait 500 mini seconds
按下登入按鈕 +
Case 1登入成功
OnClick 跳回到首頁
Open Home Page
In Current Window
原處顯示錯誤訊息
Case 2登入失敗
Show Error Panel

70. TabView State 1

71. TabView State 2

72. TabView State 3

73. 手機/平板電腦的拖放
UserXper Web User Experience – Software / Training / Planning -73-

74. 畫面的drag&drop
• View DP 限制視界 (可視範圍)
• Content DP 放置所有內容
• OnDrag觸發事件 (本身已含DragStart,DragDrop)
Content DP
View DP

75. Content DP的3個拖放觸發事件
• OnDragStart：發生在開始拖動時。
• OnDrag：當開始拖動面板時，即開始執行。
• OnDragDrop：發生在面板被放下時。

76. • 手機App 往下拖拉，放掉後自動彈回
– 當開始Drag時, DP跟隨移動,
– 當放掉時 (OnDragDrop), DP自動移動回原來位置 "to
x,y before drag"
• 動作選項：
– with drag：跟著游標移動
– with drag x：只有水平方向移動(x軸)。
– with drag y：只有垂直方向移動(y軸)。
– to x,y before drag：回到開始拖動之前的位置

77. 實際應用時，應解釋 HTML Prototype
1. 什麼是原型？
是模擬、偽裝、策劃用、或討論用的
2. 哪一種原型？
是可放在瀏覽器體驗的，但不是視覺設計或程式設計過的
3. 觀看原型的重點是什麼？
以及什麼不是觀看重點？
4. 這個Prototype 是用來表達什麼?
設計架構、資訊設計、導覽動線、操作介面、模仿功能
5. 不是用來表達以下項目：
– 表現視覺設計
– 討論顏色好不好看
– 表達最終的設計結果

78. Axure RP User's Club
• 問題請貼到這裡來：
http://on.fb.me/axure-user-club