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

「Goodpatch Engineer Meetup Vol.3 エンジニア目線で考えるデザイン」で発表したスライドの公開版です。

https://goodpatch.connpass.com/event/56973/

Transcript

1. ϢʔβʔΠϯλʔϑΣΠεղ๤ֶ
   Goodpatch Engineer Meetup Vol.3 ΤϯδχΞ໨ઢͰߟ͑ΔσβΠϯ
   2017.6.7
   © 2017 Satori MARU.
   ެ։൛
   

   View Slide

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

   View Slide

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

   View Slide

4. medium.com/usagimaru
   

   View Slide

5. qiita.com/usagimaru
   

   View Slide

6. goodpatch.com/blog/dialog-design
   

   View Slide

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

   View Slide

8. JINS MEMEʹΑΓ ूதྗ ΛՄࢹԽ
   JINS Inc.
   v1
   https://jins-meme.com/ja/office/
   

   View Slide

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

   View Slide

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

    View Slide

11. UIίϯϙʔωϯτͷ࣮૷
    

    View Slide

12. View Slide

13. ࣗ࡞ vs. UIϥΠϒϥϦ
    

    View Slide

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

    View Slide

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

    View Slide

16. v1
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. ຊࢿྉͰ͸ׂѪ
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

36. View Slide

37. ؙ͍
    Apple੡඼ͷؙ֯
    

    View Slide

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

    View Slide

39. ?
    

    View Slide

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

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

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

    View Slide

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

    View Slide

47. View Slide

48. View Slide

49. View Slide

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

    View Slide

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

    View Slide

52. Ϣʔβʔଆ
    

    View Slide

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

    View Slide

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

    View Slide

55. Cascading Listͱ͸
    UIͷ֊૚ߏ଄
    

    View Slide

56. UINavigationController
    

    View Slide

57. NeXTSTEP ※Πϝʔδ͸GNUstep
    

    View Slide

58. iPod
    

    View Slide

59. Finder Font Panel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. #ui-dangi
    

    View Slide

64. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. ͳͥʁ
    

    View Slide

70. macOSʹώϯτ
    

    View Slide

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

    View Slide

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

    View Slide

73. λϒ͸΢Πϯυ΢ʹ෮ݩͰ͖Δ
    

    View Slide

74. ʹ
    

    View Slide

75. ʹ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. ϞʔμϧϏϡʔ͔Β୤ग़͢Δखஈ͕ඞཁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

98. View Slide

99. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. ໊ࢺ
     ಈࢺ
     $ cd /System
     CUI
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

122. View Slide

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

     View Slide

124. ϢʔβʔΠϯλʔϑΣΠεͬͯ
     ໘ന͍ੈքͰ͢Ͷ
     

     View Slide

125. View Slide