Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yu Tawata
August 30, 2018

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

Yu Tawata

August 30, 2018
Tweet

More Decks by Yu Tawata

Other Decks in Technology

Transcript

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

    ଟ࿨ాɹါ

    View Slide

  2. • ଟ࿨ాɹါ

    • ΢ΣϧεφϏגࣜձࣾ

    • Twitterɿ@yuta24
    ࣗݾ঺հ

    View Slide

  3. View Slide

  4. ٕज़తͳ՝୊
    • ΞϓϦج൫ͷվम

    • ωοτϫʔΫ૚

    • σʔλ૚

    • ΞʔΩςΫνϟͷ੔ཧ

    • UXվળ΁ͷରԠ

    View Slide

  5. • ίϯϙʔωϯτԽͷഎܠ

    • ίϯϙʔωϯτԽͷઓུ

    • ελΠϧ࣮૷

    • ίϯϙʔωϯτ࣮૷
    ΞδΣϯμ

    View Slide

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

    View Slide

  7. • ։ൃதͷ࢓༷มߋ

    • ػೳվળ

    • ϦχϡʔΞϧ
    ΞϓϦͷUI

    View Slide

  8. ՝୊
    • ςΩετͷSize͕ࢦఆͱҟͳΔ

    • StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε

    • ෳ਺ͷը໘Ͱಉ͡Α͏ͳUI࣮૷

    View Slide

  9. σβΠφʔͷΞϓϩʔν
    • σβΠϯγεςϜ

    • ελΠϧΨΠυΛఆٛ

    • ΧϥʔεΩʔϚɺςΩετελΠϧ

    • UIίϯϙʔωϯτΛఆٛ
    ͷϥΠϒϥϦػೳΛ׆༻ʂ

    View Slide

  10. View Slide

  11. View Slide

  12. ϩάΠϯը໘ͷ৔߹
    • มߋͰ͖Δ߲໨

    • ςΩετͷ৭

    • ϓϨʔεϗϧμʔςΩετ

    • ΞϯμʔϥΠϯͷ৭

    • όοΫάϥ΢ϯυͷ৭
    • มߋͰ͖Δ߲໨

    • શମͷ৭

    View Slide

  13. σβΠφʔ͞Μɺɺɺ
    ΩϨΠʹ࡞ۀ͠ͱΔ

    View Slide

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

    View Slide

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

    View Slide

  16. Atomic Design
    ʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ
    • UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ

    • ίϯϙʔωϯτΛఆٛ͢Δ

    • 5ͭͷεςʔδͰ෼͚Δ

    • ݪࢠɺ෼ࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ

    View Slide

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

    View Slide

  18. σβΠφͱܾΊͨ͜ͱ
    • ݪࢠͱ෼ࢠͱ͍͏2૚Ͱߟ͑Δ

    • ࠶ར༻͞ΕΔ΋ͷ͚ͩίϯϙʔωϯτԽ͢Δ

    • InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ

    • InVision/ZeplinͩͱελΠϧ৘ใɺγϯϘϧ৘ใ͕ܽམ
    ͢Δ

    View Slide

  19. ελΠϧ࣮૷
    • ཁ݅

    • Size͸ݻఆ

    • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ

    • ํ਑

    • EnumͰఆٛ͢Δͷ͕ྑͦ͞͏

    • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ

    • IBInspectable͸ enum ͸αϙʔτର৅֎

    • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍

    View Slide

  20. ελΠϧ࣮૷
    • ཁ݅

    • Size͸ݻఆ

    • Weight͸มߋ͞ΕΔ͜ͱ͕͋Δ

    • ํ਑

    • EnumͰఆٛ͢Δͷ͕ྑͦ͞͏

    • StoryboardͰελΠϧࢦఆ͢Δͷ͸߇͑Δ

    • IBInspectable͸ enum ͸αϙʔτର৅֎

    • ྫ֎஋ΛϏϧυͰݕ஌Ͱ͖ͳ͍

    View Slide

  21. • σϑΥϧτ஋Λࢦఆ͢ΔͨΊɺؔ਺Ͱ࣮૷

    • Weight΍Alignment͸ݸผͷՕॴͰมߋ͢Δ͜ͱ΋Ͱ͖Δ

    • ͜ͷؔ਺ΛϏϡʔʹద༻͢Δ
    ελΠϧ࣮૷

    View Slide

  22. Before
    After

    View Slide

  23. ίϯϙʔωϯτ࣮૷ʢϘλϯͷ৔߹ʣ
    • Ϙλϯ͸2छྨʢlineɺfillʣ

    • ܾ·͍ͬͯΔ͜ͱ

    • αΠζ

    • ؙ֯ͷ஋΋ܾ·Δ

    • Ϙʔμʔͷଠ͞

    • จࣈͷελΠϧ

    • Disableঢ়ଶͷελΠϧ

    • จࣈ৭ͱϘʔμʔͷ৭͸ಉ͡

    View Slide

  24. View Slide

  25. View Slide

  26. PlaygroundͰಈ࡞֬ೝ

    View Slide

  27. Before After

    View Slide

  28. ·ͱΊ
    • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ

    • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮૷ͨ͠

    • ελΠϧఆٛ

    • UIίϯϙʔωϯτఆٛ

    • ֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ

    • StoryboardͰͷελΠϧࢦఆΛ΍Ίͨ

    • ελΠϧͷ౷ҰੑΛ޲্ͤ͞ΔͨΊ

    • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ

    • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ

    View Slide

  29. • iOSΤϯδχΞ

    • AndroidΤϯδχΞ

    • αʔόΤϯδχΞ
    ΤϯδχΞืूத

    View Slide

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

    View Slide