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

インタラクションデザインと実装

nakajijapan
October 10, 2016

 インタラクションデザインと実装

nakajijapan

October 10, 2016
Tweet

More Decks by nakajijapan

Other Decks in Technology

Transcript

  1. TIJCVZBTXJGU
    !OBLBKJKBQBO
    ΠϯλϥΫγϣϯ
    σβΠϯͱ࣮૷

    View Slide

  2. huin ͞Μ
    גࣜձࣾFablic͞Μ
    ʹײँʂ

    View Slide

  3. @nakajijapan
    GMO PEPABO inc.
    Principal Engineer
    iOS / Web / OS X
    About Me
    Daichi Nakajima

    View Slide

  4. ϋϯυϝΠυ࡞඼Λ
    ചΕΔɺങ͑Δɻ
    ࠃ಺࠷େڃͷ
    ϋϯυϝΠυϚʔέοτ

    View Slide

  5. NKJMultiMovieCaptureView
    NKJMovieComposer
    NKJPagerViewController
    PhotoSlider
    Teiten
    GitHub
    Sengiri
    Shari
    frustration.me
    Kazaguruma

    View Slide

  6. View Slide

  7. Apple Pay JP
    launch partner

    View Slide

  8. View Slide

  9. View Slide

  10. ΠϯλϥΫγϣϯ
    ͱ࣮૷

    View Slide

  11. ΠϯλϥΫγϣϯ
    σβΠϯͱ͸

    View Slide

  12. ΠϯλϥΫγϣϯ

    View Slide

  13. ΠϯλϥΫγϣϯ
    ૬ޓ࡞༻
    wikipedia

    View Slide

  14. View Slide

  15. View Slide

  16. Interface

    View Slide

  17. Interface

    View Slide

  18. ΠϯλϥΫγϣϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia

    View Slide

  19. ΠϯλϥΫγϣϯσβΠϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia
    खॿ͚

    View Slide

  20. Ԡ༻ඒज़
    ʙΠϯλϥΫγϣϯσβΠϯͷڭՊॻʙ

    View Slide

  21. Ԡ༻ඒज़ͱ͸
    ඒज़Λ೔༻඼΍ߦࣄͳͲ΁
    Ԡ༻͢Δ͜ͱ

    View Slide

  22. View Slide

  23. ඒज़

    View Slide

  24. ඒज़ͱ͸
    ࢹ֮ʹΑͬͯͱΒ͑Δ͜
    ͱΛ໨తͱͯ͠දݱ͞Ε
    ͨ଄ܗܳज़ͷ૯শ
    wikipedia

    View Slide

  25. View Slide

  26. wදݱऀ͕఻͍͑ͨ͜ͱΛؑ৆ऀʹ఻͑Δ
    wܗΛ଄ΒΕͨ΋ͷ
    wֆըɺூࠁɺݐஙɺ޻ܳ౳
    ඒज़ͱ͸

    View Slide

  27. Ԡ༻ඒज़ͱ͸
    ඒज़Λ೔༻඼΍ߦࣄͳͲ΁
    Ԡ༻͢Δ͜ͱ
    wikipedia

    View Slide

  28. View Slide

  29. Ԡ༻ඒज़ͱ͸
    ؾ࣋ͪΑ͘࢖ͬͯ΋Β͏ͨ
    Ίʹศརʹ͢Δ͜ͱ
    wikipedia

    View Slide

  30. ࣮༻తͰ͋Δ͜ͱ

    View Slide

  31. View Slide


  32. View Slide

  33. •໨ඪΛཱͯΔ
    •࣮ߦ͢Δ
    •ධՁ͢Δ
    ਓؒͷߦಈαΠΫϧ

    View Slide

  34. ҙਤ
    ܗ੒
    ߦಈ
    ܾఆ
    ࣮ߦ
    ஌֮
    ղऍ
    ධՁ
    ϊʔϚϯ
    ͷࣣஈ֊
    Ϟσϧ

    View Slide

  35. ҙਤ
    ܗ੒
    ߦಈ
    ܾఆ
    ࣮ߦ
    ஌֮
    ղऍ
    ධՁ
    ϊʔϚϯ
    ͷࣣஈ֊
    Ϟσϧ
    ΑΓখ͍ͯ͘͞͠
    ͘͜ͱ͕࢖͍΍͢
    ͞΁ͷۙಓ

    View Slide


  36. View Slide

  37. վળ

    View Slide

  38. Case Study

    View Slide

  39. Sign up

    View Slide

  40. Feedback

    View Slide

  41. •ϩάΠϯ৘ใͷೖྗΛ͠ͳ͚Ε͹͍͚ͳ͍
    •߲໨ʹ͸༷ʑͳ੍ݶ͕͋Δ
    •શͯਖ਼͍͠৘ใʹͳΒͳ͍ͱSign upͰ͖ͳ
    ͍
    Sign up

    View Slide

  42. View Slide

  43. View Slide

  44. •ೖྗ͸େมɺ࠷େݶܰݮͤ͞Δ
    •ϦΞϧλΠϜʹద੾ͳ৘ใΛೖྗͤ͞Δ
    Α͏༠ಋ͠ɺ࣌ؒ୹ॖ
    •ϧʔϧΛ໌֬ʹͯ͠ঢ়ଶΛ஌֮ͤ͞Δ
    Sign up

    View Slide

  45. Sign up

    View Slide

  46. Sign up
    let selector = #selector(self.existsMinneID(_:))
    NSObject.cancelPreviousPerformRequestsWithTarget(self, selector: selector, object: cell)
    • UITextFieldDelegate#textFieldDidChange
    • Connection

    View Slide

  47. Cart

    View Slide

  48. Keep a context

    View Slide

  49. • ࡏݿΛมߋͰ͖Δ
    Cart

    View Slide

  50. View Slide

  51. •ίϯςΩετΛҡ࣋͢Δ
    •ͳΜͷ࡞඼ΛબΜͩͷ͔
    •͙͢ʹࢦఆͷࡏݿʹมߋͰ͖Δ
    •ෆՄࢹτϦΨʔ
    •શମΛ֬ೝͰ͖ΔΑ͏ʹͰ͖Δ
    Cart

    View Slide

  52. Implementation

    View Slide

  53. Implementation
    • Container View Controller
    • presentViewControllerΛಠ࣮ࣗ૷͢Δ
    • No UIViewControllerTransitioningDelegate!
    • Ξχϝʔγϣϯͷதؒ஍఺Ͱը໘ΛࢭΊ
    ͔ͨͬͨͷͰར༻͍ͯ͠ͳ͍

    View Slide

  54. Implementation
    • Shari
    • https://github.com/nakajijapan/Shari

    View Slide

  55. Scroll View

    View Slide

  56. Prevent mistakes

    View Slide

  57. • Scroll View಺ʹ͸ΧςΰϦͷҰཡ͕ଘࡏ
    • Կճ͔εϫΠϓ͠ͳ͚Ε͹͍͚ͳ͍৔߹͕
    ͋Δ
    • ը໘ྖҬʹ͸ݶք͕͋Δ
    • ؆୯ʹྖҬΛ޿͛ΔΘ͚ʹ͸͍͔ͳ͍
    Scroll View

    View Slide

  58. View Slide

  59. Implementation
    • εϫΠϓޙ̍ඵ͸εϫΠϓྖҬ͕޿͛Δ
    • ̍ඵҎ಺ʹεϫΠϓ͕͋Ε͹Ωϟϯηϧ
    • ͳ͚Ε͹εϫΠϓྖҬ͕໭Δ
    scroll view
    scroll view
    4XJQF
    scroll view scroll view

    View Slide

  60. Implementation

    View Slide

  61. Implementation
    let selector = #selector(self.unlockUserInteractionWithScrollView(_:))
    NSObject.cancelPreviousPerformRequestsWithTarget(self, selector: selector, object:
    scrollView)
    NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: selector, userInfo: nil,
    repeats: false)
    • Lazy Execution and Cancel

    View Slide

  62. ·ͱΊ

    View Slide

  63. ΠϯλϥΫγϣϯσβΠϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia
    खॿ͚

    View Slide

  64. ΠϯλϥΫγϣϯσβΠϯ
    ࣮༻తͰ͋Δ͜ͱ

    View Slide

  65. •໨ඪΛཱͯΔ
    •࣮ߦ͢Δ
    •ධՁ͢Δ
    ਓؒͷߦಈαΠΫϧ

    View Slide

  66. • ঢ়گΛ఻͑ͯϑΟʔυόοΫΛఏڙ͢Δ
    • ίϯςΩετΛҡ࣋͢Δ
    • ϛεΛࣄલʹ๷͙
    ·ͱΊ

    View Slide

  67. Thanks.

    View Slide