Designing Desktop Interactions

Designing Desktop Interactions（公開版）

macOS native Symposium #01
https://macos-native.github.io

Transcript

1. macOS native Symposium #01 @usagimaruma Designing Desktop Interactions #macosnative 2018.8.29 © 2018 Satori MARU. https://macos-native.github.io @usagimaruma
2. ΠϯλʔϑΣΠεઃܭ࢜ Interface & Interaction Design / macOS / iOS / Sketch Plugin usagimaru interactionmania.com @usagimaru @usagimaruma
3. https://github.com/usagimaru/Musical-View #macosnative ୯ͳΔ୳ڀ৺ʴ࣮૷දݱͷ஁࿉ Music App ͷΠϯλʔϑΣΠεΛ໨ίϐ࠶ݱ
4. https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin #macosnative Sketch Ͱ Apple ͷγεςϜϑΥϯτΛѻ͑Δʹ͢ΔϓϥάΠϯ
5. https://github.com/usagimaru/SketchTurbo #macosnative NSResponder ͷϝιουΛ Swizzling ͢Δ͜ͱͰ࣮ݱ Sketch ͷεΫϩʔϧΛര଎ʹ͢ΔϓϥάΠϯ
6. Navigator for Sketch (Prototype) #macosnative ։ൃத Sketch ʹ Photoshop ෩φϏήʔλʔΛ௥Ճ͢ΔϓϥάΠϯ
7. https://macos-native.github.io #macosnative
8. https://macos-native.github.io #macosnative ࠓ೔ͷτϐοΫ
9. #macosnative API Xcode Objective-C Swift XIB
10. Designing Desktop Interactions.key Designing Desktop Interactions.key 74.8 MB macOS High Sierra
11. Finder #macosnative
12. The Macintosh Desktop Experience #macosnative
13. #macosnative System 7.5.3
14. #macosnative
15. #macosnative
16. #macosnative
17. Macintosh Desktop Experience ͷઃܭࢥ૝ #macosnative
18. https://developer.apple.com/design/human-interface-guidelines/ #macosnative
19. macOS Human Interface Guidelines (2018) https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/ #macosnative
20. macOS Human Interface Guidelines (2018) https://developer.apple.com/design/human-interface-guidelines/macos/overview/visual-index/ #macosnative
21. Human Interface Guidelines Second Beta Draft (1986) #macosnative
22. #macosnative Human Interface Guidelines Second Beta Draft (1986) l͜ͷઅͰ͸ɺ"QQMF
    ώϡʔϚϯΠϯλʔϑΣΠεͷഎޙʹ͋Δݪଇɺ͢ͳΘͪ ΠϯλʔϑΣΠεͷਫ਼ਆΛ֓આ͠·͢ɻ͜ΕΒͷݪଇ͸ݱࡏͷʮσεΫτοϓʯ ΠϯλʔϑΣΠεʹݶఆ͞Εͳ͍ΑΓҰൠతͳ΋ͷͰ͋Γɺ৽͍͠ΠϯλʔϑΣ ΠεͷϝλϑΝʔ͕ݟ͔ͭͬͨ৔߹Ͱ΋༗ޮͰ͢ɻͨͱ͑͹ɺίϯϐϡʔλ͸ৗ ʹ৘ใͷදࣔΛఏڙ͠·͕͢ɺඞͣ͠΋ʮ΢Πϯυ΢ʯΛ࢖༻͢Δඞཁ͸͋Γ· ͤΜɻz
23. Apple Human Interface Guidelines (1987) #macosnative
24. ‣ Metaphors from the real world ‣ Direct manipulation ‣ See-and-point (instead of remember-and-type) ‣ Consistency ‣ WYSIWYG (what you see is what you get) ‣ User control ‣ Feedback and dialog ‣ Forgiveness ‣ Perceived stability ‣ Aesthetic integrity Apple Human Interface Guidelines (1987) #macosnative General design principles (1987)
25. ‣ Metaphors ‣ Direct Manipulation ‣ See-and-Point ‣ Consistency ‣ WYSIWYG (What You See Is What You Get) ‣ User Control ‣ Feedback and Dialog ‣ Forgiveness ‣ Perceived Stability ‣ Aesthetic Integrity ‣ Modelessness Macintosh Human Interface Guidelines (1992) #macosnative Human Interface Principles (1992)
26. ‣ Mental Model ‣ Metaphors ‣ Explicit and Implied Actions ‣ Direct Manipulation ‣ Consistency ‣ User Control ‣ Feedback and Commiunication ‣ Forgiveness ‣ Aesthetic Integrity OS X Human Interface Guidelines (2016) #macosnative Design Principles (2016)
27. OS X Human Interface Guidelines (2016) #macosnative
28. macOS Human Interface Guidelines (2018) https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/ #macosnative
29. WWDC17 802 Essential Design Principles https://developer.apple.com/videos/play/wwdc2017/802/ #macosnative
30. ҙ༁ɿ
    lඒ͘͠ઃܭ͞ΕͨΞϓϦέʔγϣϯ͸҆৺ͯ͠࢖͏͜ͱ͕Ͱ͖·͢ɻ࢖͍ํ͕ ໌շͰɺશ͕ͯ໨తͷͨΊʹਖ਼͘͠ػೳ͠·͢ɻͦΕΛ࡞ͬͨਓʑ͕ࢲͨͪͷ ͜ͱΛे෼ʹߟ͑ͯઃܭ͍ͯ͠Δ͜ͱ͕Α͘Θ͔Γ·͢ɻ͜Ε͸ɺΠϯλʔϑΣ ΠεΛ௨ͯ͠σβΠφʔͷਓؒੑΛײ͡ΒΕΔͱ͍͏͜ͱͳͷͰ͢ɻσβΠφʔ ͕ʰϢʔβʔʱͷ͜ͱΛߟ͑ΔҰํͰɺϢʔβʔ΋·ͨσβΠφʔͷʰਓؒੑʱ ͱ͍͏΋ͷΛײ͡औΔ͜ͱ͕Ͱ͖ΔͷͰ͢ɻz #macosnative Human Interface WWDC17 802 Essential Design Principles https://developer.apple.com/videos/play/wwdc2017/802/
31. ʁʁʁ lΦϨͷσβΠϯͷํ͕༏Ε͍ͯΔ͔Β
    )*(
    ͳΜͯಡ·ͳ͍z #macosnative lΨΠυϥΠϯࢸ্ओٛͰ͸ྑ͍σβΠϯʹ͸ͳΒͳ͍z
32. ʁʁʁ #macosnative lΦϨͷσβΠϯͷํ͕༏Ε͍ͯΔ͔Β
    )*(
    ͳΜͯಡ·ͳ͍z lΨΠυϥΠϯࢸ্ओٛͰ͸ྑ͍σβΠϯʹ͸ͳΒͳ͍z ༏ྼ΍ϓϥΠυͷ࿩Ͱ͸ͳ͍
33. #macosnative Design
34. #macosnative Design “͋Δ؀ڥͷγεςϜ͕ͲͷΑ͏ʹػೳ͢Δ͔Λઃܭ͠ ώτ͕ΠϯλϥΫτͰ͖Δঢ়ଶΛͭ͘Δ͜ͱ” “ਓͱγεςϜͱͷΠϯλʔϑΣΠεΛߏங͢Δ͜ͱ”
35. #macosnative macOS ͱ͍͏σεΫτοϓɾΤΫεϖϦΤϯεΛ ࢲͨͪ΋ਅ໘໨ʹσβΠϯ͠Α͏Ͱ͸ͳ͍͔ native
36. Native Interfaces vs. Non-native Interfaces #macosnative
37. #macosnative
38. #macosnative !
39. #macosnative
40. #macosnative "
41. https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/ web #macosnative
42. Photoshop Installer #macosnative
43. Photoshop Installer #macosnative
44. #macosnative mac OS ςΩετ
45. #macosnative mac OS ςΩετ Click
46. ςΩετ #macosnative mac OS Click Click
47. #macosnative mac OS ςΩετ Drag
48. #macosnative mac OS τ ⌫ ςΩετೖྗதʹ͸ Χʔιϧ͕ඇදࣔ
49. #macosnative mac OS ↩︎ τ
50. #macosnative mac OS τ Click
51. #macosnative mac OS ςΩετ ςΩετ ϨΠϠʔΦϒδΣΫτ ςΩετΦϒδΣΫτ Click Click Click
52. #macosnative mac OS ςΩετ NSTextField.isSelectable = true Mouse Down
53. ςΩετ #macosnative mac OS Drag NSTextField.isSelectable = true
54. ςΩετ #macosnative mac OS Drag NSTextField.isSelectable = false (default)
55. #macosnative mac OS ςΩετ બ୒ෆՄೳ બ୒Մೳ https://w બ୒ෆՄೳ͕جຊ બ୒ͷඞવੑ͕͋Δ৔߹ʹݶΔ 63-
    
    Τϥʔίʔυ
    
    ໊લ
    
    ΞΫγϣϯͷର৅
    ίϯςΫετϝχϡʔͷର৅
56. #macosnative PNG Done web
57. #macosnative PNG Done web Mouse Down
58. #macosnative PNG Done web Drag
59. #macosnative PNG Done web #
60. ߲໨ ߲໨ ߲໨ ߲໨ … PNG Done # બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ #macosnative ⌘C ? ⌘A ? ⌫ ? ίϯςΫετϝχϡʔʁ υϥοάʁ web
61. ߲໨ ߲໨ ߲໨ ߲໨ … PNG Done # બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ #macosnative ⌘C ? ⌘A ? ⌫ ? ίϯςΫετϝχϡʔʁ υϥοάʁ web
62. PNG Done # ςΩετͱೝࣝ͞Εͳ͍ΠϯλʔϑΣΠεཁૉ͕ ňςΩετબ୒ʯͰ͖ͯ͠·͏ͷ͸͓͔͍͠ #macosnative web
63. #macosnative web
64. #macosnative Text Document web
65. #macosnative Text Document web View PNG Done
66. #macosnative Text Document web View ʁ PNG Done
67. #macosnative Text Document web View ʁ ϝϯλϧϞσϧͱදݱͷෆҰக දݱ ϝϯλϧϞσϧ PNG Done ࣮૷
68. #macosnative $
69. #macosnative
70. #macosnative ⌘ H
71. ⌘ H #macosnative #
72. ؀ڥઃఆ΢Πϯυ΢ #macosnative mac OS
73. ؀ڥઃఆ΢Πϯυ΢ #macosnative ϞʔυϨεμΠΞϩά มߋͷଈ࣌൓ө อଘϘλϯ͸ෆཁ mac OS
74. OS X Human Interface Guidelines (2014) #macosnative
75. #macosnative #
76. #macosnative Window mac OS
77. #macosnative Window ࠨଆʹΫϩʔζϘλϯ mac OS
78. #macosnative
79. #macosnative ӈଆʹΫϩʔζϘλϯ
80. #macosnative ӈଆʹΫϩʔζϘλϯ #
81. ✓ ΫϩεϓϥοτϑΥʔϜͰ։ൃίετ͕Ӡʑ ✓ macOS / Windows / web ͍ͣΕͰ΋ಉ͡Α͏ʹ࢖͑Δ ✓ ωΠςΟϒΞϓϦέʔγϣϯ։ൃͷෑډ͕ߴ͍ ‣ ύϑΥʔϚϯε͕ѱ͍ ‣ Cocoa Λ׆༻Ͱ͖ͳ͍ Non-native App ߟ #macosnative #
82. ‣ Human Interface Guidelines Λक͍ͬͯͳ͍ ‣ ਅͷωΠςΟϒΠϯλʔϑΣΠεͰ͸ͳ͍ ‣ macOS ωΠςΟϒ؀ڥશମͰ༗ޮͳΠϯλϥΫγϣϯ͕௨͡ͳ͍ ‣ macOS ͷσβΠϯʹద߹͍ͯ͠ͳ͍ ‣ ͦΕͧΕͷʮؒʯΛऔΔͨΊʹɺத్൒୺ͳ඼࣭ͷΠϯλʔϑΣΠε ʹ࢓্͕͍ͬͯΔ Non-native App ߟ #macosnative %
83. ։ൃ౎߹ͷϓϩίϯͰ൑அ͢ΔͷͰ͸ͳ͘ɺ γεςϜͱͯ͠Ͳ͏͋Δ΂͖͔ʮσβΠϯʯΛߟ͑ͳ͚Ε͹ͳΒͳ͍ #macosnative
84. ΠϯλϥΫγϣϯઃܭͷཁ఺ #macosnative
85. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจͷݪଇ #macosnative
86. #macosnative
87. #macosnative ໊ࢺత ಈࢺత
88. #macosnative ໊ࢺత ಈࢺత ໊ࢺత ಈࢺత
89. #macosnative
90. #macosnative ໊ࢺత ಈࢺత
91. #macosnative Designing Desktop Interactions.key Designing Desktop Interactions.key 74.8 MB ໊শະઃఆϑΥϧμ Keynote.app ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత બ୒͢Δ Ϟϊ ΞΠίϯͰදݱͰ͖Δ ࣮ߦ͢Δ ίτ ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍ Clarus.moof
92. #macosnative ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత બ୒͢Δ Ϟϊ ΞΠίϯͰදݱͰ͖Δ ࣮ߦ͢Δ ίτ ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍ ΦϒδΣΫτͳͷͰ ਤܗతͳදݱ͕Մೳ Designing Desktop Interactions.key Designing Desktop Interactions.key 74.8 MB ໊শະઃఆϑΥϧμ Keynote.app Clarus.moof
93. #macosnative
94. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจ #macosnative ΦϒδΣΫτ ΞΫγϣϯ ࣮ߦ બ୒
95. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจ #macosnative ΦϒδΣΫτ ΞΫγϣϯ ࣮ߦ બ୒ cralus.moof() object method First Responder ʹ NSView ← NSResponder ʹ Message ϑΥʔΧε
96. ஫ҙͷॴࡏͱϑΥʔΧε #macosnative
97. ώϡʔϝΠϯɾΠϯλϑΣʔε
    ਓʹ΍͍͞͠γεςϜ΁ͷ৽ͨͳࢦ਑
    r
    جຊಈ࡞ͷ෼ྨ lΠϯλϑΣʔεʹ͸ɺ΍ΓͱΓͷத৺ͱͳΔ
    ϑΥʔΧεʢGPDVTʣ͕ɺ ͚ͨͬͨͭͩઃఆ͞Ε·͢ɻz +FG
    3BTLJO #macosnative lਓ͕ؒ΍ΓͱΓΛओಋ͍ͯ͠Δ࣌ɺ௨ৗ͸ݱࡏͷηϨΫγϣϯ͕ϑΥʔΧε ͱͳΓ·͢ɻͦͯ͠ɺγεςϜ͕ਓؒ΍֎෦͔Βͷಈ࡞ʹԠ౴͢Δ࣌ɺ௨ৗ ͸ಈ࡞ͷ݁Ռ͕ϑΥʔΧεͱͳΔͷͰ͢ɻz
98. ώϡʔϝΠϯɾΠϯλϑΣʔε
    ਓʹ΍͍͞͠γεςϜ΁ͷ৽ͨͳࢦ਑
    r
    جຊಈ࡞ͷ෼ྨ l͋ͳ͕ͨλονλΠϐϯάΛߦͳ͓ͬͯΓɺλΠϐϯάͨ͠಺༰͕σΟεϓ ϨΠʹදࣔ͞Ε͍ͯΔͷͰ͋Ε͹ɺͦͷλΠϐϯά಺༰ͷදΕ͍ͯΔ৔ॴ͕ ϑΥʔΧεʹͳΓɺ͠͹͠͹͕ͦ͜
    ஫ҙͷॴࡏ
    ͱͳΔΘ͚Ͱ͢ɻ΋͋͠ͳͨ ͕λονλΠϐϯάΛߦͳ͍ͬͯͳ͍ͷͰ͋Ε͹ɺ͋ͳͨͷ஫ҙͷॴࡏ͸Ωʔ ϘʔυͱσΟεϓϨΠͷؒΛߦ͖དྷ͢Δ͜ͱʹͳΓ·͢ɻz +FG
    3BTLJO #macosnative
99. See-and-Point #macosnative
100. #macosnative
101. #macosnative
102. #macosnative
103. #macosnative ΫϦοΫݕ஌఺
104. #macosnative ΫϦοΫݕ஌఺
105. #macosnative
106. https://developer.apple.com/videos/play/wwdc2018/803/ #macosnative l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
107. #macosnative ਎ମ ਎ମͷԆ௕ ਎ମͷԆ௕ ໊শະઃఆϑΥϧμ ෺ཧੈք GUI ΦϒδΣΫτ
108. Χʔιϧ͸਎ମͷԆ௕ #macosnative ʢӈखʣ
109. Πϯδέʔγϣϯ #macosnative
110. https:// ໊শະઃఆϑΥϧμ Πϯδέʔγϣϯ #macosnative ͨͩ͠ɺ΄ͱΜͲ͢΂ͯͷঢ়گʹ͓͍ͯ ૢ࡞΍ࢦ͍ࣔͯ͠͠Δର৅ʹؔ͢Δ΋ͷ Ͱ͋Δ
113. ༥͚ΔσβΠϯ
     ʕϋʔυºιϑτºωοτ࣌୅ͷ৽ͨͳઃܭ࿦ lࢲͨͪ͸ΧʔιϧΛৗʹҙࣝͨ͠ΓΧʔιϧʹ͍ͭͯ ߟ͑ͨΓ͢Δ͜ͱ͸ͳ͍ɻࢲͨͪͷҙࣝʹͷ΅ͬͯ͘Δ ͷ͸ɺ΄ͱΜͲ͢΂ͯɺΧʔιϧ͕ࢦ͢ର৅ͷํͰ͋Δɻ ͦͷ఺ͰɺΧʔιϧ͸ಁ໌Խ͍ͯ͠ΔଘࡏͰ͋Δɻz ౉ᬑܙଠ #macosnative
114. Multi-Touch σόΠεͱϙΠϯςΟϯά #macosnative
115. https://www.youtube.com/watch?v=t4OEsI0Sc_s #macosnative l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
116. https://developer.apple.com/videos/play/wwdc2018/803/ #macosnative l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
117. #macosnative
118. Push #macosnative
119. Push #macosnative Tool Tip͸Ϛ΢εΦʔόʔʹΑͬͯ දࣔͰ͖Δ؆қϔϧϓͰ͢ɻ
120. https://developer.apple.com/videos/play/wwdc2018/803/ #macosnative
121. ஌֮͞ΕͨΞϑΥʔμϯε #macosnative ৮Εͦ͏ ॊΒ͔ͦ͏ ߔʹԊͬͯಈ͔ͤͦ͏ ৮Εͳͦ͞͏ ݻͦ͏ ಛʹಈ͔ͤͳͦ͏ ු͍͍ͯΔ ු͍͍ͯͳ͍ ૢ࡞ͷख͕͔Γͱ߳Γ෇͚
122. #macosnative iPhone 7 iPhone X ݻணͨ͠ Dock ු༡ͨ͠ Dock
123. #macosnative Inspector movie.mov Source: ~/Desktop/movie.mov Format: H.264 1024 × 576 AAC 44100 Hz Stereo L R FPS: 23.976 Data Size: 402.5 MB Data Rate: 1992.30 kbit/s Current Size: 1024 × 576 Window
124. ΠϯλʔϑΣΠεͷϞʔυ #macosnative
125. όωࣜϞʔυ ʢٖࣅϞʔυʣ #macosnative
126. Adobe Photoshop CC 2018 #macosnative Space Drag
127. #macosnative ⇧ a a = a = A γϑτϞʔυ
128. ‣ ૢ࡞Λதஅ͢Δ͜ͱͰɺࣗಈతʹϞʔυ͔Βൈ͚Β ΕΔ ‣ όωػߏʹΑͬͯϞʔυ͔Βԡ͠ग़͞ΕΔΠϝʔδ ‣ ಛఆͷΩʔΛԡԼத ‣ Ϛ΢εԡԼத ‣ υϥοά࠷த #macosnative όωࣜϞʔυʢٖࣅϞʔυʣ ⇧ Ϣʔβʔ͕ૢ࡞͢ΔؒͷΈ༗ޮͳ୹ظؒͷϞʔυ
129. Sticky Menu #macosnative
130. όωࣜʢچདྷܕʣ #macosnative
131. Tear-Off Menu Inside Macintosh – Human Interface Toolbox (1996) #macosnative
132. Popovers #macosnative
133. #macosnative
134. #macosnative ϞʔυϨεύωϧʹ ෼཭
135. #macosnative
136. Popover Λల։ Popover ಺ͷϞʔυʹ͋Δঢ়ଶɻ ஍ਤͷૢ࡞Λ࢝ΊΔͱϞʔυ͔Βൈ͚Δɻ #macosnative
137. ϞʔυϨεύωϧʹ෼཭ Ϟʔμϧͳ Popover ΛϞʔυϨεύωϧԽɻ ϢʔβʔͷΠϯλϥΫτՄೳͳൣғ͸੍ݶ͞Εͳ͍ɻ #macosnative
138. ‣ ୹ظؒͷҰճ׬݁ܕϞʔυ ‣ ϞʔμϧύωϧΑΓ΋ܰྔͳϞʔυ ‣ Popover ֎ͷૢ࡞Ͱࣗಈऴྃ ‣ ϞʔυͷࣗಈऴྃΛ્ࢭͰ͖ͳ͍ ‣ ల։ͨ͠Β͙͢ʹ໭͢લఏͰͷར༻ ‣ ΑΓϦονͳϝχϡʔͷΑ͏ͳҐஔ෇͚ ‣ ෳࡶͳΠϯλϥΫγϣϯΛආ͚Δ #macosnative Popovers ϞʔυϨεύωϧ ‣ ૢ࡞Λ੍ݶ͢ΔϞʔυ͕ͳ͍ ‣ Ϣʔβʔ͕Ϟʔυͷঢ়ଶΛ஌Δඞཁ͕ͳ͍ ‣ ͍ͭͰ΋ด͡Δ͜ͱ͕Ͱ͖Δ ‣ ։͍ͨ··Ͱ΋ྑ͍ ‣ ϝΠϯ΢Πϯυ΢͔Β཭ͯ͠ஔ͍͓͚ͯΔ
139. υΩϡϝϯτϞʔμϧμΠΞϩά #macosnative γʔτ
140. #macosnative
141. #macosnative
142. ϑϧεΫϦʔϯ #macosnative
143. #macosnative
144. #macosnative
145. #macosnative
146. Finder #macosnative
147. https://developer.apple.com/design/human-interface-guidelines/ https://www.kisspng.com/png-cocoa-software-framework-ios-sdk-frame-work-5213744/ #macosnative
148. #macosnative
149. #macosnative
150. #macosnative