Movatterモバイル変換


[0]ホーム

URL:


Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Speaker DeckSpeaker Deck
Speaker Deck

デスクトップアプリケーションのUIパターン - ウインドウ編(公開版) / UI Patter...

Avatar for usagimaru usagimaru
July 08, 2023

デスクトップアプリケーションのUIパターン - ウインドウ編(公開版) / UI Patterns of Desktop Applications - Window Layouts

デスクトップアプリケーションのUIパターン - ウインドウ編(公開版)

macOSらしいウインドウをデザインするために役立つ基本パターンを紹介します。

macOS native Symposium #09
https://macos-native.github.io
https://macos-native.connpass.com/event/286455/

別途解説記事を用意しました。文章で理解されたい方におすすめです。
https://note.com/usagimaruma/n/ne6ce2a63c4ec

Avatar for usagimaru

usagimaru

July 08, 2023
Tweet

More Decks by usagimaru

See All by usagimaru

Other Decks in Design

See All in Design

Featured

See All Featured

Transcript

  1. usagimaru σεΫτοϓΞϓϦέʔγϣϯͷ UIύλʔϯ #macosnative © 2023 usagimaru macOS native Symposium

    #09 2023.07.08 ΢Πϯυ΢ฤ
  2. ! Software Designer / Architect / Developer usagimaru @usagimaru @usagimaruma

    bento.me/usagimaru @[email protected] macOS nativeίΞϝϯόʔ © 2023 usagimaru @usagimaru.bsky.social
  3. © 2023 usagimaru 1 4

  4. © 2023 usagimaru 1 https://speakerdeck.com/usagimaru/designing-desktop-interactions Designing Desktop Interactions – macOS

    native Symposium #01
  5. © 2023 usagimaru https://note.com/usagimaruma/n/n6ceb19a71890 GUI ͷ “ͪ͜Βଆ” ͔ΒͷσβΠϯ – macOS

    native Symposium #04 4
  6. UI © 2023 usagimaru ࠓճ΋…

  7. “MacΒ͍͠ιϑτ΢ΣΞ” © 2023 usagimaru Β͠͞Λߏ੒͢ΔσβΠϯύλʔϯΛ஌Δ

  8. © 2023 usagimaru https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos HIG

  9. © 2023 usagimaru https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos HIG

  10. ύλʔϯʹΑͬͯ ֤छUI͕ઃܭɾ࣮૷͞Ε͍ͯΔ “MacΒ͠͞”ͷݯ © 2023 usagimaru ! PopUp ! Check

  11. © 2023 usagimaru ΢Πϯυ΢σβΠϯ ͷجຊ

  12. ΢Πϯυ΢σβΠϯͷجຊ ΢Πϯυ΢ © 2023 usagimaru

  13. ΢Πϯυ΢σβΠϯͷجຊ ΢Πϯυ΢ © 2023 usagimaru

  14. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  15. Š"MBO,BZʮϢʔβʔΠϯλʔϑΣʔεݸਓతݟղʯΑΓ © 2023 usagimaru l΢Οϯυ΢Λར༻͢Δͱ͖ͷ௚؍తͳํ๏͸ɺ Ϛ΢εΛͦͷ΢Οϯυ΢ʹೖΕͯɺ΢Οϯυ΢ Λl্zʹͯ͠΢Οϯυ΢ΛΞΫςΟϒʹ͢Δ͜ ͱͰ͋Δɻz lΞΫςΟϒͳ΢Οϯυ΢͸ϞʔυΛߏ੒͍ͯ͠ Δɻ͔͠͠ɺԿ͔Λ͢Δͱ͖ʹ͸ఀࢭͤͣʹྡ

    ͷ΢Οϯυ΢ʹҠΔ͜ͱ͕Ͱ͖Δɻ͜Ε͕ࢲʹ ͱͬͯϞʔυϨεͨΔ༝ԑͳͷͰ͋Δɻz
  16. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  17. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  18. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  19. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  20. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  21. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  22. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  23. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  24. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  25. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru

  26. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru ΄͔ͷ΢Πϯυ΢ʹ ੾Γସ͑ͯ΋ྑ͍Ͱ͔͢ʁ ੾Γସ͑Δ Ωϟϯηϧ ϞʔμϧͳΠϯλϥΫγϣϯ

  27. © 2023 usagimaru ϞʔυϨε Ϟʔμϧ ৼΔ෣͍ํ࣍ୈͰ࢖͍উख͕ஈҧ͍ʹมΘΔ͜ͱ΋͋Δ

  28. © 2023 usagimaru ΢Πϯυ΢ͷ ϨΠΞ΢τύλʔϯ

  29. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ © 2023 usagimaru

  30. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail

  31. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail Pane

    ૭ͷҰ۠ը
  32. © 2023 usagimaru https://www.shutterstock.com

  33. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail ֓ཁ

    ৄࡉ ࠨ͔Βӈʹల։
  34. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + Detailʢλςʣ © 2023 usagimaru Main Detail

  35. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + Detailʢλςʣ © 2023 usagimaru Main Detail ֓ཁ

    ৄࡉ ্͔ΒԼʹల։
  36. © 2023 usagimaru ϨΠΞ΢τͷجຊݪଇ ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍ ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍ ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢

    ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍ 粗 細 *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹
  37. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ جຊཁૉ © 2023 usagimaru Pane Sidebar Inspector

  38. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ جຊཁૉ © 2023 usagimaru Pane Sidebar Inspector ۠੾ΒΕͨྖҬ ࠨଆͷΦϒδΣΫτҰཡ

    બ୒ͨ͠ΦϒδΣΫτͷ ৄࡉ৘ใ
  39. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Sidebars © 2023 usagimaru Sidebar Inspector

  40. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Sidebars © 2023 usagimaru Sidebar Inspector ֓ཁ ৄࡉ ৄࡉ

  41. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ ඪ४ϨΠΞ΢τ © 2023 usagimaru Title bar Untitled Content area

  42. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar © 2023 usagimaru Content area Title bar /

    Toolbar Untitled
  43. © 2023 usagimaru Title bar / Toolbar Untitled Content area

    Optional area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + ௥ՃϖΠϯ
  44. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Sidebar Sidebar Content area
  45. © 2023 usagimaru Title bar / Toolbar Untitled ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Inspector Content area Inspector
  46. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Sidebars Sidebar Content area Inspector
  47. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Sidebars (Big SurελΠϧ) Sidebar Content area Inspector
  48. © 2023 usagimaru Untitled Title bar / Toolbar Inspector ΢Πϯυ΢ϨΠΞ΢τύλʔϯ

    Toolbar + Sidebars (Big Sur / XcodeελΠϧ) Sidebar Content area
  49. © 2023 usagimaru Untitled Title bar / Toolbar Optional area

    Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebar (Big SurελΠϧ) + ௥ՃϖΠϯ Sidebar
  50. © 2023 usagimaru Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big

    SurελΠϧ) + ௥ՃϖΠϯ Title bar / Toolbar Untitled Optional area Inspector Sidebar
  51. © 2023 usagimaru Untitled Title bar / Toolbar Sidebar Inspector

    Optional area Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + ௥ՃϖΠϯ
  52. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Sidebars / ଟஈαΠυόʔ Primary sidebar Secondary sidebar Content area
  53. © 2023 usagimaru Untitled Title bar / Toolbar Primary sidebar

    Inspector Optional area Content area Secondary sidebar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + etc. / ଟॏϖΠϯ
  54. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar

    + Sidebar + Inspector Panel Inspector Panel Sidebar Content area
  55. ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹ΘͤͰߟ͑Δ © 2023 usagimaru

  56. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Title bar /

    Toolbar Untitled Sidebar Inspector Optional area Content area
  57. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ

  58. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ SidebarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ

  59. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ ToolbarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ

  60. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Content

    areaͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
  61. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ SidebarͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ

  62. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ

  63. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Content

    areaͰ֓ཁΛૢ࡞͠ɺOptional areaͰৄࡉΛૢ࡞͢Δ
  64. © 2023 usagimaru ϏϡʔA ϏϡʔB ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Optional

    area͸Content areaͷผϏϡʔͱͯ͠ৼΔ෣͏৔߹΋͋Δ ͜ͷ৔߹͸AͱBͷ໾ׂ͸ಉ౳ͱݟ၏ͤΔ
  65. Big SurελΠϧͱΫϥγοΫελΠϧͷ ໾ׂͷҧ͍ © 2023 usagimaru

  66. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Untitled Sidebar Title bar

    / Toolbar Big SurελΠϧ Sidebar͕Title bar·Ͱ͸Έग़͍ͯΔ
  67. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Sidebar Title bar /

    Toolbar ΫϥγοΫελΠϧ Sidebar͕Title barͷԼʹऩ·͍ͬͯΔ Untitled
  68. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ ࠨ্Λਞऔ͍ͬͯΔํ͕ʮ্Ґʯάϧʔϓ Untitled Untitled

  69. © 2023 usagimaru ϨΠΞ΢τͷجຊݪଇ ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍ ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍ ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢

    ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍ 粗 細 *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹ ࠶ܝ
  70. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Sidebar্͕Ґ Untitled Untitled Toolbar্͕Ґ

  71. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ Sidebar্͕Ґ Untitled ‣ SidebarΛ΢Πϯυ΢શମͷάϩʔόϧ

    φϏήʔγϣϯ໾ʹ͢Δ ‣ SidebarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ Λ࣋ͨͤΔ ‣ SidebarͰબΜ߲ͩ໨ʹΑͬͯɺToolbarͷ ಺༰͕มԽ͢Δ৔߹
  72. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ

  73. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ

  74. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ

  75. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ Toolbar্͕Ґ Untitled ‣ ToolbarΛ΢Πϯυ΢શମͷάϩʔόϧ

    φϏήʔγϣϯ໾ʹ͢Δ ‣ ToolbarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ Λ࣋ͨͤΔ ‣ SidebarΛContent areaͷ֓ཁϦετͱͯ͠ ػೳͤ͞Δ৔߹
  76. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  77. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  78. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  79. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  80. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  81. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ

  82. " © 2023 usagimaru

  83. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ

  84. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ

  85. ݕࡧϑΟʔϧυͷҐஔ © 2023 usagimaru !

  86. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺

  87. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺

  88. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Sidebar্୺ Toolbarӈ୺

  89. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Toolbarӈ୺ https://pc.watch.impress.co.jp/docs/2004/0629/wwdc03.htm ‣

    ओʹυϝΠϯΛލ͍ͩԣஅݕࡧͷ໾ׂ͕͋Δ ‣ 10.4 TigerҎདྷɺݕࡧ͸ʮӈ্ʯʹઃஔ͢Δ ΋ͷͱͯ͠ఆٛ͞Ε͖ͯͨ ‣ ఻౷తͳmacOSΒ͍͠ελΠϧ
  90. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Sidebar্୺ ‣ ҰཡͷϑΟϧλϦϯάͷΑ͏ʹݟ͑Δ

    ‣ Sidebar͕άϩʔόϧφϏήʔγϣϯͷػೳΛ ࣋ͭͷͰɺҰཡͷϑΟϧλϦϯάͰ΋υϝΠϯ Λލ͍ͩԣஅݕࡧʹͳΓಘΔʢͷͰ͸ͳ͍͔ʁʣ ‣ iPadOSͷελΠϧͱ΋߹Θ͍ͤͨ৔߹
  91. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺

  92. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ © 2023 usagimaru

  93. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ Mac OSͷΫϩʔζϘοΫε © 2023 usagimaru

  94. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ Safariͷλϒ © 2023 usagimaru

  95. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ visionOSͷ΢Πϯυ΢ίϯτϩʔϧ © 2023 usagimaru

  96. © 2023 usagimaru Pane Φʔόʔϥοϐϯά΢Πϯυ΢ Alan Kay ϨΠΞ΢τͷجຊݪଇ ֓ཁͱৄࡉ MacΒ͠͞

    ϞʔυϨε Ϟʔμϧ Big SurελΠϧ Sidebarத৺ Toolbarத৺ Sidebar্୺ݕࡧ Toolbarӈ୺ݕࡧ όπ͸ࠨଆ
  97. 9 #macosnative


[8]ページ先頭

©2009-2025 Movatter.jp