ユーザーインターフェイス解剖学（公開版）

by usagimaru

Slide 1

Slide 1 text

Slide 2

Slide 2 text

@usagimaru / @usagimaruma ؙ ྯ ཬ · Δ ͞ ͱ Γ iOS Developer Design Div. Goodpatch Inc.

Slide 3

Slide 3 text

ϢʔβʔΠϯλʔϑΣΠεʹ͍ͭͯߟ͑ɺ ݴޠԽͨ͠ΓͳͲ

Slide 4

Slide 4 text

medium.com/usagimaru

Slide 5

Slide 5 text

qiita.com/usagimaru

Slide 6

Slide 6 text

goodpatch.com/blog/dialog-design

Slide 7

Slide 7 text

ϢʔβʔΠϯλʔϑΣΠεʹͩ͜Θͬͨ ΞϓϦέʔγϣϯ։ൃ

Slide 8

Slide 8 text

JINS MEMEʹΑΓ ूதྗ ΛՄࢹԽ JINS Inc. v1 https://jins-meme.com/ja/ofﬁce/

Slide 9

Slide 9 text

೶Ո͔Βফඅऀ΁ ໺ࡊͱѪΛಧ͚ΔσϦόϦʔɾαʔϏε גࣜձࣾϕδΦϕδί iOS / ʙ1.0.1 http://vegeryorganics.com

Slide 10

Slide 10 text

೔ຊͷ޻ܳͱ࢈஍ͷັྗΛൃ৴͢Δ ޻ܳϝσΟΞɾཱྀͷ͓ͱ΋ΞϓϦ גࣜձࣾத઒੓ࣣ঎ళ https://sunchi.jp/app

Slide 11

Slide 11 text

UIίϯϙʔωϯτͷ࣮૷

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ࣗ࡞ vs. UIϥΠϒϥϦ

Slide 14

Slide 14 text

։ൃ࣌ؒΛ୹ॖͰ͖Δ UIҎ֎ʹ஫ྗͰ͖Δ UIϥΠϒϥϦ

Slide 15

Slide 15 text

͍͍ͨͯ͸ҙਤͨ͠ಈ͖ʹͳΒͳ͍ UIϥΠϒϥϦ OSΞοϓσʔτ΁ͷ௥ਵ΍ґଘؔ܎Λ੍ޚͮ͠Β͍ UIϥΠϒϥϦͷઃܭʹ߹Θͤͳ͚Ε͹ͳΒͳ͍

Slide 16

Slide 16 text

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ຊࢿྉͰ͸ׂѪ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Ξχϝʔγϣϯʹ߹Θͤͯ Taptic EngineʹΑΔ৮֮ϑΟʔυόοΫΛ࣮૷

Slide 26

Slide 26 text

https://github.com/usagimaru/Tanzaku iOS޲͚ॎॻ͖ϥϕϧΛࣗ࡞͠·ͨ͠

Slide 27

Slide 27 text

ϢʔβʔΠϯλʔϑΣΠεΛ͖ͪΜͱσβΠϯ͢ΔͳΒ ΍ͬͺΓࣗ࡞ͯ͠͠·͏ͷ͕ྑ͍

Slide 28

Slide 28 text

ϢʔβʔΠϯλʔϑΣΠεΛཧղ͢Δ

Slide 29

Slide 29 text

ඃࣸମͷ಺ଆΛཧղ͢Δ͜ͱͰɺ ֆըΛඒ͘͠ඳ͘ ϨΦφϧυɾμɾϰΟϯν

Slide 30

Slide 30 text

ϢʔβʔΠϯλʔϑΣΠεͷ಺ଆΛ ཧղ͢Δ͜ͱͰɺඒ͍͠ϓϩμΫτΛ ࡞ΕΔ͸ͣ

Slide 31

Slide 31 text

ϢʔβʔΠϯλʔϑΣΠεͷ࢓૊Έ macOS/iOS͔ΒֶͿ

Slide 32

Slide 32 text

HIGͷ͞ΒʹԞΛ୳ͬͯΈΔ͜ͱͰ ͦͷߏ଄Λཧղ͢Δ

Slide 33

Slide 33 text

Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε

Slide 34

Slide 34 text

֯R͔ΒಡΈղ͘iOSͷUIσβΠϯ Ϣʔβʔͱͷڑ཭ͱʮؙ͞ʯ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ؙ͍ Apple੡඼ͷؙ֯

Slide 38

Slide 38 text

Ϣʔβʔͱͷڑ཭ͱؙ֯ Ϛ΢εͰૢ࡞ صʹஔ͘ ࿹ʹ૷ண ࣖʹ૷ண ϦϞίϯૢ࡞ ยखͰ࣋ͭ

Slide 39

Slide 39 text

Slide 40

Slide 40 text

iOSͷ֯RͷҙຯΛߟ࡯ͯ͠ΈΑ͏

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

ΞϓϦ ΞϓϦͷQuick Actionϝχϡʔ ΢ΟδΣοτ ௨஌όφʔ ֯R͕Ұக͍ͯ͠Δ

Slide 46

Slide 46 text

ΞϓϦ ʹ ௨஌όφʔ ʹ ΢ΟδΣοτ ֯RͷҰக͔ΒΘ͔Δ͜ͱ͸…

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

গͳ͘ͱ΋ ΞϓϦͷRͱҰக͍ͯ͠Δ΋ͷ͸ಉଐੑͬΆ͍

Slide 51

Slide 51 text

ු༡ΦϒδΣΫτͷ֯͸ؙ͍ Ϣʔβʔʹ͍ۙ΋ͷ͸ු༡͍ͯ͠Δ Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍Μ͡ΌͶ

Slide 52

Slide 52 text

Ϣʔβʔଆ

Slide 53

Slide 53 text

UIͷ֊૚ߏ଄ɺϢʔβʔͱͷڑ཭ɺૢ࡞ମܥͱͷؔ܎͕ ֯RͷσβΠϯ͔Βݟ͖͑ͯͨ

Slide 54

Slide 54 text

Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε

Slide 55

Slide 55 text

Cascading Listͱ͸ UIͷ֊૚ߏ଄

Slide 56

Slide 56 text

UINavigationController

Slide 57

Slide 57 text

NeXTSTEP ※Πϝʔδ͸GNUstep

Slide 58

Slide 58 text

iPod

Slide 59

Slide 59 text

Finder Font Panel

Slide 60

Slide 60 text

Cascading List͸ ཻ౓͝ͱʹ৘ใΛ֊૚Խ͢ΔͨΊͷ΋ͷ

Slide 61

Slide 61 text

ϓογϡભҠͰ͸ͲͷΑ͏ʹ৘ใΛ഑ஔ͢΂͖͔Λ ཧղ͢Δ͜ͱ͕Ͱ͖Δ

Slide 62

Slide 62 text

iOS “Mail” Λղ๤ͯ͠ΈΔ UIͷ֊૚ߏ଄

Slide 63

Slide 63 text

#ui-dangi

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

લͷϏϡʔ͕ཪʹݟ͍͑ͯΔ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍ ϞʔμϧϏϡʔ ԼʹυϥοάͰ͖ͦ͏ײ͕͋Δ

Slide 66

Slide 66 text

ϝοηʔδϏϡʔΛυϥοά͢Δͱ࠷Լ୺ʹελοΫ͞ΕΔ άϩʔόϧྖҬʹελοΫ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍

Slide 67

Slide 67 text

ͳͥʁ άϩʔόϧྖҬʹελοΫ ඪ४෦඼Ͱ͸͋Γ͑ͳ͍

Slide 68

Slide 68 text

SafariͷλϒҰཡͱಉ͡ ͜Ε͸ඪ४෦඼Ͱ͸ͳ͍

Slide 69

Slide 69 text

ͳͥʁ

Slide 70

Slide 70 text

macOSʹώϯτ

Slide 71

Slide 71 text

ͦ΋ͦ΋ɺλϒͬͯͳΜͩΖ͏ʁ

Slide 72

Slide 72 text

λϒ͸΢Πϯυ΢͕มԽͨ࢟͠ ×

Slide 73

Slide 73 text

λϒ͸΢Πϯυ΢ʹ෮ݩͰ͖Δ

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

“Mail” ͸Ϛϧν΢Πϯυ΢UIΛදͨ͢Ίʹ ͋͑ͯΧελϜUIΛ༻͍ͯͦΕΛ࣮ݱ ʮApple ͛͢ʔͳʔʯ

Slide 77

Slide 77 text

Ϣʔβʔʹ͍ۙ΋ͷ͸ؙ͍ ֊૚ߏ଄ Ϟʔυ vs. ϞʔυϨε

Slide 78

Slide 78 text

Ϟʔυ Ϟʔυ vs. ϞʔυϨε

Slide 79

Slide 79 text

͍Βͬ͠Ό͍·ͤ ళɹ಺ Ϙλϯ ͓࣋ͪؼΓ Ϙλϯ ೔ຊޠ English தจ ೠҴয ͓ͭΓ ໭Δ 0ԁ ڇက԰ͷ৯݊ػͬͯ͜Μͳ෩ʹͳͬͯΔ͚Ͳ……

Slide 80

Slide 80 text

঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ ڇက԰ͷ৯݊ػͷUIϑϩʔ͸ͱͯ΋λεΫࢦ޲ ։࢝ ·ͣλεΫΛݶఆͤ͞Δ ΦϒδΣΫτΛબͿ

Slide 81

Slide 81 text

঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ঎඼બ୒தʹϞʔυͷ੾Γସ͕͑Ͱ͖ͳ͍ϑϩʔ ։࢝ Ұ୴தࢭͯ࢝͠Ίʹ໭Δ λεΫΛબͼ௚͔ͯ͠Β ಉ͜͡ͱΛ΍Γ௚͢

Slide 82

Slide 82 text

঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ళ಺Ϟʔυ͔Β࣋ͪؼΓϞʔυʹҠߦ͢Δʹ͸ શͯΛ์غͯ࢝͠Ίʹ໭Βͳ͚Ε͹ͳΒͳ͍ͷͰɺૢ࡞ͮ͠Β͍ ։࢝

Slide 83

Slide 83 text

Ϟʔυ֊૚ Ϟʔυ vs. ϞʔυϨε

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

ిݯ౤ೖ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ

Slide 86

Slide 86 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ

Slide 87

Slide 87 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ

Slide 88

Slide 88 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ

Slide 89

Slide 89 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ

Slide 90

Slide 90 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ ΞϓϦΛ࢖͏·Ͱʹੵ·Ε͍ͯΔϞʔυ

Slide 91

Slide 91 text

ిݯ౤ೖ OSىಈ ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ ిݯ੾அ εϦʔϓ / ϩοΫ OSऴྃ Ϣʔβʔ͕ओʹҙࣝ͢ΔϞʔυ

Slide 92

Slide 92 text

ϩοΫը໘ ϗʔϜ ΞϓϦىಈ ϗʔϜϘλϯ ϞʔμϧϏϡʔ ด͡Δ ੵΈ্͛ΒΕͨϞʔυ֊૚ɿiPhoneͷྫ εϦʔϓ / ϩοΫ Ϣʔβʔ͕ʮϗʔϜʯͷ্ͰϞʔυϨεʹৼΔ෣͑Δ͜ͱ͕ॏཁ γεςϜ͕ੜΈग़͢Ϟʔυ͸ɺϢʔβʔͷߦಈͱࢥߟΛ੍ݶͯ͠͠·͏

Slide 93

Slide 93 text

ʮϗʔϜʯʹ୤ग़͢Δ།Ұͷखஈ ΞϓϦ͕ੜΈग़͢Ϟʔυ͔Β͍ͭͰ΋ʮϗʔϜʯʹ໭Δ͜ͱ͕Ͱ͖Δ

Slide 94

Slide 94 text

ϞʔμϧϏϡʔ͔Β୤ग़͢Δखஈ͕ඞཁ

Slide 95

Slide 95 text

ϞʔυΛσβΠϯ͢Δ৔߹͸ Ϟʔυ͔Β୤ग़͢ΔखஈΛඞͣఏڙ͢Δ

Slide 96

Slide 96 text

ϞʔυΛੵΈ͗͢ͳ͍Α͏ʹUIΛσβΠϯ͢Δ

Slide 97

Slide 97 text

MacͷσεΫτοϓɾΠϯλʔϑΣΠε Ϟʔυ vs. ϞʔυϨε

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

UI͸ϨΠϠʔߏ଄ खલ͔Βॱʹ஫໨͞ΕΔ 2 1 5 4 3 ͜ͷதͰ͸࠷Լ૚

Slide 101

Slide 101 text

ϑΥʔΧε͕౰͍ͨͬͯΔ෦෼ ʹ ஫໨͍ͯ͠ΔΦϒδΣΫτ

Slide 102

Slide 102 text

First Responder ͱ“໊ࢺˠಈࢺ”ͷૢ࡞ମܥ ϞʔυϨεΛ࣮ݱ͢ΔͨΊͷ࢓૊Έ

Slide 103

Slide 103 text

First ResponderΦϒδΣΫτʹΠϕϯτ͕ૹΒΕΔ બ୒͍ͯ͠ΔΦϒδΣΫτͷ͏ͪɺ࠷લ໘ʹ͋Δ΋ͷ

Slide 104

Slide 104 text

໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app

Slide 105

Slide 105 text

໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ΠϝʔδͰ͢

Slide 106

Slide 106 text

໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ΦϒδΣΫτΛબ୒͠ɺΞΫγϣϯΛ࣮ߦ͢Δ var firstResponder = "໊শະઃఆϑΥϧμ" open(firstResponder) ΠϝʔδͰ͢ ίʔυͩͱ͜ΜͳΠϝʔδ

Slide 107

Slide 107 text

໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ͲͷΦϒδΣΫτͰ΋ಉ͡ΞΫγϣϯ var firstResponder = "໊শະઃఆ.txt" open(firstResponder) ΠϝʔδͰ͢

Slide 108

Slide 108 text

໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ෳ਺Λͻͱ·ͱΊͷΦϒδΣΫτͱͯ͠ѻ͏ var firstResponder = ["໊শະઃఆϑΥϧμ", "໊শະઃఆ.txt", "Safari.app"] open(firstResponder) ΠϝʔδͰ͢

Slide 109

Slide 109 text

ΦϒδΣΫτʹର࣮ͯ͠ߦՄೳͳίϚϯυू ΞϓϦ͕࣋ͭ͢΂ͯͷίϚϯυ͸ϝχϡʔόʔʹऩ·͍ͬͯΔ

Slide 110

Slide 110 text

৘ใΛݟΔ ϑΥϧμ ໊ࢺ ಈࢺ

Slide 111

Slide 111 text

໊ࢺ ಈࢺ $ cd /System CUI

Slide 112

Slide 112 text

$ cd /System ϝχϡʔόʔͰ͸ίϚϯυҰཡΛ၆ᛌͰ͖Δ͕ɺ CUIͰ͸ίϚϯυΛ֮͑Δඞཁ͕͋Δ CUI

Slide 113

Slide 113 text

$ cd /System ಛఆͷߦಈʹ੍໿͞ΕΔʹϞʔυ͕͋Δ CUI

Slide 114

Slide 114 text

GUI બ୒ͨ͠ޙͷߦಈ͸೚ҙʹϞʔυϨεͰ͋Δ

Slide 115

Slide 115 text

Responder Chain ϞʔυϨεΛ࣮ݱ͢ΔͨΊͷ࢓૊Έ

Slide 116

Slide 116 text

Responder = ΠϕϯτΛड͚औΔΦϒδΣΫτ

Slide 117

Slide 117 text

͢΂ͯͷϏϡʔ͸responderͰ΋͋Δ Ϗϡʔ͸ೖΕࢠߏ଄Λ࡞Δ ࢠ͔Β਌΁responderΛḷΔඞཁ͕͋Δ Responder Chain Πϕϯτ఻ୡͷͨΊͷCocoaͷ࢓૊Έ

Slide 118

Slide 118 text

Window CustomView TextField Event event event event mouseDown Responder Chain mouseDown() ςΩετೖྗ଴ͪ ಛʹͳ͠ ΞΫςΟϒԽ

Slide 119

Slide 119 text

macOSͰ͸͜ͷΑ͏ͳ࢓૊ΈͰ ϞʔυϨεͳૢ࡞ମܥ͕࣮ݱ͞Ε͍ͯΔ

Slide 120

Slide 120 text

͍ۙσόΠε ԕ͍σόΠε ֊૚ ཻ౓ ϞʔυϨε Ϟʔυ …

Slide 121

Slide 121 text

༏ΕͨϓϩμΫτΛղ๤͢Δ͜ͱͰ σβΠϯͷҙຯ͕Θ͔Δ

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

ྑ͍ϓϩμΫτΛੜΈग़ͨ͢Ίʹ΋ σϕϩούʔ͕ͦ͜ ϢʔβʔΠϯλʔϑΣΠεͷ࢓૊ΈΛཧղ͠ͳ͚Ε͹ͳΒͳ͍