Upload
-
View
141
Download
6
Embed Size (px)
DESCRIPTION
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
Citation preview
課程大綱 前言與概念
(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讓客戶或其他使用者,直接於該頁面上進行留言或審查
其他補充 • 操作小技巧
– 重疊的物件,按住上層物件久一點,放掉後可選取下層物件 – 以方向鍵移動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