Slide 1
Slide 1 text
Introduction Fluid
Interface
ROPPONGI.swift ୈ7ճ
20193݄7 ࠤ౻߶࢜
Introduction Fluid Interface 1
Slide 2
Slide 2 text
Who am I
ࠤ౻߶࢜
(@hatakenokakashi)
גࣜձࣾϝϧϖΠʹͯiOSΤϯδχΞ͠
͍ͯ·͢ɻ
Introduction Fluid Interface 2
Slide 3
Slide 3 text
ʰiOS 12
Programmingʱ
ʹͯXcode 10ʹ
͍ͭͯղઆ͠·͠
ͨɻ
Introduction Fluid Interface 3
Slide 4
Slide 4 text
Introduction Fluid
Interface
Introduction Fluid Interface 4
Slide 5
Slide 5 text
࣍
• Fluid Interface
• ϋʔϑϞʔμϧ
Introduction Fluid Interface 5
Slide 6
Slide 6 text
Introduction Fluid Interface 6
Slide 7
Slide 7 text
WWDC2018ʹͯ৽͍͠ϢʔβʔΠϯ
λʔϑΣʔεͷ֓೦͕ఏএ͞Ε·ͨ͠
Introduction Fluid Interface 7
Slide 8
Slide 8 text
Fluid Interface
Introduction Fluid Interface 8
Slide 9
Slide 9 text
͍͍͢ϢʔβʔΠϯλʔϑΣʔ
εͬͯԿʁ
• fast
• smooth
• natual
Introduction Fluid Interface 9
Slide 10
Slide 10 text
A tool that feels like
an extension for your
mind
Introduction Fluid Interface 10
Slide 11
Slide 11 text
Terminal
Introduction Fluid Interface 11
Slide 12
Slide 12 text
Ϛε
Introduction Fluid Interface 12
Slide 13
Slide 13 text
iPhone (Fluid Interface)
Introduction Fluid Interface 13
Slide 14
Slide 14 text
৺ͷԆͷײ͡ΔͨΊͷཁૉ
• Interfaces that extend our minds
• Designing with dynamic motion
• Responding to interaction
• Fluidity as a medium
Introduction Fluid Interface 14
Slide 15
Slide 15 text
Interfaces that extend
our minds
Introduction Fluid Interface 15
Slide 16
Slide 16 text
ਓͷߟ͑ํͱ৺ͷಈ͖ʹ
ΠϯλʔϑΣʔε͕߹Θ
ͤΔ
Introduction Fluid Interface 16
Slide 17
Slide 17 text
ਓͷ৺͙͢ʹ༳Εಈ͘
Introduction Fluid Interface 17
Slide 18
Slide 18 text
ιϑτΣΞʹํసதஅΛߟ
ྀ͢Δ
్தͰҾ͖ฦͤΔΠϯλʔϑΣʔε͕Α͍ʂ
Introduction Fluid Interface 18
Slide 19
Slide 19 text
ཧͷੈք:్தͰࣙΊΔ͜ͱࣗવͳ͜ͱ
• ΛϑΥʔΫʹͯ͠ޱʹӡͿ(ͱࢥ͚ͬͨͲΊͨʣ
• ຊͷϖʔδΛΊ͘Δ(Ί͘Ζ͏ͱࢥ͚ͬͨͲલϖʔδ͕ؾʹͳͬͯ͢ʣ
ιϑτΣΞͷੈք:ON/OFFͰૢ࡞
• ϑΥʔϜߘ(ૹ৴ϘλϯΛԡͨ͠ΒҾ͖ฦͤͳ͍ʣ
• ϘλϯϦϯΫʹΑΔը໘ભҠ(ಈ࡞͕݁ɻ࣍ͷը໘ʹ͍ͬͨΒΕΔɻ
్தͳ͠)
Introduction Fluid Interface 19
Slide 20
Slide 20 text
iPhoneXͷྫ
• ϗʔϜόʔΛࠨӈεϫΠϓ: ΞϓϦͷΓସ͑
• ϗʔϜόʔΛ্εϫΠϓ: ϗʔϜը໘ɺΞϓϦεΠο
νϟʔɺΞϓϦΔ
Introduction Fluid Interface 20
Slide 21
Slide 21 text
ैདྷͷΠϯλʔϑΣʔεͱࢥߟͷؔ
Introduction Fluid Interface 21
Slide 22
Slide 22 text
Fluid Interfaceͱࢥߟͷؔ
Introduction Fluid Interface 22
Slide 23
Slide 23 text
ϋʔϑϞʔμϧ
Introduction Fluid Interface 23
Slide 24
Slide 24 text
ਤΞϓϦ
Introduction Fluid Interface 24
Slide 25
Slide 25 text
ϋʔϑϞʔμϧҎલͷUI
• ʮίϯςϯπΛΈΔʯͱʮૢ࡞Λ͢Δʯ͕͔Ε͍ͯͨ
• Twitter/FacebookͷλΠϜϥΠϯ<->ߘ
• EvernoteͷϝϞҰཡ<->ॻ͖ࠐΈ
Introduction Fluid Interface 25
Slide 26
Slide 26 text
Introduction Fluid Interface 26
Slide 27
Slide 27 text
ࠓ·ͰͷϞʔμϧશ໘ද͕ࣔجຊͩͬͨ
• ϞʔμϧΛग़͢͜ͱͰϢʔβʔʹͦͷλεΫʹूதͤ͞Δ
• ͱͷը໘ʹΔʹʮΩϟϯηϧʯͷಈ࡞͕ඞཁ
• ෳࡶͳૢ࡞ΛϢʔβʔʹͤ͞Δత
Introduction Fluid Interface 27
Slide 28
Slide 28 text
σόΠεͷେܕԽʹΑΓɺը໘Լ෦Ͱૢ࡞͢Δίϯϙʔωϯτ
͕·ΕΔ
Introduction Fluid Interface 28
Slide 29
Slide 29 text
ϋʔϑϞʔμϧ͕͋Δͱ
• ʮίϯςϯπΛΈΔʯͱʮૢ࡞Λ͢ΔʯΛҰͭͷը໘ͰͰ͖
Δ
Introduction Fluid Interface 29
Slide 30
Slide 30 text
ૢ࡞Λ͠ͳ͕ΒਤΛݟΕΔ
Introduction Fluid Interface 30
Slide 31
Slide 31 text
ऴΘΓʹ
• Fluid Interface: ମͷԆͷΑ͏ͳΠϯλʔϑΣΠεʹ͢Δ
͜ͱͰιϑτΣΞ͍͍͢πʔϧʹͳΔ
• ϋʔϑϞʔμϧ: σόΠεͷେܕԽʹΑΓɺʮίϯςϯπΛΈ
Δʯͱʮૢ࡞Λ͢ΔʯΛҰը໘Ͱૢ࡞Ͱ͖Δ
Introduction Fluid Interface 31
Slide 32
Slide 32 text
એ
Introduction Fluid Interface 32
Slide 33
Slide 33 text
ٕज़ॻయ6ʹग़ల͠·͢
࣌ :019/04/14 () 11:00ʙ17:00
ॴ:ାαϯγϟΠϯγςΟ2F లࣔ
ϗʔϧDʢจԽձؗϏϧ2Fʣ
ϒʔεɿ͚01
Introduction Fluid Interface 33
Slide 34
Slide 34 text
ࢀߟ
• Designing Fluid Interfaces
• https://developer.apple.com/videos/play/
wwdc2018/803/
• iOSͷࣸਅΞϓϦͷΑ͏ͳը໘ભҠͱΠϯλϥΫγϣϯΛ࣮
͢Δ
• https://qiita.com/masamichiueta/items/
a7336ad13de5f0c34831
Introduction Fluid Interface 34
Slide 35
Slide 35 text
• εϚʔτϑΥϯͷσΟεϓϨΠڊେԽʹ͏ɺUIσβΠϯͷ
ைྲྀ
• https://note.mu/goando/n/n9346aea1b0ea
• iOSʹ͓͚ΔϞʔμϧϏϡʔͷղऍ
• https://note.mu/usagimaruma/n/n0c608c327e0c
Introduction Fluid Interface 35