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

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