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

Introduction Fluid Interface

Introduction Fluid Interface

ROPPONGI.swift 第7回登壇資料

https://roppongi-swift.connpass.com/event/122146/

参考文献
* Designing Fluid Interfaces
* https://developer.apple.com/videos/play/wwdc2018/803/
* iOSの写真アプリのような画面遷移とインタラクションを実装する
* https://qiita.com/masamichiueta/items/a7336ad13de5f0c34831
* スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流
* https://note.mu/goando/n/n9346aea1b0ea
* iOSにおける半モーダルビューの解釈
* https://note.mu/usagimaruma/n/n0c608c327e0c

Sato Takeshi

March 07, 2019
Tweet

More Decks by Sato Takeshi

Other Decks in Technology

Transcript

  1. Introduction Fluid
    Interface
    ROPPONGI.swift ୈ7ճ
    2019೥3݄7೔ ࠤ౻߶࢜
    Introduction Fluid Interface 1

    View Slide

  2. Who am I
    ࠤ౻߶࢜
    (@hatakenokakashi)
    גࣜձࣾϝϧϖΠʹͯiOSΤϯδχΞ͠
    ͍ͯ·͢ɻ
    Introduction Fluid Interface 2

    View Slide

  3. ʰiOS 12
    Programmingʱ
    ʹͯXcode 10ʹ
    ͍ͭͯղઆ͠·͠
    ͨɻ
    Introduction Fluid Interface 3

    View Slide

  4. Introduction Fluid
    Interface
    Introduction Fluid Interface 4

    View Slide

  5. ໨࣍
    • Fluid Interface
    • ϋʔϑϞʔμϧ
    Introduction Fluid Interface 5

    View Slide

  6. Introduction Fluid Interface 6

    View Slide

  7. WWDC2018ʹͯ৽͍͠ϢʔβʔΠϯ
    λʔϑΣʔεͷ֓೦͕ఏএ͞Ε·ͨ͠
    Introduction Fluid Interface 7

    View Slide

  8. Fluid Interface
    Introduction Fluid Interface 8

    View Slide

  9. ࢖͍΍͍͢ϢʔβʔΠϯλʔϑΣʔ
    εͬͯԿʁ
    • fast
    • smooth
    • natual
    Introduction Fluid Interface 9

    View Slide

  10. A tool that feels like
    an extension for your
    mind
    Introduction Fluid Interface 10

    View Slide

  11. Terminal
    Introduction Fluid Interface 11

    View Slide

  12. Ϛ΢ε
    Introduction Fluid Interface 12

    View Slide

  13. iPhone (Fluid Interface)
    Introduction Fluid Interface 13

    View Slide

  14. ৺ͷԆ௕ͷײ͡ΔͨΊͷཁૉ
    • Interfaces that extend our minds
    • Designing with dynamic motion
    • Responding to interaction
    • Fluidity as a medium
    Introduction Fluid Interface 14

    View Slide

  15. Interfaces that extend
    our minds
    Introduction Fluid Interface 15

    View Slide

  16. ਓͷߟ͑ํͱ৺ͷಈ͖ʹ
    ΠϯλʔϑΣʔε͕߹Θ
    ͤΔ
    Introduction Fluid Interface 16

    View Slide

  17. ਓͷ৺͸͙͢ʹ༳Εಈ͘
    Introduction Fluid Interface 17

    View Slide

  18. ιϑτ΢ΣΞʹ΋ํ޲స׵΍தஅΛߟ
    ྀ͢Δ
    ్தͰҾ͖ฦͤΔΠϯλʔϑΣʔε͕Α͍ʂ
    Introduction Fluid Interface 18

    View Slide

  19. ෺ཧͷੈք:్தͰࣙΊΔ͜ͱ͸ࣗવͳ͜ͱ
    • ೑ΛϑΥʔΫʹࢗͯ͠ޱʹӡͿ(ͱࢥ͚ͬͨͲ΍Ίͨʣ
    • ຊͷϖʔδΛΊ͘Δ(Ί͘Ζ͏ͱࢥ͚ͬͨͲલϖʔδ͕ؾʹͳͬͯ໭͢ʣ
    ιϑτ΢ΣΞͷੈք:ON/OFFͰૢ࡞
    • ϑΥʔϜ౤ߘ(ૹ৴ϘλϯΛԡͨ͠ΒҾ͖ฦͤͳ͍ʣ
    • Ϙλϯ΍ϦϯΫʹΑΔը໘ભҠ(ಈ࡞͕׬݁ɻ࣍ͷը໘ʹ͍ͬͨΒ໭ΕΔɻ
    ్தͳ͠)
    Introduction Fluid Interface 19

    View Slide

  20. iPhoneXͷྫ
    • ϗʔϜόʔΛࠨӈεϫΠϓ: ΞϓϦͷ੾Γସ͑
    • ϗʔϜόʔΛ্΁εϫΠϓ: ϗʔϜը໘ɺΞϓϦεΠο
    νϟʔɺΞϓϦ໭Δ
    Introduction Fluid Interface 20

    View Slide

  21. ैདྷͷΠϯλʔϑΣʔεͱࢥߟͷؔ܎
    Introduction Fluid Interface 21

    View Slide

  22. Fluid Interfaceͱࢥߟͷؔ܎
    Introduction Fluid Interface 22

    View Slide

  23. ϋʔϑϞʔμϧ
    Introduction Fluid Interface 23

    View Slide

  24. ஍ਤΞϓϦ
    Introduction Fluid Interface 24

    View Slide

  25. ϋʔϑϞʔμϧҎલͷUI
    • ʮίϯςϯπΛΈΔʯͱʮૢ࡞Λ͢Δʯ͕෼͔Ε͍ͯͨ
    • Twitter/FacebookͷλΠϜϥΠϯ౤ߘ
    • EvernoteͷϝϞҰཡॻ͖ࠐΈ
    Introduction Fluid Interface 25

    View Slide

  26. Introduction Fluid Interface 26

    View Slide

  27. ࠓ·ͰͷϞʔμϧ͸શ໘ද͕ࣔجຊͩͬͨ
    • ϞʔμϧΛग़͢͜ͱͰϢʔβʔʹͦͷλεΫʹूதͤ͞Δ
    • ΋ͱͷը໘ʹ໭Δʹ͸ʮΩϟϯηϧʯͷಈ࡞͕ඞཁ
    • ෳࡶͳૢ࡞ΛϢʔβʔʹͤ͞Δ໨త
    Introduction Fluid Interface 27

    View Slide

  28. σόΠεͷେܕԽʹΑΓɺը໘Լ෦Ͱૢ࡞͢Δίϯϙʔωϯτ
    ͕޷·ΕΔ
    Introduction Fluid Interface 28

    View Slide

  29. ϋʔϑϞʔμϧ͕͋Δͱ
    • ʮίϯςϯπΛΈΔʯͱʮૢ࡞Λ͢ΔʯΛҰͭͷը໘ͰͰ͖
    Δ
    Introduction Fluid Interface 29

    View Slide

  30. ૢ࡞Λ͠ͳ͕Β஍ਤΛݟΕΔ
    Introduction Fluid Interface 30

    View Slide

  31. ऴΘΓʹ
    • Fluid Interface: ਎ମͷԆ௕ͷΑ͏ͳΠϯλʔϑΣΠεʹ͢Δ
    ͜ͱͰιϑτ΢ΣΞ͸࢖͍΍͍͢πʔϧʹͳΔ
    • ϋʔϑϞʔμϧ: σόΠεͷେܕԽʹΑΓɺʮίϯςϯπΛΈ
    Δʯͱʮૢ࡞Λ͢ΔʯΛҰը໘Ͱૢ࡞Ͱ͖Δ
    Introduction Fluid Interface 31

    View Slide

  32. એ఻
    Introduction Fluid Interface 32

    View Slide

  33. ٕज़ॻయ6ʹग़ల͠·͢
    ೔࣌ :019/04/14 (೔) 11:00ʙ17:00
    ৔ॴ:஑ାαϯγϟΠϯγςΟ2F లࣔ
    ϗʔϧDʢจԽձؗϏϧ2Fʣ
    ϒʔεɿ͚01
    Introduction Fluid Interface 33

    View Slide

  34. ࢀߟ
    • Designing Fluid Interfaces
    • https://developer.apple.com/videos/play/
    wwdc2018/803/
    • iOSͷࣸਅΞϓϦͷΑ͏ͳը໘ભҠͱΠϯλϥΫγϣϯΛ࣮
    ૷͢Δ
    • https://qiita.com/masamichiueta/items/
    a7336ad13de5f0c34831
    Introduction Fluid Interface 34

    View Slide

  35. • εϚʔτϑΥϯͷσΟεϓϨΠڊେԽʹ൐͏ɺUIσβΠϯͷ
    ைྲྀ
    • https://note.mu/goando/n/n9346aea1b0ea
    • iOSʹ͓͚Δ൒ϞʔμϧϏϡʔͷղऍ
    • https://note.mu/usagimaruma/n/n0c608c327e0c
    Introduction Fluid Interface 35

    View Slide