Post on 27-Jan-2015
description
唯一上課時允許facebook的課程? XD
• Axure RP User's Club http://on.fb.me/axure-user-club
-2-UserXper Web User Experience – Software / Training / Planning
關於悠識, 關於 Richard
網站/Mobile App規劃 (悠識服務1)
• 制定策略 strategy plan
• 規劃藍圖 wireframe
• 設計模型 prototype
• 使用者測試 user testing
• 撰寫規格 specification
一半以上財星百大企業,
超過3萬個專業團隊選擇Axure RP
快速原型軟體-Axure RP (悠識服務2)
Axure RP軟體客戶• 台灣
– 網路:Yahoo奇摩, 博客來, 巴哈姆特, 104人力銀行, 地圖日記
– 軟體:趨勢科技, 友訊D-Link, 凌網科技, 華創車電, 華寶通訊,圓剛科技, 凌誠科技, 神達, 台達電, 致伸科技
– 網路行銷: 達彼思廣告, 知世, 安捷達, 米蘭, 網路基因, 富爾特, 不來梅, 奇禾, 聯網, 生命樹, 摩奇, 多奇, 喬立達, 阿物國際, 恆基, 網路行動, 久大資訊, 樂倍達, …
– 其他:玉山銀行, 工研院, NII
• 大陸– 微軟亞洲研究院, 百度, 中達電, iResearch, 上海征途, 法國
電信– 騰訊, 網易, 阿里巴巴, 淘寶網, 當當網, 支付寶, Mapbar,
金蝶軟件, …
訓練課程 (悠識服務3)
• 企業內訓或公開課程• 包括:
– 網站企劃工作流程– Mobile Application 設計與規劃實務– User-Centered Design– 使用者研究– 易用性研究– 網站建置新手指南– 網站結合Facebook應用– 網站流量分析及訪客行為解讀– 簡報專業訓練– 網路新創模式觀察與分析– 資訊架構與介面模式等等…
使用者研究 (悠識服務4)• 行為觀察及分析
– 流量分析工具 Traffic analytic tool (Google Analytics Report)– 可用性測試 Usability test– 點擊熱圖 Click Heatmap (WaClick 產品)– 眼動分析 Eye tracking
• 認知與理解– 卡片分類 Card sorting
• 機會探索挖掘 (目標使用者研究,並非網站現況分析)– 深度訪談 User Interview– 脈絡訪查 Contextual Inquiry– 焦點團體 Focus Group
點擊熱圖追蹤服務 (WaClick)
Usability Test 可用性測試
卡片分類法 – 探索使用者的認知
深度訪談�人物誌 (機會挖掘)
蔡明哲 Richard Tsai
• 悠識數位 首席資訊架構師 Chief Information Architect– 專長
• 網站企劃,網路行銷, 專案管理, 系統分析, 資料庫行銷
– 過去
• 企劃顧問,專案總監,客服總監,技術總監,行銷企畫經理,知識研究部經理,軟體工程師,專案經理,產品經理,廣告AE..
– UiGathering協會監事 / IAI / UPA
– HPX founder
• 幫助客戶– 找出網站設計或企劃的問題
– 提供網站Usability的建議
– 提供網站企劃及Prototype Design的服務
– 提供網站企劃的內功心法/秘笈/工具
Prototype位於什麽階段?
網站/App 企劃學習架構
如何成為網站企劃高手?
MS Office, Axure RP, Mindmap, Google Search, Google Analytics, Sketch, Card Sorting,Camtasia, Morae, FastStone, ZoomIt …
資訊架構, 使用者經驗, 介面設計, 互動設計, 使用者研究, 使用者測試, 品牌與視覺, 網路行銷, 資訊技術. …
【3】工具
【1】基本功
HTML, Flash, Javascript, CSS, Visualization, Copy(文案), 研究方法,調查方法,專案管理, 工作流程, 溝通技巧, …
【2】步驟與方法
企劃流程與工具
-16-UserXper Web User Experience – Software / Training / Planning
紙/筆
Paper Wireframe
Concept ( by Mind Map)
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
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
Prototype:
可供討論的模型或樣品
Low Fidelity
• 不像最終設計成品
• 好處– 很快….有東西可以討論
– 可以專注在High-level的設計觀念
– 探討主要的架構與功能
– 更容易發散思考不受拘束
High Fidelity
• 接近最終設計成品
• 好處– 有更具體的東西可以討論
– 專注在更多的設計細節
– 驗證各種角度的使用者經驗
– 開發工作的工程師更容易理解
– 客戶(老闆)更容易理解
-24-UserXper Web User Experience – Software / Training / Planning
High FidelityPrototype
Low FidelityPrototype(Sketch手繪草稿) =
設計流程中,二者都具有意義
-25-UserXper Web User Experience – Software / Training / Planning
High FidelityPrototype
Low FidelityPrototype <
實際設計產品時,大家都希望看到更真實的設計
廣義的Prototyping 形式
• Wireframe prototyping• Storyboard prototyping
• Paper prototyping
• Digital prototyping• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping• Coded prototyping (including scripting
and HTML)
Wireframe prototyping Paper prototyping
http://www.youtube.com/watch?v=GrV2SZuRPv0
http://www.youtube.com/watch?v=ykJ60H4Qkvg
Digital prototyping
Paper prototypingStoryboard prototyping
Blank model prototyping
Wizard of Oz prototyping
Video prototyping
http://www.youtube.com/watch?v=BpWM0FNPZSs56秒-64秒
Coded prototyping
Axure RP 最佳網站原型設計工具
網站企劃工具六合一網站架構/示意圖/流程圖/原型設計/互動設計/規格文件
-32-UserXper Web User Experience – Software / Training / Planning
案例
• Website• Web Application• Desktop Application• Mobile Application
-34-UserXper Web User Experience – Software / Training / Planning
Axure RP - Part 1 基本操作
Axure RP Pro入門
六個步驟• 定義 資訊架構(sitemap)• 使用widget• 畫wireframe• 建立link• 加上註解• 自訂 master (template)
最後產生(generate)– HTML prototype– 規格文件
1.定義sitemap
3.畫wireframe
2,內建widget
4.建立link
1
2
6
3
5
4
5
5.Widget / Page的註解說明
6.自訂共用template
1. 定義資訊架構 (sitemap)
定義資訊架構, 繪製page flow
• 把已經想好架構, 輸入到 [sitemap窗格]• 自動產生 Page Flow• Page Flow 不等於 UI Flow
2. 使用 default widget
widget for Wireframe widget for Flow
3. 畫wireframe
輸出Prototype/Spec的預設folder
• 不特別指定輸出的目錄, 則放在 “我的文件” 目錄
– My Axure RP Prototypes : 放Prototype (html檔案)
– My Axure RP Reports : 放指定輸出的report檔( xls檔案)
– My Axure RP Specifications : 放指定輸出的規格文件 (word檔案)
4. 建立link (OnClick Event)
1
2
4. 建立link (OnClick Event)3
4. 建立link (OnClick Event) 4.建立link
5. 加上註解 (Annotation / Page Notes)
5
5 5.Widget
/ Page的
註解說明
6. 自訂 master (共用區塊template)
6.自訂共用區域template
6
自訂 master 的屬性 (Behavior)
• 放在背景 (共用) Background
• 放在前景 (共用) Normal
• 前景, 且不共用 Custom Widget
Page屬性
•Page屬性:預設頁面樣式或製作自定樣式•頁面對齊:將網頁置左或置中對齊 (只在HTML上才看得到效果)>根據最左邊和最右邊的物件置中。•背景顏色:給頁面背景顏色(不是在背景上放個大矩形!)•背景圖片:匯入圖片當背景,可以設定重複延展。•重複:將背景圖片水平、垂直或水平垂直重複延展。
素描效果(Sketch Effects)
• 更多樂趣• 任何階段都能使用手繪風格• 溝通時更可聚焦在結構、互動和功能上• Sketchiness(手繪程度)
– 顏色: 整個頁面變成灰階– 字體:可使用手寫字體– 線寬:物件框線的寬度
Page說明格式化
-51-UserXper Web User Experience – Software / Training / Planning
規格文件功能
Generate Spec 目錄
• PC: 全選後 按F9• Mac
Command、Shift、Option、u
規格文件的版型規格文件的版型
• 一欄或兩欄• Column Break---
-"分隔兩欄• 指定內容排列• Screenshot可設
定隱藏背景、素描風格、改變大小
-54-UserXper Web User Experience – Software / Training / Planning
Widget Libraries
使用Widget Libraries (下載安裝)http://axure.com > How-To > Widget Libraries
觀念/技巧補充
• 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-UserXper Web User Experience – Software / Training / Planning
Axure RP - Part 2 互動設計
Axure RP - Part 2 互動設計
1. Axure RP 互動設計概念
2. 各種互動表現的特性與動作描述
3. Dynamic Panel的狀態(State)控制
4. Page Level的互動設計
5. TabView(頁籤)的效果設計及其他
觸發事件(Event)、狀況 (Case)、動作型態(Action)
• 當使用者對網頁進行某些人機介面的操作時,就會對網頁觸發一個
事件(Event)。
• 每一個觸發事件都可以有一或多個狀況(Case)
一個按鈕的OnClick 觸發事件可以有兩個狀況:
– Case 1 link到某頁
– Case2 則link至另一頁 。
• 而每一個狀況 (Case)又可以執行一或多個動作型態(Action)
• 動作型態(Action),必須進一步定義動作描述(Action
Description)。
– 比如「Open Link in Current Window」的Action,就是Hyperlink的表現,需要定義link到哪一頁。
基本的 Axure RP 觸發事件 Event
• 以滑鼠點擊 - OnClick• 滑鼠的指標移動到物件之上 - OnMouseEnter• 滑鼠的指標移動出物件之外 - OnMouseOut• 滑鼠的指標進入文字輸入狀態 - OnFocus• 滑鼠的指標離開文字輸入狀態 - OnLostFocus• 敲鍵盤 - OnKeyUp• 瀏覽器下載畫面 - OnPageLoad
進階的 Axure RP 觸發事件 Event(多數是僅能用於Dynamic Panel的操控)
1 2
3
狀況 (Case)
指定動作
定義動作
邏輯判斷(Condition)
所有可用的動作
Dynamic Panel (Axure 互動設計的魔法棒)
• 透明的容器• 內含很多個插槽
–Dynamic Panel – Panel 1
•State 1 (預設一個插槽)
Dynamic Panel (Axure 互動設計的魔法棒)
• State (of Dynamic Panel)
– 小頁面
– Panel中的State至少一個 (或一個以上)
顯示/關閉簡易說明視窗
• 效果呈現
– Tap (onClick) � Show Panel
– Tap (onClick) � Hide Panel
• 練習 LightBox設計
顯示/關閉簡易說明視窗
On Click Case 1 Toggle - Show Panel
Event Case Action
On Click Case 1 Toggle -Hide Panel
相同動作觸發兩個不同的狀況
• 呈現效果:– 登入成功與失敗各自有不同的顯示方式
• 二種作法:1. 直接置入兩個Case � 簡單
2. 條件式判斷 � 稍難
設計登入按鍵的互動 (OnClick)
按下登入按鈕OnClick Case 1登入成功
Case 2登入失敗
等待0.5秒Wait 500 mini seconds
+跳回到首頁
Open Home PageIn Current Window
原處顯示錯誤訊息
Show Error Panel
Event Case Action
TabView State 1
TabView State 2
TabView State 3
-73-UserXper Web User Experience – Software / Training / Planning
手機/平板電腦的拖放
畫面的drag&drop
• View DP 限制視界 (可視範圍)• Content DP 放置所有內容• OnDrag觸發事件 (本身已含DragStart,DragDrop)
View DP Content DP
Content DP的3個拖放觸發事件
• OnDragStart:發生在開始拖動時。• OnDrag:當開始拖動面板時,即開始執行。• OnDragDrop:發生在面板被放下時。
• 手機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:回到開始拖動之前的位置
實際應用時,應解釋 HTML Prototype
1. 什麼是原型?是模擬、偽裝、策劃用、或討論用的
2. 哪一種原型?是可放在瀏覽器體驗的,但不是視覺設計或程式設計過的
3. 觀看原型的重點是什麼?以及什麼不是觀看重點?
4. 這個Prototype 是用來表達什麼?設計架構、資訊設計、導覽動線、操作介面、模仿功能
5. 不是用來表達以下項目:– 表現視覺設計
– 討論顏色好不好看
– 表達最終的設計結果
Axure RP User's Club
• 問題請貼到這裡來:http://on.fb.me/axure-user-club