再利用可能なUI Componentsを利用したアプリ開発

E387c487b4fea568909cf805f91afe92?s=47 Yu Tawata
August 30, 2018

再利用可能なUI Componentsを利用したアプリ開発

E387c487b4fea568909cf805f91afe92?s=128

Yu Tawata

August 30, 2018
Tweet

Transcript

  1. ࠶ར༻ՄೳͳUIίϯϙʔω ϯτΛར༻ͨ͠ΞϓϦ։ൃ iOSDC 2018 ଟ࿨ాɹါ

  2. • ଟ࿨ాɹါ • ΢ΣϧεφϏגࣜձࣾ • Twitterɿ@yuta24 ࣗݾ঺հ

  3. None
  4. ٕज़తͳ՝୊ • ΞϓϦج൫ͷվम • ωοτϫʔΫ૚ • σʔλ૚ • ΞʔΩςΫνϟͷ੔ཧ •

    UXվળ΁ͷରԠ
  5. • ίϯϙʔωϯτԽͷഎܠ • ίϯϙʔωϯτԽͷઓུ • ελΠϧ࣮૷ • ίϯϙʔωϯτ࣮૷ ΞδΣϯμ

  6. ίϯϙʔωϯτԽͷഎܠ

  7. • ։ൃதͷ࢓༷มߋ • ػೳվળ • ϦχϡʔΞϧ ΞϓϦͷUI

  8. ՝୊ • ςΩετͷSize͕ࢦఆͱҟͳΔ • StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε • ෳ਺ͷը໘Ͱಉ͡Α͏ͳUI࣮૷

  9. σβΠφʔͷΞϓϩʔν • σβΠϯγεςϜ • ελΠϧΨΠυΛఆٛ • ΧϥʔεΩʔϚɺςΩετελΠϧ • UIίϯϙʔωϯτΛఆٛ ͷϥΠϒϥϦػೳΛ׆༻ʂ

  10. None
  11. None
  12. ϩάΠϯը໘ͷ৔߹ • มߋͰ͖Δ߲໨ • ςΩετͷ৭ • ϓϨʔεϗϧμʔςΩετ • ΞϯμʔϥΠϯͷ৭ •

    όοΫάϥ΢ϯυͷ৭ • มߋͰ͖Δ߲໨ • શମͷ৭
  13. σβΠφʔ͞Μɺɺɺ ΩϨΠʹ࡞ۀ͠ͱΔ

  14. SketchͷγϯϘϧͷΑ͏ʹ ελΠϧ΍UIίϯϙʔωϯτΛ ར༻ͯ͠UIΛ࡞Ε͹ޮ཰ྑͦ͞͏

  15. ίϯϙʔωϯτԽͷઓུ

  16. Atomic Design ʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ • UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ • ίϯϙʔωϯτΛఆٛ͢Δ • 5ͭͷεςʔδͰ෼͚Δ •

    ݪࢠɺ෼ࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ
  17. Atomic DesignͰݱঢ়੔ཧ εςʔδ σβΠϯγεςϜ ʢSketchʣ ݪࢠ γϯϘϧఆٛ ෼ࢠ γϯϘϧఆٛ ༗ػମ

    ͳ͠ ςϯϓϨʔτ ը໘ఆٛ ϖʔδ ͳ͠
  18. σβΠφͱܾΊͨ͜ͱ • ݪࢠͱ෼ࢠͱ͍͏2૚Ͱߟ͑Δ • ࠶ར༻͞ΕΔ΋ͷ͚ͩίϯϙʔωϯτԽ͢Δ • InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ • InVision/ZeplinͩͱελΠϧ৘ใɺγϯϘϧ৘ใ͕ܽམ ͢Δ

  19. ελΠϧ࣮૷ • ཁ݅ • Size͸ݻఆ • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ • ํ਑ •

    EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ • IBInspectable͸ enum ͸αϙʔτର৅֎ • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍
  20. ελΠϧ࣮૷ • ཁ݅ • Size͸ݻఆ • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ • ํ਑ •

    EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ • IBInspectable͸ enum ͸αϙʔτର৅֎ • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍
  21. • σϑΥϧτ஋Λࢦఆ͢ΔͨΊɺؔ਺Ͱ࣮૷ • Weight΍Alignment͸ݸผͷՕॴͰมߋ͢Δ͜ͱ΋Ͱ͖Δ • ͜ͷؔ਺ΛϏϡʔʹద༻͢Δ ελΠϧ࣮૷

  22. Before After

  23. ίϯϙʔωϯτ࣮૷ʢϘλϯͷ৔߹ʣ • Ϙλϯ͸2छྨʢlineɺfillʣ • ܾ·͍ͬͯΔ͜ͱ • αΠζ • ؙ֯ͷ஋΋ܾ·Δ •

    Ϙʔμʔͷଠ͞ • จࣈͷελΠϧ • Disableঢ়ଶͷελΠϧ • จࣈ৭ͱϘʔμʔͷ৭͸ಉ͡
  24. None
  25. None
  26. PlaygroundͰಈ࡞֬ೝ

  27. Before After

  28. ·ͱΊ • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮૷ͨ͠ • ελΠϧఆٛ • UIίϯϙʔωϯτఆٛ •

    ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ • StoryboardͰͷελΠϧࢦఆΛ΍Ίͨ • ελΠϧͷ౷ҰੑΛ޲্ͤ͞ΔͨΊ • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ
  29. • iOSΤϯδχΞ • AndroidΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத

  30. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠