Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
オカンとオトンから学んだOOUIデザイン設計.pdf
taku
July 22, 2020
Design
5
660
オカンとオトンから学んだOOUIデザイン設計.pdf
taku
July 22, 2020
Tweet
Share
Other Decks in Design
See All in Design
youknowcast
1
140
commmune
0
470
gagews
0
210
xai
0
600
seeeeemy
0
250
datavisualizationjapan
0
280
takumasaito
1
110
nrasoul
0
380
danpark001
1
3.5k
cynthiam
0
120
bamfonyy
0
480
lily2251390
0
300
Featured
See All Featured
orderedlist
PRO
328
36k
scottboms
251
11k
wjessup
339
16k
brettharned
93
3k
tmm1
61
9.4k
jnunemaker
PRO
40
4.6k
hatefulcrawdad
257
17k
iamctodd
19
2k
chrislema
173
14k
lara
15
2.7k
andyhume
63
3.7k
chriscoyier
498
130k
Transcript
ΦΧϯͱΦτϯ͔ΒֶΜͩ OOUI σβΠϯઃܭ
Takuʢ29ʣ @hara _ taku_ • ΤϯδχΞͱͯ͠ͷۀɾۀքະ ܦݧʢݱࡏస৬׆ಈதͰ͢ʣ • Flutter Ͱڇൟ৩ՈͷͨΊͷੜҭ
هΞϓϦʮMemowʯΛϦϦʔε ʢݱࡏܧଓతʹΞοϓσʔτதʣ • QiitaʮʲॳΞϓϦʳະܦݧ͕ Flutter Ͱڇൟ৩ՈͷͨΊͷΞϓϦΛ ࡞ͬͯΈͨʯ1100LTGM ͑ • ษڧձͳͲͰʮڇͷʢΞϓϦͷʣ ਓʯͱݴΘΕ·͢
ࠓ͢͜ͱ • ʮMemowʯͷ੍࡞Ͱͭ·͍ͮͨͱ͜Ζ • ࣗͳΓͷղܾํ๏ΛγΣΞ • ಉ͡Α͏ʹ։ൃؤு͍ͬͯΔਓͷώϯτʹͳΕخ͍͠Ͱ͢ʂ
ͳͥڇൟ৩Ո͚ͷΞϓϦʁ
ͳͥڇൟ৩Ո͚ͷ ΞϓϦʁ • ͕྆ڇൟ৩ՈʢڇʹࢠڇΛ ੜ·ͤɺͦͷࢠڇΛ10ϲ݄ؒҭͯ ͯංҭʹҾ͖͢ʣ • Ξφϩάͳڇͷཧʹ͕྆՝Λ ײ͍ͯͨ͡ •
χονա͗ͯ྆ͷ՝͕ղܾͰ͖ ΔΞϓϦ͕ੈͷதʹແ͔ͬͨ
ͲΜͳΞϓϦ͔հͤͯͩ͘͞͞ ͍
ػೳ ᶃ ߦಈͷهɾཧ • ڇͷ৷ɾग़࢈Λ؆୯ʹه • 1 ಄͝ͱʹλΠϜϥΠϯܗࣜͰ֬ೝ
ػೳ ᶄ ঢ়ଶผͷιʔτ • λϒΛબ͢Δ͜ͱͰɺঢ়ଶ͝ͱͷ άϧʔϓ୯ҐͰڇͷҰཡΛ֬ೝ
ػೳ ᶅ σόΠεؒͷڞ༗ • ೖྗͨ͠ใɺෳͷσόΠεͰ ڞ༗Մೳ • টऀ͔ΒૹΒΕ͖ͯͨϦϯΫΛ λοϓ͢Δ͚ͩͰڞ༗͕։࢝ ✅
Firebase Dynamic Links Λ׆༻
ػೳ ᶆ ݸମใͷࣗಈೖྗ • 1 ಄ͣͭ͋Δڇͷށ੶දͷࣸਅΛಡ Έࠐ·ͤΔ͚ͩͰݸମใ͕ࣗಈೖ ྗ ✅ GCP
Vision AI Λ׆༻
ʮMemowʯΛϦϦʔεͯ͠Έͯ • ಛʹϨΫνϟʔͤͣͱ༻Ͱ͖͍ͯΔ • 50ޙͷΦΧϯΦτϯɺڞ༗ػೳΛར༻ͯ͠ɺ͓ޓ͍ͷσόΠεͰΞϓϦΛ ༻͍ͯ͠ΔʢओʹΦΧϯ͕ೖྗɺΦτϯӾཡʣ
ͳ͕͍ͥ྆͑ͯΔͷ͔ʁ
ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ͍͑ͯΔཧ༝ 1. ରϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ରϢʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝ղܾΛͭͭ͠ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠
ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ͍͑ͯΔཧ༝ 1. ରϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ରϢʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝ղܾΛͭͭ͠ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠
ίϨʹ͍͍͖ͭͯͯ͠·͢ ※ ΞφϩάཧΛ͍͕ͯͨ྆͠ΞϓϦΛͳ͘༻Ͱ͖͍ͯΔ͜ͱʹڻ͍ͨͱ͍͏ײΛɺQiita Twitter Ͱ ଟ͍͖ͨͩ͘·ͨ͠ɻ
OOUI ͱʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ
OOUI ͱʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ ʮObject-Oriented User Interfaceʯ
ʮΦϒδΣΫτࢦ UIʯ ɹɹɹɹɹ ! ʮΦϒδΣΫτΛख͕͔Γʹૢ࡞ઃܭ͞Εͨ UIʯ
ʮMemowʯͷσβΠϯ੍࡞ͷܦҢ 1. ࠷ॳʹ࡞ͬͨϓϩτλΠϓΦΧϯʹཧղͰ͖ͳ͔ͬͨ 2. ͍͍͢ UI ͕Կ͔ɺΦΧϯ͕͍͑ͯΔΞϓϦΛத৺ʹͻͨ͢Βௐͨ 3. σβΠϯઃܭʹ͕͋Δ͜ͱʹؾͮ͘ 4.
OOUIͱΒΛΔ 5. OOUIͷσβΠϯઃܭʹج͖ͮվળͨ͠
·ͣվળલͷσβΠϯΛݟͯΈ ·͠ΐ͏
None
σβΠϯઃܭʢվળલʣ 1. ڇͱࢠڇ͕ࠞ߹ͨ͠Ұཡ • ڇͱࢠڇͰཁ݅ಈ࡞͕ҟͳΔͷʹɺ ʮڇʯಉҰΧςΰϦͷΦϒδΣΫτͱ͍͏ೝࣝͰઃܭ͍ͯͨ͠ 2. ʮϝχϡʔʯΛىͱͳΔΦϒδΣΫτͱͨ͠ಋઢ • ૢ࡞ͷىͱͳΔΦϒδΣΫτΛఆΊ͍ͯͳ͔ͬͨͨΊɺ
ͯ͢ͷػೳΛʮϝχϡʔʯʹಥͬࠐΜͰ͍ͨ
ଓ͍ͯɺվળޙͷσβΠϯͰ͢
None
σβΠϯઃܭʢվળޙʣ 1. ʮڇʯͱʮࢠڇʯͦΕͧΕϝΠϯΦϒδΣΫτʹఆΊͨ • ڇͱࢠڇͰཁ͕݅ҧ͏ͨΊɺಉҰΦϒδΣΫτద͍ͯ͠ͳ͔ͬͨ 2. ʮϝχϡʔʯΦϒδΣΫτΛഇࢭ • ڇࢠڇͷঢ়ଶɺͦΕͧΕͷαϒΦϒδΣΫτͱͳΔͨΊʯ Ϣʔβʔ͕ΞϓϦΛ༻͢ΔγνϡΤʔγϣϯΛਂງΓ͠ɺϝΠϯΦϒδΣΫτΛ
ݟͨ͠ʢͱ͍͏͔ॳҙ͍ࣝͯ͠ͳ͔ͬͨʣ͜ͱ͕վળʹͭͳ͕ͬͨ
ߟ͑ํΛ·ͱΊΔͱɾɾɾ
ᶃ ΦϒδΣΫτͷநग़
ᶄ ʮԿΛͲͷΑ͏ʹʯ
ᶅ Ϗϡʔͷఆٛͱઃఆ
·ͱΊ • ϝΠϯΦϒδΣΫτͷઃఆΛޡΔͱΞϓϦͷઃܭɺσβΠϯͯ͢ʹѱӨڹΛٴ ΅͢ • ϝΠϯΦϒδΣΫτͷઃఆΞϓϦΛ༻͢ΔγνϡΤʔγϣϯΛ͔ͬ͠ΓѲ ͢Δ͜ͱ͕େࣄ • Ϣʔβʔʹͱֶͬͯशޮ͕ѱ͍ΞϓϦͱͳ͍ͬͯΔ߹ɺOOUIઃܭΛݟ͢ ͜ͱͰղܾͷࢳޱ͕ݟ͔ͭΔ͜ͱ
ࢀߟจݙ • ΦϒδΣΫτࢦUIσβΠϯ
ࠓճ͜Ε͕ॳLTͰͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!