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

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

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ4ճɹ4ষ - ϖʔδΛߏ੒͢Δ ҆઒ ཁฏ / @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. 4ষʹॻ͍ͯ͋Δ͜ͱ ʮϖʔδͷҙຯ΍ૢ࡞Λ఻ୡ͢ΔͨΊʹɺ ɹ ϖʔδ಺ͰϢʔβͷ஫ҙΛ͍͔ʹૢΔ͔ʯ
5. 4ষʹॻ͍͍ͯͳ͍͜ͱ • ϖʔδͷҙຯ΍ૢ࡞ํ๏ΛͲ͏ఆٛ͢Δ͔ʁ(1~2) • ϨΠΞ΢τΛܾΊͨޙɺ֤ηΫγϣϯʹ ͲΜͳίϯςϯπΛೖΕΔ΂͖͔ʁ(5~11)
6. Ϣʔβͷ஫ҙΛૢΔͨΊʹ, ϖʔδϨΠΞ΢τͷجૅΛֶͿ. Ϣʔβͷ஫ҙΛૢΔͨΊͷ, σβΠϯύλʔϯΛ஌Δ.
7. Ϣʔβͷ஫ҙΛૢΔͨΊʹ, ϖʔδϨΠΞ΢τͷجૅΛֶͿ. Ϣʔβͷ஫ҙΛૢΔͨΊͷ, σβΠϯύλʔϯΛ஌Δ.
8. ϖʔδϨΠΞ΢τͷجૅ 1. Կ͕ॏཁͳͷ͔ʁ →ϖʔδཁૉͷ૬ରతͳॏཁ౓ 2. Կ͕ؔ܎͍ͯ͠Δͷ͔ʁ →ϖʔδཁૉͷཁૉؒͷؔ܎ 3. ࣍͸ԿΛݟΕ͹͍͍ͷ͔ʁ →ࢹ֮తͳྲྀΕʢPath Layoutʣ
9. 1. Կ͕ॏཁͳͷ͔ʁ “ࠓσβΠϯ͍ͯ͠ΔϖʔδͰ࠷΋ॏཁͳ΋ͷ͸Կ͔ʁ” P.132 ॏཁ౓Λදݱ͢Δྫɿࢹ֮తͳ΢ΣΠτ
10. 1. Կ͕ॏཁͳͷ͔ʁ ॏཁ౓Λදݱ͢ΔҰൠతͳํ๏ 1. ີ౓ Positive space : Negative space ͷൺ཰ 2. എܠ৭ ίϯτϥετͷڧऑ 3. ҐஔͱαΠζ ϖʔδͷ্෦/தԝ/Լ෦ͷҐஔ 4. ϦζϜ ܁Γฦ͠ͷճ਺
11. 1. Կ͕ॏཁͳͷ͔ʁ ଞɺॏཁ౓Λදݱ͢Δํ๏ʗམͱ݀͠ 1. ਓ෺ͷإࣸਅ ਓ෺ͷ໨ͱɺ໨ઢͷઌʹ༠ಋ͞Ε΍͍͢ɻ 2. Ad blindness ޿ࠂͬΆ͍ཁૉ͸ݟམͱ͞Ε΍͍͢ɻ
12. 2. Կ͕ؔ܎͍ͯ͠Δͷ͔ʁ ʮҰ؏ੑΛอͭσβΠϯ vs. ଞͱҟͳΔσβΠϯʯ Λ࢖͍෼͚ͯɺϖʔδཁૉؒͷؔ܎Λදݱ͢Δɻ “͋Δ߲໨͚͕ͩɺͦͷ஥ؒΑΓ΋’ಛघ’ͳΒ͹Ͳ͏͢Δ΂͖͔ʁ” P.134
13. 2. Կ͕ؔ܎͍ͯ͠Δͷ͔ʁ ϖʔδཁૉؒͷؔ܎Λදݱ͢Δํ๏ 1. άϧʔϓԽ 2. ϨΠΞ΢τ 3. ഑৭ 4. ॱংɾ੔ྻ
14. 2. Կ͕ؔ܎͍ͯ͠Δͷ͔ʁ ଞɺϖʔδཁૉؒͷؔ܎Λදݱ͢Δํ๏ ɾCaption & Comment image, subtext, comment ɾแؚ ਌ࢠؔ܎Λදݱ
15. 3. ࣍͸ԿΛݟΕ͹͍͍ͷ͔ʁ ஫໨఺͔ΒɼΑΓॏཁ౓ͷ௿͍৘ใ΁ͱࢹઢΛಋ͘. “Ϣʔβ͸·ͣͲ͜ʹ໨Λ޲͚ͨ͘ͳΔͷ͔ɺͦΕ͸ͳ͔ͥ?” P.138 ࢹ֮తͳྲྀΕͷ࡞Γํɿ
16. 3. ࣍͸ԿΛݟΕ͹͍͍ͷ͔ʁ ଞɺࢹ֮తͳྲྀΕͷ࡞Γํ 1. ྲྀΕͷத͔Β֎͢ 2. ྲྀΕͷ࠷ޙʹ”͜ΕͰ͓͠·͍”Λஔ͘.
17. 3. ࣍͸ԿΛݟΕ͹͍͍ͷ͔ʁ ྫ: ஫໨఺ (Focal Point) Λઃஔ͗͢͠Δͱ...
18. ϖʔδϨΠΞ΢τͷجૅ 1. Կ͕ॏཁͳͷ͔ʁ →ϖʔδཁૉͷ૬ରతͳॏཁ౓ 2. Կ͕ؔ܎͍ͯ͠Δͷ͔ʁ →ϖʔδཁૉͷཁૉؒͷؔ܎ 3. ࣍͸ԿΛݟΕ͹͍͍ͷ͔ʁ →ࢹ֮తͳྲྀΕʢPath Layoutʣ
19. ϖʔδϨΠΞ΢τͷࢀߟจݙ
20. Ϣʔβͷ஫ҙΛૢΔͨΊʹ, ϖʔδϨΠΞ΢τͷجૅΛֶͿ. Ϣʔβͷ஫ҙΛૢΔͨΊͷ, σβΠϯύλʔϯΛ஌Δ.
21. Ϣʔβͷ஫ҙΛૢΔͨΊʹ, ϖʔδϨΠΞ΢τͷجૅΛֶͿ. Ϣʔβͷ஫ҙΛૢΔͨΊͷ, σβΠϯύλʔϯΛ஌Δ.
22. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
23. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
24. 1. Visual Framework / ࢹ֮తͳϑϨʔϜϫʔΫ JAQK ৭ɾϑΥϯτɾจମͱݴ༿ݣ͍ΛશମΛ௨ͯ͠ڞ௨Խ͢Δ
25. 2. Center Stage / தԝεςʔδ Newfangledʢϒϩάʣ ଞͷྫ: Google Docs, Flash Editor,
26. 3. Grid of Equals / ౳෼άϦου Nike ଞͷྫ: Hulu, CNN, MapQuest, IBM fotter
27. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
28. 4. Titled Sections / λΠτϧ෇͖ηΫγϣϯ JetBlue ଞͷྫ: Amazon account setting, iPhone Utility
29. ɹ5. Module Tabs / Ϟδϡʔϧผλϒ MapQuest ଞͷྫ: Windows 7 Excel - Ribon, iWeb, SourceForge
30. 6. Accordion / ΞίʔσΟΦϯ CNN ͷαΠυόʔ ଞͷྫ: WordͷύϨοτ, PicasaαΠυόʔ, Chrome Inspector, Yahoo! Developer Netowrk
31. 7. Collapsible Panels / ։ดՄೳύωϧ GoogleϚοϓ ଞͷྫ: MSNBCίϝϯτɺFirefox Bookmark SidebarɺYouTube
32. 8. Movable Panels / ҠಈՄೳύωϧ iGoogle ଞͷྫ:MyYahoo!, MATLAB, Photoshop
33. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
34. 9. Right/Left Alignment / ӈἧ͑ͱࠨἧ͑ Mac OS ͷΞυϨεϒοΫ ଞͷྫ: Mac OSͷγεςϜ؀ڥઃఆ
35. 10. Diagonal Balance / ର֯ઢόϥϯε Starbucks ͷWiFiը໘ ଞͷྫ: Windows 7 ͷίϯτϩʔϧύωϧ, Mini Cooper ͷ΢ΣϒαΠτ(2005)
36. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
37. 11. Responsive Disclosure / ൓Ԡతͳ௥Ճදࣔ AutoTrader ଞͷྫ: KayakͳͲͷߤۭ݊ൢചαΠτ, Google Docs ͷϑΥʔϜ࡞੒ը໘
38. 12. Responsive Enabling / ൓ԠతͳΠωʔϒϧԽ TurboTax ଞͷྫ: Mac OSͷγεςϜ؀ڥઃఆ, LexusͷφϏγεςϜ
39. 13. Liquid Layout / ϦΩουϨΠΞ΢τ Drupal.org ଞͷྫ: Mac OS ͷμΠΞϩά, Google DocsͷεϥΠυγϣʔ
40. 1. Visual Framework 2. Center Stage 3. Grid of Equals 4. Titled Sections 5. Module Tabs 6. Accordion 7. Collapsible Panels 8. Movable Panels 9. Right/Left Alignment 10. Diagonal Balance 11. Responsive Disclosure 12. Responsive Enabling 13. Liquid Layout Ϣʔβͷ஫ҙΛૢΔͨΊͷσβΠϯύλʔϯ
41. Ϣʔβͷ஫ҙΛૢΔͨΊʹ, ϖʔδϨΠΞ΢τͷجૅΛֶͿ. Ϣʔβͷ஫ҙΛૢΔͨΊͷ, σβΠϯύλʔϯΛ஌Δ.
42. 4ষʹॻ͍ͯ͋Δ͜ͱ ʮϖʔδͷҙຯ΍ૢ࡞Λ఻ୡ͢ΔͨΊʹɺ ɹ ϖʔδ಺ͰϢʔβͷ஫ҙΛ͍͔ʹૢΔ͔ʯ
43. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
44. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ4ճɹ4ষ - ϖʔδΛߏ੒͢Δ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/