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

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

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

usagimaru

July 08, 2023
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. ! Software Designer / Architect / Developer usagimaru @usagimaru @usagimaruma

    bento.me/usagimaru @[email protected] macOS nativeίΞϝϯόʔ © 2023 usagimaru @usagimaru.bsky.social
  2. © 2023 usagimaru Title bar / Toolbar Untitled Content area

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

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

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

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

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

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

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

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

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

    area͸Content areaͷผϏϡʔͱͯ͠ৼΔ෣͏৔߹΋͋Δ ͜ͷ৔߹͸AͱBͷ໾ׂ͸ಉ౳ͱݟ၏ͤΔ
  12. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ Sidebar্͕Ґ Untitled ‣ SidebarΛ΢Πϯυ΢શମͷάϩʔόϧ

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

    φϏήʔγϣϯ໾ʹ͢Δ ‣ ToolbarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ Λ࣋ͨͤΔ ‣ SidebarΛContent areaͷ֓ཁϦετͱͯ͠ ػೳͤ͞Δ৔߹
  14. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Toolbarӈ୺ https://pc.watch.impress.co.jp/docs/2004/0629/wwdc03.htm ‣

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

    ‣ Sidebar͕άϩʔόϧφϏήʔγϣϯͷػೳΛ ࣋ͭͷͰɺҰཡͷϑΟϧλϦϯάͰ΋υϝΠϯ Λލ͍ͩԣஅݕࡧʹͳΓಘΔʢͷͰ͸ͳ͍͔ʁʣ ‣ iPadOSͷελΠϧͱ΋߹Θ͍ͤͨ৔߹
  16. © 2023 usagimaru Pane Φʔόʔϥοϐϯά΢Πϯυ΢ Alan Kay ϨΠΞ΢τͷجຊݪଇ ֓ཁͱৄࡉ MacΒ͠͞

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