Más contenido relacionado Similar a 高雄和春資工系-Axure RP基礎課程 (20) 高雄和春資工系-Axure RP基礎課程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
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
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
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
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
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
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
37. 課程大綱
• 前言
• Axure RP手把手實戰
– 練習範例介紹: HAPPY讀書交流平台
– Sitemap簡介
– 練習一-建立Sitemap
– Masters簡介
– Page Properties簡介
– Widgets簡介
– 練習二-建立Wireframe
– 進階Widgets使用
– 練習三-進階Widgets使用
– General Prototype(輸出雛型)
– Specification(規格文件)
– Publish to AxShare
– Axure RP相關學習資源
37
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
45. 練習一、建立Sitemap(1)
• 步驟一:操作Sitemap相關功能
小技巧:
• 滑鼠左鍵選擇頁面後可直接拖動頁
面,以調整頁面的層級和位置關係
• 頁面修改名稱方式可參照
Windows中文件重命名方式,左
鍵單擊選中頁面後,再次單擊頁面
可直接修改頁面名稱
• 如果頁面之間已經做了按鈕跳轉等
操作,改變頁面的層級關係或重新
命名頁面並不會影響已有的鏈結
45
46. 練習一、建立Sitemap(2)
• 步驟二:並依據練習範例網
站功能列表,建立Sitemap
• 步驟三:利用Generate
Flow Diagram,建立網站
地圖
– 先打開欲產生之頁面,再將
滑鼠點選頂層頁面,再點選
Generate Flow Diagram,
並選擇”Standard”
或”Right Hanging”
46
50. Page Properties簡介
應用如:
• 客戶的需求描述
• 客戶的回饋
Page Notes: • 設計上需注意處
輸入頁面的註解 • 給不同角色看的UX
資訊
應用如:
• 換頁的時候,要延
後幾秒
• 頁面讀入後,顯示
Page Interactions: 什麼資訊
設定該面的互動效果
應用如:
• 呈現手繪的效果
• 頁面至中(預設靠左)
Page Formatting: • 頁面背景顏色或圖
案
設定該面的格式
50
51. Widgets簡介(1)
• Widgets可提供繪製雛
形時得相關組件,除使
用內建外也可透過匯入
方式外掛更多的組件
– Wireframe:常用的使
用者介面組件
– Flow:用來繪製流程圖
的組件
– 如要更換不同類型,可
點選左上角下拉選擇
– 如果組件過多,同樣也
可透過左上角Search功
能快速找到
51
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
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
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
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
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
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
83. 聯絡資料
• 基本資料
– 楊梭逸
– bhm@mail.linkchain.tw
– 0952-641875
• 個人Facebook
– https://www.facebook.com/souyiyang
• 個人網絡名片
– http://about.me/bhm
• 個人部落格
– http://www.bhm.idv.tw/blog/
83