࠶ར༻ՄೳͳUIίϯϙʔωϯτΛར༻ͨ͠ΞϓϦ։ൃiOSDC 2018ଟాɹါ
View Slide
• ଟాɹါ• ΣϧεφϏגࣜձࣾ• Twitterɿ@yuta24ࣗݾհ
ٕज़తͳ՝• ΞϓϦج൫ͷվम• ωοτϫʔΫ• σʔλ• ΞʔΩςΫνϟͷཧ• UXվળͷରԠ
• ίϯϙʔωϯτԽͷഎܠ• ίϯϙʔωϯτԽͷઓུ• ελΠϧ࣮• ίϯϙʔωϯτ࣮ΞδΣϯμ
ίϯϙʔωϯτԽͷഎܠ
• ։ൃதͷ༷มߋ• ػೳվળ• ϦχϡʔΞϧΞϓϦͷUI
՝• ςΩετͷSize͕ࢦఆͱҟͳΔ• StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε• ෳͷը໘Ͱಉ͡Α͏ͳUI࣮
σβΠφʔͷΞϓϩʔν• σβΠϯγεςϜ• ελΠϧΨΠυΛఆٛ• ΧϥʔεΩʔϚɺςΩετελΠϧ• UIίϯϙʔωϯτΛఆٛͷϥΠϒϥϦػೳΛ׆༻ʂ
ϩάΠϯը໘ͷ߹• มߋͰ͖Δ߲• ςΩετͷ৭• ϓϨʔεϗϧμʔςΩετ• ΞϯμʔϥΠϯͷ৭• όοΫάϥϯυͷ৭• มߋͰ͖Δ߲• શମͷ৭
σβΠφʔ͞ΜɺɺɺΩϨΠʹ࡞ۀ͠ͱΔ
SketchͷγϯϘϧͷΑ͏ʹελΠϧUIίϯϙʔωϯτΛར༻ͯ͠UIΛ࡞Εޮྑͦ͞͏
ίϯϙʔωϯτԽͷઓུ
Atomic Designʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ• UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ• ίϯϙʔωϯτΛఆٛ͢Δ• 5ͭͷεςʔδͰ͚Δ• ݪࢠɺࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ
Atomic DesignͰݱঢ়ཧεςʔδσβΠϯγεςϜʢSketchʣݪࢠ γϯϘϧఆٛࢠ γϯϘϧఆٛ༗ػମ ͳ͠ςϯϓϨʔτ ը໘ఆٛϖʔδ ͳ͠
σβΠφͱܾΊͨ͜ͱ• ݪࢠͱࢠͱ͍͏2Ͱߟ͑Δ• ࠶ར༻͞ΕΔͷ͚ͩίϯϙʔωϯτԽ͢Δ• InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ• InVision/ZeplinͩͱελΠϧใɺγϯϘϧใ͕ܽམ͢Δ
ελΠϧ࣮• ཁ݅• Sizeݻఆ• Weightมߋ͞ΕΔ͜ͱ͕͋Δ• ํ• EnumͰఆٛ͢Δͷ͕ྑͦ͞͏• StoryboardͰελΠϧࢦఆ͢Δͷ߇͑Δ• IBInspectable enum αϙʔτର֎• ྫ֎ΛϏϧυͰݕͰ͖ͳ͍
• σϑΥϧτΛࢦఆ͢ΔͨΊɺؔͰ࣮• WeightAlignmentݸผͷՕॴͰมߋ͢Δ͜ͱͰ͖Δ• ͜ͷؔΛϏϡʔʹద༻͢ΔελΠϧ࣮
BeforeAfter
ίϯϙʔωϯτ࣮ʢϘλϯͷ߹ʣ• Ϙλϯ2छྨʢlineɺfillʣ• ܾ·͍ͬͯΔ͜ͱ• αΠζ• ؙ֯ͷܾ·Δ• Ϙʔμʔͷଠ͞• จࣈͷελΠϧ• Disableঢ়ଶͷελΠϧ• จࣈ৭ͱϘʔμʔͷ৭ಉ͡
PlaygroundͰಈ࡞֬ೝ
Before After
·ͱΊ• σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ• σβΠϯγεςϜ্ͷγϯϘϧΛ࣮ͨ͠• ελΠϧఆٛ• UIίϯϙʔωϯτఆٛ• ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ• StoryboardͰͷελΠϧࢦఆΛΊͨ• ελΠϧͷ౷ҰੑΛ্ͤ͞ΔͨΊ• StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ• PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ
• iOSΤϯδχΞ• AndroidΤϯδχΞ• αʔόΤϯδχΞΤϯδχΞืूத
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠