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

そのUI、実は簡単じゃないんです

akatsuki174
July 10, 2018

 そのUI、実は簡単じゃないんです

2018/07/10(火) DXEL.1 エンジニアとデザイナーが「いい関係」を築くために

akatsuki174

July 10, 2018
Tweet

More Decks by akatsuki174

Other Decks in Design

Transcript

  1. ͦͷUIɺ
    ࣮͸؆୯͡Όͳ͍ΜͰ͢
    @akatsuki174
    DXEL.1
    ʙΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹʙ

    View Slide

  2. ࣗݾ঺հ
    • ਢ౻ຘ
    • גࣜձࣾZaimॴଐ
    • iOSΤϯδχΞ
    • Twitter, Qiita, SlideShare, GitHub,
    SpeakerDeck, ͸ͯͳϒϩά, note
    →akatsuki174

    View Slide

  3. View Slide

  4. ɾiOSΤϯδχΞੜ׆ͷதͰʮ͏͓ɺ
    ɹؾ࣋ͪ͸͛͢ʔΘ͔Δ͚ͲͦͷUI͸
    ɹख͕ؒ…ʂʯͱࢥͬͨ͜ͱΛ3ͭ঺հ
    ɾͳͥͦΕ͕೉͍͠ͷ͔΋ؚΊͯઆ໌
    ɾԿ͔iOSΞϓϦ੡࡞ͷॿ͚ʹͳΕ͹ͱ…
    ࠓ೔ͷ಺༰

    View Slide

  5. ཁ๬̍ɿʮʻ໭ΔʯϘλϯλοϓ࣌
    ʹΞϥʔτΛද͍ࣔͨ͠

    View Slide

  6. ཁ๬ৄࡉ
    ೖྗܥը໘͔Β໭Δͱ͖ɺʮฤूத
    ͚ͩͲ໭͍͍͔ͬͯͬ͢ʁʯͱ͍͏
    ΞϥʔτΛग़͍ͨ͠

    View Slide

  7. ʮʻ໭ΔʯϘλϯ
    ɾΧελϚΠζ͢Δ͜ͱ͸Ͱ͖Δ
    ɾλοϓ࣌ʹΞΫγϣϯΛ෇͚Ճ͑Δ
    ɹ͜ͱ΋Ͱ͖Δ

    View Slide

  8. ΧελϚΠζྫɿ৭Λม͑Δ

    View Slide

  9. ΧελϚΠζྫɿʮʻʯ only

    View Slide

  10. ΧελϚΠζྫɿtext only

    View Slide

  11. ͕͔ͩ͠͠ʂ
    ɾඪ४ͷʮʻ໭ΔʯUI × ΞΫγϣϯͷ
    ɹ૊Έ߹Θͤ͸ʢݫີʹ͸ʣͰ͖ͳ͍

    View Slide

  12. ͦΕͬΆ͘ؤுͬͨ΍ͭ

    View Slide

  13. ͦΕͬΆ͘ؤுͬͨฐ֐
    ɾશମͰϘλϯͷ৭Λม͍͑ͨ৔߹ʹ
    ɹݸผରԠΛ͢Δඞཁ͕͋Γɺ໘౗
    ɾϝϯςφϯε໘ͰΊΜͲͦ͏

    View Slide

  14. ผҊྫ
    ɾඪ४ͷ໭ΔϘλϯʹ͸͠ͳ͍͜ͱΛ
    ɹڐ༰͢Δ
    ɾࣗಈอଘʹͯ͠ɺͦ΋ͦ΋อଘΛ
    ɹ֬ೝ͢ΔඞཁΛͳ͘͢

    View Slide

  15. ཁ๬̎ɿϋΠύʔϦϯΫΛ෇͚͍ͨ

    View Slide

  16. ϋΠύʔϦϯΫ
    WebͰΑ͘ݟΔϋΠύʔϦϯΫɺ
    iOSͩͱͪΐͬͱΊΜͲ͍͘͞

    View Slide

  17. UILabelͰରԠ͢Δ৔߹
    ɾϥϕϧ಺ͷશͯͷจࣈྻʹର͠
    ɹಉ͡ઃఆ஋ʢ৭ɺαΠζͱ͔ʣΛ
    ɹద༻͢Δͷ͸ָ
    ɾϥϕϧ಺ͷจࣈྻͷҰ෦ʹผͷઃఆ஋
    ɹΛద༻͢͠ΔͳΒNSAttributedString
    ɹΛ࢖͏ඞཁ͕͋Δ

    View Slide

  18. ֘౰෦෼͚ͩ৭෇͚

    View Slide

  19. λοϓ͞Εͨͷ͕ϦϯΫ
    จࣈ෦෼͔൑ఆ

    View Slide

  20. ผҊྫ
    ϦϯΫ෦෼͸Ϙλϯͱͯ͠
    ผͷͱ͜Ζʹஔ͘

    View Slide

  21. ཁ๬̏ɿΞίʔσΟΦϯϝχϡʔΛ
    ࡞Γ͍ͨ

    View Slide

  22. ΞίʔσΟΦϯϝχϡʔ
    ɾiOSඪ४Ͱ͸ΞίʔσΟΦϯϝχϡʔ
    ɹΛ࣮ݱͰ͖ΔΑ͏ͳ࢓૊Έ͸ఏڙ
    ɹ͞Ε͍ͯͳ͍
    ɾؤுͬͯ࡞Ζ͏ͱࢥ͏ͱUITableView
    ɹΛվ଄ͯ͠࡞Δ͜ͱʹͳΔ

    View Slide

  23. UITableView
    Α͘ϦετܕͷUIͰ
    ࢖ͬͯΔ΍ͭ

    View Slide

  24. UITableView
    ΞίʔσΟΦϯ͸ɺ
    ྫ͑͹ΧςΰϦ - δϟϯϧ
    ͷΑ͏ͳ਌ࢠؔ܎͕͋Δ
    ➜section headerΛ
    ΧςΰϦͱͯ͠ɺcellΛ
    δϟϯϧͱͯ͠ߟ͑Δ

    View Slide

  25. ΊΜͲ͍ϙΠϯτ
    ɾηΫγϣϯʹλοϓॲཧΛ෇͚Δ
    ɾ਌ࢠؔ܎ͷσʔλߏ଄Λ࣋ͨͤΔ
    ɾηΫγϣϯͷ։ดঢ়ଶΛ֮͑ͤ͞Δ
    ɾΞχϝʔγϣϯʹࣗ༝͕ޮ͔ͳ͍
    etc…

    View Slide

  26. ผҊྫ
    ɾʢભҠ૿͑Δ͚ͲʣΧςΰϦΛλοϓ
    ɹͨ͠Βδϟϯϧը໘ʹભҠ͢Δ
    ɾWebViewʹ͢Δ

    View Slide

  27. ·ͱΊ
    ɾiOSʹ͸iOSݻ༗ʢUIKitಛ༗ʣͷUI͕
    ɹ͋ΓɺʮiOSͰ͸Α͘ݟͳ͍UIʯʹ͸
    ɹΑ͘ݟͳ͍ͳΓͷཧ༝͕͋Δ
    ɾૣΊʹٞ୊ʹڍ͛ͯɺίετͱମݧ͕
    ɹͪΐ͏Ͳ͍͍ԘകʹͳΔͱ͜ΖΛ
    ɹݟ͚ͭΑ͏

    View Slide

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

    View Slide