デザイニング・インターフェイス勉強会 第６回

デザイニング・インターフェイス勉強会
http://www.facebook.com/groups/di2e.study/

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ 6ষ - ΞΫγϣϯͱίϚϯυ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/
2. σβΠχϯάɾΠϯλʔϑΣʔε ୈ2൛ ύλʔϯʹΑΔ࣮ફతΠϯλϥΫγϣϯσβΠϯ http://amzn.to/LfZuHZ
3. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
4. 6ষͰֶͿ͜ͱ 1. ਖ਼͍͠ΞΫγϣϯΛར༻Ͱ͖ΔΑ͏ʹͯ͠, 2. ͦΕΒʹΑ͍ϥϕϧΛ෇͚, 3. ݟ͚ͭ΍͘͢͠, 4. ΞΫγϣϯͷͭͳ͕ΓΛαϙʔτ͢Δ͜ͱ.
5. Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
6. Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
7. ΞΫγϣϯΛఏࣔ͢ΔҰൠతͳ 8+4 ͷํ๏ ̔ͭͷݟ͑ΔΞΫγϣϯ ʴ ̐ͭͷݟ͑ͳ͍ΞΫγϣϯ
8. 1.Button 2.Menu Bar 3.Popup Menu 4.Dropdown Menu 5.Toolbar 6.Link 7.Action Panel 8.Mouseover Tool ̔ͭͷݟ͑ΔΞΫγϣϯ
9. 1. Button ʮ͜͜ΛΫϦοΫͯ͠Ͷʂʯͱૌ͑ΔͨΊͷ΋ͷ Google Docs ʹ͓͚ΔϘλϯ
10. 2. Menu Bar ΞϓϦέʔγϣϯ಺Ͱ༻͍ΔΞΫγϣϯͷ׬શͳू߹. Keynote
11. 3. Popup Menu Ϛ΢εͷӈΫϦοΫ΍δΣενϟͰݺͼग़ͤΔ΋ͷ. Mac OS X (desktop) keynote
12. 4. Dropdown Menu ϑΥʔϜͰબ୒ࢶΛબͿͨΊͷ΋ͷ ʢ ≠ ΞΫγϣϯΛ࣮ߦ͢ΔͨΊͷ΋ͷʣ Facebook Post
13. 5. Toolbar ΞΠίϯΛ༻͍ͨϘλϯ͕ฒΜͩࡉ௕͍ߦ Blogger - Post
14. 6. Link ΫϦοΧϒϧͩͱ͍͏ҹ৅ΛߴΊΔ΋ͷ ৭͖ͭ(ओʹ੨৭ʣͷςΩετ΍ɺMouseoverͰϙΠϯλͷܗঢ়Λม͑ͯԼઢΛҾ͘ɺͳͲ
15. 7. Action Panel ը૾ͰΞΫγϣϯΛࣔ͢΋ͷ iPhoto
16. 8. Mouseover Tool ෳ਺ͷΞΫγϣϯΛԿ౓΋දࣔͤ͞ͳ͍ͨΊͷ΋ͷ Tail Gamers http://tail-gamers.herokuapp.com/
17. 1.Button 2.Menu Bar 3.Popup Menu 4.Dropdown Menu 5.Toolbar 6.Link 7.Action Panel 8.Mouseover Tool ̔ͭͷݟ͑ΔΞΫγϣϯ
18. 9. Double Click 10. Keyboard Action 11. Drag & Drop 12. Input Command 4ͭͷݟ͑ͳ͍ΞΫγϣϯ
19. 9. Double Click ͜ͷ߲໨Λ։͘ or σϑΥϧτͷॲཧΛ࣮ߦ͢Δ΋ͷ Keynote double click
20. 10. Keyboard Action ‘Ctrl-s => save’ ͷΑ͏ͳप஌ͷ keyboard shortcut keynote -> File
21. 11. Drag & Drop ͋ΔϑΝΠϧΛͦͷΞϓϦέʔγϣϯͰ։ͨ͘Ίͷ΋ͷ Gmail -> Compose email -> D&D file e.g. ͜ΕΛ͜͜ʹҠಈ͢Δɼ͜ͷૢ࡞ΛͦΕʹରͯ͠ߦ͏.
22. 12. Input Command શͯͷΞΫγϣϯʹରͯࣗ͠༝ͳܗࣜͰΞΫηεͤ͞Δ΋ͷ Gmail -> type ‘?’ (vim-like shortcuts)
23. 9. Double Click 10. Keyboard Action 11. Drag & Drop 12. Input Command 4ͭͷݟ͑ͳ͍ΞΫγϣϯ
24. ΞΫγϣϯΛఏࣔ͢ΔҰൠతͳ 8+4 ͷํ๏ ̔ͭͷݟ͑ΔΞΫγϣϯ ʴ ̐ͭͷݟ͑ͳ͍ΞΫγϣϯ
25. ׆༻ྫɿGrageBand ʹ͓͚ΔΞΫγϣϯ
26. Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
27. Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
28. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
29. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
30. 1. Button Group / Ϙλϯͷάϧʔϓ MS Word / Adobe Flash Builder ؔ࿈ͷ͋ΔΞΫγϣϯΛάϧʔϓԽͯ͠੔ཧ͢Δϫβ
31. 2. Hover Tools / Ϛ΢εΦʔόʔදࣔπʔϧ favtile ର৅ͱͳΔ߲໨ʹߦ͏ΞΫγϣϯΛɺϚ΢εΦʔόʔ͢Δ·Ͱඇදࣔʹ͢Δϫβ
32. 3. Action Panels / ΞΫγϣϯύωϧ Picasa Ͳͷ߲໨ʹ΋͢΂ͯͷΞΫγϣϯΛද͍͕ࣔͨ͠, ϙοϓΞοϓͰදࣔ͢Δʹ͸਺͕ଟ͗͢Δͱ͖ͷϫβ
33. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
34. 4. Prominent ‘Done’ Button / ໨ཱͭʮ׬ྃʯϘλϯ JetBlue / Kayak / Southwest ࢹ֮తͳྲྀΕͷऴྃ஍఺ʹɺ໨ཱͭϘλϯΛ഑ஔ͢Δϫβ
35. 5. Smart Menu Items / ಈతͳϝχϡʔ߲໨ Gmail Menu ϝχϡʔͷϥϕϧΛಈతʹมߋ͢Δϫβ
36. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
37. 6. Preview / ϓϨϏϡʔ Mac OS X - Print ͋ΔΞΫγϣϯΛ࣮ߦͨ͠ΒԿ͕ى͜Δ͕ɺࣄલʹ஌ΒͤΔϫβ
38. 7. Progress Indicator / ϓϩάϨεදࣔ Mac OS X - Copy ࣌ؒΛཁ͢Δॲཧʹ͓͍ͯɺͲΕ͘Β͍ਐߦ͔ͨ͠ΛϢʔβʹࣔ͢ϫβ
39. 8. Cancelability / Ωϟϯηϧػೳ Adobe AIR - Install Dialog ࣌ؒΛཁ͢Δॲཧʹ͓͍ͯɺ෭࡞༻Λى͜͢͜ͱͳ͘ଈ࠲ʹΩϟϯηϧ͢Δϫβ
40. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
41. 9. Multi-Level Undo / ϚϧνϨϕϧͷΞϯυΡ Photoshop Ϣʔβ͕࣮ߦͨ͠Ұ࿈ͷΞΫγϣϯΛɺٯॱʹ໭ͤΔํ๏Λ༻ҙ͢Δ
42. 10. Command History / ૢ࡞ͷཤྺ Mac OS X - Terminal ΞΫγϣϯΛݟ͑ΔܗͰه࿥͓ͯ͘͠
43. 11. Macros / ϚΫϩ Max OS X - Terminal ࿈ଓ͢ΔΞΫγϣϯΛʮه࿥ʯ͠ɺ͍ͭͰ΋ʮ࠶ੜʯͰ͖Δํ๏Λ༻ҙ͢Δ
44. 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 ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
45. Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
46. 6ষͰֶͿ͜ͱ 1. ਖ਼͍͠ΞΫγϣϯΛར༻Ͱ͖ΔΑ͏ʹͯ͠, 2. ͦΕΒʹΑ͍ϥϕϧΛ෇͚, 3. ݟ͚ͭ΍͘͢͠, 4. ΞΫγϣϯͷͭͳ͕ΓΛαϙʔτ͢Δ͜ͱ.
47. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
48. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ 6ষ - ΞΫγϣϯͱίϚϯυ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/