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

4c6ec167a614173c5b31aaf4d1defa19?s=47 Hiroki Matsue
December 14, 2016

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

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

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

4c6ec167a614173c5b31aaf4d1defa19?s=128

Hiroki Matsue

December 14, 2016
Tweet

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͕ফͤΔ
  3. None
  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ͷಡࠐը໘

  8. None
  9. ཭୤͠ͳͦ͏

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

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

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

  13. None
  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