Upgrade to Pro — share decks privately, control downloads, hide ads and more …

インターフェイスデザインとの向き合い方(公開版)/ How to face interface design

usagimaru
December 10, 2019

インターフェイスデザインとの向き合い方(公開版)/ How to face interface design

Goodpatch Engineer Meetup Vol.5 で登壇した際のスライドです。iOS Developerだった者がどのようにしてUIデザイナーとして取り組んでいったのか、Interface Architectの動き方や自己の紹介を兼ねながら、エンジニアリングの発想を活かすUI設計の観点を簡単にお話しいたしました。

https://goodpatch.connpass.com/event/156462/

usagimaru

December 10, 2019
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. © 2019 Satori Maru / @usagimaruma. ιϑτ΢ΣΞσβΠφʔʗΠϯλʔϑΣΠεΞʔΩςΫτ ݩiOS Developer Interface

    Design / Interaction Design / Information Architecture @usagimaru @usagimaruma @usagimaru Interaction Design / macOS / iOS / Sketch / Typography #gpeng Goodpatch Engineer Meetup Vol.5 usagimaru
  2. © 2019 Satori Maru / @usagimaruma. Goodpatch UI Design Advent

    Calendar 2019 #gpeng Goodpatch Engineer Meetup Vol.5 MacͱωΠςΟϒΠϯλʔϑΣΠεͱGUIͷݪཧʹؔ͢Δߟ࡯ https://note.com/usagimaruma/n/n03bd95b99dfa
  3. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ର৅ͷੈք ࡞༻ ࡞༻

    User Interface #gpeng Goodpatch Engineer Meetup Vol.5
  4. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ର৅ͷੈք ૬ޓ࡞༻ User

    Interface Interaction #gpeng Goodpatch Engineer Meetup Vol.5
  5. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ιϑτ΢ΣΞͷੈք ૬ޓ࡞༻ Interaction

    User Interface Interaction #gpeng Goodpatch Engineer Meetup Vol.5
  6. OK © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch

    Engineer Meetup Vol.5 ϘλϯΛԡͯ͠ΈΑ͏ͱߟ͑Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
  7. OK © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch

    Engineer Meetup Vol.5 ΧʔιϧΛϘλϯͷ্ʹҠಈ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
  8. © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer

    Meetup Vol.5 OK %NKEM ϘλϯΛΫϦοΫ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
  9. © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer

    Meetup Vol.5 OK ϘλϯΛΫϦοΫ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
  10. OK © 2019 Satori Maru / @usagimaruma. 㖝闃闳猳 Ϙλϯ ϓογϡϘλϯͰ͋Δ͜ͱΛΞϐʔϧ

    ϘλϯΛࢹೝͯ͠ɺ࣍ͷߦಈΛݕ౼ Ϣʔβʔ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  11. © 2019 Satori Maru / @usagimaruma. Interaction 㖝闃闒閬闰猳 OK Ϙλϯ

    ඇ׆ੑͰ͋Δ͜ͱΛΞϐʔϧ ϘλϯΛࢹೝͯ͠ɺԡͤͳ͍ͱ൑அ Ϣʔβʔ #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  12. OK © 2019 Satori Maru / @usagimaruma. ΧʔιϧΛૢ࡞ͯ͠໨ඪʢϘλϯʣΛϙΠϯςΟϯά Ϣʔβʔ Ϙλϯ

    – Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  13. © 2019 Satori Maru / @usagimaruma. OK %NKEM ໨ඪʢϘλϯʣͷ্ͰϚ΢εϘλϯΛԡԼ Ϣʔβʔ

    Ϙλϯ ԡԼͷ࡞༻ʹ൓Ԡͯ͠ݟͨ໨ΛมԽ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  14. © 2019 Satori Maru / @usagimaruma. OK Ϛ΢εϘλϯ͔ΒࢦΛ཭ͯ͠ΫϦοΫϑΣʔζΛऴ͑Δ Ϣʔβʔ Ϙλϯ

    ԡ͠ࠐΈղআʹ൓Ԡͯ͠ݟͨ໨ΛมԽ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  15. © 2019 Satori Maru / @usagimaruma. OK OK OK OK

    draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ Ϋ Ϧ ỽ Ϋ OK ҙ ࣝ ͢ Δ Ϙ λ ϯ ͷ ૢ ࡞ ํ ๏ ͸ ⍾ ϙ Π ϯ ς ỹ ϯ ά Ứ ͱ ủ Ϋ Ϧ ỽ Ϋ Ứ ͷ Έ Ố #gpeng Goodpatch Engineer Meetup Vol.5 Ϣʔβʔ
  16. © 2019 Satori Maru / @usagimaruma. OK OK OK OK

    draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ OK ͋ Β Ώ Δ ঢ় ଶ ΍ ڍ ಈ ʹ ର ͢ Δ ద ੾ ͳ ϓ ϩ ά ϥ ϛ ϯ ά ͕ ඞ ཁ Ố ࡞ ༻ ʹ ର ͠ ͯ ൓ Ԡ Λ Ͳ ͏ ฦ ͢ ͷ ͔ ύ λ ʔ ϯ Λ ઃ ܭ ͢ Δ Ố #gpeng Goodpatch Engineer Meetup Vol.5 ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ γεςϜ
  17. © 2019 Satori Maru / @usagimaruma. OK OK OK OK

    draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ OK ͋ Β Ώ Δ ঢ় ଶ ΍ ڍ ಈ ʹ ର ͢ Δ ద ੾ ͳ ϓ ϩ ά ϥ ϛ ϯ ά ͕ ඞ ཁ Ố ࡞ ༻ ʹ ର ͠ ͯ ൓ Ԡ Λ Ͳ ͏ ฦ ͢ ͷ ͔ ύ λ ʔ ϯ Λ ઃ ܭ ͢ Δ Ố ΠϯλϥΫγϣϯςΫχοΫ #gpeng Goodpatch Engineer Meetup Vol.5
  18. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the

    User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
  19. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the

    User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% OK OK OK #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
  20. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the

    User with OVID” (1998) ΑΓղऍ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 60% ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ 30% OK #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
  21. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the

    User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% #gpeng Goodpatch Engineer Meetup Vol.5
  22. © 2019 Satori Maru / @usagimaruma. Interface Architecture ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ #gpeng

    Goodpatch Engineer Meetup Vol.5 lΠϯλʔϑΣΠεͷߏ଄͸ɺؔΘΔ֓೦ɺσβΠφʔͷઃܭࢥ૝ɺϢʔε έʔεɺͦΕΒΛج൫ͱͨ͠৘ใઃܭ΍ϞσϦϯάʹΑΓܗ࡞ΒΕ·͢ɻ 6*ͱͯ͠ػೳͤ͞ΔͨΊʹ͸ɺద੾ͳΠϯλϥΫγϣϯٕज़Λ༻͍ͯೖग़ྗ ͷ࢓૊ΈΛઃܭ͠ɺਖ਼͘͠ର࿩͕ߦΘΕΔ؀ڥʹ࢓ཱͯΔ͜ͱ͕ॏཁͰ͢ɻz
  23. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 ࣸਅ ϓϩύςΟ ܕ ଟॏ౓ ըૉ਺ 1 ࡱӨ೔࣌ 1 ࡱӨػࡐ 0..1 ࡱӨ৔ॴ 0..1 ΞΫηεݖ 1 ॴଐΞϧόϜ ʪΞϧόϜʫ 0..n λά ʪλάʫ 0..n ΞϧόϜ ϓϩύςΟ ܕ ଟॏ౓ ΞϧόϜ໊ 1 ࣸਅ਺ 1 ࣸਅҰཡ ʪࣸਅʫ 0..n λάҰཡ ʪλάʫ 0..n λά ϓϩύςΟ ܕ ଟॏ౓ λά໊ 1 ࡞੒೔࣌ 1 ⱖ溪♧鋮 ةؚ 䨽㾩،ٕغي ةؚ♧鋮 UIΫϥεਤ UMLͷΫϥεਤΛϕʔεʹͨ͠ɺUIͷϞσϦϯάݴޠɻ ※ࣸਅΞϓϦέʔγϣϯͷUIߏ଄
  24. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 Πϯελϯεͷଟॏ౓ Zero One Infinity ϧʔϧ
  25. © 2019 Satori Maru / @usagimaruma. 0 1 ∞ ιϑτ΢ΣΞͰద༻͞ΕΔ੍໿͸ɺ0ŋ1ŋແݶେ

    ͰදͤΔ਺Λجຊͱ͢Δ Zero One Infinity ϧʔϧ ۩ମతͳ਺஋͸ɺແݶେʹରͯ͠ޙ͔Βద༻͢Δɻ #gpeng Goodpatch Engineer Meetup Vol.5
  26. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 0..4 iOS Dock: 2..n macOS Dock: ϑΥʔϜϑΝΫλʹΑΔ੍໿ ΠϝʔδɿiOS, macOS
  27. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 0..n Apps: ՄೳͳݶΓແݶݸΛڐ༰ ΠϝʔδɿiOS
  28. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 1..3 1..n දݱ౎߹ͷ੍໿ ΠϝʔδɿiOS
  29. © 2019 Satori Maru / @usagimaruma. ਌͕1ɺࢠ͕ෳ਺ ϑΥϧμ 1 0..n

    ϑΝΠϧ ϑΝΠϧ͔Βݟͯɺ ϑΥϧμ͸ඞͣ1 ϑΥϧμ͔Βݟͯɺ ϑΝΠϧ͸0..n ཁૉ͸ҰͭͷάϧʔϓʹͷΈॴଐͰ͖Δɻ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ͢Δɻ πϦʔߏ଄ #gpeng Goodpatch Engineer Meetup Vol.5
  30. © 2019 Satori Maru / @usagimaruma. ΞϧόϜ 0..n ࣸਅ 0..n

    ཁૉ͸ෳ਺ͷάϧʔϓʹॴଐͰ͖Δɻ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ͢Δɻ ηϛϥςΟεߏ଄ #gpeng Goodpatch Engineer Meetup Vol.5 ࣸਅ͔Βݟͯɺ ΞϧόϜ͸0..n ΞϧόϜ͔Βݟͯɺ ࣸਅ͸0..n ਌͕ෳ਺ɺࢠ͕ෳ਺
  31. © 2019 Satori Maru / @usagimaruma. ΦϒδΣΫτ ΞΫγϣϯ ࣮ߦ͢Δ બ୒͔ͯ͠Β…

    #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
  32. © 2019 Satori Maru / @usagimaruma. cralus.moof() object method ΦϒδΣΫτ

    ΞΫγϣϯ Focus ʹ View ʹ Message ϑΥʔΧεͷ͋ΔΦϒδΣΫτʹ ϝοηʔδΛૹ৴ #gpeng Goodpatch Engineer Meetup Vol.5 ࣮ߦ͢Δ બ୒͔ͯ͠Β… ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
  33. © 2019 Satori Maru / @usagimaruma. ίϚϯυ ϝχϡʔόʔ ϑΥʔΧε ϑΝΠϧ

    ίϚϯυ ίϯςΫετϝχϡʔ ϑΥʔΧε ϑΝΠϧ ʪϝχϡʔʫ͸ϑΥʔΧεͷ౰ͨͬͨΦϒδΣΫτ౳ʹରͯ͠༗ޮͳίϚϯυͷஔ͖৔ #gpeng Goodpatch Engineer Meetup Vol.5 ΠϝʔδɿmacOS
  34. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 UIΫϥεਤ ଟॏ౓ Πϯελϯε OOUI πϦʔ ηϛϥςΟε Ϋϥε ϞʔυϨε Ϟʔμϧ Zero One Infinity ϧʔϧ ֓೦Ϟσϧ υϝΠϯ ϢϏΩλεݴޠ ࢀর ൚Խ දݱϞσϧ ࣮૷Ϟσϧ ೴಺Ϟσϧ UX ϢʔβϏϦςΟ ΠϯλϥΫγϣϯ