Contenu connexe Similaire à 20120516 axure rp prototype design outline Similaire à 20120516 axure rp prototype design outline (20) 20120516 axure rp prototype design outline3. 網站/Mobile App規劃 (悠識服務1)
• 制定策略 strategy plan
• 規劃藍圖 wireframe
• 設計模型 prototype
• 使用者測試 user testing
• 撰寫規格 specification
5. Axure RP軟體客戶
• 台灣
– 網路:Yahoo奇摩, 博客來, 巴哈姆特, 104人力銀行, 地圖
日記
– 軟體:趨勢科技, 友訊D-Link, 凌網科技, 華創車電, 華寶通
訊,圓剛科技, 凌誠科技, 神達, 台達電, 致伸科技
– 網路行銷: 達彼思廣告, 知世, 安捷達, 米蘭, 網路基因, 富
爾特, 不來梅, 奇禾, 聯網, 生命樹, 摩奇, 多奇, 喬立達, 阿物
國際, 恆基, 網路行動, 久大資訊, 樂倍達, …
– 其他:玉山銀行, 工研院, NII
• 大陸
– 微軟亞洲研究院, 百度, 中達電, iResearch, 上海征途, 法國
電信
– 騰訊, 網易, 阿里巴巴, 淘寶網, 當當網, 支付寶, Mapbar,
金蝶軟件, …
6. 訓練課程 (悠識服務3)
• 企業內訓或公開課程
• 包括:
– 網站企劃工作流程
– Mobile Application 設計與規劃實務
– User-Centered Design
– 使用者研究
– 易用性研究
– 網站建置新手指南
– 網站結合Facebook應用
– 網站流量分析及訪客行為解讀
– 簡報專業訓練
– 網路新創模式觀察與分析
– 資訊架構與介面模式
等等…
7. 使用者研究 (悠識服務4)
• 行為觀察及分析
– 流量分析工具 Traffic analytic tool (Google Analytics Report)
– 可用性測試 Usability test
– 點擊熱圖 Click Heatmap (WaClick 產品)
– 眼動分析 Eye tracking
• 認知與理解
– 卡片分類 Card sorting
• 機會探索挖掘 (目標使用者研究,並非網站現況分析)
– 深度訪談 User Interview
– 脈絡訪查 Contextual Inquiry
– 焦點團體 Focus Group
12. 蔡明哲 Richard Tsai
• 悠識數位 首席資訊架構師 Chief Information Architect
– 專長
• 網站企劃,網路行銷, 專案管理, 系統分析, 資料庫行銷
– 過去
• 企劃顧問,專案總監,客服總監,技術總監,行銷企畫經理,知識研究部經
理,軟體工程師,專案經理,產品經理,廣告AE..
– UiGathering協會監事 / IAI / UPA
– HPX founder
• 幫助客戶
– 找出網站設計或企劃的問題
– 提供網站Usability的建議
– 提供網站企劃及Prototype Design的服務
– 提供網站企劃的內功心法/秘笈/工具
14. 如何成為網站企劃高手?
資訊架構, 使用者經驗, 介面設計, 互動設計,
【1】基本功 使用者研究, 使用者測試,
品牌與視覺, 網路行銷, 資訊技術. …
HTML, Flash, Javascript, CSS,
【2】步驟與方法 Visualization, Copy(文案),
研究方法,調查方法,
專案管理, 工作流程, 溝通技巧, …
Axure RP,
MS Office, Mindmap,
【3】工具 Google Search, Google Analytics,
Sketch, Card Sorting,
Camtasia, Morae, FastStone, ZoomIt …
16. UserXper Web User Experience – Software / Training / Planning -16-
20. Prototyping工具
• Diagram Tools (General Purpose)
– VISIO / PowerPoint / Word / Excel
– Pencil Project (plug-in Firefox)
– OmniGraffle (Mac OS X, Mac版的Visio)
• Graphics Tool
– Photoshop / Illustrator / Firework / FlashMX
21. 模型屋
Prototype:
可供討論的模型或樣品
www.sexinsex.net/luntan/thread-1704273-1-1.html
樣品屋 透視圖
http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html
http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267
24. 設計流程中,二者都具有意義
Low Fidelity High Fidelity
Prototype
(Sketch手繪草稿) = Prototype
UserXper Web User Experience – Software / Training / Planning -24-
26. 廣義的Prototyping 形式
• Wireframe prototyping
• Storyboard prototyping
• Paper prototyping
• Digital prototyping
• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping
• Coded prototyping (including scripting
and HTML)
27. Wireframe prototyping Paper prototyping
http://www.youtube.com/watch?v=GrV2SZuRPv0
http://www.youtube.com/watch?v=ykJ60H4Qkvg
30. Video prototyping
http://www.youtube.com/watch?v=BpWM0FNPZSs
56秒-64秒
Coded prototyping
32. UserXper Web User Experience – Software / Training / Planning -32-
34. Axure RP - Part 1 基本操作
UserXper Web User Experience – Software / Training / Planning -34-
35. Axure RP Pro入門
六個步驟
• 定義 資訊架構(sitemap)
• 使用widget
• 畫wireframe
• 建立link
• 加上註解
• 自訂 master (template)
最後產生(generate)
– HTML prototype
– 規格文件
36. 4.建立link
3.畫wireframe
1.定義
sitemap
1 4
3
2,內建 5
widget
5.Widget
/ Page的
2 註解說明
6.自訂
5
共用template
6
47. 自訂 master 的屬性 (Behavior)
• 放在背景 (共用) Background
• 放在前景 (共用) Normal
• 前景, 且不共用 Custom Widget
49. 素描效果(Sketch Effects)
• 更多樂趣
• 任何階段都能使用手繪風格
• 溝通時更可聚焦在結構、互動和功能上
• Sketchiness(手繪程度)
– 顏色: 整個頁面變成灰階
– 字體:可使用手寫字體
– 線寬:物件框線的寬度
51. 規格文件功能
UserXper Web User Experience – Software / Training / Planning -51-
53. 規格文件的版型
• 一欄或兩欄
• Column Break---
-"分隔兩欄
• 指定內容排列
• Screenshot可設
定隱藏背景、素描
風格、改變大小
56. 觀念/技巧補充
• Axure RP檔案管理及回復版本
• 與其他Office文件的圖形交換
• 善用Hot Key (跟Office軟體Hot Key相同)
– CTRL-A : 全選
– CTRL-C : Copy
– CTRL-X : Cut
– CTRL-V : Paste
• 只要更新一頁Re-generate one page (CTRL-F5)
57. Axure RP - Part 2 互動設計
UserXper Web User Experience – Software / Training / Planning -57-
58. Axure RP - Part 2 互動設計
1. Axure RP 互動設計概念
2. 各種互動表現的特性與動作描述
3. Dynamic Panel的狀態(State)控制
4. Page Level的互動設計
5. TabView(頁籤)的效果設計及其他
60. 基本的 Axure RP 觸發事件 Event
• 以滑鼠點擊 - OnClick
• 滑鼠的指標移動到物件之上 - OnMouseEnter
• 滑鼠的指標移動出物件之外 - OnMouseOut
• 滑鼠的指標進入文字輸入狀態 - OnFocus
• 滑鼠的指標離開文字輸入狀態 - OnLostFocus
• 敲鍵盤 - OnKeyUp
• 瀏覽器下載畫面 - OnPageLoad
63. 狀況 (Case)
邏輯判斷(Condition)
指定動作
定義動作
所有可用的動作
67. 顯示/關閉簡易說明視窗
Event Case Action
On Click Case 1 Toggle - Show Panel
On Click Case 1 Toggle -Hide Panel
69. 設計登入按鍵的互動 (OnClick)
Event Case Action
等待0.5秒
Wait 500 mini seconds
按下登入按鈕 +
Case 1登入成功
OnClick 跳回到首頁
Open Home Page
In Current Window
原處顯示錯誤訊息
Case 2登入失敗
Show Error Panel
74. 畫面的drag&drop
• View DP 限制視界 (可視範圍)
• Content DP 放置所有內容
• OnDrag觸發事件 (本身已含DragStart,DragDrop)
Content DP
View DP
76. • 手機App 往下拖拉,放掉後自動彈回
– 當開始Drag時, DP跟隨移動,
– 當放掉時 (OnDragDrop), DP自動移動回原來位置 "to
x,y before drag"
• 動作選項:
– with drag:跟著游標移動
– with drag x:只有水平方向移動(x軸)。
– with drag y:只有垂直方向移動(y軸)。
– to x,y before drag:回到開始拖動之前的位置
77. 實際應用時,應解釋 HTML Prototype
1. 什麼是原型?
是模擬、偽裝、策劃用、或討論用的
2. 哪一種原型?
是可放在瀏覽器體驗的,但不是視覺設計或程式設計過的
3. 觀看原型的重點是什麼?
以及什麼不是觀看重點?
4. 這個Prototype 是用來表達什麼?
設計架構、資訊設計、導覽動線、操作介面、模仿功能
5. 不是用來表達以下項目:
– 表現視覺設計
– 討論顏色好不好看
– 表達最終的設計結果