20120516 axure rp prototype design outline

唯一上課時允許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】步驟與方法

企劃流程與工具


紙/筆

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

• 接近最終設計成品

• 好處– 有更具體的東西可以討論

– 專注在更多的設計細節

– 驗證各種角度的使用者經驗

– 開發工作的工程師更容易理解

– 客戶(老闆)更容易理解


High FidelityPrototype

Low FidelityPrototype(Sketch手繪草稿) =

設計流程中，二者都具有意義


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 最佳網站原型設計工具

網站企劃工具六合一網站架構/示意圖/流程圖/原型設計/互動設計/規格文件


案例

• Website• Web Application• Desktop Application• Mobile Application


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說明格式化


規格文件功能

Generate Spec 目錄

• PC: 全選後按F9• Mac

Command、Shift、Option、u

規格文件的版型規格文件的版型

• 一欄或兩欄• Column Break---

-＂分隔兩欄• 指定內容排列• Screenshot可設

定隱藏背景、素描風格、改變大小


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)


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


手機/平板電腦的拖放

畫面的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

20120516 axure rp prototype design outline

Technology