互動素描標記法 v0.1

http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/

Interactive Sketching Notation Version 0.1

互動素描標記法是新興的視覺溝通工具,能呈現介面狀態及各種事件的使用者動作。透過幾個簡單、標準化的規則,使用者所看見的(以黑白圖樣繪製)及所做的(以紅色繪製)都一併畫在同一素描圖上。這樣結合介面外觀及使用者動作的方式,讓設計師描述互動狀態時更具說服力。

The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction.

事件 Events

使用者於介面上操作各式動作時,便啟動「事件」。就把事件想做起因、螢幕顯示的東西當成效果。在這份標記法中,有些相關的事件包括:

Events are initiated when users perform various actions on an interface. Think of events as causes and screens as effects. For the purpose of this notation, some relevant events could include:

點擊滑鼠
雙點滑鼠
點滑鼠右鍵
滑鼠游標移上物件
滑鼠游標移離物件
滑鼠游標移動
滑鼠鍵放開
滑鼠鍵按下
內容更動
物件取得焦點
物件喪失焦點
完成按 X 鍵之所有動作
放開某 X 鍵
按下某 X 鍵
讀取完畢
離開
捲動畫面
送出表單

CLICK
DBLCLICK
RCLICK
MOUSEOVER
MOUSEOUT
MOUSEMOVE
MOUSEUP
MOUSEDOWN
CHANGE
FOCUS
BLUR
KEY: X
KEYUP: X
KEYDOWN: X
LOAD
UNLOAD
SCROLL
SUBMIT

未指定事件. 簡單、未加說明的箭頭,皆視為 CLICK 事件
指定事件. 要指定使用者操作的特定事件,便在箭頭上加註事件名稱
組合事件. 有時使用者會操作更複雜的事件,例如按住某鍵後再點選滑鼠
實體世界的動作. 使用者在介面以外之處所進行的動作

Unspecified Event. A simple arrow that represents a CLICK action by default.
Specific Event. To represent a user action with an event, note it above the arrow.
Combined Events. Sometimes users perform more complex actions such as holding a key and clicking.
Real World Actions. User actions can also happen outside of an interface.

事件綁定 Event Binding

綁定至某元素. 以圓點註記某事件綁定至某個特定元素
綁定至全體. 某事件綁定至整個視窗
綁定至某區域. 某事件綁定至螢幕上的某個特定區域

To Element. A rounded starting point denotes an event bound to a particular drawn element.
To Anywhere. An event is attached to the full window.
To Area. An event is bound to a specific area on the screen.

轉場 Transitions

未指定效果. 預設為直接切換、沒有延遲
延遲. 在轉場前延遲一段時間
耗時. 轉場效果完成需花費的時間
效果. 有兩種效果,包括 FADE(淡入淡出)及 SLIDE(滑動切換)

Unspecified Transition. A default transition is instant without delay.
Delay. The time it takes before a transition starts.
Duration. The time it takes for a transition to complete.
Effect. Two possible effects include: FADE, and SLIDE.

強調 Emphasis Techniques

強調. 以 10% 灰色指明重要的元素
選取中. 以 30% 灰色指明某被選取中的項目

Emphasis. Indicating an important element with a 10% grey.
Selected State. Showing a selected item with a 30% grey.

頁面組織 Page Organization

概念標題. 每頁都可以在左上角放一個標題,多頁的概念以羅馬數字標註頁數
變化. 每個概念都可以有多重變化,以英文字母標註、按序排列

Concept Title. Each page can contain a title in the top left. For multi-page concepts, use roman numerals as a suffix.
Variations. Each concept can have multiple variations which are referred to alphabetically.

進階標記 Advanced Notations

基礎條件式. 某個到下個畫面前必須完成的條件
自動進行的序列動作. 使用黑色箭頭標註無需使用者操作、會自動切換的幾個畫面
加上「或者」的條件式. 組合「如果…就…,不然就….」的 IF/ELSE 條件式

Basic Condition. If something is to be met before the next screen.
Automatic Sequence. Use a black arrow(s) if there is a sequence of screens that are shown automatically to the user in an order.
Condition with Else. Conditional representation of an IF/ELSE combination.

快速繪製技巧 Rapid Tactics

滑鼠拖放. 簡要畫出滑鼠拖放互動行為
點選多處. 使用同一個螢幕畫面,畫出點選多處的狀況
變化區域. 僅畫出有變化的區域,螢幕的其他部分就視同前一個螢幕
放大. 繪出至少一個邊角,放大繪製其中的介面重點部分

Drag&Drop. Quickly show a drag and drop interaction.
Multi Clicks. Use the same screen to show two or more clicks at the same time.
Delta Box. Only draw items which changed, suggesting that previous screen elements will also appear.
Zooming. Draw at least one corner to zoom in and close up on what is important in the interface.

Credits

Linowski Interaction Design http://www.linowski.ca/sketching & all those who shared their work on Wireframes Magazine.
This work is licenced under the Creative Commons Attribution-Share Alike 2.5 Canada License http://creativecommons.org/licenses/by-sa/2.5/ca/

Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明