ユーザーインターフェイス解剖学(公開版)

A4c8177aa00623c9593f10be748b3861?s=47 usagimaru
June 19, 2017

 ユーザーインターフェイス解剖学(公開版)

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

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

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

June 19, 2017
Tweet

Transcript

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

    MARU. ެ։൛
  2. @usagimaru / @usagimaruma ؙ  ྯ ཬ · Δ ͞

    ͱ Γ iOS Developer Design Div. Goodpatch Inc.
  3. ϢʔβʔΠϯλʔϑΣΠεʹ͍ͭͯߟ͑ɺ ݴޠԽͨ͠ΓͳͲ

  4. medium.com/usagimaru

  5. qiita.com/usagimaru

  6. goodpatch.com/blog/dialog-design

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

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

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

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

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

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

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

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

  16. v1

  17. None
  18. None
  19. None
  20. None
  21. ຊࢿྉͰ͸ׂѪ

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

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

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

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

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

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

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

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

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

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

  35. None
  36. None
  37. ؙ͍ Apple੡඼ͷؙ֯

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

  39. ?

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

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

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

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

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

  52. Ϣʔβʔଆ

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

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

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

  56. UINavigationController

  57. NeXTSTEP ※Πϝʔδ͸GNUstep

  58. iPod

  59. Finder Font Panel

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

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

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

  63. #ui-dangi

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

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

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

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

  69. ͳͥʁ

  70. macOSʹώϯτ

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

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

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

  74. ʹ

  75. ʹ

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

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

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

  79. ͍Βͬ͠Ό͍·ͤ ళɹ಺ Ϙλϯ ͓࣋ͪؼΓ Ϙλϯ ೔ຊޠ English தจ ೠҴয ͓ͭΓ

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

  81. ঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ঎඼બ୒தʹϞʔυͷ੾Γସ͕͑Ͱ͖ͳ͍ϑϩʔ ։࢝

    Ұ୴தࢭͯ࢝͠Ίʹ໭Δ λεΫΛબͼ௚͔ͯ͠Β ಉ͜͡ͱΛ΍Γ௚͢
  82. ঎඼બ୒ ঎඼બ୒ ࣋ͪؼΓϞʔυ ళ಺Ϟʔυ ܾࡁ ܾࡁ × × ళ಺Ϟʔυ͔Β࣋ͪؼΓϞʔυʹҠߦ͢Δʹ͸ શͯΛ์غͯ࢝͠Ίʹ໭Βͳ͚Ε͹ͳΒͳ͍ͷͰɺૢ࡞ͮ͠Β͍

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

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

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

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

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

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

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

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

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

    Ϣʔβʔ͕ʮϗʔϜʯͷ্ͰϞʔυϨεʹৼΔ෣͑Δ͜ͱ͕ॏཁ γεςϜ͕ੜΈग़͢Ϟʔυ͸ɺϢʔβʔͷߦಈͱࢥߟΛ੍ݶͯ͠͠·͏
  93. ʮϗʔϜʯʹ୤ग़͢Δ།Ұͷखஈ ΞϓϦ͕ੜΈग़͢Ϟʔυ͔Β͍ͭͰ΋ʮϗʔϜʯʹ໭Δ͜ͱ͕Ͱ͖Δ

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

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

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

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

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

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

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

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

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

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

  106. ໊শະઃఆϑΥϧμ ໊শະઃఆ.txt Safari.app First Responder ΦϒδΣΫτΛબ୒͠ɺΞΫγϣϯΛ࣮ߦ͢Δ var firstResponder = "໊শະઃఆϑΥϧμ"

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

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

    "໊শະઃఆ.txt", "Safari.app"] open(firstResponder) ΠϝʔδͰ͢
  109. ΦϒδΣΫτʹର࣮ͯ͠ߦՄೳͳίϚϯυू ΞϓϦ͕࣋ͭ͢΂ͯͷίϚϯυ͸ϝχϡʔόʔʹऩ·͍ͬͯΔ

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

  111. ໊ࢺ ಈࢺ $ cd /System CUI

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

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

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

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

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

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

  118. Window CustomView TextField Event event event event mouseDown Responder Chain

    mouseDown() ςΩετೖྗ଴ͪ ಛʹͳ͠ ΞΫςΟϒԽ
  119. macOSͰ͸͜ͷΑ͏ͳ࢓૊ΈͰ ϞʔυϨεͳૢ࡞ମܥ͕࣮ݱ͞Ε͍ͯΔ

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

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

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

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

  125. None