$30 off During Our Annual Pro Sale. View Details »

インターフェイスデザインとの向き合い方(公開版)/ 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.
    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