Upload
yohei-yasukawa
View
533
Download
2
Embed Size (px)
DESCRIPTION
Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/
Citation preview
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会6章 - アクションとコマンド
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
6章で学ぶこと
1. 正しいアクションを利用できるようにして,2. それらによいラベルを付け,3. 見つけやすくし,4. アクションのつながりをサポートすること.
ユーザに対してアクションを提示する一般的な方法について学ぶ.
アクションを提示するための,具体的なデザインパターンを学ぶ.
ユーザに対してアクションを提示する一般的な方法について学ぶ.
アクションを提示するための,具体的なデザインパターンを学ぶ.
アクションを提示する一般的な 8+4 の方法
8つの見えるアクション+
4つの見えないアクション
1.Button
2.Menu Bar
3.Popup Menu
4.Dropdown Menu
5.Toolbar
6.Link
7.Action Panel
8.Mouseover Tool
8つの見えるアクション
1. Button
「ここをクリックしてね!」と訴えるためのもの
Google Docs におけるボタン
2. Menu Bar
アプリケーション内で用いるアクションの完全な集合.
Keynote
3. Popup Menu
マウスの右クリックやジェスチャで呼び出せるもの.
Mac OS X (desktop) keynote
4. Dropdown Menu
フォームで選択肢を選ぶためのもの( ≠ アクションを実行するためのもの)
Facebook Post
5. Toolbar
アイコンを用いたボタンが並んだ細長い行
Blogger - Post
6. Link
クリッカブルだという印象を高めるもの色つき(主に青色)のテキストや、Mouseoverでポインタの形状を変えて下線を引く、など
7. Action Panel
画像でアクションを示すもの
iPhoto
8. Mouseover Tool
複数のアクションを何度も表示させないためのもの
Tail Gamershttp://tail-gamers.herokuapp.com/
1.Button
2.Menu Bar
3.Popup Menu
4.Dropdown Menu
5.Toolbar
6.Link
7.Action Panel
8.Mouseover Tool
8つの見えるアクション
9. Double Click
10. Keyboard Action
11. Drag & Drop
12. Input Command
4つの見えないアクション
9. Double Click
この項目を開く or デフォルトの処理を実行するもの
Keynote
double click
10. Keyboard Action
‘Ctrl-s => save’ のような周知の keyboard shortcut
keynote -> File
11. Drag & Drop
あるファイルをそのアプリケーションで開くためのもの
Gmail -> Compose email -> D&D file
e.g. これをここに移動する,この操作をそれに対して行う.
12. Input Command
全てのアクションに対して自由な形式でアクセスさせるもの
Gmail -> type ‘?’(vim-like shortcuts)
9. Double Click
10. Keyboard Action
11. Drag & Drop
12. Input Command
4つの見えないアクション
アクションを提示する一般的な 8+4 の方法
8つの見えるアクション+
4つの見えないアクション
活用例:GrageBand におけるアクション
ユーザに対してアクションを提示する一般的な方法について学ぶ.
アクションを提示するための,具体的なデザインパターンを学ぶ.
ユーザに対してアクションを提示する一般的な方法について学ぶ.
アクションを提示するための,具体的なデザインパターンを学ぶ.
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
1. Button Group / ボタンのグループ
MS Word / Adobe Flash Builder
関連のあるアクションをグループ化して整理するワザ
2. Hover Tools / マウスオーバー表示ツール
favtile
対象となる項目に行うアクションを、マウスオーバーするまで非表示にするワザ
3. Action Panels / アクションパネル
Picasa
どの項目にもすべてのアクションを表示したいが,ポップアップで表示するには数が多すぎるときのワザ
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
4. Prominent ‘Done’ Button / 目立つ「完了」ボタン
JetBlue / Kayak / Southwest
視覚的な流れの終了地点に、目立つボタンを配置するワザ
5. Smart Menu Items / 動的なメニュー項目
Gmail Menu
メニューのラベルを動的に変更するワザ
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
6. Preview / プレビュー
Mac OS X - Print
あるアクションを実行したら何が起こるが、事前に知らせるワザ
7. Progress Indicator / プログレス表示
Mac OS X - Copy
時間を要する処理において、どれくらい進行したかをユーザに示すワザ
8. Cancelability / キャンセル機能
Adobe AIR - Install Dialog
時間を要する処理において、副作用を起こすことなく即座にキャンセルするワザ
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
9. Multi-Level Undo / マルチレベルのアンドゥ
Photoshop
ユーザが実行した一連のアクションを、逆順に戻せる方法を用意する
10. Command History / 操作の履歴
Mac OS X - Terminal
アクションを見える形で記録しておく
11. Macros / マクロ
Max OS X - Terminal
連続するアクションを「記録」し、いつでも「再生」できる方法を用意する
1. Button Groups
2. Hover Tools
3. Action Panels
4. Prominent ‘Done’ Button
5. Smart Menu Items
6. Preview
7. Progress Indicator
8. Cancelability
9. Multi-Level Undo
10.Command History
11.Macros
アクションを提示する際のデザインパターン
ユーザに対してアクションを提示する一般的な方法について学ぶ.
アクションを提示するための,具体的なデザインパターンを学ぶ.
6章で学ぶこと
1. 正しいアクションを利用できるようにして,2. それらによいラベルを付け,3. 見つけやすくし,4. アクションのつながりをサポートすること.
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会6章 - アクションとコマンド
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/