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

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

Transcript

1. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ10ষ - ϞόΠϧ΁ͷରԠ ҆઒ ཁฏ / @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. ୈ10ষͰֶͿ͜ͱ ϞόΠϧ༻αΠτ੍࡞ʹؔ͢Δ؀ڥతͳ՝୊ ͓ΑͼΞϓϩʔνʹ͍ͭͯཧղ͢Δɽ·ͨɼ ͦͷ۩ମతͳσβΠϯύλʔϯʹֶ͍ͭͯͿɽ
5. ϞόΠϧαΠτ੍࡞ʹؔ͢Δ ՝୊ɾΞϓϩʔν ֶ͍ͭͯͿ. ϞόΠϧαΠτΛ੍࡞͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
6. ϞόΠϧαΠτ੍࡞ʹؔ͢Δ ՝୊ɾΞϓϩʔν ֶ͍ͭͯͿ. ϞόΠϧαΠτΛ੍࡞͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
7. 1. ͪͬΆ͚ͳը໘αΠζ 2. ͞·͟·ͳը໘αΠζ 3. λονεΫϦʔϯ 4. ςΩετೖྗͷ೉͠͞ 5. ෺ཧతͳݫ͍͠؀ڥ 6. ιʔγϟϧͳӨڹͱ ݶΒΕͨ஫ҙྗ ϞόΠϧ޲͚σβΠϯͷ̒ͭͷ՝୊
8. 1. ͪͬΆ͚ͳը໘αΠζ ᩵୔඼Λฒ΂Δ༨༟͸ͳ͍ɻຊ࣭ʹؔΘΒͳ͍෦෼͸ ͖ͬͺΓࣺͯΔ͔ɺαΠτͷԞʹ͠·͓ͬͯ͜͏ɻ
9. 2. ͞·͟·ͳը໘ͷ෯ ϖʔδΛεΫϩʔϧ͠ͳ͕ΒݟΔͷ͸໘౗Ͱ͸ͳ͍͕ɼ ฏۉతͳը໘ͷԣ෯ʹ͍ͭͯ͸े෼ʹߟ͑Δඞཁ͕͋Δ. cf. Effective Design Multiple Screen Size http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
10. 3. λονεΫϦʔϯ “খ͞ͳλʔήοτʹࢦͰਖ਼֬ʹ৮ΕΔͷ͸େมͩ. ϦϯΫ΍Ϙλϯ͸ָʹλονͰ͖Δ͘Β͍େ͖͘͠Α͏.”
11. 4. ςΩετೖྗͷ೉͠͞ λονεΫϦʔϯͷΩʔϘʔυೖྗΛ޷ΉϢʔβ͸গͳ͍ (*). ੵۃతʹ Auto Completion ΍ Good Defaults Λ࠾༻͠Α͏. * ೔ຊͰ͸ɺٯʹϞόΠϧ୺຤ͷΩʔϘʔυೖྗΛ޷ΉϢʔβͷํ͕ଟ͍͔΋͠Εͳ͍ɻ ≧
12. 5. ෺ཧతʹݫ͍͠؀ڥ ϞόΠϧσόΠε͸͋ΒΏΔ৔ॴͰ࢖ΘΕ͍ͯΔ. ޫྔ΍पғͷ૽Իͷҧ͍, ৼಈͷӨڹʹ͍ͭͯߟ͑Α͏. େࣄͳ͜ͱ͸ɺϛεΛڐ༰ͯ͠ɺϛεΛ؆୯ʹ௚ͤΔΑ͏ʹσβΠϯ͢Δ͜ͱ.
13. 6. ιʔγϟϧͳӨڹͱݶΒΕͨ஫ҙྗ ϞόΠϧϢʔβ͸ɼେ఍, ଞͷ͜ͱΛ͠ͳ͕ΒαΠτΛݟΔ. ؆୯ʹૉૣ͘, தஅ/࠶։͕ग़དྷͯ, Ұ໨Ͱ෼͔ΔΑ͏ʹ͢Δ.
14. 1. ͪͬΆ͚ͳը໘αΠζ 2. ͞·͟·ͳը໘αΠζ 3. λονεΫϦʔϯ 4. ςΩετೖྗͷ೉͠͞ 5. ෺ཧతͳݫ͍͠؀ڥ 6. ιʔγϟϧͳӨڹͱ ݶΒΕͨ஫ҙྗ ϞόΠϧ޲͚σβΠϯͷ̒ͭͷ՝୊
15. 1. ϞόΠϧϢʔβʹ͸ɺ࣮ࡍͷͱ͜ΖԿ͕ඞཁͳͷ͔ʁ 2. ແବΛݮΒͯ͠αΠτ΍ΞϓϦͷຊ࣭Λࣔ͢. ϞόΠϧ޲͚σβΠϯ΁ͷ̑ͭͷΞϓϩʔν
16. 1. ϞόΠϧϢʔβʹ͸ɺ࣮ࡍͷͱ͜ΖԿ͕ඞཁͳͷ͔ʁ 2. ແବΛݮΒͯ͠αΠτ΍ΞϓϦͷຊ࣭Λࣔ͢. 3. ՄೳͳΒ͹ɺσόΠεͷϋʔυ΢ΣΞΛར༻͢Δ. 4. ίϯςϯπΛϦχΞϥΠζ͢Δ. 5. Α࣮͘ߦ͞ΕΔҰ࿈ͷΠϯλϥΫγϣϯΛ࠷దԽ͢Δ. ϞόΠϧ޲͚σβΠϯ΁ͷ̑ͭͷΞϓϩʔν
17. ࢀߟʹ͢΂͖ࣄྫ JetBlue RuthsChris Boston Fidelity
18. ϞόΠϧαΠτ੍࡞ʹؔ͢Δ ՝୊ɾΞϓϩʔν ֶ͍ͭͯͿ. ϞόΠϧαΠτΛ੍࡞͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
19. ϞόΠϧαΠτ੍࡞ʹؔ͢Δ ՝୊ɾΞϓϩʔν ֶ͍ͭͯͿ. ϞόΠϧαΠτΛ੍࡞͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
20. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
21. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
22. 1. Vertical Stack / ॎํ޲ͷελοΫ ESPN / Google News / REI ίϯςϯπΛॎ̍ΧϥϜͰߏ੒͢Δ. ԣฒͼͷཁૉΛۃྗ࢖༻͠ͳ͍.
23. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
24. 2. Filmstrip / өࣸεϥΠυ iPhone ͷఱؾΞϓϦ τοϓϨϕϧͷෳ਺ͷϖʔδΛԣฒͼʹͯ͠, ࠨӈͷεϫΠϓૢ࡞Ͱ̍౓ʹ̍ϖʔδͣͭݟͤΔϫβ
25. 3. Touch Tools / λονදࣔπʔϧ iPhone Image Viewer ը໘λον΍ΩʔΛԡ͢ૢ࡞ʹԠͯ͡ɼ πʔϧΛΦʔόʔϨΠͰදࣔ͢Δϫβ
26. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
27. 4. Bottom Navigation / Լ෦φϏήʔγϣϯ At the bottom of Amazon.com Google Image Search άϩʔόϧφϏήʔγϣϯΛ, ϖʔδͷҰ൪Լ(εΫϩʔϧ͠ͳ͍ͱݟ͑ͳ͍)ʹ഑ஔ͢Δϫβ
28. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
29. 5. Thumbnail-and-Text List / αϜωΠϧͱςΩετͷϦετ Yahoo! News Boston.com Mashable બ୒Մೳͳ߲໨ͷϦετΛ, ߲໨͝ͱʹ αϜωΠϧը૾ʴςΩετͰදࣔ͢Δϫβ
30. 5. Thumbnail-and-Text List / αϜωΠϧͱςΩετͷϦετ iPhone App Store બ୒Մೳͳ߲໨ͷϦετΛ, ߲໨͝ͱʹ αϜωΠϧը૾ʴςΩετͰදࣔ͢Δϫβ
31. 6. Infinite List / ແݶϦετ Facebook iTunes ௕͍ϦετͷҰ൪Լʹɼ͞Βʹଟ͘ͷ߲໨ΛಡΈࠐΜͰ Ϧετʹ௥Ճ͢ΔͨΊͷϘλϯΛ഑ஔ͢Δϫβ
32. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
33. 7. Generous Borders / ΏͱΓͷ͋ΔϘʔμʔ Best Western λονεΫϦʔϯ౥ࡌσόΠεͰɺϘλϯ΍ϦϯΫɺͦͷଞͷλοϓՄೳͳ ίϯτϩʔϧͷपғͷײ֮΍༨നΛ޿࣋ͨͤ͘Δϫβ
34. 8. Text Clear Button / ςΩετফڈϘλϯ Safari URI Input ϘλϯΛ̍ճλοϓ͢Δૢ࡞ʹΑͬͯ, ςΩετϑΟʔϧυͷ಺༰Λফڈ͢Δϫβ
35. 9. Loading Indicators / ಡΈࠐΈதͷΠϯδέʔλʔ iPhone ͷגՁΞϓϦ ϖʔδ·ͨ͸ϖʔδ಺ͷཁૉΛಡΈࠐΉͱ͖ʹ, ͦΕ͕දࣔ͞ΕΔ৔ॴͰϓϩάϨεදࣔΛߦ͏ϫβ
36. 10. Richly Connected Apps / ๛෋ͳΞϓϦ࿈ܞ Freedom Trail ి࿩ػೳ΍஍ਤɼϒϥ΢βͱ͍ͬͨଞͷΞϓϦΛ௚઀ݺͼग़͢ϦϯΫΛ ഑ஔͯ͠ɼϢʔβͷݱࡏͷঢ়گʹݟ߹ͬͨσʔλΛ༧උೖྗ͢Δϫβ
37. 11. Streamlined Branding / εϦϜԽͨ͠ϒϥϯσΟϯά Mobile vs. Website of JetBlue ૊৫ͷϩΰ΍৭ɼͦͷଞͷϒϥϯσΟϯάཁૉΛ, ૉૣ͘ಡΈࠐΊΔঢ়ଶʹͯ͠࠶ར༻͢Δϫβ
38. 1. Vertical Stack 2. Filmstrip 3. Touch Tools 4. Bottom Navigation 5. Thumbnail-and-Text List 6. Infinite List 7. Generous Borders 8. Text Clear Button 9. Loading Indicators 10.Richly Connected Apps 11.Streamlined Branding ϞόΠϧαΠτ/ΞϓϦͷσβΠϯύλʔϯ
39. ϞόΠϧαΠτ੍࡞ʹؔ͢Δ ՝୊ɾΞϓϩʔν ֶ͍ͭͯͿ. ϞόΠϧαΠτΛ੍࡞͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
40. ୈ10ষͰֶͿ͜ͱ ϞόΠϧ༻αΠτ੍࡞ʹؔ͢Δ؀ڥతͳ՝୊ ͓ΑͼΞϓϩʔνʹ͍ͭͯཧղ͢Δɽ·ͨɼ ͦͷ۩ମతͳσβΠϯύλʔϯʹֶ͍ͭͯͿɽ
41. @yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ͸ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓ೔ͷൃදʹ͍ͭͯ
42. Լ๺୔Φʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ ୈ10ষ - ϞόΠϧ΁ͷରԠ ҆઒ ཁฏ / @yasulab https://www.facebook.com/groups/di2e.study/