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