デザイニング・インターフェイス勉強会 第6章「アクションとコマンド」

777 views

Published on

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
777
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

デザイニング・インターフェイス勉強会 第6章「アクションとコマンド」

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

×