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

A4c8177aa00623c9593f10be748b3861?s=47 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/

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

December 10, 2019
Tweet

Transcript

  1. © 2019 Satori Maru / @usagimaruma. OK %NKEM #gpeng Goodpatch

    Engineer Meetup Vol.5 OK OK
  2. © 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
  3. © 2019 Satori Maru / @usagimaruma. Goodpatch UI Design Advent

    Calendar 2019 #gpeng Goodpatch Engineer Meetup Vol.5 MacͱωΠςΟϒΠϯλʔϑΣΠεͱGUIͷݪཧʹؔ͢Δߟ࡯ https://note.com/usagimaruma/n/n03bd95b99dfa
  4. @usagimaruma ΠϯλʔϑΣΠεσβΠϯͱͷ޲͖߹͍ํ goodpatch.connpass.com/event/156462/ © 2019 Satori Maru / @usagimaruma. Goodpatch

    Engineer Meetup Vol.5 #gpeng Goodpatch Engineer Meetup Vol.5
  5. © 2019 Satori Maru / @usagimaruma. ʬϢʔβʔΠϯλʔϑΣΠεʭ User Interface #gpeng

    Goodpatch Engineer Meetup Vol.5
  6. © 2019 Satori Maru / @usagimaruma. ΠϝʔδɿSimulator.app Interface #gpeng Goodpatch

    Engineer Meetup Vol.5
  7. © 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/24926669@N07/4205240306/ Interface #gpeng Goodpatch

    Engineer Meetup Vol.5
  8. © 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/pestoverde/17182400279 Interface #gpeng Goodpatch

    Engineer Meetup Vol.5
  9. © 2019 Satori Maru / @usagimaruma. https://commons.wikimedia.org/wiki/File:Mesa_de_v%C3%ADdeo_1.JPG Interface #gpeng Goodpatch

    Engineer Meetup Vol.5
  10. © 2019 Satori Maru / @usagimaruma. https://commons.wikimedia.org/wiki/File:Tobus_D-H245_2016-9-16.jpg https://commons.wikimedia.org/wiki/File:Mercedes-Benz_Bus_O405N_ZOB_Hannover_Germany.jpg Interface #gpeng

    Goodpatch Engineer Meetup Vol.5
  11. © 2019 Satori Maru / @usagimaruma. Interface #gpeng Goodpatch Engineer

    Meetup Vol.5
  12. © 2019 Satori Maru / @usagimaruma. Inter-face #gpeng Goodpatch Engineer

    Meetup Vol.5
  13. © 2019 Satori Maru / @usagimaruma. Inter-face ʬ໘ͱ໘ͷؒʭ #gpeng Goodpatch

    Engineer Meetup Vol.5
  14. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ର৅ͷੈք ࡞༻ ࡞༻

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

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

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

    Meetup Vol.5
  18. © 2019 Satori Maru / @usagimaruma. Inter-action ʬޓ͍ʹ࡞༻͢Δ͜ͱʭ #gpeng Goodpatch

    Engineer Meetup Vol.5
  19. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 Ϣʔβʔͷࢹ఺Ͱ͸……ʁ
  20. OK © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch

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

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

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

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

    Vol.5 ઃܭऀͷࢹ఺Ͱ͸……ʁ
  25. OK © 2019 Satori Maru / @usagimaruma. 㖝闃闳猳 Ϙλϯ ϓογϡϘλϯͰ͋Δ͜ͱΛΞϐʔϧ

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

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

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

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

    ԡ͠ࠐΈղআʹ൓Ԡͯ͠ݟͨ໨ΛมԽ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
  30. © 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 Ϣʔβʔ
  31. © 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 ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ γεςϜ
  32. © 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
  33. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the

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

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

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

    Engineer Meetup Vol.5
  38. © 2019 Satori Maru / @usagimaruma. ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ Interface Architecture #gpeng

    Goodpatch Engineer Meetup Vol.5
  39. © 2019 Satori Maru / @usagimaruma. Interface Architecture ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ #gpeng

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

    Vol.5 Ϋϥε Πϯελϯε
  41. © 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ߏ଄
  42. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

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

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

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

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

    Vol.5 1..3 1..n දݱ౎߹ͷ੍໿ ΠϝʔδɿiOS
  47. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 πϦʔ ηϛϥςΟε
  48. © 2019 Satori Maru / @usagimaruma. ਌͕1ɺࢠ͕ෳ਺ ϑΥϧμ 1 0..n

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

    ཁૉ͸ෳ਺ͷάϧʔϓʹॴଐͰ͖Δɻ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ͢Δɻ ηϛϥςΟεߏ଄ #gpeng Goodpatch Engineer Meetup Vol.5 ࣸਅ͔Βݟͯɺ ΞϧόϜ͸0..n ΞϧόϜ͔Βݟͯɺ ࣸਅ͸0..n ਌͕ෳ਺ɺࢠ͕ෳ਺
  50. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 OOUI
  51. © 2019 Satori Maru / @usagimaruma. ΦϒδΣΫτ ΞΫγϣϯ ࣮ߦ͢Δ બ୒͔ͯ͠Β…

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

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

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

    ߦʗϑΝΠϧ ϑΥʔΧε ΢Πϯυ΢ #gpeng Goodpatch Engineer Meetup Vol.5 ΠϝʔδɿmacOS
  55. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup

    Vol.5 UIΫϥεਤ ଟॏ౓ Πϯελϯε OOUI πϦʔ ηϛϥςΟε Ϋϥε ϞʔυϨε Ϟʔμϧ Zero One Infinity ϧʔϧ ֓೦Ϟσϧ υϝΠϯ ϢϏΩλεݴޠ ࢀর ൚Խ දݱϞσϧ ࣮૷Ϟσϧ ೴಺Ϟσϧ UX ϢʔβϏϦςΟ ΠϯλϥΫγϣϯ
  56. © 2019 Satori Maru / @usagimaruma. l(6*ͷߏ଄΍ઃܭύλʔϯɺγεςϜͷ࢓૊Έʹਫ਼௨͓ͯ͠ΓɺΞʔΩςΫ νϟͷઃܭʹ੹೚Λ࣋ͭʮ6*σβΠφʔʯͷҰछͰ͢ɻ(6*ʹؔ͢Δ֓೦ɾ ઃܭࢥ૝ͷఆٛɺυϝΠϯϞσϧͷઃܭɺ৘ใઃܭɺ006*ϞσϦϯάɺΠϯ λϥΫγϣϯઃܭΛத৺ʹɺιϑτ΢ΣΞͷl֦ுੑzΛߟྀ͠ͳ͕ΒσβΠ

    ϯʹऔΓ૊Έ·͢ɻz 6*σβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ IUUQTHPPEQBUDIDPNCMPHVJJOUFSGBDFBSDIJUFDU Interface Architect ʬΠϯλʔϑΣΠεΞʔΩςΫτʭ #gpeng Goodpatch Engineer Meetup Vol.5
  57. © 2019 Satori Maru / @usagimaruma. UIσβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ https://goodpatch.com/blog/ui-interface-architect/ #gpeng Goodpatch

    Engineer Meetup Vol.5
  58. © 2019 Satori Maru / @usagimaruma. #gpeng