Mode Power to You

465f1412cc277455a0e654eb0adfb378?s=47 Ryo Usami
September 13, 2018

Mode Power to You

モーダル遷移、プッシュ遷移のどちらを利用すべきか明確に説明できますか?モードについての考え方は、OSアプリを構成する重要な要素です。デバイスの大画面化やApp上のタスクの複雑化に合わせて、標準アプリも新しいモーダルデザインが導入されています。このトークでは、モードについての基礎的な考え方から、昨今の進化したモーダル/モードレスデザインについて「Wantedly Visit」での実例を交えながらご紹介します。

465f1412cc277455a0e654eb0adfb378?s=128

Ryo Usami

September 13, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc. Mode power to you Ore-Con 2018 13.Sep.2018

    - Ryo Usami
  2. Wantedly, Inc. 2 Ryo Usami

  3. Wantedly, Inc. 3 5 keywords about Ryo Usami 1. Designer

    at Wantedly, Inc. 2. @usa619_ 3. Age 22 4. 5. Trip
  4. ©2018 Wantedly, Inc. Trip to Kochi

  5. ©2018 Wantedly, Inc.

  6. ©2018 Wantedly, Inc. Freedom makes creativity The Legend of Zelda:

    Breath of the Wild
  7. ©2018 Wantedly, Inc. Freedom requires creativity

  8. ©2018 Wantedly, Inc. Freedom and creativity

  9. ©2018 Wantedly, Inc.

  10. ©2018 Wantedly, Inc. Source: https://gamebanana.com/skins/158235

  11. ©2018 Wantedly, Inc. A tool is not for controlling people,

    controlled by people
  12. ©2018 Wantedly, Inc. Designing Fluid Interfaces (WWDC2018)

  13. ©2018 Wantedly, Inc. Designing Fluid Interfaces (WWDC2018) iPhone is a

    tool
  14. ©2018 Wantedly, Inc. Designing Fluid Interfaces (WWDC2018) “iPhone is a

    tool for information or communication”
  15. ©2018 Wantedly, Inc. “A tool that feels like an extension

    of your mind”
  16. ©2018 Wantedly, Inc. iOS App is a tool Page Title

    Page Subtitle
  17. ©2018 Wantedly, Inc. iOS Developer Page Subtitle Tool Developer =

  18. ©2018 Wantedly, Inc. How should we do? Page Subtitle To

    create a tool that feels like an extension of your mind To create a world filled with freedom and creativity
  19. ©2018 Wantedly, Inc. Page Subtitle Modeless

  20. ©2018 Wantedly, Inc. What’s the “mode” Modal and modeless

  21. ©2018 Wantedly, Inc. Page Subtitle Modal

  22. ©2018 Wantedly, Inc. Page Subtitle Modal View

  23. ©2018 Wantedly, Inc. Page Subtitle

  24. ©2018 Wantedly, Inc. Page Subtitle λΠϜϥΠϯ πΠʔτΛݟΔ πΠʔτΛݟΔ ౤ߘ͢Δ πΠʔτΛ࡞੒͢Δ

  25. ©2018 Wantedly, Inc. Page Subtitle λΠϜϥΠϯ πΠʔτΛݟΔ πΠʔτΛݟΔ ౤ߘ͢Δ πΠʔτΛ࡞੒͢Δ

  26. ©2018 Wantedly, Inc. Page Subtitle Modality creates focus by preventing

    people from doing other things until they complete a task or dismiss a message or view. Modality - Apple Human Interface Guidelines
  27. ©2018 Wantedly, Inc. Page Subtitle It(*modal) locks the user into

    one operation and doesn’t allow the user to work on anything else until that operation is completed. Modelessness - Macintosh Human Interface Guidelines(1995)
  28. ©2018 Wantedly, Inc. Page Subtitle Modal

  29. ©2018 Wantedly, Inc.

  30. ©2018 Wantedly, Inc. Normal mode Page Subtitle on Select mode

    Visual mode Insert mode Commandline mode
  31. ©2018 Wantedly, Inc. Page Subtitle Why is that difficult?

  32. ©2018 Wantedly, Inc. Page Subtitle A tool in real doesn’t

    have mode
  33. ©2018 Wantedly, Inc.

  34. ©2018 Wantedly, Inc. Page Subtitle Modeless

  35. ©2018 Wantedly, Inc. iOS Developer Page Subtitle Tool Developer =

  36. ©2018 Wantedly, Inc. An iOS App -> Page Subtitle A

    tool -> Modeless
  37. ©2018 Wantedly, Inc. An iOS App -> Modeless Page Subtitle

    A tool -> Modeless
  38. ©2018 Wantedly, Inc. ͲͷΑ͏ʹModelessΛ࣮ݱ͢Δ͔ Object-Oriented UI

  39. ©2018 Wantedly, Inc. Page Subtitle Modal λεΫͷखॱΛॏࢹ͢Δ

  40. ©2018 Wantedly, Inc. Page Subtitle Modeless Modal λεΫͷखॱΛॏࢹ͢Δ ର৅ͷΦϒδΣΫτΛॏࢹ͢Δ

  41. ©2018 Wantedly, Inc. Page Subtitle Make Object-Oriented

  42. ©2018 Wantedly, Inc.  ໊ࢺಈࢺ  ৗʹର৅ΦϒδΣΫτΛݟͤΔ  ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ 

    ՄٯੑΛ୲อ͢Δ To make Object-Oriented
  43. ©2018 Wantedly, Inc.  ໊ࢺಈࢺ  ৗʹର৅ΦϒδΣΫτΛݟͤΔ  ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ 

    ՄٯੑΛ୲อ͢Δ To make Object-Oriented
  44. ©2018 Wantedly, Inc. ໊ࢺಈࢺ

  45. ©2018 Wantedly, Inc. ϋϯϚʔΛଧͭ·Ͱ ಈࢺ໊ࢺ ԿΛଧͱ͏ʁ ଧͱ͏ ఝΛଧͱ͏ ଧͭ ԿͰଧͱ͏ʁ

    ϋϯϚʔͰଧͱ͏
  46. ©2018 Wantedly, Inc. ఝΛ࣋ͭ ϋϯϚʔΛ࣋ͭ ϋϯϚʔͰఝΛଧͱ͏ ଧͭ ϋϯϚʔΛଧͭ·Ͱ ໊ࢺಈࢺ

  47. ©2018 Wantedly, Inc.

  48. ©2018 Wantedly, Inc. Choose tweet to action

  49. ©2018 Wantedly, Inc.

  50. ©2018 Wantedly, Inc.  ໊ࢺಈࢺ  ৗʹର৅ΦϒδΣΫτΛݟͤΔ  ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ 

    ՄٯੑΛ୲อ͢Δ To make Object-Oriented
  51. ©2018 Wantedly, Inc.

  52. ©2018 Wantedly, Inc.  ໊ࢺಈࢺ  ৗʹର৅ΦϒδΣΫτΛݟͤΔ  ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ 

    ՄٯੑΛ୲อ͢Δ To make Object-Oriented
  53. ©2018 Wantedly, Inc.

  54. ©2018 Wantedly, Inc.  ۭؒΛ۠੾Δ  ։ดͰ͖Δ  ग़ೖΓ͢ΔਓΛ੍ݶͰ͖Δ ࢪৣ

    υΞͷػೳ
  55. ©2018 Wantedly, Inc. ࠓ೔͜͜ʹདྷΔ·ͰυΞΛ ͍ͭ͘ར༻͠·͔ͨ͠ʁ

  56. ©2018 Wantedly, Inc. ©Richard Thomas

  57. ©2018 Wantedly, Inc. ͳͥɺҙࣝ͠ͳ͍ͷ͔ʁ

  58. ©2018 Wantedly, Inc. ˠ  ͢Ͱʹ Կ౓΋ ར༻ͨ͜͠ͱ͕͔͋ͬͨΒ  υΞʹݟ͑Δ΋ͷ͸ಉ͡ৼΔ෣͍Λͯ͘͠ΕΔ͔Β

     υΞͷར༻ͷ͞Εํ͕ಉ͔ͩ͡Β
  59. ©2018 Wantedly, Inc.

  60. ©2018 Wantedly, Inc.

  61. ©2018 Wantedly, Inc.

  62. ©2018 Wantedly, Inc.

  63. ©2018 Wantedly, Inc. ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ

  64. ©2018 Wantedly, Inc.  ໊ࢺಈࢺ  ৗʹର৅ΦϒδΣΫτΛݟͤΔ  ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ 

    ՄٯੑΛ୲อ͢Δ To make Object-Oriented
  65. ©2018 Wantedly, Inc. Page Subtitle Make destructive choices prominent. Use

    red for buttons that perform destructive or dangerous actions, and display these buttons at the top of an action sheet. Action Sheet - Apple Human Interface Guidelines
  66. ©2018 Wantedly, Inc.

  67. ©2018 Wantedly, Inc. Page Subtitle Modeless

  68. ©2018 Wantedly, Inc. &OFNZPG.PEFMFTT

  69. ©2018 Wantedly, Inc. Page Subtitle 1. Freedom and creativity

  70. ©2018 Wantedly, Inc. Page Subtitle Modeless requires creativity

  71. ©2018 Wantedly, Inc.

  72. ©2018 Wantedly, Inc. Page Subtitle 0CKFDU0SJFOUFEΛΊͪΌͪ͘Όେ੾ʹ͢Δ

  73. ©2018 Wantedly, Inc. Page Subtitle Hint!

  74. ©2018 Wantedly, Inc. Page Subtitle ͢΂͕ͯϞʔυϨεͳΒɺ࢖͍΍͍͢ʁ

  75. ©2018 Wantedly, Inc. Page Subtitle & Especially on a mobile

    devie
  76. ©2018 Wantedly, Inc. Page Subtitle 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ ˠ ͦ΋ͦ΋ʜ γϯϓϧʹ͢ΔͨΊʹϞʔυΛಋೖͨ͠

  77. ©2018 Wantedly, Inc. Ͳ͏΍ͬͯղܾ͢Δ͔

  78. ©2018 Wantedly, Inc. * Ϟʔυ͕ඞཁͳ΄ͲෳࡶͳλεΫͳͷ͔

  79. ©2018 Wantedly, Inc. ** Ϟʔυͷதʹ͍Δ͜ͱΛ໌ࣔ͢Δ

  80. ©2018 Wantedly, Inc.

  81. ©2018 Wantedly, Inc. ***Ωϟϯηϧ Ϟʔυ͔Βͷ཭୤ Λ໌ࣔ͢Δ

  82. ©2018 Wantedly, Inc.

  83. ©2018 Wantedly, Inc. *7׬શͳϞʔυʹ͢Δඞཁ͕͋Δ͔

  84. ©2018 Wantedly, Inc. 2007 → 2017

  85. ©2018 Wantedly, Inc. Today iPhone XS Max

  86. ©2018 Wantedly, Inc. Semi-Modal View

  87. ©2018 Wantedly, Inc.

  88. ©2018 Wantedly, Inc. Semi-Modal View Is not Half-Modal View

  89. ©2018 Wantedly, Inc. l൒ʢ4FNJʣͱ͍͏ͷ͸ը໘ͷେ͖͕͞൒෼ʢ)BMGʣͱ͍͏ҙ ຯͰ͸͋Γ·ͤΜ͕ɺҰ෦ͷΞϓϦέʔγϣϯͰ͸ݩ͍ͨը໘͕ νϥݟ͑͢ΔදݱʹΑͬͯϢʔβʔ͕୹ظهԱ͔ΒҎલͷग़དྷࣄ Λ׬શʹ๨٫ͤͣʹ৽ͨͳը໘ͱ޲͖߹͑ΔΑ͏ʹ͍ͯ͠·͢ɻz J04ʹ͓͚Δ൒ϞʔμϧϏϡʔͷղऍ!VTBHJNBSV

  90. ©2018 Wantedly, Inc.

  91. ©2018 Wantedly, Inc. * Ϟʔυ͕ඞཁͳ΄ͲෳࡶͳλεΫͳͷ͔ ** Ϟʔυͷதʹ͍Δ͜ͱΛ໌ࣔ͢Δ ***Ωϟϯηϧ Ϟʔυ͔Βͷ཭୤ Λ໌ࣔ͢Δ

    *7׬શͳϞʔυʹ͢Δඞཁ͕͋Δ͔ .PEFΛݮΒͨ͢Ίʹ
  92. ©2018 Wantedly, Inc. Page Subtitle ̏(SPXUI)BDL

  93. ©2018 Wantedly, Inc. Page Subtitle 8F`SFCVJMEJOHBUPPM

  94. ©2018 Wantedly, Inc. Page Subtitle 8F`SFCVJMEJOHBUPPMUIBUGFFMTMJLF BOFYUFOTJPOPGZPVSNJOE

  95. ©2018 Wantedly, Inc. A tool is not for controlling people,

    controlled by people
  96. ©2018 Wantedly, Inc. An app is not for controlling people,

    controlled by people
  97. ©2018 Wantedly, Inc. An Interface is not for controlling people,

    controlled by people
  98. ©2018 Wantedly, Inc. Creativity

  99. ©2018 Wantedly, Inc. Mode power to you

  100. ©2018 Wantedly, Inc. End

  101. ©2018 Wantedly, Inc. @usa619_ 'PMMPXNFPO5XJUUFS

  102. ©2018 Wantedly, Inc. Thank you