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

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