Designing Desktop Interactions

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

#macosnative API Xcode Objective-C Swift XIB

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Finder #macosnative

Slide 12

Slide 12 text

The Macintosh Desktop Experience #macosnative

Slide 13

Slide 13 text

#macosnative System 7.5.3

Slide 14

Slide 14 text

#macosnative

Slide 15

Slide 15 text

#macosnative

Slide 16

Slide 16 text

#macosnative

Slide 17

Slide 17 text

Macintosh Desktop Experience ͷઃܭࢥ૝ #macosnative

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Human Interface Guidelines Second Beta Draft (1986) #macosnative

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Apple Human Interface Guidelines (1987) #macosnative

Slide 24

Slide 24 text

‣ 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)

Slide 25

Slide 25 text

‣ 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)

Slide 26

Slide 26 text

‣ 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)

Slide 27

Slide 27 text

OS X Human Interface Guidelines (2016) #macosnative

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

#macosnative Design

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Native Interfaces vs. Non-native Interfaces #macosnative

Slide 37

Slide 37 text

#macosnative

Slide 38

Slide 38 text

#macosnative !

Slide 39

Slide 39 text

#macosnative

Slide 40

Slide 40 text

#macosnative "

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Photoshop Installer #macosnative

Slide 43

Slide 43 text

Photoshop Installer #macosnative

Slide 44

Slide 44 text

#macosnative mac OS ςΩετ

Slide 45

Slide 45 text

#macosnative mac OS ςΩετ Click

Slide 46

Slide 46 text

ςΩετ #macosnative mac OS Click Click

Slide 47

Slide 47 text

#macosnative mac OS ςΩετ Drag

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

#macosnative mac OS ↩︎ τ

Slide 50

Slide 50 text

#macosnative mac OS τ Click

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

#macosnative PNG Done web

Slide 57

Slide 57 text

#macosnative PNG Done web Mouse Down

Slide 58

Slide 58 text

#macosnative PNG Done web Drag

Slide 59

Slide 59 text

#macosnative PNG Done web #

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

#macosnative web

Slide 64

Slide 64 text

#macosnative Text Document web

Slide 65

Slide 65 text

#macosnative Text Document web View PNG Done

Slide 66

Slide 66 text

#macosnative Text Document web View ʁ PNG Done

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

#macosnative $

Slide 69

Slide 69 text

#macosnative

Slide 70

Slide 70 text

#macosnative ⌘ H

Slide 71

Slide 71 text

⌘ H #macosnative #

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

OS X Human Interface Guidelines (2014) #macosnative

Slide 75

Slide 75 text

#macosnative #

Slide 76

Slide 76 text

#macosnative Window mac OS

Slide 77

Slide 77 text

#macosnative Window ࠨଆʹΫϩʔζϘλϯ mac OS

Slide 78

Slide 78 text

#macosnative

Slide 79

Slide 79 text

#macosnative ӈଆʹΫϩʔζϘλϯ

Slide 80

Slide 80 text

#macosnative ӈଆʹΫϩʔζϘλϯ #

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

#macosnative

Slide 87

Slide 87 text

#macosnative ໊ࢺత ಈࢺత

Slide 88

Slide 88 text

#macosnative ໊ࢺత ಈࢺత ໊ࢺత ಈࢺత

Slide 89

Slide 89 text

#macosnative

Slide 90

Slide 90 text

#macosnative ໊ࢺత ಈࢺత

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

#macosnative

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

See-and-Point #macosnative

Slide 100

Slide 100 text

#macosnative

Slide 101

Slide 101 text

#macosnative

Slide 102

Slide 102 text

#macosnative

Slide 103

Slide 103 text

#macosnative ΫϦοΫݕ஌఺

Slide 104

Slide 104 text

#macosnative ΫϦοΫݕ஌఺

Slide 105

Slide 105 text

#macosnative

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Πϯδέʔγϣϯ #macosnative

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

#macosnative

Slide 118

Slide 118 text

Push #macosnative

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

#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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

Adobe Photoshop CC 2018 #macosnative Space Drag

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

Sticky Menu #macosnative

Slide 130

Slide 130 text

όωࣜʢچདྷܕʣ #macosnative

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

Popovers #macosnative

Slide 133

Slide 133 text

#macosnative

Slide 134

Slide 134 text

#macosnative ϞʔυϨεύωϧʹ ෼཭

Slide 135

Slide 135 text

#macosnative

Slide 136

Slide 136 text

Popover Λల։ Popover ಺ͷϞʔυʹ͋Δঢ়ଶɻ ஍ਤͷૢ࡞Λ࢝ΊΔͱϞʔυ͔Βൈ͚Δɻ #macosnative

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

#macosnative

Slide 141

Slide 141 text

#macosnative

Slide 142

Slide 142 text

ϑϧεΫϦʔϯ #macosnative

Slide 143

Slide 143 text

#macosnative

Slide 144

Slide 144 text

#macosnative

Slide 145

Slide 145 text

#macosnative

Slide 146

Slide 146 text

Finder #macosnative

Slide 147

Slide 147 text

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