課程大綱          前言與概念                      Axure RP手把手實戰        (09:00~09:45)                  (09:55~12:00)•   使用者經驗設計流程簡介 ...
本次基礎課程…• 使用版本:AxureRP Pro 6.5 (Ver. 6.5.0.3040)• 會提到的  –   基礎使用者經驗設計流程,雛型(Prototyping)設計與工具  –   網站資訊架構(IA for WWW)基礎概念  –...
Who am I ?• 楊梭逸 Carter Yang• 工作經歷:  – 2012/01~迄今     , 經理  – 2010/06~2011/12,視覺設計組(兼品管部)經理  – 2006/04~2010/12,專案經理• 專注領域: ...
課程大綱• 前言 – 使用者經驗設計流程簡介 – 雛型(Prototyping)設計概念 – 雛型(Prototyping)設計工具 – 網站資訊架構(Information Architecture for   WWW)概念• Axure R...
使用者經驗設計流程研究                                                     需求驗證                                                 N    ...
Prototype7     雛形
模型屋Prototype(雛形)可供討論的模型或樣品      樣品屋                                                              透視圖圖片來源:http://house.hine...
低擬真 VS.高擬真(1) Low Fidelity(低擬真)        High Fidelity(高擬真)• 不像最終設計成品               • 接近最終設計成品• 好處                     • 好處 ...
低擬真 VS.高擬真(2)Low Fidelity(低擬真)        High Fidelity(高擬真)                    10
設計流程中,二者都具有意義  低擬真                 高擬真Prototype(Sketch手繪草稿)               =    Prototype       實際設計產品時,     大家都希望看到更真實的設計 ...
Prototyping的方法•   Wireframe prototyping•   Paper prototyping•   Storyboard prototyping•   Digital prototyping•   Blank mod...
Wireframe prototyping                    Paper prototyping                             http://3.bp.blogspot.com/_tsuzO7Ymy...
Storyboard prototyping                                                  混搭mix                                             ...
Blank model prototyping         Wizard of Oz prototyping                               http://www.youtube.com/watch?v=_aoo...
Video Prototyping                                    Code Prototypinghttp://www.youtube.com/watch?v=BpWM0FNPZSs        htt...
雛形工具演化經驗   17
MS PowerPoint      18
MS Word + MS Visio        19
HTML/PS(直接做網頁或圖)Adobe Dreamweaver/Photoshop      MS Visual Studio                              20
Axure RP   21
MS PowerPoint   MS Word + MS Visio/Excel   HTML/PS   Axure RP                                 22
工具     常用雛形工具簡介23
廣義雛型工具 for Web/AP(1)• Diagram Tools (General Purpose)  –   MS Visio  –   MS PowerPoint  –   MS Word  –   MS Excel  –   Pen...
廣義雛型工具 for Web/AP(2)• Purpose-Built (For Software Application or Web)   –   Axure RP   –   iRise Studio   –   Prototype Co...
Balsamiq Mockups(Free)http://www.balsamiq.com/products/mockups                       26
Cacoo(Free)http://cacoo.com/更多簡介:http://playpcesor.blogspot.com/2011/04/cacoo.html                               27
Axure RP (付費軟體)-1• Axure RP 可以做什麼? – 專案規劃,框線繪製,雛型設計,自動化文件 – 著重於「功能性設計」• Axure RP 不可以做什麼? – 視覺或圖像設計 – 繪圖軟體 – 系統開發環境• Axure ...
Axure RP (付費軟體)-2• Axure RP Pro 可做到的功能遠遠超乎您的  需求… – 多人共同編輯(Collaboration, Shared Projects   for Teams) – 客製化規格文件(Specifica...
其他雛形設計輔助軟體  Xmind                          FastStone Capture心智圖(需求整理)                         螢幕畫面擷取編輯                    ...
網站資訊架構資料來源:http://www.inspiredm.com/wp-content/uploads/2011/10/informationarchitecture.jpg                                ...
網站資訊架構(IA for WWW)概念(1)                                 資料來源:http://www.louisrosenfeld.com/home/bloug_archive/images/01072...
網站資訊架構(IA for WWW)概念(2) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html                                 33
網站資訊架構(IA for WWW)概念(3) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html                                 34
網站資訊架構(IA for WWW)概念(4) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html                                 35
Q&A      36
課程大綱• 前言• Axure RP手把手實戰  –   練習範例介紹: HAPPY讀書交流平台  –   Sitemap簡介  –   練習一-建立Sitemap  –   Masters簡介  –   Page Properties簡介  ...
需求訪談 38
練習範例-HAPPY知識交流平台(1)• 需求訪談紀錄表 – 高階需求   • 訪談對象:老闆(Peter)   • 訪談內容:      – 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等)      – 希望可以知道學生有沒有...
練習範例-HAPPY知識交流平台(2)• 需求訪談紀錄表(Highlight 關鍵字)  – 高階需求    • 訪談對象:老闆(Peter)    • 訪談內容:       – 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等)...
練習範例-HAPPY知識交流平台(3)• 網站功能列表                      • 角色定義 – 最新消息                        – 網站管理者 – 讀書會簡介   • 成立宗旨            ...
官方線上支援與討論區連結          最近開啟過                的檔案清單                             開啟新檔案D                        B            AD...
(點選後可隱藏左側)        (點選後可最大化或最小化)     (點選後可隱藏右側)                            Menu Bar                             Toolbar   S...
Sitemap簡介• 新增(Add),刪除(Delete),複製(Duplicate),  重新命名(Rename),調整順序(Move),  搜尋(Search)                  44
練習一、建立Sitemap(1)• 步驟一:操作Sitemap相關功能  小技巧:  • 滑鼠左鍵選擇頁面後可直接拖動頁    面,以調整頁面的層級和位置關係  • 頁面修改名稱方式可參照    Windows中文件重命名方式,左    鍵單擊...
練習一、建立Sitemap(2)• 步驟二:並依據練習範例網  站功能列表,建立Sitemap• 步驟三:利用Generate  Flow Diagram,建立網站  地圖 – 先打開欲產生之頁面,再將   滑鼠點選頂層頁面,再點選   Gen...
練習一、建立Sitemap(3)• 建立完成後,即會於畫面中看到網站地圖,  如下   小技巧:   • 請先開啟「網站地圖」頁面,再針對希望產生的節點層次進行     產生。不一定要產生全部的地圖,要產生局部的地圖也是可行。         ...
Masters簡介(1)• 共用區塊(Masters)提供在設計過程中可以  重複使用的Widget• 概念說明圖:            48
Masters簡介(2)• 口訣:一步通到底• 好處: – 省時,減少重工避   免錯誤 – 維持一致性 – 減少檔案大              49
Page Properties簡介                            應用如:                            • 客戶的需求描述                            • 客戶的回饋 ...
Widgets簡介(1)• Widgets可提供繪製雛  形時得相關組件,除使  用內建外也可透過匯入  方式外掛更多的組件 – Wireframe:常用的使   用者介面組件 – Flow:用來繪製流程圖   的組件 – 如要更換不同類型,可...
Widgets簡介(2)• 試試看這些常用的Widgets:   Wireframe                   Flow                           使用者           處理程序            ...
練習二、建立Wireframe(1)• 步驟一:依據練習範例需求定義功能描述 – 依據不同使用者需求,將相關需求描述建立於   對應頁面中的Page Notes  小技巧:  除輸入文字外,可調整字形,粗體,斜體,底線,與顏色         ...
練習二、建立Wireframe(2)• 步驟二:建立頁面引導線(Guides)• 使用960 Grid:12 Column    • 將Guides鎖定與隱藏  建立引導線(Guides)             (需要的話)         ...
960 Grid = 習字簿                                                         圖片來源:                                              ...
練習二、建立Wireframe(3)• 步驟三:使用Wireframe建立頁面與Masters• 建立頁面資訊架構(頁首/頁尾          • 建立Masters  /主導覽列/次導覽列/內容區/  麵包屑)               ...
練習二、建立Wireframe(4)• 步驟四:將建立起來  的Masters套用至全             C  部頁面 – 先將內容版型中的文           B   字描述刪除(目前所在   位置保留)               ...
練習二、建立Wireframe(5) • 步驟五:依據練習範例需求於   Master建立選單       – 使用Menu(Horizontal)                  小技巧       – 建立第一層選單,再建立第二層選單  ...
練習二、建立Wireframe(6)• 步驟六:使用其他Widgets於Master建立  頁面組件 – 點選快速鍵F5(General Prototype),產生雛形  小技巧:  圖片插入時可使用  Ctrl+滑鼠滾輪放大縮  小比例進行微...
進階Widgets使用(1)• 除了自己做組件(Widgets)外,用他人做好  的可以大幅度加快雛形的製作速度• 雛形的設計精神:快!快!!快!!!           不要拘泥於技術 – http://www.axure.com/downl...
進階Widgets使用(2)• 如何下載與安裝? – 至以上範例網頁中下載並解   壓縮,.rplib   為Widgets的格式 – 放到C:Users電腦名稱   DocumentsMy Axure RP   Libraries – 若已開...
練習三、進階Widgets使用(1)• 步驟一:依據練習範例  需求定義,使用外部  Widgets建立雛形 – Slider_Library_by_truem   atter.rplib – CalendarPicker_Y!DSK.r   ...
練習三、進階Widgets使用(2)• 步驟二:依據練習範例需求定義,使用內  建Widgets建立完整雛形          63
練習三、進階Widgets使用(3)• 步驟三:完成以上步驟建置調整,完成雛  形 – 點選快速鍵F5(General Prototype),產生雛形檢視                  64
General Prototype(輸出雛型)• 將製作的雛型產生成  HTML格式,方便提供  給其他人觀看• 須留意選擇顯示的瀏覽  器• 若希望在雛形中看到  LOGO,可將LOGO一  併設定於雛形設定中;  另LOGO的尺寸要先調  ...
Specification(規格文件)• 利用Specification功能,  輸出Microsoft Word  格式的需求書或功能性  規格文件  (Specification)• 建議:  – 路徑常常讓人找不到,    需特別依據該路...
Publish to AxShare(1)          67
Publish to AxShare(2)                                     A• 使用前請務必先註冊• 發佈到網路上供其他人線                    B  上進行觀看與評論,減少  自行架...
Publish to AxShare(3)         小技巧:         可點選左上角的長方形方格,可將         左側縮起         Page Notes :         點選Page Notes,可看到之前於頁 ...
本次成果!!!http://share.axure.com/K36VWO密碼:2012             70
其他補充• 操作小技巧  – 重疊的物件,按住上層物件久一點,放掉後可選取下層物件  – 以方向鍵移動Widget  – 按住【Shift】鍵拖曳Widget可以水平或垂直移動Widget,或是配合鍵盤方    向鍵大幅移動  – 善用Hot ...
Axure RP相關學習資源  圖片來源:http://news.xinhuanet.com/internet/2010-09/08/12532236_11n.jpg                                    72
Axure RP相關學習資源(1)-社群• Axure RP中文社區,網址:  http://www.axure.org/                      73
Axure RP相關學習資源(2)-社群• Axure RP Users Club,網址: https://www.facebook.com/groups/axure.club.ux/                              ...
Axure RP相關學習資源(3)-課程• 悠識數位-Axure RP線上課程,網址:  http://userxper.com/axure_tutorial                   75
Axure RP相關學習資源(4)• (實體課程)悠識數位,  網址:  http://userxper.com/• 課程班別:  – [台南] Axure RP原型設    計及網站專案需求分析    (10月26日週五)  – http:/...
Axure RP相關學習資源(5)-書籍• (實體書籍)Axure RP 6  Prototyping Essentials,網址:  http://www.packtpub.com/ax  ure-rp-6-prototyping-  ess...
Axure RP相關學習資源(5)-書籍•   Chapter 1: Prototyping Fundamentals     – 從不同觀點來看UX,算是入門背景知識的補充•   Chapter 2: Axure Basics—the Use...
Axure RP相關學習資源(5)-書籍• (電子書籍)Axure for Mobile,網址:  http://www.axureformobile.com/2  012/09/the-axure-for-mobile-  ebook-is-...
Axure RP相關學習資源(6)-網站• Axure 官方網站   – 網址:http://www.axure.com/• Sample Prototypes   – 網址: http://www.axure.com/sample-proto...
Axure RP相關學習資源(7) -網站• 2tan.net-鳳凰涅磐,網址:  http://www.2tan.net/default.asp?tag=Axure+rp&dist  ype=list• IT民工 or IT精英,網址:  h...
82
聯絡資料• 基本資料 – 楊梭逸 – bhm@mail.linkchain.tw – 0952-641875• 個人Facebook – https://www.facebook.com/souyiyang• 個人網絡名片 – http://a...
Q&A      84
圖片來源:http://www.facebook.com/photo.php?fbid=4469474304636&set=o.193650057338848&type=1&relevant_count=1&ref=nf            ...
高雄和春資工系-Axure RP基礎課程
Upcoming SlideShare
Loading in...5
×

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

3,245

Published on

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

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,245
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
74
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. 課程大綱 前言與概念 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
  2. 2. 本次基礎課程…• 使用版本:AxureRP Pro 6.5 (Ver. 6.5.0.3040)• 會提到的 – 基礎使用者經驗設計流程,雛型(Prototyping)設計與工具 – 網站資訊架構(IA for WWW)基礎概念 – AxureRP使用者操作介面介紹 – AxureRP手把手案例操作練習• 不會提及/操作到的 – 網站企劃,使用性測試,使用者體驗(UX) – 如何自訂Widget Libraries – 如何進行多人(大於2人)共同開發 – 如何依據不同角色設定不同需看到的文件資訊 (Specification) – 互動設計與進階互動設計(參數等) – Mobile雛形設計與實機DEMO 3
  3. 3. Who am I ?• 楊梭逸 Carter Yang• 工作經歷: – 2012/01~迄今 , 經理 – 2010/06~2011/12,視覺設計組(兼品管部)經理 – 2006/04~2010/12,專案經理• 專注領域: – 專案管理,網頁與多媒體設計,網站行銷與企劃, 使用者體驗與互動,Drupal CMS,CMMI,品質 管理 4
  4. 4. 課程大綱• 前言 – 使用者經驗設計流程簡介 – 雛型(Prototyping)設計概念 – 雛型(Prototyping)設計工具 – 網站資訊架構(Information Architecture for WWW)概念• Axure RP手把手實戰 5
  5. 5. 使用者經驗設計流程研究 需求驗證 N 設計 構思http://www.usablebrands.ch/usability_.html 6
  6. 6. Prototype7 雛形
  7. 7. 模型屋Prototype(雛形)可供討論的模型或樣品 樣品屋 透視圖圖片來源:http://house.hinet.net/img/xml_13/7889323/7889323-10.jpg 圖片來源: http://homepage18.seed.net.tw/cgi/file_view.pl/TH.CJ0yww 8
  8. 8. 低擬真 VS.高擬真(1) Low Fidelity(低擬真) High Fidelity(高擬真)• 不像最終設計成品 • 接近最終設計成品• 好處 • 好處 – 很快,有東西可以討論 – 有更具體的東西討論 – 可以專注在High-level – 專注在更多設計細節 的設計觀念 – 驗證各種角度的使用者 – 探討主要的架構與功能 經驗 – 更容易發散思考不受拘 – 開發工作的工程師更容 束 易理解 – 客戶(老闆)更容易理解 9
  9. 9. 低擬真 VS.高擬真(2)Low Fidelity(低擬真) High Fidelity(高擬真) 10
  10. 10. 設計流程中,二者都具有意義 低擬真 高擬真Prototype(Sketch手繪草稿) = Prototype 實際設計產品時, 大家都希望看到更真實的設計 低擬真 高擬真Prototype(Sketch手繪草稿) < Prototype 11
  11. 11. 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
  12. 12. Wireframe prototyping Paper prototyping http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/ P5uDxoEfz1w/s1600/lmf_paper_prototype.gif 13
  13. 13. Storyboard prototyping 混搭mix Paper – Digital prototypinghttp://www.youtube.com/watch?v=GrV2SZuRPv0 14
  14. 14. Blank model prototyping Wizard of Oz prototyping http://www.youtube.com/watch?v=_aoo_N-7AYk 15
  15. 15. Video Prototyping Code Prototypinghttp://www.youtube.com/watch?v=BpWM0FNPZSs http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/56秒-64秒 16
  16. 16. 雛形工具演化經驗 17
  17. 17. MS PowerPoint 18
  18. 18. MS Word + MS Visio 19
  19. 19. HTML/PS(直接做網頁或圖)Adobe Dreamweaver/Photoshop MS Visual Studio 20
  20. 20. Axure RP 21
  21. 21. MS PowerPoint MS Word + MS Visio/Excel HTML/PS Axure RP 22
  22. 22. 工具 常用雛形工具簡介23
  23. 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
  24. 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
  25. 25. Balsamiq Mockups(Free)http://www.balsamiq.com/products/mockups 26
  26. 26. Cacoo(Free)http://cacoo.com/更多簡介:http://playpcesor.blogspot.com/2011/04/cacoo.html 27
  27. 27. Axure RP (付費軟體)-1• Axure RP 可以做什麼? – 專案規劃,框線繪製,雛型設計,自動化文件 – 著重於「功能性設計」• Axure RP 不可以做什麼? – 視覺或圖像設計 – 繪圖軟體 – 系統開發環境• Axure RP設計用途有何? – 桌面應用程式 – 瀏覽器為主的應用程式或網站 – 行動應用程式或網站 28
  28. 28. Axure RP (付費軟體)-2• Axure RP Pro 可做到的功能遠遠超乎您的 需求… – 多人共同編輯(Collaboration, Shared Projects for Teams) – 客製化規格文件(Specifications) – 進階互動功能(Interactions) 29
  29. 29. 其他雛形設計輔助軟體 Xmind FastStone Capture心智圖(需求整理) 螢幕畫面擷取編輯 更多簡介: http://briian.com/?p=5713http://www.xmind.net/ 30
  30. 30. 網站資訊架構資料來源:http://www.inspiredm.com/wp-content/uploads/2011/10/informationarchitecture.jpg 31
  31. 31. 網站資訊架構(IA for WWW)概念(1) 資料來源:http://www.louisrosenfeld.com/home/bloug_archive/images/010725b.gif 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html 32
  32. 32. 網站資訊架構(IA for WWW)概念(2) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html 33
  33. 33. 網站資訊架構(IA for WWW)概念(3) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html 34
  34. 34. 網站資訊架構(IA for WWW)概念(4) 資料來源:布丁布丁吃什麼?,http://pulipuli.blogspot.com/2010/03/blog-post.html 35
  35. 35. Q&A 36
  36. 36. 課程大綱• 前言• Axure RP手把手實戰 – 練習範例介紹: HAPPY讀書交流平台 – Sitemap簡介 – 練習一-建立Sitemap – Masters簡介 – Page Properties簡介 – Widgets簡介 – 練習二-建立Wireframe – 進階Widgets使用 – 練習三-進階Widgets使用 – General Prototype(輸出雛型) – Specification(規格文件) – Publish to AxShare – Axure RP相關學習資源 37
  37. 37. 需求訪談 38
  38. 38. 練習範例-HAPPY知識交流平台(1)• 需求訪談紀錄表 – 高階需求 • 訪談對象:老闆(Peter) • 訪談內容: – 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等) – 希望可以知道學生有沒有在用功(誤!) • 訪談對象:網站管理者(Carter) • 訪談內容: – 要能夠讓管理者方便操作,並且可以線上編輯內容 – 要能夠線上讓一般網友進行會員申請,但需要進行審核作業(系上成員才可加入) – 一般網友僅能夠瀏覽,不能夠參與讀書會討論 – 要能夠及時將最新訊息發布在網站上讓成員知道 – 要能夠舉辦活動;並透過行事曆方式並提供查詢功能,快速了解活動 – 要能夠將讀書會閱讀的書籍資訊,與讀書會小組成員發布於網站上;希望能夠清楚 的區分出進行中,已結束的資訊 • 訪談對象:學生(Jason) • 訪談內容: – 希望可以線上報名參加讀書會或其他小組舉辦的活動 – 希望可以將每次聚會活動照片方便的發布在平台上 – 我喜歡寫讀後心得,希望可以提供發布的方式讓大家看到 39
  39. 39. 練習範例-HAPPY知識交流平台(2)• 需求訪談紀錄表(Highlight 關鍵字) – 高階需求 • 訪談對象:老闆(Peter) • 訪談內容: – 希望可以讓大學部與研究生有個知識交流平台(Paper/書籍等) – 希望可以知道學生有沒有在用功(誤!) • 訪談對象:網站管理者(Carter) • 訪談內容: – 要能夠讓管理者方便操作,並且可以線上編輯內容 – 要能夠線上讓一般網友進行會員申請,但需要進行審核作業(系上成員才可加入) – 一般網友僅能夠瀏覽,不能夠參與讀書會討論 – 要能夠及時將最新訊息發布在網站上讓成員知道 – 要能夠舉辦活動;並透過行事曆方式並提供查詢功能,快速了解活動 – 要能夠將讀書會閱讀的書籍資訊,與讀書會小組成員發布於網站上;希望能夠清楚 的區分出進行中,已結束的資訊 • 訪談對象:學生(Jason) • 訪談內容: – 希望可以線上報名參加讀書會或其他小組舉辦的活動 – 希望可以將每次聚會活動照片方便的發布在平台上 – 我喜歡寫讀後心得,希望可以提供發布的方式讓大家看到 40
  40. 40. 練習範例-HAPPY知識交流平台(3)• 網站功能列表 • 角色定義 – 最新消息 – 網站管理者 – 讀書會簡介 • 成立宗旨 – 網站全部管理功能 • 加入會員(需審核) – …(略) – 活動行事曆 – 系上師生 – 書籍與成員 • 進行中書籍 – 瀏覽活動行事曆 • 已結束書籍 – 參與書籍與成員的 • 心得分享 討論 – 吃喝玩樂剪影 – 撰寫讀書心得 • 2012/09/20-《不為難自己 的練習》讀書聚會 – 發表活動照片 • 2012/09/25-架站前的實作 花絮!! – 線上報名活動 – 線上報名 – 一般網友 – 網站地圖 – 瀏覽書籍與成員 41
  41. 41. 官方線上支援與討論區連結 最近開啟過 的檔案清單 開啟新檔案D B AD CE 1.軟體不會自動更新,需手動 2.團隊中強烈建議使用相同版若希望下次不要顯示 本歡迎畫面,直接進入 3.舊版本無法開啟新版本檔案 編輯區請打勾 (如v5無法開v6的版本) 42
  42. 42. (點選後可隱藏左側) (點選後可最大化或最小化) (點選後可隱藏右側) 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
  43. 43. Sitemap簡介• 新增(Add),刪除(Delete),複製(Duplicate), 重新命名(Rename),調整順序(Move), 搜尋(Search) 44
  44. 44. 練習一、建立Sitemap(1)• 步驟一:操作Sitemap相關功能 小技巧: • 滑鼠左鍵選擇頁面後可直接拖動頁 面,以調整頁面的層級和位置關係 • 頁面修改名稱方式可參照 Windows中文件重命名方式,左 鍵單擊選中頁面後,再次單擊頁面 可直接修改頁面名稱 • 如果頁面之間已經做了按鈕跳轉等 操作,改變頁面的層級關係或重新 命名頁面並不會影響已有的鏈結 45
  45. 45. 練習一、建立Sitemap(2)• 步驟二:並依據練習範例網 站功能列表,建立Sitemap• 步驟三:利用Generate Flow Diagram,建立網站 地圖 – 先打開欲產生之頁面,再將 滑鼠點選頂層頁面,再點選 Generate Flow Diagram, 並選擇”Standard” 或”Right Hanging” 46
  46. 46. 練習一、建立Sitemap(3)• 建立完成後,即會於畫面中看到網站地圖, 如下 小技巧: • 請先開啟「網站地圖」頁面,再針對希望產生的節點層次進行 產生。不一定要產生全部的地圖,要產生局部的地圖也是可行。 47
  47. 47. Masters簡介(1)• 共用區塊(Masters)提供在設計過程中可以 重複使用的Widget• 概念說明圖: 48
  48. 48. Masters簡介(2)• 口訣:一步通到底• 好處: – 省時,減少重工避 免錯誤 – 維持一致性 – 減少檔案大 49
  49. 49. Page Properties簡介 應用如: • 客戶的需求描述 • 客戶的回饋 Page Notes: • 設計上需注意處 輸入頁面的註解 • 給不同角色看的UX 資訊 應用如: • 換頁的時候,要延 後幾秒 • 頁面讀入後,顯示 Page Interactions: 什麼資訊 設定該面的互動效果 應用如: • 呈現手繪的效果 • 頁面至中(預設靠左) Page Formatting: • 頁面背景顏色或圖 案 設定該面的格式 50
  50. 50. Widgets簡介(1)• Widgets可提供繪製雛 形時得相關組件,除使 用內建外也可透過匯入 方式外掛更多的組件 – Wireframe:常用的使 用者介面組件 – Flow:用來繪製流程圖 的組件 – 如要更換不同類型,可 點選左上角下拉選擇 – 如果組件過多,同樣也 可透過左上角Search功 能快速找到 51
  51. 51. Widgets簡介(2)• 試試看這些常用的Widgets: Wireframe Flow 使用者 處理程序 端點(開始 決策點 或結束) 備註:流程圖畫法有一定規則,需近 NOTE 一步了解請參考以下關鍵字:Flow Chart,UML,XP,RUP,AUP, EUP 52
  52. 52. 練習二、建立Wireframe(1)• 步驟一:依據練習範例需求定義功能描述 – 依據不同使用者需求,將相關需求描述建立於 對應頁面中的Page Notes 小技巧: 除輸入文字外,可調整字形,粗體,斜體,底線,與顏色 53
  53. 53. 練習二、建立Wireframe(2)• 步驟二:建立頁面引導線(Guides)• 使用960 Grid:12 Column • 將Guides鎖定與隱藏 建立引導線(Guides) (需要的話) 54
  54. 54. 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
  55. 55. 練習二、建立Wireframe(3)• 步驟三:使用Wireframe建立頁面與Masters• 建立頁面資訊架構(頁首/頁尾 • 建立Masters /主導覽列/次導覽列/內容區/ 麵包屑) B A 小技巧: C 小技巧: Ctrl+A:全選 後 選擇 使用 Rectangle Convert To Master 56
  56. 56. 練習二、建立Wireframe(4)• 步驟四:將建立起來 的Masters套用至全 C 部頁面 – 先將內容版型中的文 B 字描述刪除(目前所在 位置保留) A – 點選內容版型按右鍵, 選擇Add To Pages… – 勾選希望加入Master 的頁面,按下OK後, 及完成套用 57
  57. 57. 練習二、建立Wireframe(5) • 步驟五:依據練習範例需求於 Master建立選單 – 使用Menu(Horizontal) 小技巧 – 建立第一層選單,再建立第二層選單 A C E B D – 使用Qucik Link…快速建立頁面連結 – 選擇對應連結頁面並重複動作 – 設定Rollover/Selected StyleNOTE Table, Menu (Vertical/Horizontal) Widgets 比較耗效能 58
  58. 58. 練習二、建立Wireframe(6)• 步驟六:使用其他Widgets於Master建立 頁面組件 – 點選快速鍵F5(General Prototype),產生雛形 小技巧: 圖片插入時可使用 Ctrl+滑鼠滾輪放大縮 小比例進行微調 59
  59. 59. 進階Widgets使用(1)• 除了自己做組件(Widgets)外,用他人做好 的可以大幅度加快雛形的製作速度• 雛形的設計精神:快!快!!快!!! 不要拘泥於技術 – http://www.axure.com/download-widget-libraries 60
  60. 60. 進階Widgets使用(2)• 如何下載與安裝? – 至以上範例網頁中下載並解 壓縮,.rplib 為Widgets的格式 – 放到C:Users電腦名稱 DocumentsMy Axure RP Libraries – 若已開啟AxureRP,請重新 開啟,及會出現於Widgets 的下拉選單中 61
  61. 61. 練習三、進階Widgets使用(1)• 步驟一:依據練習範例 需求定義,使用外部 Widgets建立雛形 – Slider_Library_by_truem atter.rplib – CalendarPicker_Y!DSK.r plib – WidgetLib_v1.rplib – Icons from Axure (32x32).rplib• 請各位可以依照範例檔 進行試做 62
  62. 62. 練習三、進階Widgets使用(2)• 步驟二:依據練習範例需求定義,使用內 建Widgets建立完整雛形 63
  63. 63. 練習三、進階Widgets使用(3)• 步驟三:完成以上步驟建置調整,完成雛 形 – 點選快速鍵F5(General Prototype),產生雛形檢視 64
  64. 64. General Prototype(輸出雛型)• 將製作的雛型產生成 HTML格式,方便提供 給其他人觀看• 須留意選擇顯示的瀏覽 器• 若希望在雛形中看到 LOGO,可將LOGO一 併設定於雛形設定中; 另LOGO的尺寸要先調 好,不然會不成比例• 建議: – 只更新現在開啟的頁面 到網站雛形 65
  65. 65. Specification(規格文件)• 利用Specification功能, 輸出Microsoft Word 格式的需求書或功能性 規格文件 (Specification)• 建議: – 路徑常常讓人找不到, 需特別依據該路徑找尋 對應文件 – 只要把必要的項目輸出 到規格文件中 – 預設規格文件標題改成 中文 66
  66. 66. Publish to AxShare(1) 67
  67. 67. Publish to AxShare(2) A• 使用前請務必先註冊• 發佈到網路上供其他人線 B 上進行觀看與評論,減少 自行架站或傳送給其他使 用者不知如何觀看的問題 C• 若不希望公開,請務必設 定密碼• 上傳完成後,會提供一個 專屬連結,可直接於瀏覽 器中輸入該連結即可瀏覽• 若希望於網站上管理其他 雛形,請進入以下連結: http://share.axure.com/ 68
  68. 68. Publish to AxShare(3) 小技巧: 可點選左上角的長方形方格,可將 左側縮起 Page Notes : 點選Page Notes,可看到之前於頁 面上輸入的註解 Discuss: 可透過Discuss讓客戶或其他使用者, 直接於該頁面上進行留言或審查 69
  69. 69. 本次成果!!!http://share.axure.com/K36VWO密碼:2012 70
  70. 70. 其他補充• 操作小技巧 – 重疊的物件,按住上層物件久一點,放掉後可選取下層物件 – 以方向鍵移動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
  71. 71. Axure RP相關學習資源 圖片來源:http://news.xinhuanet.com/internet/2010-09/08/12532236_11n.jpg 72
  72. 72. Axure RP相關學習資源(1)-社群• Axure RP中文社區,網址: http://www.axure.org/ 73
  73. 73. Axure RP相關學習資源(2)-社群• Axure RP Users Club,網址: https://www.facebook.com/groups/axure.club.ux/ 請記得 加入 社團!!! 74
  74. 74. Axure RP相關學習資源(3)-課程• 悠識數位-Axure RP線上課程,網址: http://userxper.com/axure_tutorial 75
  75. 75. Axure RP相關學習資源(4)• (實體課程)悠識數位, 網址: http://userxper.com/• 課程班別: – [台南] Axure RP原型設 計及網站專案需求分析 (10月26日週五) – http://userxper.com/b log/archives/5794 76
  76. 76. 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
  77. 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
  78. 78. 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
  79. 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
  80. 80. 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
  81. 81. 82
  82. 82. 聯絡資料• 基本資料 – 楊梭逸 – bhm@mail.linkchain.tw – 0952-641875• 個人Facebook – https://www.facebook.com/souyiyang• 個人網絡名片 – http://about.me/bhm• 個人部落格 – http://www.bhm.idv.tw/blog/ 83
  83. 83. Q&A 84
  84. 84. 圖片來源:http://www.facebook.com/photo.php?fbid=4469474304636&set=o.193650057338848&type=1&relevant_count=1&ref=nf 85
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×