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
   

   View Slide

2. ΠϯλʔϑΣΠεઃܭ࢜
   Interface & Interaction Design / macOS / iOS / Sketch Plugin
   usagimaru
   interactionmania.com
   @usagimaru
   @usagimaruma
   

   View Slide

3. https://github.com/usagimaru/Musical-View
   #macosnative
   ୯ͳΔ୳ڀ৺ʴ࣮૷දݱͷ஁࿉
   Music App ͷΠϯλʔϑΣΠεΛ໨ίϐ࠶ݱ
   

   View Slide

4. https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin
   #macosnative
   Sketch Ͱ Apple ͷγεςϜϑΥϯτΛѻ͑Δʹ͢ΔϓϥάΠϯ
   

   View Slide

5. https://github.com/usagimaru/SketchTurbo
   #macosnative
   NSResponder ͷϝιουΛ Swizzling ͢Δ͜ͱͰ࣮ݱ
   Sketch ͷεΫϩʔϧΛര଎ʹ͢ΔϓϥάΠϯ
   

   View Slide

6. Navigator for Sketch (Prototype)
   #macosnative
   ։ൃத
   Sketch ʹ Photoshop ෩φϏήʔλʔΛ௥Ճ͢ΔϓϥάΠϯ
   

   View Slide

7. https://macos-native.github.io
   #macosnative
   

   View Slide

8. https://macos-native.github.io
   #macosnative
   ࠓ೔ͷτϐοΫ
   

   View Slide

9. #macosnative
   API Xcode Objective-C Swift
   XIB
   

   View Slide

10. Designing Desktop
    Interactions.key
    Designing Desktop
    Interactions.key
    74.8 MB
    macOS High Sierra
    

    View Slide

11. Finder
    #macosnative
    

    View Slide

12. The Macintosh Desktop Experience
    #macosnative
    

    View Slide

13. #macosnative
    System 7.5.3
    

    View Slide

14. #macosnative
    

    View Slide

15. #macosnative
    

    View Slide

16. #macosnative
    

    View Slide

17. Macintosh Desktop Experience ͷઃܭࢥ૝
    #macosnative
    

    View Slide

18. https://developer.apple.com/design/human-interface-guidelines/
    #macosnative
    

    View Slide

19. macOS Human Interface Guidelines (2018)
    https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/
    #macosnative
    

    View Slide

20. macOS Human Interface Guidelines (2018)
    https://developer.apple.com/design/human-interface-guidelines/macos/overview/visual-index/
    #macosnative
    

    View Slide

21. Human Interface Guidelines Second Beta Draft (1986)
    #macosnative
    

    View Slide

22. #macosnative
    Human Interface Guidelines Second Beta Draft (1986)
    l͜ͷઅͰ͸ɺ"QQMFώϡʔϚϯΠϯλʔϑΣΠεͷഎޙʹ͋Δݪଇɺ͢ͳΘͪ
    ΠϯλʔϑΣΠεͷਫ਼ਆΛ֓આ͠·͢ɻ͜ΕΒͷݪଇ͸ݱࡏͷʮσεΫτοϓʯ
    ΠϯλʔϑΣΠεʹݶఆ͞Εͳ͍ΑΓҰൠతͳ΋ͷͰ͋Γɺ৽͍͠ΠϯλʔϑΣ
    ΠεͷϝλϑΝʔ͕ݟ͔ͭͬͨ৔߹Ͱ΋༗ޮͰ͢ɻͨͱ͑͹ɺίϯϐϡʔλ͸ৗ
    ʹ৘ใͷදࣔΛఏڙ͠·͕͢ɺඞͣ͠΋ʮ΢Πϯυ΢ʯΛ࢖༻͢Δඞཁ͸͋Γ·
    ͤΜɻz
    

    View Slide

23. Apple Human Interface Guidelines (1987)
    #macosnative
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

27. OS X Human Interface Guidelines (2016)
    #macosnative
    

    View Slide

28. macOS Human Interface Guidelines (2018)
    https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/
    #macosnative
    

    View Slide

29. WWDC17 802 Essential Design Principles
    https://developer.apple.com/videos/play/wwdc2017/802/
    #macosnative
    

    View Slide

30. ҙ༁ɿ
    lඒ͘͠ઃܭ͞ΕͨΞϓϦέʔγϣϯ͸҆৺ͯ͠࢖͏͜ͱ͕Ͱ͖·͢ɻ࢖͍ํ͕
    ໌շͰɺશ͕ͯ໨తͷͨΊʹਖ਼͘͠ػೳ͠·͢ɻͦΕΛ࡞ͬͨਓʑ͕ࢲͨͪͷ
    ͜ͱΛे෼ʹߟ͑ͯઃܭ͍ͯ͠Δ͜ͱ͕Α͘Θ͔Γ·͢ɻ͜Ε͸ɺΠϯλʔϑΣ
    ΠεΛ௨ͯ͠σβΠφʔͷਓؒੑΛײ͡ΒΕΔͱ͍͏͜ͱͳͷͰ͢ɻσβΠφʔ
    ͕ʰϢʔβʔʱͷ͜ͱΛߟ͑ΔҰํͰɺϢʔβʔ΋·ͨσβΠφʔͷʰਓؒੑʱ
    ͱ͍͏΋ͷΛײ͡औΔ͜ͱ͕Ͱ͖ΔͷͰ͢ɻz
    #macosnative
    Human Interface
    WWDC17 802 Essential Design Principles
    https://developer.apple.com/videos/play/wwdc2017/802/
    

    View Slide

31. ʁʁʁ
    lΦϨͷσβΠϯͷํ͕༏Ε͍ͯΔ͔Β)*(ͳΜͯಡ·ͳ͍z
    #macosnative
    lΨΠυϥΠϯࢸ্ओٛͰ͸ྑ͍σβΠϯʹ͸ͳΒͳ͍z
    

    View Slide

32. ʁʁʁ
    #macosnative
    lΦϨͷσβΠϯͷํ͕༏Ε͍ͯΔ͔Β)*(ͳΜͯಡ·ͳ͍z
    lΨΠυϥΠϯࢸ্ओٛͰ͸ྑ͍σβΠϯʹ͸ͳΒͳ͍z
    ༏ྼ΍ϓϥΠυͷ࿩Ͱ͸ͳ͍
    

    View Slide

33. #macosnative
    Design
    

    View Slide

34. #macosnative
    Design
    “͋Δ؀ڥͷγεςϜ͕ͲͷΑ͏ʹػೳ͢Δ͔Λઃܭ͠
    ώτ͕ΠϯλϥΫτͰ͖Δঢ়ଶΛͭ͘Δ͜ͱ”
    “ਓͱγεςϜͱͷΠϯλʔϑΣΠεΛߏங͢Δ͜ͱ”
    

    View Slide

35. #macosnative
    macOS ͱ͍͏σεΫτοϓɾΤΫεϖϦΤϯεΛ
    ࢲͨͪ΋ਅ໘໨ʹσβΠϯ͠Α͏Ͱ͸ͳ͍͔
    native
    

    View Slide

36. Native Interfaces
    vs.
    Non-native Interfaces
    #macosnative
    

    View Slide

37. #macosnative
    

    View Slide

38. #macosnative
    !
    

    View Slide

39. #macosnative
    

    View Slide

40. #macosnative
    "
    

    View Slide

41. https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/
    web
    #macosnative
    

    View Slide

42. Photoshop Installer
    #macosnative
    

    View Slide

43. Photoshop Installer
    #macosnative
    

    View Slide

44. #macosnative
    mac
    OS
    ςΩετ
    

    View Slide

45. #macosnative
    mac
    OS
    ςΩετ
    Click
    

    View Slide

46. ςΩετ
    #macosnative
    mac
    OS
    Click Click
    

    View Slide

47. #macosnative
    mac
    OS
    ςΩετ
    Drag
    

    View Slide

48. #macosnative
    mac
    OS
    τ
    ⌫
    ςΩετೖྗதʹ͸
    Χʔιϧ͕ඇදࣔ
    

    View Slide

49. #macosnative
    mac
    OS
    ↩︎
    τ
    

    View Slide

50. #macosnative
    mac
    OS
    τ
    Click
    

    View Slide

51. #macosnative
    mac
    OS
    ςΩετ
    ςΩετ
    ϨΠϠʔΦϒδΣΫτ ςΩετΦϒδΣΫτ
    Click Click
    Click
    

    View Slide

52. #macosnative
    mac
    OS
    ςΩετ
    NSTextField.isSelectable = true
    Mouse Down
    

    View Slide

53. ςΩετ
    #macosnative
    mac
    OS
    Drag
    NSTextField.isSelectable = true
    

    View Slide

54. ςΩετ
    #macosnative
    mac
    OS
    Drag
    NSTextField.isSelectable = false (default)
    

    View Slide

55. #macosnative
    mac
    OS
    ςΩετ
    બ୒ෆՄೳ બ୒Մೳ
    https://w
    બ୒ෆՄೳ͕جຊ બ୒ͷඞવੑ͕͋Δ৔߹ʹݶΔ
    63-
    Τϥʔίʔυ
    ໊લ
    ΞΫγϣϯͷର৅
    ίϯςΫετϝχϡʔͷର৅
    

    View Slide

56. #macosnative
    PNG
    Done
    web
    

    View Slide

57. #macosnative
    PNG
    Done
    web
    Mouse Down
    

    View Slide

58. #macosnative
    PNG
    Done
    web
    Drag
    

    View Slide

59. #macosnative
    PNG
    Done
    web
    #
    

    View Slide

60. ߲໨
    ߲໨
    ߲໨
    ߲໨
    …
    PNG
    Done
    #
    બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ
    #macosnative
    ⌘C ?
    ⌘A ?
    ⌫ ?
    ίϯςΫετϝχϡʔʁ
    υϥοάʁ
    web
    

    View Slide

61. ߲໨
    ߲໨
    ߲໨
    ߲໨
    …
    PNG
    Done
    #
    બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ
    #macosnative
    ⌘C ?
    ⌘A ?
    ⌫ ?
    ίϯςΫετϝχϡʔʁ
    υϥοάʁ
    web
    

    View Slide

62. PNG
    Done
    #
    ςΩετͱೝࣝ͞Εͳ͍ΠϯλʔϑΣΠεཁૉ͕
    ňςΩετબ୒ʯͰ͖ͯ͠·͏ͷ͸͓͔͍͠
    #macosnative
    web
    

    View Slide

63. #macosnative
    web
    

    View Slide

64. #macosnative
    Text Document
    web
    

    View Slide

65. #macosnative
    Text Document
    web
    View
    PNG
    Done
    

    View Slide

66. #macosnative
    Text Document
    web
    View
    ʁ
    PNG
    Done
    

    View Slide

67. #macosnative
    Text Document
    web
    View
    ʁ
    ϝϯλϧϞσϧͱදݱͷෆҰக
    දݱ ϝϯλϧϞσϧ
    PNG
    Done
    ࣮૷
    

    View Slide

68. #macosnative
    $
    

    View Slide

69. #macosnative
    

    View Slide

70. #macosnative
    ⌘ H
    

    View Slide

71. ⌘ H
    #macosnative
    #
    

    View Slide

72. ؀ڥઃఆ΢Πϯυ΢
    #macosnative
    mac
    OS
    

    View Slide

73. ؀ڥઃఆ΢Πϯυ΢
    #macosnative
    ϞʔυϨεμΠΞϩά มߋͷଈ࣌൓ө
    อଘϘλϯ͸ෆཁ
    mac
    OS
    

    View Slide

74. OS X Human Interface Guidelines (2014)
    #macosnative
    

    View Slide

75. #macosnative
    #
    

    View Slide

76. #macosnative
    Window
    mac
    OS
    

    View Slide

77. #macosnative
    Window
    ࠨଆʹΫϩʔζϘλϯ
    mac
    OS
    

    View Slide

78. #macosnative
    

    View Slide

79. #macosnative
    ӈଆʹΫϩʔζϘλϯ
    

    View Slide

80. #macosnative
    ӈଆʹΫϩʔζϘλϯ
    #
    

    View Slide

81. ✓ ΫϩεϓϥοτϑΥʔϜͰ։ൃίετ͕Ӡʑ
    ✓ macOS / Windows / web ͍ͣΕͰ΋ಉ͡Α͏ʹ࢖͑Δ
    ✓ ωΠςΟϒΞϓϦέʔγϣϯ։ൃͷෑډ͕ߴ͍
    ‣ ύϑΥʔϚϯε͕ѱ͍
    ‣ Cocoa Λ׆༻Ͱ͖ͳ͍
    Non-native App ߟ
    #macosnative
    #
    

    View Slide

82. ‣ Human Interface Guidelines Λक͍ͬͯͳ͍
    ‣ ਅͷωΠςΟϒΠϯλʔϑΣΠεͰ͸ͳ͍
    ‣ macOS ωΠςΟϒ؀ڥશମͰ༗ޮͳΠϯλϥΫγϣϯ͕௨͡ͳ͍
    ‣ macOS ͷσβΠϯʹద߹͍ͯ͠ͳ͍
    ‣ ͦΕͧΕͷʮؒʯΛऔΔͨΊʹɺத్൒୺ͳ඼࣭ͷΠϯλʔϑΣΠε
    ʹ࢓্͕͍ͬͯΔ
    Non-native App ߟ
    #macosnative
    %
    

    View Slide

83. ։ൃ౎߹ͷϓϩίϯͰ൑அ͢ΔͷͰ͸ͳ͘ɺ
    γεςϜͱͯ͠Ͳ͏͋Δ΂͖͔ʮσβΠϯʯΛߟ͑ͳ͚Ε͹ͳΒͳ͍
    #macosnative
    

    View Slide

84. ΠϯλϥΫγϣϯઃܭͷཁ఺
    #macosnative
    

    View Slide

85. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจͷݪଇ
    #macosnative
    

    View Slide

86. #macosnative
    

    View Slide

87. #macosnative
    ໊ࢺత
    ಈࢺత
    

    View Slide

88. #macosnative
    ໊ࢺత
    ಈࢺత
    ໊ࢺత
    ಈࢺత
    

    View Slide

89. #macosnative
    

    View Slide

90. #macosnative
    ໊ࢺత
    ಈࢺత
    

    View Slide

91. #macosnative
    Designing Desktop
    Interactions.key
    Designing Desktop
    Interactions.key
    74.8 MB
    ໊শະઃఆϑΥϧμ
    Keynote.app
    ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత
    બ୒͢Δ Ϟϊ
    ΞΠίϯͰදݱͰ͖Δ
    ࣮ߦ͢Δ ίτ
    ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍
    Clarus.moof
    

    View Slide

92. #macosnative
    ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత
    બ୒͢Δ Ϟϊ
    ΞΠίϯͰදݱͰ͖Δ
    ࣮ߦ͢Δ ίτ
    ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍
    ΦϒδΣΫτͳͷͰ
    ਤܗతͳදݱ͕Մೳ
    Designing Desktop
    Interactions.key
    Designing Desktop
    Interactions.key
    74.8 MB
    ໊শະઃఆϑΥϧμ
    Keynote.app
    Clarus.moof
    

    View Slide

93. #macosnative
    

    View Slide

94. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจ
    #macosnative
    ΦϒδΣΫτ ΞΫγϣϯ
    ࣮ߦ
    બ୒
    

    View Slide

95. Ϣʔβʔૢ࡞ͱʮ໊ࢺ → ಈࢺʯߏจ
    #macosnative
    ΦϒδΣΫτ ΞΫγϣϯ
    ࣮ߦ
    બ୒
    cralus.moof()
    object method
    First Responder
    ʹ
    NSView ← NSResponder
    ʹ
    Message
    ϑΥʔΧε
    

    View Slide

96. ஫ҙͷॴࡏͱϑΥʔΧε
    #macosnative
    

    View Slide

97. ώϡʔϝΠϯɾΠϯλϑΣʔεਓʹ΍͍͞͠γεςϜ΁ͷ৽ͨͳࢦ਑rجຊಈ࡞ͷ෼ྨ
    lΠϯλϑΣʔεʹ͸ɺ΍ΓͱΓͷத৺ͱͳΔϑΥʔΧεʢGPDVTʣ͕ɺ
    ͚ͨͬͨͭͩઃఆ͞Ε·͢ɻz
    +FG3BTLJO
    #macosnative
    lਓ͕ؒ΍ΓͱΓΛओಋ͍ͯ͠Δ࣌ɺ௨ৗ͸ݱࡏͷηϨΫγϣϯ͕ϑΥʔΧε
    ͱͳΓ·͢ɻͦͯ͠ɺγεςϜ͕ਓؒ΍֎෦͔Βͷಈ࡞ʹԠ౴͢Δ࣌ɺ௨ৗ
    ͸ಈ࡞ͷ݁Ռ͕ϑΥʔΧεͱͳΔͷͰ͢ɻz
    

    View Slide

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

    View Slide

99. See-and-Point
    #macosnative
    

    View Slide

100. #macosnative
     

     View Slide

101. #macosnative
     

     View Slide

102. #macosnative
     

     View Slide

103. #macosnative
     ΫϦοΫݕ஌఺
     

     View Slide

104. #macosnative
     ΫϦοΫݕ஌఺
     

     View Slide

105. #macosnative
     

     View Slide

106. https://developer.apple.com/videos/play/wwdc2018/803/
     #macosnative
     l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
     

     View Slide

107. #macosnative
     ਎ମ ਎ମͷԆ௕ ਎ମͷԆ௕
     ໊শະઃఆϑΥϧμ
     ෺ཧੈք GUI
     ΦϒδΣΫτ
     

     View Slide

108. Χʔιϧ͸਎ମͷԆ௕
     #macosnative
     ʢӈखʣ
     

     View Slide

109. Πϯδέʔγϣϯ
     #macosnative
     

     View Slide

110. https://
     ໊শະઃఆϑΥϧμ
     Πϯδέʔγϣϯ
     #macosnative
     ͨͩ͠ɺ΄ͱΜͲ͢΂ͯͷঢ়گʹ͓͍ͯ ૢ࡞΍ࢦ͍ࣔͯ͠͠Δର৅ʹؔ͢Δ΋ͷ Ͱ͋Δ
     

     View Slide

111. View Slide

112. View Slide

113. ༥͚ΔσβΠϯʕϋʔυºιϑτºωοτ࣌୅ͷ৽ͨͳઃܭ࿦
     lࢲͨͪ͸ΧʔιϧΛৗʹҙࣝͨ͠ΓΧʔιϧʹ͍ͭͯ
     ߟ͑ͨΓ͢Δ͜ͱ͸ͳ͍ɻࢲͨͪͷҙࣝʹͷ΅ͬͯ͘Δ
     ͷ͸ɺ΄ͱΜͲ͢΂ͯɺΧʔιϧ͕ࢦ͢ର৅ͷํͰ͋Δɻ
     ͦͷ఺ͰɺΧʔιϧ͸ಁ໌Խ͍ͯ͠ΔଘࡏͰ͋Δɻz
     ౉ᬑܙଠ
     #macosnative
     

     View Slide

114. Multi-Touch σόΠεͱϙΠϯςΟϯά
     #macosnative
     

     View Slide

115. https://www.youtube.com/watch?v=t4OEsI0Sc_s
     #macosnative
     l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
     

     View Slide

116. https://developer.apple.com/videos/play/wwdc2018/803/
     #macosnative
     l୭΋͕ੜ·Εͳ͕Βʹ࣋ͭ
     ੈք࠷ߴͷϙΠϯςΟϯάσόΠεz
     

     View Slide

117. #macosnative
     

     View Slide

118. Push
     #macosnative
     

     View Slide

119. Push
     #macosnative
     Tool Tip͸Ϛ΢εΦʔόʔʹΑͬͯ
     දࣔͰ͖Δ؆қϔϧϓͰ͢ɻ
     

     View Slide

120. https://developer.apple.com/videos/play/wwdc2018/803/
     #macosnative
     

     View Slide

121. ஌֮͞ΕͨΞϑΥʔμϯε
     #macosnative
     ৮Εͦ͏
     ॊΒ͔ͦ͏
     ߔʹԊͬͯಈ͔ͤͦ͏
     ৮Εͳͦ͞͏
     ݻͦ͏
     ಛʹಈ͔ͤͳͦ͏
     ු͍͍ͯΔ ු͍͍ͯͳ͍
     ૢ࡞ͷख͕͔Γͱ߳Γ෇͚
     

     View Slide

122. #macosnative
     iPhone 7
     iPhone X
     ݻணͨ͠ Dock
     ු༡ͨ͠ Dock
     

     View Slide

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
     

     View Slide

124. ΠϯλʔϑΣΠεͷϞʔυ
     #macosnative
     

     View Slide

125. όωࣜϞʔυ
     ʢٖࣅϞʔυʣ
     #macosnative
     

     View Slide

126. Adobe Photoshop CC 2018
     #macosnative
     Space Drag
     

     View Slide

127. #macosnative
     ⇧ a
     a = a
     = A γϑτϞʔυ
     

     View Slide

128. ‣ ૢ࡞Λதஅ͢Δ͜ͱͰɺࣗಈతʹϞʔυ͔Βൈ͚Β
     ΕΔ
     ‣ όωػߏʹΑͬͯϞʔυ͔Βԡ͠ग़͞ΕΔΠϝʔδ
     ‣ ಛఆͷΩʔΛԡԼத
     ‣ Ϛ΢εԡԼத
     ‣ υϥοά࠷த
     #macosnative
     όωࣜϞʔυʢٖࣅϞʔυʣ
     ⇧
     Ϣʔβʔ͕ૢ࡞͢ΔؒͷΈ༗ޮͳ୹ظؒͷϞʔυ
     

     View Slide

129. Sticky Menu
     #macosnative
     

     View Slide

130. όωࣜʢچདྷܕʣ
     #macosnative
     

     View Slide

131. Tear-Off Menu
     Inside Macintosh – Human Interface Toolbox (1996)
     #macosnative
     

     View Slide

132. Popovers
     #macosnative
     

     View Slide

133. #macosnative
     

     View Slide

134. #macosnative
     ϞʔυϨεύωϧʹ
     ෼཭
     

     View Slide

135. #macosnative
     

     View Slide

136. Popover Λల։
     Popover ಺ͷϞʔυʹ͋Δঢ়ଶɻ
     ஍ਤͷૢ࡞Λ࢝ΊΔͱϞʔυ͔Βൈ͚Δɻ
     #macosnative
     

     View Slide

137. ϞʔυϨεύωϧʹ෼཭
     Ϟʔμϧͳ Popover ΛϞʔυϨεύωϧԽɻ
     ϢʔβʔͷΠϯλϥΫτՄೳͳൣғ͸੍ݶ͞Εͳ͍ɻ
     #macosnative
     

     View Slide

138. ‣ ୹ظؒͷҰճ׬݁ܕϞʔυ
     ‣ ϞʔμϧύωϧΑΓ΋ܰྔͳϞʔυ
     ‣ Popover ֎ͷૢ࡞Ͱࣗಈऴྃ
     ‣ ϞʔυͷࣗಈऴྃΛ્ࢭͰ͖ͳ͍
     ‣ ల։ͨ͠Β͙͢ʹ໭͢લఏͰͷར༻
     ‣ ΑΓϦονͳϝχϡʔͷΑ͏ͳҐஔ෇͚
     ‣ ෳࡶͳΠϯλϥΫγϣϯΛආ͚Δ
     #macosnative
     Popovers ϞʔυϨεύωϧ
     ‣ ૢ࡞Λ੍ݶ͢ΔϞʔυ͕ͳ͍
     ‣ Ϣʔβʔ͕Ϟʔυͷঢ়ଶΛ஌Δඞཁ͕ͳ͍
     ‣ ͍ͭͰ΋ด͡Δ͜ͱ͕Ͱ͖Δ
     ‣ ։͍ͨ··Ͱ΋ྑ͍
     ‣ ϝΠϯ΢Πϯυ΢͔Β཭ͯ͠ஔ͍͓͚ͯΔ
     

     View Slide

139. υΩϡϝϯτϞʔμϧμΠΞϩά
     #macosnative
     γʔτ
     

     View Slide

140. #macosnative
     

     View Slide

141. #macosnative
     

     View Slide

142. ϑϧεΫϦʔϯ
     #macosnative
     

     View Slide

143. #macosnative
     

     View Slide

144. #macosnative
     

     View Slide

145. #macosnative
     

     View Slide

146. Finder
     #macosnative
     

     View Slide

147. https://developer.apple.com/design/human-interface-guidelines/
     https://www.kisspng.com/png-cocoa-software-framework-ios-sdk-frame-work-5213744/
     #macosnative
     

     View Slide

148. #macosnative
     

     View Slide

149. #macosnative
     

     View Slide

150. #macosnative
     

     View Slide