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

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

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

Transcript

1. © 2019 Satori Maru / @usagimaruma.
   OK
   %NKEM
   #gpeng
   Goodpatch Engineer Meetup Vol.5
   OK OK
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. @usagimaruma
   ΠϯλʔϑΣΠεσβΠϯͱͷ޲͖߹͍ํ
   goodpatch.connpass.com/event/156462/
   © 2019 Satori Maru / @usagimaruma.
   Goodpatch Engineer Meetup Vol.5
   #gpeng
   Goodpatch Engineer Meetup Vol.5
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    Ϣʔβʔͷࢹ఺Ͱ͸……ʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    ઃܭऀͷࢹ఺Ͱ͸……ʁ
    

    View Slide

25. OK
    © 2019 Satori Maru / @usagimaruma.
    㖝闃闳猳
    Ϙλϯ ϓογϡϘλϯͰ͋Δ͜ͱΛΞϐʔϧ
    ϘλϯΛࢹೝͯ͠ɺ࣍ͷߦಈΛݕ౼
    Ϣʔβʔ
    Interaction #gpeng
    Goodpatch Engineer Meetup Vol.5
    ࡞༻ͱڍಈͷ෼ղ
    

    View Slide

26. © 2019 Satori Maru / @usagimaruma.
    Interaction
    㖝闃闒閬闰猳
    OK
    Ϙλϯ ඇ׆ੑͰ͋Δ͜ͱΛΞϐʔϧ
    ϘλϯΛࢹೝͯ͠ɺԡͤͳ͍ͱ൑அ
    Ϣʔβʔ
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    ࡞༻ͱڍಈͷ෼ղ
    

    View Slide

27. OK
    © 2019 Satori Maru / @usagimaruma.
    ΧʔιϧΛૢ࡞ͯ͠໨ඪʢϘλϯʣΛϙΠϯςΟϯά
    Ϣʔβʔ
    Ϙλϯ –
    Interaction #gpeng
    Goodpatch Engineer Meetup Vol.5
    ࡞༻ͱڍಈͷ෼ղ
    

    View Slide

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

    View Slide

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

    View Slide

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
    Ϣʔβʔ
    

    View Slide

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
    ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ
    γεςϜ
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
    

    View Slide

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

    View Slide

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

    View Slide

37. © 2019 Satori Maru / @usagimaruma.
    ʬΞʔΩςΫνϟʭ
    Architecture
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    

    View Slide

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

    View Slide

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

    View Slide

40. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    Ϋϥε Πϯελϯε
    

    View Slide

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ߏ଄
    

    View Slide

42. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    Πϯελϯεͷଟॏ౓
    Zero One Infinity ϧʔϧ
    

    View Slide

43. © 2019 Satori Maru / @usagimaruma.
    0 1 ∞
    ιϑτ΢ΣΞͰద༻͞ΕΔ੍໿͸ɺ0ŋ1ŋແݶେ ͰදͤΔ਺Λجຊͱ͢Δ
    Zero One Infinity ϧʔϧ
    ۩ମతͳ਺஋͸ɺແݶେʹରͯ͠ޙ͔Βద༻͢Δɻ
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    πϦʔ ηϛϥςΟε
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. © 2019 Satori Maru / @usagimaruma.
    ΦϒδΣΫτ ΞΫγϣϯ
    ࣮ߦ͢Δ
    બ୒͔ͯ͠Β…
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. © 2019 Satori Maru / @usagimaruma.
    l(6*ͷߏ଄΍ઃܭύλʔϯɺγεςϜͷ࢓૊Έʹਫ਼௨͓ͯ͠ΓɺΞʔΩςΫ
    νϟͷઃܭʹ੹೚Λ࣋ͭʮ6*σβΠφʔʯͷҰछͰ͢ɻ(6*ʹؔ͢Δ֓೦ɾ
    ઃܭࢥ૝ͷఆٛɺυϝΠϯϞσϧͷઃܭɺ৘ใઃܭɺ006*ϞσϦϯάɺΠϯ
    λϥΫγϣϯઃܭΛத৺ʹɺιϑτ΢ΣΞͷl֦ுੑzΛߟྀ͠ͳ͕ΒσβΠ
    ϯʹऔΓ૊Έ·͢ɻz
    6*σβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ
    IUUQTHPPEQBUDIDPNCMPHVJJOUFSGBDFBSDIJUFDU
    Interface Architect
    ʬΠϯλʔϑΣΠεΞʔΩςΫτʭ
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    

    View Slide

57. © 2019 Satori Maru / @usagimaruma.
    UIσβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ
    https://goodpatch.com/blog/ui-interface-architect/
    #gpeng
    Goodpatch Engineer Meetup Vol.5
    

    View Slide

58. © 2019 Satori Maru / @usagimaruma.
    #gpeng
    

    View Slide