2012年9月27日於高雄和春技術學院資工系，所進行的3小時Axure RP基礎課程。 課程範例成果檔展示：http://share.axure.com/K36VWO 課程範例展示密碼：2012 課程範例RP原始檔下載：https://dl.dropbox.com/u/1142481/AxureRP/CSIE.FOTECH-20120927-Axure_RP_Sample.rar

2. 課程大綱
前言與概念 Axure RP手把手實戰
(09:00~09:45) (09:55~12:00)
• 使用者經驗設計流程簡介 • 練習範例介紹
• Sitemap簡介
• 雛型(Prototyping)設計概 • 練習一-建立Sitemap
念 • Masters簡介
• Page Properties簡介
• 雛型(Prototyping)設計工
• Widgets簡介
具 • 練習二-建立Wireframe
• 網站資訊架構 • 進階Widgets使用
(Information • 練習三-進階Widgets使用
• General Prototype(輸出雛型)
Architecture for WWW)
• Specification(規格文件)
概念 • Publish to AxShare
• Axure RP相關學習資源
2

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

4. Who am I ?
• 楊梭逸 Carter Yang
• 工作經歷：
– 2012/01~迄今 ， 經理
– 2010/06~2011/12，視覺設計組(兼品管部)經理
– 2006/04~2010/12，專案經理
• 專注領域：
– 專案管理，網頁與多媒體設計，網站行銷與企劃，
使用者體驗與互動，Drupal CMS，CMMI，品質
管理
4

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

6. 使用者經驗設計流程
研究
需求
驗證
N
設計 構思
http://www.usablebrands.ch/usability_.html
6

7. Prototype
7
雛形

8. 模型屋
Prototype(雛形)
可供討論的模型或樣品
樣品屋 透視圖
圖片來源：http://house.hinet.net/img/xml_13/7889323/7889323-10.jpg 圖片來源： http://homepage18.seed.net.tw/cgi/file_view.pl/TH.CJ0yww
8

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

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

11. 設計流程中，二者都具有意義
低擬真 高擬真
Prototype
(Sketch手繪草稿)
= Prototype
實際設計產品時，
大家都希望看到更真實的設計
低擬真 高擬真
Prototype
(Sketch手繪草稿) < Prototype
11

12. 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
13

14. Storyboard prototyping
混搭mix
Paper – Digital prototyping
http://www.youtube.com/watch?v=GrV2SZuRPv0
14

15. Blank model prototyping Wizard of Oz prototyping
http://www.youtube.com/watch?v=_aoo_N-7AYk
15

16. 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. 雛形工具演化經驗
17

18. MS PowerPoint
18

19. MS Word + MS Visio
19

20. HTML/PS(直接做網頁或圖)
Adobe Dreamweaver/Photoshop
MS Visual Studio
20

21. Axure RP
21

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

23. 工具
常用雛形工具簡介
23

24. 廣義雛型工具 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

25. 廣義雛型工具 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

26. Balsamiq Mockups(Free)
http://www.balsamiq.com/products/mockups
26

27. Cacoo(Free)
http://cacoo.com/
更多簡介：http://playpcesor.blogspot.com/2011/04/cacoo.html
27

28. Axure RP (付費軟體)-1
• Axure RP 可以做什麼？
– 專案規劃，框線繪製，雛型設計，自動化文件
– 著重於「功能性設計」
• Axure RP 不可以做什麼？
– 視覺或圖像設計
– 繪圖軟體
– 系統開發環境
• Axure RP設計用途有何？
– 桌面應用程式
– 瀏覽器為主的應用程式或網站
– 行動應用程式或網站
28

29. 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/
30

31. 網站資訊架構
資料來源：http://www.inspiredm.com/wp-content/uploads/2011/10/informationarchitecture.jpg
31

32. 網站資訊架構(IA for WWW)概念(1)
資料來源：http://www.louisrosenfeld.com/home/bloug_archive/images/010725b.gif
資料來源：布丁布丁吃什麼？，http://pulipuli.blogspot.com/2010/03/blog-post.html
32

33. 網站資訊架構(IA for WWW)概念(2)
資料來源：布丁布丁吃什麼？，http://pulipuli.blogspot.com/2010/03/blog-post.html
33

34. 網站資訊架構(IA for WWW)概念(3)
資料來源：布丁布丁吃什麼？，http://pulipuli.blogspot.com/2010/03/blog-post.html
34

35. 網站資訊架構(IA for WWW)概念(4)
資料來源：布丁布丁吃什麼？，http://pulipuli.blogspot.com/2010/03/blog-post.html
35

36. Q&A
36

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

38. 需求訪談
38

39. 練習範例-HAPPY知識交流平台(1)
• 需求訪談紀錄表
– 高階需求
• 訪談對象：老闆(Peter)
• 訪談內容：
– 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等)
– 希望可以知道學生有沒有在用功(誤!)
• 訪談對象：網站管理者(Carter)
• 訪談內容：
– 要能夠讓管理者方便操作，並且可以線上編輯內容
– 要能夠線上讓一般網友進行會員申請，但需要進行審核作業(系上成員才可加入)
– 一般網友僅能夠瀏覽，不能夠參與讀書會討論
– 要能夠及時將最新訊息發布在網站上讓成員知道
– 要能夠舉辦活動；並透過行事曆方式並提供查詢功能，快速了解活動
– 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚
的區分出進行中，已結束的資訊
• 訪談對象：學生(Jason)
• 訪談內容：
– 希望可以線上報名參加讀書會或其他小組舉辦的活動
– 希望可以將每次聚會活動照片方便的發布在平台上
– 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到
39

40. 練習範例-HAPPY知識交流平台(2)
• 需求訪談紀錄表(Highlight 關鍵字)
– 高階需求
• 訪談對象：老闆(Peter)
• 訪談內容：
– 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等)
– 希望可以知道學生有沒有在用功(誤!)
• 訪談對象：網站管理者(Carter)
• 訪談內容：
– 要能夠讓管理者方便操作，並且可以線上編輯內容
– 要能夠線上讓一般網友進行會員申請，但需要進行審核作業(系上成員才可加入)
– 一般網友僅能夠瀏覽，不能夠參與讀書會討論
– 要能夠及時將最新訊息發布在網站上讓成員知道
– 要能夠舉辦活動；並透過行事曆方式並提供查詢功能，快速了解活動
– 要能夠將讀書會閱讀的書籍資訊，與讀書會小組成員發布於網站上；希望能夠清楚
的區分出進行中，已結束的資訊
• 訪談對象：學生(Jason)
• 訪談內容：
– 希望可以線上報名參加讀書會或其他小組舉辦的活動
– 希望可以將每次聚會活動照片方便的發布在平台上
– 我喜歡寫讀後心得，希望可以提供發布的方式讓大家看到
40

41. 練習範例-HAPPY知識交流平台(3)
• 網站功能列表 • 角色定義
– 最新消息 – 網站管理者
– 讀書會簡介
• 成立宗旨 – 網站全部管理功能
• 加入會員(需審核) – …(略)
– 活動行事曆 – 系上師生
– 書籍與成員
• 進行中書籍
– 瀏覽活動行事曆
• 已結束書籍 – 參與書籍與成員的
• 心得分享 討論
– 吃喝玩樂剪影 – 撰寫讀書心得
• 2012/09/20-《不為難自己
的練習》讀書聚會 – 發表活動照片
• 2012/09/25-架站前的實作
花絮!!
– 線上報名活動
– 線上報名 – 一般網友
– 網站地圖 – 瀏覽書籍與成員
41

42. 官方線上支援
與討論區連結 最近開啟過
的檔案清單
開啟新檔案
D
B
A
D
C
E
1.軟體不會自動更新，需手動
2.團隊中強烈建議使用相同版
若希望下次不要顯示 本
歡迎畫面，直接進入 3.舊版本無法開啟新版本檔案
編輯區請打勾 (如v5無法開v6的版本)
42

43. (點選後可隱藏左側) (點選後可最大化或最小化) (點選後可隱藏右側)
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
43

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

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

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

47. 練習一、建立Sitemap(3)
• 建立完成後，即會於畫面中看到網站地圖，
如下
小技巧：
• 請先開啟「網站地圖」頁面，再針對希望產生的節點層次進行
產生。不一定要產生全部的地圖，要產生局部的地圖也是可行。
47

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

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

50. Page Properties簡介
應用如：
• 客戶的需求描述
• 客戶的回饋
Page Notes： • 設計上需注意處
輸入頁面的註解 • 給不同角色看的UX
資訊
應用如：
• 換頁的時候，要延
後幾秒
• 頁面讀入後，顯示
Page Interactions： 什麼資訊
設定該面的互動效果
應用如：
• 呈現手繪的效果
• 頁面至中(預設靠左)
Page Formatting： • 頁面背景顏色或圖
案
設定該面的格式
50

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

52. Widgets簡介(2)
• 試試看這些常用的Widgets：
Wireframe Flow
使用者 處理程序
端點(開始
決策點
或結束)
備註：流程圖畫法有一定規則，需近
NOTE
一步了解請參考以下關鍵字：Flow
Chart，UML，XP，RUP，AUP，
EUP
52

53. 練習二、建立Wireframe(1)
• 步驟一：依據練習範例需求定義功能描述
– 依據不同使用者需求，將相關需求描述建立於
對應頁面中的Page Notes
小技巧：
除輸入文字外，可調整字形，粗體，斜體，底線，與顏色
53

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

55. 960 Grid = 習字簿
圖片來源： 圖片來源：
圖片來源： http://i1138.photobucket.com/albums/n535/bforboy1/P1030232-
http://www.bo368.com/uploadfile/2011090210013265_s.jpg http://pic.pimg.tw/constancec1/1315268733-
2.jpg?t=1312204898 3544631392.jpg?v=1315268734
55

56. 練習二、建立Wireframe(3)
• 步驟三：使用Wireframe建立頁面與Masters
• 建立頁面資訊架構(頁首/頁尾 • 建立Masters
/主導覽列/次導覽列/內容區/
麵包屑)
B
A 小技巧： C
小技巧： Ctrl+A：全選 後 選擇
使用 Rectangle Convert To Master
56

57. 練習二、建立Wireframe(4)
• 步驟四：將建立起來
的Masters套用至全 C
部頁面
– 先將內容版型中的文 B
字描述刪除(目前所在
位置保留)
A
– 點選內容版型按右鍵，
選擇Add To Pages…
– 勾選希望加入Master
的頁面，按下OK後，
及完成套用
57

58. 練習二、建立Wireframe(5)
• 步驟五：依據練習範例需求於
Master建立選單
– 使用Menu(Horizontal) 小技巧
– 建立第一層選單，再建立第二層選單
A C
E
B
D
– 使用Qucik Link…快速建立頁面連結
– 選擇對應連結頁面並重複動作
– 設定Rollover/Selected Style
NOTE
Table, Menu (Vertical/Horizontal) Widgets
比較耗效能
58

59. 練習二、建立Wireframe(6)
• 步驟六：使用其他Widgets於Master建立
頁面組件
– 點選快速鍵F5(General Prototype)，產生雛形
小技巧：
圖片插入時可使用
Ctrl+滑鼠滾輪放大縮
小比例進行微調
59

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

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

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

63. 練習三、進階Widgets使用(2)
• 步驟二：依據練習範例需求定義，使用內
建Widgets建立完整雛形
63

64. 練習三、進階Widgets使用(3)
• 步驟三：完成以上步驟建置調整，完成雛
形
– 點選快速鍵F5(General Prototype)，產生雛形檢視
64

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

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

67. Publish to AxShare(1)
67

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

69. Publish to AxShare(3)
小技巧：
可點選左上角的長方形方格，可將
左側縮起
Page Notes ：
點選Page Notes，可看到之前於頁
面上輸入的註解
Discuss：
可透過Discuss讓客戶或其他使用者，
直接於該頁面上進行留言或審查
69

70. 本次成果!!!
http://share.axure.com/K36VWO
密碼：2012
70

71. 其他補充
• 操作小技巧
– 重疊的物件，按住上層物件久一點，放掉後可選取下層物件
– 以方向鍵移動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無法看到作品，怎麼辦？
71

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

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

74. Axure RP相關學習資源(2)-社群
• Axure RP User's Club，網址：
https://www.facebook.com/groups/axure.club.ux/
請記得
加入
社團!!!
74

75. Axure RP相關學習資源(3)-課程
• 悠識數位-Axure RP線上課程，網址：
http://userxper.com/axure_tutorial
75

76. Axure RP相關學習資源(4)
• (實體課程)悠識數位，
網址：
http://userxper.com/
• 課程班別：
– [台南] Axure RP原型設
計及網站專案需求分析
(10月26日週五)
– http://userxper.com/b
log/archives/5794
76

77. Axure RP相關學習資源(5)-書籍
• (實體書籍)Axure RP 6
Prototyping Essentials，網址：
http://www.packtpub.com/ax
ure-rp-6-prototyping-
essentials-for-compelling-
interactive/book
• 目前華語世界尚未推出
Axure RP的書籍
• 發行：2012年1月
77

78. 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

79. Axure RP相關學習資源(5)-書籍
• (電子書籍)Axure for Mobile，網址：
http://www.axureformobile.com/2
012/09/the-axure-for-mobile-
ebook-is-out/
• 目錄：
http://bit.ly/QLh1rq
• 試讀：
http://www.amazon.com/gp/reade
r/B009F12FGM/ref=sib_dp_kd#rea
der-link
• 發行：2012/9/22
79

80. 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

81. Axure RP相關學習資源(7) -網站
• 2tan.net-鳳凰涅磐，網址：
http://www.2tan.net/default.asp?tag=Axure+rp&dist
ype=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. 82

83. 聯絡資料
• 基本資料
– 楊梭逸
– bhm@mail.linkchain.tw
– 0952-641875
• 個人Facebook
– https://www.facebook.com/souyiyang
• 個人網絡名片
– http://about.me/bhm
• 個人部落格
– http://www.bhm.idv.tw/blog/
83

84. Q&A
84

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