ユーザーインターフェイス解剖学（公開版）

「Goodpatch Engineer Meetup Vol.3 エンジニア目線で考えるデザイン」で発表したスライドの公開版です。

https://goodpatch.connpass.com/event/56973/

Transcript

1. ϢʔβʔΠϯλʔϑΣΠεղ๤ֶ Goodpatch Engineer Meetup Vol.3 ΤϯδχΞ໨ઢͰߟ͑ΔσβΠϯ 2017.6.7 © 2017 Satori MARU. ެ։൛
2. @usagimaru / @usagimaruma ؙ
   ྯ ཬ · Δ ͞ ͱ Γ iOS Developer Design Div. Goodpatch Inc.
3. ϢʔβʔΠϯλʔϑΣΠεʹ͍ͭͯߟ͑ɺ ݴޠԽͨ͠ΓͳͲ
4. medium.com/usagimaru
5. qiita.com/usagimaru
6. goodpatch.com/blog/dialog-design
7. ϢʔβʔΠϯλʔϑΣΠεʹͩ͜Θͬͨ ΞϓϦέʔγϣϯ։ൃ
8. JINS MEMEʹΑΓ ूதྗ ΛՄࢹԽ JINS Inc. v1 https://jins-meme.com/ja/office/
9. ೶Ո͔Βফඅऀ΁ ໺ࡊͱѪΛಧ͚ΔσϦόϦʔɾαʔϏε גࣜձࣾϕδΦϕδί iOS / ʙ1.0.1 http://vegeryorganics.com
10. ೔ຊͷ޻ܳͱ࢈஍ͷັྗΛൃ৴͢Δ ޻ܳϝσΟΞɾཱྀͷ͓ͱ΋ΞϓϦ גࣜձࣾத઒੓ࣣ঎ళ https://sunchi.jp/app
11. UIίϯϙʔωϯτͷ࣮૷
13. ࣗ࡞ vs. UIϥΠϒϥϦ
14. ։ൃ࣌ؒΛ୹ॖͰ͖Δ UIҎ֎ʹ஫ྗͰ͖Δ UIϥΠϒϥϦ
15. ͍͍ͨͯ͸ҙਤͨ͠ಈ͖ʹͳΒͳ͍ UIϥΠϒϥϦ OSΞοϓσʔτ΁ͷ௥ਵ΍ґଘؔ܎Λ੍ޚͮ͠Β͍ UIϥΠϒϥϦͷઃܭʹ߹Θͤͳ͚Ε͹ͳΒͳ͍
16. v1
21. ຊࢿྉͰ͸ׂѪ
25. Ξχϝʔγϣϯʹ߹Θͤͯ Taptic EngineʹΑΔ৮֮ϑΟʔυόοΫΛ࣮૷
26. https://github.com/usagimaru/Tanzaku iOS޲͚ॎॻ͖ϥϕϧΛࣗ࡞͠·ͨ͠
27. ϢʔβʔΠϯλʔϑΣΠεΛ͖ͪΜͱσβΠϯ͢ΔͳΒ ΍ͬͺΓࣗ࡞ͯ͠͠·͏ͷ͕ྑ͍
28. ϢʔβʔΠϯλʔϑΣΠεΛཧղ͢Δ
29. ඃࣸମͷ಺ଆΛཧղ͢Δ͜ͱͰɺ ֆըΛඒ͘͠ඳ͘ ϨΦφϧυɾμɾϰΟϯν
30. ϢʔβʔΠϯλʔϑΣΠεͷ಺ଆΛ ཧղ͢Δ͜ͱͰɺඒ͍͠ϓϩμΫτΛ ࡞ΕΔ͸ͣ
31. ϢʔβʔΠϯλʔϑΣΠεͷ࢓૊Έ macOS/iOS͔ΒֶͿ
32. HIGͷ͞ΒʹԞΛ୳ͬͯΈΔ͜ͱͰ ͦͷߏ଄Λཧղ͢Δ
33. Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε
34. ֯R͔ΒಡΈղ͘iOSͷUIσβΠϯ Ϣʔβʔͱͷڑ཭ͱʮؙ͞ʯ
37. ؙ͍ Apple੡඼ͷؙ֯
38. Ϣʔβʔͱͷڑ཭ͱؙ֯ Ϛ΢εͰૢ࡞ صʹஔ͘ ࿹ʹ૷ண ࣖʹ૷ண ϦϞίϯૢ࡞ ยखͰ࣋ͭ
39. ?
40. iOSͷ֯RͷҙຯΛߟ࡯ͯ͠ΈΑ͏
45. ΞϓϦ ΞϓϦͷQuick Actionϝχϡʔ ΢ΟδΣοτ ௨஌όφʔ ֯R͕Ұக͍ͯ͠Δ
46. ΞϓϦ ʹ ௨஌όφʔ ʹ ΢ΟδΣοτ ֯RͷҰக͔ΒΘ͔Δ͜ͱ͸…
50. গͳ͘ͱ΋ ΞϓϦͷRͱҰக͍ͯ͠Δ΋ͷ͸ಉଐੑͬΆ͍
51. ු༡ΦϒδΣΫτͷ֯͸ؙ͍ Ϣʔβʔʹ͍ۙ΋ͷ͸ු༡͍ͯ͠Δ Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍Μ͡ΌͶ
52. Ϣʔβʔଆ
53. UIͷ֊૚ߏ଄ɺϢʔβʔͱͷڑ཭ɺૢ࡞ମܥͱͷؔ܎͕ ֯RͷσβΠϯ͔Βݟ͖͑ͯͨ
54. Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε
55. Cascading Listͱ͸ UIͷ֊૚ߏ଄
56. UINavigationController
57. NeXTSTEP ※Πϝʔδ͸GNUstep
58. iPod
59. Finder Font Panel
60. Cascading List͸ ཻ౓͝ͱʹ৘ใΛ֊૚Խ͢ΔͨΊͷ΋ͷ
61. ϓογϡભҠͰ͸ͲͷΑ͏ʹ৘ใΛ഑ஔ͢΂͖͔Λ ཧղ͢Δ͜ͱ͕Ͱ͖Δ
62. iOS “Mail” Λղ๤ͯ͠ΈΔ UIͷ֊૚ߏ଄
63. #ui-dangi
65. લͷϏϡʔ͕ཪʹݟ͍͑ͯΔ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍ ϞʔμϧϏϡʔ ԼʹυϥοάͰ͖ͦ͏ײ͕͋Δ
66. ϝοηʔδϏϡʔΛυϥοά͢Δͱ࠷Լ୺ʹελοΫ͞ΕΔ άϩʔόϧྖҬʹελοΫ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍
67. ͳͥʁ άϩʔόϧྖҬʹελοΫ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍
68. SafariͷλϒҰཡͱಉ͡ ͜Ε͸ඪ४෦඼Ͱ͸ͳ͍
69. ͳͥʁ
70. macOSʹώϯτ
71. ͦ΋ͦ΋ɺλϒͬͯͳΜͩΖ͏ʁ
72. λϒ͸΢Πϯυ΢͕มԽͨ࢟͠ ×
73. λϒ͸΢Πϯυ΢ʹ෮ݩͰ͖Δ
74. ʹ
75. ʹ
76. “Mail” ͸Ϛϧν΢Πϯυ΢UIΛදͨ͢Ίʹ ͋͑ͯΧελϜUIΛ༻͍ͯͦΕΛ࣮ݱ ʮApple ͛͢ʔͳʔʯ
77. Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε
78. Ϟʔυ Ϟʔυ vs. ϞʔυϨε
79. ͍Βͬ͠Ό͍·ͤ ళɹ಺ Ϙλϯ ͓࣋ͪؼΓ Ϙλϯ ೔ຊޠ English தจ ೠҴয ͓ͭΓ ໭Δ 0ԁ ڇက԰ͷ৯݊ػͬͯ͜Μͳ෩ʹͳͬͯΔ͚Ͳ……
80. ঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ ڇက԰ͷ৯݊ػͷUIϑϩʔ͸ͱͯ΋λεΫࢦ޲ ։࢝ ·ͣλεΫΛݶఆͤ͞Δ ΦϒδΣΫτΛબͿ
81. ঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ঎඼બ୒தʹϞʔυͷ੾Γସ͕͑Ͱ͖ͳ͍ϑϩʔ ։࢝ Ұ୴தࢭͯ࢝͠Ίʹ໭Δ λεΫΛબͼ௚͔ͯ͠Β ಉ͜͡ͱΛ΍Γ௚͢
82. ঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ళ಺Ϟʔυ͔Β࣋ͪؼΓϞʔυʹҠߦ͢Δʹ͸ શͯΛ์غͯ࢝͠Ίʹ໭Βͳ͚Ε͹ͳΒͳ͍ͷͰɺૢ࡞ͮ͠Β͍ ։࢝
83. Ϟʔυ֊૚ Ϟʔυ vs. ϞʔυϨε
85. ిݯ౤ೖ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ
86. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ
87. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ
88. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ
89. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ
90. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ ΞϓϦΛ࢖͏·Ͱʹੵ·Ε͍ͯΔϞʔυ
91. ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ Ϣʔβʔ͕ओʹҙࣝ͢ΔϞʔυ
92. ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ εϦʔϓ / ϩοΫ Ϣʔβʔ͕ʮϗʔϜʯͷ্ͰϞʔυϨεʹৼΔ෣͑Δ͜ͱ͕ॏཁ γεςϜ͕ੜΈग़͢Ϟʔυ͸ɺϢʔβʔͷߦಈͱࢥߟΛ੍ݶͯ͠͠·͏
93. ʮϗʔϜʯʹ୤ग़͢Δ།Ұͷखஈ ΞϓϦ͕ੜΈग़͢Ϟʔυ͔Β͍ͭͰ΋ʮϗʔϜʯʹ໭Δ͜ͱ͕Ͱ͖Δ
94. ϞʔμϧϏϡʔ͔Β୤ग़͢Δखஈ͕ඞཁ
95. ϞʔυΛσβΠϯ͢Δ৔߹͸ Ϟʔυ͔Β୤ग़͢ΔखஈΛඞͣఏڙ͢Δ
96. ϞʔυΛੵΈ͗͢ͳ͍Α͏ʹUIΛσβΠϯ͢Δ
97. MacͷσεΫτοϓɾΠϯλʔϑΣΠε Ϟʔυ vs. ϞʔυϨε
100. UI͸ϨΠϠʔߏ଄ खલ͔Βॱʹ஫໨͞ΕΔ 2 1 5 4 3 ͜ͷதͰ͸࠷Լ૚
101. ϑΥʔΧε͕౰͍ͨͬͯΔ෦෼ ʹ ஫໨͍ͯ͠ΔΦϒδΣΫτ
102. First Responder ͱ“໊ࢺˠಈࢺ”ͷૢ࡞ମܥ ϞʔυϨεΛ࣮ݱ͢ΔͨΊͷ࢓૊Έ
103. First ResponderΦϒδΣΫτʹΠϕϯτ͕ૹΒΕΔ બ୒͍ͯ͠ΔΦϒδΣΫτͷ͏ͪɺ࠷લ໘ʹ͋Δ΋ͷ
104. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app
105. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ΠϝʔδͰ͢
106. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ΦϒδΣΫτΛબ୒͠ɺΞΫγϣϯΛ࣮ߦ͢Δ var firstResponder = "໊শະઃఆϑΥϧμ" open(firstResponder) ΠϝʔδͰ͢ ίʔυͩͱ͜ΜͳΠϝʔδ
107. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ͲͷΦϒδΣΫτͰ΋ಉ͡ΞΫγϣϯ var firstResponder = "໊শະઃఆ.txt" open(firstResponder) ΠϝʔδͰ͢
108. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ෳ਺Λͻͱ·ͱΊͷΦϒδΣΫτͱͯ͠ѻ͏ var firstResponder = ["໊শະઃఆϑΥϧμ", "໊শະઃఆ.txt", "Safari.app"] open(firstResponder) ΠϝʔδͰ͢
109. ΦϒδΣΫτʹର࣮ͯ͠ߦՄೳͳίϚϯυू ΞϓϦ͕࣋ͭ͢΂ͯͷίϚϯυ͸ϝχϡʔόʔʹऩ·͍ͬͯΔ
110. ৘ใΛݟΔ ϑΥϧμ ໊ࢺ ಈࢺ
111. ໊ࢺ ಈࢺ $ cd /System CUI
112. $ cd /System ϝχϡʔόʔͰ͸ίϚϯυҰཡΛ၆ᛌͰ͖Δ͕ɺ CUIͰ͸ίϚϯυΛ֮͑Δඞཁ͕͋Δ CUI
113. $ cd /System ಛఆͷߦಈʹ੍໿͞ΕΔʹϞʔυ͕͋Δ CUI
114. GUI બ୒ͨ͠ޙͷߦಈ͸೚ҙʹϞʔυϨεͰ͋Δ
115. Responder Chain ϞʔυϨεΛ࣮ݱ͢ΔͨΊͷ࢓૊Έ
116. Responder = ΠϕϯτΛड͚औΔΦϒδΣΫτ
117. ͢΂ͯͷϏϡʔ͸responderͰ΋͋Δ Ϗϡʔ͸ೖΕࢠߏ଄Λ࡞Δ ࢠ͔Β਌΁responderΛḷΔඞཁ͕͋Δ Responder Chain Πϕϯτ఻ୡͷͨΊͷCocoaͷ࢓૊Έ
118. Window CustomView TextField Event event event event mouseDown Responder Chain mouseDown() ςΩετೖྗ଴ͪ ಛʹͳ͠ ΞΫςΟϒԽ
119. macOSͰ͸͜ͷΑ͏ͳ࢓૊ΈͰ ϞʔυϨεͳૢ࡞ମܥ͕࣮ݱ͞Ε͍ͯΔ
120. ͍ۙσόΠε ԕ͍σόΠε ֊૚ ཻ౓ ϞʔυϨε Ϟʔυ …
121. ༏ΕͨϓϩμΫτΛղ๤͢Δ͜ͱͰ σβΠϯͷҙຯ͕Θ͔Δ
123. ྑ͍ϓϩμΫτΛੜΈग़ͨ͢Ίʹ΋ σϕϩούʔ͕ͦ͜ ϢʔβʔΠϯλʔϑΣΠεͷ࢓૊ΈΛཧղ͠ͳ͚Ε͹ͳΒͳ͍
124. ϢʔβʔΠϯλʔϑΣΠεͬͯ ໘ന͍ੈքͰ͢Ͷ