$30 off During Our Annual Pro Sale. View Details »

ローディング時のより良いUIの実装

Hiroki Matsue
December 14, 2016

 ローディング時のより良いUIの実装

「shibuya.swift #6」での発表資料です。
https://shibuya-swift.connpass.com/event/42712/

Qiitaにも実装方法書いてます: http://qiita.com/waytoa/items/5af5ed975dd2e462621a

Hiroki Matsue

December 14, 2016
Tweet

More Decks by Hiroki Matsue

Other Decks in Technology

Transcript

  1. ϩʔσΟϯά࣌ͷ
    ΑΓྑ͍UIͷ࣮૷
    Hiroki Matsue
    גࣜձࣾ Housmart CIO
    Dec 14, 2016
    shibuya.swift #6

    View Slide

  2. • @macs_6
    • iOS / Ruby / Scrum
    • ECΞϓϦ΍Χ΢ϧͷ։ൃ
    • ࠷ۙخ͔ͬͨ͠XcodeͷΞοϓσʔτ
    “Constrain to margins”ʹ
    νΣοΫ͕͔ͭͳ͍
    Constraints͕ফͤΔ

    View Slide

  3. View Slide

  4. Five states (5ͭͷঢ়ଶ)
    1. Ideal State (ཧ૝ঢ়ଶ)
    2. Empty State (ۭঢ়ଶ)
    3. Error State (Τϥʔঢ়ଶ)
    4. Partial State (෦෼తͳঢ়ଶ)
    5. Loading State (ಡࠐঢ়ଶ)
    http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack

    View Slide

  5. ಡࠐঢ়ଶͷ࿩

    View Slide

  6. ಡࠐதͷίϯϙʔωϯτ
    • ϓϩάϨεόʔ
    • εϐφʔ

    View Slide

  7. Facebook΍Slackͷಡࠐը໘

    View Slide

  8. View Slide

  9. ཭୤͠ͳͦ͏

    View Slide

  10. “νΧνΧͯ͠
    ࣍ͷঢ়ଶ͕෼͔Δಡࠐঢ়ଶ”

    View Slide

  11. ໊લ͕෼͔Βͳ͍ɾɾ

    View Slide

  12. SlackͷOSSҰཡΛ
    ݟͯΈΔ

    View Slide

  13. View Slide

  14. Shimmer(γϚʔ)
    • ʮ͖ΒΊ͖ʯ
    • ؆୯ʹγϚʔΤϑΣΫτΛ࣮૷Ͱ͖Δ
    • จࣈҎ֎ʹ΋࢖͑Δ
    • ੲͷiOSͷϩοΫը໘ͷ"swipe to unlock"ͱ͔

    View Slide

  15. ShimmerͰ
    ߋʹௐ΂Δ

    View Slide

  16. εέϧτϯεΫϦʔϯ

    View Slide

  17. εέϧτϯεΫϦʔϯ
    • ࣍ʹදࣔ͞ΕΔviewʹࣅͤͨϓϨʔεϗϧμʔ
    • ࣍ͷදࣔͷݟӫ͑΁ͷظ଴ײΛߴΊΔ
    • Ϣʔβͷظ଴஋ͷݮগΛ࿨Β͛Δ

    View Slide

  18. ಡࠐதͷίϯϙʔωϯτ
    • ϓϩάϨεόʔ
    • εϐφʔ
    • εέϧτϯεΫϦʔϯ

    View Slide

  19. νΧνΧ
    => γϚʔޮՌ
    ࣍ͷঢ়ଶ͕෼͔Δಡࠐঢ়ଶ
    => εέϧτϯεΫϦʔϯ

    View Slide

  20. ࡞ͬͯΈͨ

    View Slide

  21. σϞ

    View Slide

  22. import Shimmer
    ...
    shimmeringView.isShimmering = true
    shimmeringView.shimmeringBeginFadeDuration = 0.3
    shimmeringView.shimmeringOpacity = 0.3
    shimmeringView.contentView = contentView

    View Slide

  23. γϯϓϧ

    View Slide

  24. ʮ͜ͷΞϓϦ஗͍ʯ

    View Slide

  25. ʮ͜ͷΞϓϦ஗͍ʯ
    • ࣮ࡍʹϨεϙϯε΍ඳը͕஗͍
    • ମײతʹ஗͍

    View Slide

  26. εέϧτϯεΫϦʔϯͱ
    ShimmerͰվળ͢Δ͔΋ʂ

    View Slide

  27. ·ͱΊ
    • ϓϩάϨεόʔɾεϐφʔҎ֎ͷεέϧτϯεΫϦʔ
    ϯͱ͍͏બ୒ࢶ͕͋Δ
    • ͋ͷνΧνΧ͸γϚʔޮՌͱݺͿ
    • εέϧτϯεΫϦʔϯʹShimmerΛ࢖͏ͱಡࠐதΆ
    ͕͞૿͢
    • ମݧ͕޲্͢Δ͔΋ʂ

    View Slide

  28. We are hiring!
    ϋ΢εϚʔτ@wantedly

    View Slide