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

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

March 07, 2019
Tweet

Transcript

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

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

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

    3
  4. Introduction Fluid Interface Introduction Fluid Interface 4

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

  6. Introduction Fluid Interface 6

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

  8. Fluid Interface Introduction Fluid Interface 8

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

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

    Introduction Fluid Interface 10
  11. Terminal Introduction Fluid Interface 11

  12. Ϛ΢ε Introduction Fluid Interface 12

  13. iPhone (Fluid Interface) Introduction Fluid Interface 13

  14. ৺ͷԆ௕ͷײ͡ΔͨΊͷཁૉ • Interfaces that extend our minds • Designing with

    dynamic motion • Responding to interaction • Fluidity as a medium Introduction Fluid Interface 14
  15. Interfaces that extend our minds Introduction Fluid Interface 15

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

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

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

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

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

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

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

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

  24. ஍ਤΞϓϦ Introduction Fluid Interface 24

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

    25
  26. Introduction Fluid Interface 26

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

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

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

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

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

    Introduction Fluid Interface 31
  32. એ఻ Introduction Fluid Interface 32

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

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

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

    Fluid Interface 35