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

家計簿アプリZaimのMaterialDesign対応について

C8097f17712da7f3123f28a4d3e6bdb9?s=47 Takahiro Shimokawa
September 11, 2015

 家計簿アプリZaimのMaterialDesign対応について

家計簿アプリZaimのAndroid版で、MaterialDesign対応に取り組んだときに気付いたことをまとめました。

C8097f17712da7f3123f28a4d3e6bdb9?s=128

Takahiro Shimokawa

September 11, 2015
Tweet

More Decks by Takahiro Shimokawa

Other Decks in Design

Transcript

  1. Material Design ରԠʹ͍ͭͯ ΦϯϥΠϯՈܭ฽ Zaim - Takahiro Shimokawa

  2. Self-Introduction 4 Zaim Ͱ Android ΞϓϦͷ։ൃ୲౰ 4 2015/04 : DroidKaigi

    ࣮ߦҕһˍൃද 4 2015/08 : IntelliJ Plugin ษڧձ 4 2015/08 : Android Drawable Viewer
  3. About Zaim 4 Android / iOS / Windows / Web

    4 ϨγʔτࡱӨͰࣗಈೖྗ 4 ۜߦɾΧʔυΛࣗಈऔಘ 4 અ໿Ͱ͖Δ෼ੳάϥϑ 4 ੈք֤ࠃͷ௨՟ʹରԠ 4 ࣏ࣗମͷڅ෇ۚ / ҩྍඅ߇আͳͲͷπʔϧ
  4. ͳͥ Material Design ΛऔΓೖΕΔʹ ࢸ͔ͬͨʁ 4 ը໘ߏ੒ͷվળʹߦ͖٧·͍ͬͯͨ 4 Material Design

    ͷΨΠυϥΠϯ͕੔උ͞Ε࢝Ίͨ 4 ϓϥοτϑΥʔϜඪ४Λॏࢹ͍ͯ͠Δ
  5. Topic UI / UX Λେ͖͘ม͑Δ ͱ͖ʹ஫ҙ͢Δ͜ͱ

  6. Detail 1. Α͘࢖͏ػೳ΁ͷλοϓ਺ 2. ը໘ʹ৮Βͳ͍ঢ়ଶͰͷը໘಺ͷ৘ใྔ 3. ͓໰͍߹Θͤ΁ͷಈઢ

  7. 3. ͓໰͍߹Θͤ΁ͷಈઢ Ϣʔβʔͷཁ๬΍ෆຬΛɺۃྗ͓໰͍߹ΘͤʹདྷΔΑ ͏ଅ͢΄͏͕ྑ͍ɻ 4 ϨϏϡʔʹ͸۩ମతͳҙݟ͸ɺ΄΅ॻ͍ͯ΋Β͑ͳ͍ 4 ωΨςΟϒͳҹ৅Λ࣋ͨΕΔͱɺϨϏϡʔධՁ͸௿͍ 4 ϨϏϡʔʹฦ৴ͯ͠΋ݟͯ΋Β͑Δ͔͸෼͔Βͳ͍

  8. Old Version

  9. New Version

  10. And one more...

  11. 2. ը໘಺ͷ৘ใྔ Ϣʔβʔ͕ݟ͍ͨ৘ใ ≠ ը໘͔ΒಘΒΕΔ৘ใ => ࢖͍ʹ͍͘

  12. Old Version γϯϓϧͳϦετܗࣜͰɺ֓ཁ͕෼͔ ΔΑ͏ʹςΩετ͸গͳ͍ɻ ϨϏϡʔͳͲͰ΋ҎԼͷΑ͏ͳҙݟΛ ௖͘͜ͱ͕͋ͬͨɻ 4 γϯϓϧͰ͍͍ 4 ݟ΍͍͢

  13. New Version - 1 (CardView) ৘ใྔ͕૿͕͑ͨɺҎԼͷΑ͏ͳҙݟ ͕ଟ͘دͤΒΕͨɻ 4 Ұཡੑ͕Լ͕ͬͯݟͮΒ͘ͳͬͨ 4

    ҎલΑΓͨ͘͞ΜεΫϩʔϧ͚͠ Ε͹ͳΒͣ࢖͍ͮΒ͍
  14. New Version - 2 (ListView) Material Design ͷΨΠυϥΠϯΛ ࢀߟʹͭͭ͠ɺैདྷͷ ListView

    ϕʔ εʹ໭ͨ͠ɻ ࠓݱࡏ͸ɺCardView ͷͱ͖ͷΑ͏ ͳҙݟ͸ɺ΄ͱΜͲݟΒΕͳ͘ͳͬ ͨɻ
  15. 1. Α͘࢖͏ػೳ΁ͷλοϓ਺ 4 ͍Ζ͍ΖͳγʔϯͰͷՈܭ฽ͷೖྗ 4 ϨγʔτΛཷΊͯ໷ͱ͔ि຤ͱ͔ʹҰؾʹೖྗ 4 Ҡಈ࣌ؒͳͲεΩϚ࣌ؒʹίπίπೖྗ

  16. Old Version

  17. New Version

  18. And one more... 4 λοϓ͢Δճ਺͕૿͑ͯΊΜͲ͘͞ ͘ͳͬͨɺͱ͍͏ҙݟ͕ଟ͘ͳͬ ͨ 4 ͍Ζ͍ΖͳχʔζʹγϣʔτΧοτ ͰԠ͑Δ

  19. Summary 1. Α͘࢖͏ػೳ΁ͷλοϓ਺ 4 ͔͕ͨ̍λοϓ͞ΕͲ̍λοϓ 2. ը໘಺ͷ৘ใྔ 4 Ұཡੑ͔ݸʑͷৄࡉ͔ 3.

    ͓໰͍߹Θͤ΁ͷಈઢ 4 ϨϏϡʔ΁ͷˑ̍ෆ۩߹ใࠂ͸ෆ޾͔͠࢈·ͳ͍
  20. Engineer Wanted! public Zaim() { ios.setLanguage(Swift); web.setLanguage(Ruby); api.setLanguage(PHP); android.setLanguage(Java); }

  21. Thank you for listening.