$30 off During Our Annual Pro Sale. View Details »

Designing Desktop Interactions

usagimaru
August 29, 2018

Designing Desktop Interactions

Designing Desktop Interactions(公開版)

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

usagimaru

August 29, 2018
Tweet

More Decks by usagimaru

Other Decks in Design

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