Your SlideShare is downloading. ×
0
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享

4,806

Published on

悠識數位 行銷總監 蔡明哲(Richard Tsai)於UI Gathering 2009年4月份聚會的專題演講

悠識數位 行銷總監 蔡明哲(Richard Tsai)於UI Gathering 2009年4月份聚會的專題演講

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

No Downloads
Views
Total Views
4,806
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
146
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. 國內第一家以「網站建築師事務所」為定位的專業服務公司 - - 「偽」網站設計 - Website Prototype Design 的實務應用分享 蔡明哲 Richard Tsai 悠識數位首席架構師 Chief IA 「偽」 :偽裝,假的
  • 2. 蔡明哲 Richard Tsai <ul><li>現在:悠識首席架構師 Chief Architect / Axure RP 產品行銷總監 </li></ul><ul><li>11 年網路行銷經驗及網站建置經驗, 4 年軟體行銷 / 系統開發經驗。 </li></ul><ul><li>專長 </li></ul><ul><ul><li>網站企劃,網路行銷 , 專案管理 , 系統分析 , 資料庫行銷。 </li></ul></ul><ul><li>經歷 </li></ul><ul><ul><li>知世網絡 6 年 ( 華文市場最頂尖的網路行銷公司 ) </li></ul></ul><ul><ul><ul><li>網站企劃顧問 , 專案總監 , 客戶服務總監 , 技術總監 </li></ul></ul></ul><ul><ul><li>多寶格行銷 2 年 ( 台灣最早的網路廣告公司 ) </li></ul></ul><ul><ul><ul><li>行銷企畫部經理、知識研究部經理 </li></ul></ul></ul><ul><ul><li>台灣科技大學工商設計系兼任講師 5 年 </li></ul></ul><ul><ul><li>凌群電腦 4 年 </li></ul></ul><ul><ul><ul><li>軟體工程師、專案經理、產品經理 </li></ul></ul></ul>
  • 3. Richard 近幾年部分專案 <ul><li>工研院英文網站改版 </li></ul><ul><li>天下雜誌英文網站改版 </li></ul><ul><li>NEXCOM 英文網站改版 </li></ul><ul><li>信義房屋網站 改版 / 工研院網站中文改版 </li></ul><ul><li>臺灣證券交易所網站改版 / 證券櫃檯買賣中心網站改版 / 臺灣高鐵網站建置 / </li></ul><ul><li>光寶科技企業網站改版 / 保德信投信 (Prudential) 企業網站改版 </li></ul><ul><li>NISSAN 企業網站年度營運及網站會員行銷 </li></ul><ul><li> - ”NISSAN 你上了嗎?” 網路行銷活動 </li></ul><ul><li>泛亞電信 企業網站改版 / 泛亞電信 EC 網站建置 / </li></ul><ul><li>泛亞電信網路客服網站建置 / 泛亞電信 EIP 網站建置 / </li></ul><ul><li>電子報系統導入 / 網站營運分析 </li></ul><ul><li>金紅葉經銷商電子商務網站、金紅葉 Airforce 員工入口網站建置 </li></ul><ul><li> - 金紅葉 GHY 為中國大陸生活用紙市佔率第一製造商,總部位於大陸蘇州 </li></ul><ul><li>中華電信 HiB2B 網站建置 </li></ul><ul><li>HSBC 網站改版 / HSBC 理財試算軟體 </li></ul>2007 2006 2004 2003 2005 2002 2001 2008 2007 年金手指網路獎年度大獎 - 最佳網站 2005 e 天下 e 時代行銷王 第三名及最佳視覺設計 2003 泛亞電信網路客服 , 上線半年創造 ROI 100% 績效 2003 入圍經濟部商業司 E21 金網獎決選 / 入圍金手指獎 EC 類
  • 4. 成千上萬的公司提供 「真」 網站設計 只有一家提供 「偽」 網站設計 - 悠識數位 UserXper
  • 5. 悠識數位 (UserXper) 的服務項目 <ul><li>以「網站使用者經驗」為核心的三項服務 </li></ul><ul><ul><li>網站企劃專案 / Axure RP 軟體 / 網站企劃教育訓練 </li></ul></ul>Axure RP - The best rapid prototyping tool Software Website planning and UCD training Training Website Planning & Usability Testing Planning & Consulting
  • 6.  天下雜誌英文網站改版  NEXCOM 全球網站改版  工研院英文網站改版
  • 7. 網站架構 / 流程圖 / 線框圖 HTML 格式 prototype 體驗原型 / 互動設計 Word 格式 規格文件
  • 8. 我們的客戶 <ul><li>台灣 </li></ul><ul><ul><li>電信 / 軟體業 : 趨勢科技 , 華寶通訊 </li></ul></ul><ul><ul><li>網站 : Yahoo, 巴哈姆特 , 104 人力銀行 </li></ul></ul><ul><ul><li>金融 : 玉山銀行 </li></ul></ul><ul><ul><li>政府法人機構 : 工研院 , NII </li></ul></ul><ul><ul><li>網路行銷 : 知世網絡 / 安捷達顧問 / 米蘭數位 / 網路基因 / 富爾特 / 不來梅 / 生命樹創意 / 摩奇 e21 創意 / 多奇數位 / 喬立達數位媒體 / 阿物國際… </li></ul></ul><ul><li>大陸 </li></ul><ul><ul><li>iResearch, 微軟亞洲研究院 , 百度 , 上海征途 </li></ul></ul><ul><ul><li>試用客戶:騰訊 , 網易 , 阿里巴巴 , 淘寶網 , 當當網 , 支付寶 , Mapbar, 金蝶軟件… </li></ul></ul>
  • 9. 去年我們去深圳參展… <ul><li>User Friendly 2008 大會在深圳。過去幾屆的大會在 北京 , 上海 , 杭州 , 北京 。 </li></ul><ul><li>UPA : Usability Professional Association 可用性專業人士協會 </li></ul><ul><li>誰來參加這個研討會 ? </li></ul><ul><ul><li>大陸互聯網企業: Google, 阿里巴巴,騰訊,百度,網易,新浪 .. </li></ul></ul><ul><ul><li>知名國際品牌:微軟, HP , Nokia , HSBC… </li></ul></ul><ul><ul><li>軟體公司:群碩軟件,金蝶軟件 .. </li></ul></ul><ul><ul><li>產品製造商:華為,海爾, TCL , 步步高 </li></ul></ul><ul><ul><li>軟體商: Autodesk.. </li></ul></ul><ul><ul><li>UX 相關領域公司: HFI ,唐碩,伊薩爾… </li></ul></ul><ul><ul><li>約 300-400 人 </li></ul></ul><ul><li>誰來參展 ? </li></ul><ul><ul><li>HP, TOBII, Smart Eye, Noldus, Hyperlink, 唐碩 , 悠識 (Axure) </li></ul></ul>
  • 10. 我們的網站企劃流程 Strategy 策略規劃 Stakeholder Interview Understand Business Goal Understand Marketing Strategy Website Research Website Traffic Analysis Strategy planning phase Scope 需求範疇 <ul><li>----------- </li></ul><ul><li>----------- </li></ul><ul><li>----------- </li></ul><ul><li>----------- </li></ul><ul><li>----------- </li></ul><ul><li>Requirement Definition </li></ul><ul><li>Content Requirement </li></ul><ul><li>Function Requirement </li></ul><ul><li>Specification </li></ul><ul><li>Review and Verification </li></ul>Requirement Definition Phase Skeleton 介面設計 Structure 架構定義 Prototype Design Phase Information Architecture Interaction Design Interface Design Navigation Design Information Design 網頁 設計 視覺設計 系統開發 Implementation Phase Visual & Page Design Phase
  • 11. Card Sorting Mindmap Mental Model User Behavior Content Auditing Information Architecture Stakeholder interview Wireframe HTML Prototype Specification Traffic Analysis
  • 12. 「偽」設計 重要嗎 ?
  • 13. http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html 樣品屋 透視圖 http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267 模型屋 www.sexinsex.net/luntan/thread-1704273-1-1.html 借助「偽裝」模擬,得以低成本 / 低時間來確認顧客需求! 並創造良好的體驗!
  • 14. Prototype 重要嗎 ? 老闆 你畫的什麼東西? 提 2-3 款網頁設計來瞧瞧吧 ! 網站企劃 我只會 PowerPoint ,我不太會做 HTML
  • 15. Prototype 重要嗎 ? 工程師 不要叫我做 html prototype ,那不是我的事情,而且那等於要開發兩次耶! 網頁設計師 HTML prototype? 啥 ? 我設計的東西叫做網頁
  • 16. Benefit of Prototyping Cost of Prototyping > 我幹嘛要花這個錢跟時間呢? 老闆
  • 17. High Fidelity Prototype Low Fidelity Prototype (Sketch 手繪草稿 ) = 在網站企劃與設計的工作中 High Fidelity Prototype Low Fidelity Prototype < 設計的重要性 實作的重要性
  • 18. Website High Fidelity Prototype 耗時費工 Logo
  • 19. 既然如此,什麼時候 Website Design 開始流行起 Prototyping 呢?
  • 20.  
  • 21.  
  • 22.  
  • 23.  
  • 24.  
  • 25.  
  • 26. Simunication (Web-based prototyping service)
  • 27. Lucid Spec (Elegance Tech) – Windows AP
  • 28. Balsmiq Mockups
  • 29. OmniGraffle Pencil Project
  • 30. 廣義 prototyping tool for Web/SW UI <ul><li>General Purpose – Diagram Tools </li></ul><ul><ul><li>VISIO </li></ul></ul><ul><ul><li>PowerPoint </li></ul></ul><ul><ul><li>Word </li></ul></ul><ul><ul><li>Excel </li></ul></ul><ul><ul><li>Pencil Project (plug-in Firefox) </li></ul></ul><ul><ul><li>OmniGraffle (Mac OS X, Mac 版的 Visio) </li></ul></ul><ul><li>For Windows AP </li></ul><ul><ul><li>GUI Design Studio (Caretta) </li></ul></ul><ul><ul><li>MockupScreens </li></ul></ul><ul><li>Graphics Tool </li></ul><ul><ul><li>Photoshop / Illustrator / Firework / FlashMX </li></ul></ul><ul><li>Developing Tool </li></ul><ul><ul><li>Dreamweaver, FrontPage, MS Express Web, Visual Studio </li></ul></ul>
  • 31. Website Prototype 的應用 <ul><li>實現 網站資訊架構 </li></ul><ul><li>實現 網頁介面與動線 </li></ul><ul><li>實現 網頁資訊設計 (partial) </li></ul><ul><li>實現 網站功能 (partial) </li></ul><ul><li>提早體驗,驗證 stakeholder 需求 </li></ul><ul><li>提早測試,驗證 user 需求及 usability </li></ul><ul><li>管理變動需求,控制 Scope/Spec ,降低修改風險與開發時間,求得更好的使用者經驗 </li></ul>
  • 32. 看看一些 Website Prototype
  • 33. 示範模組化的 Website Prototyping by Axure RP
  • 34. High Fidelity Prototype 的缺點 <ul><li>客戶 ( 老闆 ) 嫌醜 </li></ul><ul><li>客戶 ( 老闆 ) 要求更細緻的介面設計 </li></ul><ul><li>客戶 ( 老闆 ) 要求更多資訊 / 互動介面 </li></ul><ul><li>Prototype 無法提供最終的使用者經驗 </li></ul><ul><li>工程師嫌太難開發 </li></ul><ul><li>網站企劃無法撇開責任 </li></ul>
  • 35. 謝謝! 請上網搜尋 “網站企劃”或” Axure”

×