Mode Power to You

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

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. &OFNZ
    PG
    .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`SF
    CVJMEJOH
    B
    UPPM
94. ©2018 Wantedly, Inc. Page Subtitle 8F`SF
    CVJMEJOH
    B
    UPPM
    UIBU
    GFFMT
    MJLF
    
    BO
    FYUFOTJPO
    PG
    ZPVS
    NJOE
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_ 'PMMPX
     NF
     PO
     5XJUUFS
102. ©2018 Wantedly, Inc. Thank you