ローディング時のより良い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
2. • @macs_6 • iOS / Ruby / Scrum • ECΞϓϦ΍Χ΢ϧͷ։ൃ • ࠷ۙخ͔ͬͨ͠XcodeͷΞοϓσʔτ “Constrain to margins”ʹ νΣοΫ͕͔ͭͳ͍ Constraints͕ফͤΔ
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
5. ಡࠐঢ়ଶͷ࿩
6. ಡࠐதͷίϯϙʔωϯτ • ϓϩάϨεόʔ • εϐφʔ
7. Facebook΍Slackͷಡࠐը໘
9. ཭୤͠ͳͦ͏
10. “νΧνΧͯ͠ ࣍ͷঢ়ଶ͕෼͔Δಡࠐঢ়ଶ”
11. ໊લ͕෼͔Βͳ͍ɾɾ
12. SlackͷOSSҰཡΛ ݟͯΈΔ
14. Shimmer(γϚʔ) • ʮ͖ΒΊ͖ʯ • ؆୯ʹγϚʔΤϑΣΫτΛ࣮૷Ͱ͖Δ • จࣈҎ֎ʹ΋࢖͑Δ • ੲͷiOSͷϩοΫը໘ͷ"swipe to unlock"ͱ͔
15. ShimmerͰ ߋʹௐ΂Δ
16. εέϧτϯεΫϦʔϯ
17. εέϧτϯεΫϦʔϯ • ࣍ʹදࣔ͞ΕΔviewʹࣅͤͨϓϨʔεϗϧμʔ • ࣍ͷදࣔͷݟӫ͑΁ͷظ଴ײΛߴΊΔ • Ϣʔβͷظ଴஋ͷݮগΛ࿨Β͛Δ
18. ಡࠐதͷίϯϙʔωϯτ • ϓϩάϨεόʔ • εϐφʔ • εέϧτϯεΫϦʔϯ
19. νΧνΧ => γϚʔޮՌ ࣍ͷঢ়ଶ͕෼͔Δಡࠐঢ়ଶ => εέϧτϯεΫϦʔϯ
20. ࡞ͬͯΈͨ
21. σϞ
22. import Shimmer ... shimmeringView.isShimmering = true shimmeringView.shimmeringBeginFadeDuration = 0.3 shimmeringView.shimmeringOpacity = 0.3 shimmeringView.contentView = contentView
23. γϯϓϧ
24. ʮ͜ͷΞϓϦ஗͍ʯ
25. ʮ͜ͷΞϓϦ஗͍ʯ • ࣮ࡍʹϨεϙϯε΍ඳը͕஗͍ • ମײతʹ஗͍
26. εέϧτϯεΫϦʔϯͱ ShimmerͰվળ͢Δ͔΋ʂ
27. ·ͱΊ • ϓϩάϨεόʔɾεϐφʔҎ֎ͷεέϧτϯεΫϦʔ ϯͱ͍͏બ୒ࢶ͕͋Δ • ͋ͷνΧνΧ͸γϚʔޮՌͱݺͿ • εέϧτϯεΫϦʔϯʹShimmerΛ࢖͏ͱಡࠐதΆ ͕͞૿͢ • ମݧ͕޲্͢Δ͔΋ʂ
28. We are hiring! ϋ΢εϚʔτ@wantedly