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

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

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

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