Designing Desktop Interactions

A4c8177aa00623c9593f10be748b3861?s=47 usagimaru
August 29, 2018

Designing Desktop Interactions

Designing Desktop Interactions(公開版)

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

@usagimaru (@usagimaruma)

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

August 29, 2018
Tweet

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 +FG3BTLJO #macosnative lਓ͕ؒ΍ΓͱΓΛओಋ͍ͯ͠Δ࣌ɺ௨ৗ͸ݱࡏͷηϨΫγϣϯ͕ϑΥʔΧε ͱͳΓ·͢ɻͦͯ͠ɺγεςϜ͕ਓؒ΍֎෦͔Βͷಈ࡞ʹԠ౴͢Δ࣌ɺ௨ৗ ͸ಈ࡞ͷ݁Ռ͕ϑΥʔΧεͱͳΔͷͰ͢ɻz

  98. ώϡʔϝΠϯɾΠϯλϑΣʔεਓʹ΍͍͞͠γεςϜ΁ͷ৽ͨͳࢦ਑rجຊಈ࡞ͷ෼ྨ l͋ͳ͕ͨλονλΠϐϯάΛߦͳ͓ͬͯΓɺλΠϐϯάͨ͠಺༰͕σΟεϓ ϨΠʹදࣔ͞Ε͍ͯΔͷͰ͋Ε͹ɺͦͷλΠϐϯά಺༰ͷදΕ͍ͯΔ৔ॴ͕ ϑΥʔΧεʹͳΓɺ͠͹͠͹͕ͦ͜஫ҙͷॴࡏͱͳΔΘ͚Ͱ͢ɻ΋͋͠ͳͨ ͕λονλΠϐϯάΛߦͳ͍ͬͯͳ͍ͷͰ͋Ε͹ɺ͋ͳͨͷ஫ҙͷॴࡏ͸Ωʔ ϘʔυͱσΟεϓϨΠͷؒΛߦ͖དྷ͢Δ͜ͱʹͳΓ·͢ɻz +FG3BTLJO #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 ͨͩ͠ɺ΄ͱΜͲ͢΂ͯͷঢ়گʹ͓͍ͯ ૢ࡞΍ࢦ͍ࣔͯ͠͠Δର৅ʹؔ͢Δ΋ͷ Ͱ͋Δ

  111. None
  112. None
  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