Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Designing Desktop Interactions

usagimaru
August 29, 2018

Designing Desktop Interactions

Designing Desktop Interactions(公開版)

macOS native Symposium #01
https://macos-native.github.io

usagimaru

August 29, 2018
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. macOS native Symposium #01 @usagimaruma Designing Desktop Interactions #macosnative 2018.8.29

    © 2018 Satori MARU. https://macos-native.github.io @usagimaruma
  2. ΠϯλʔϑΣΠεઃܭ࢜ Interface & Interaction Design / macOS / iOS /

    Sketch Plugin usagimaru interactionmania.com @usagimaru @usagimaruma
  3. #macosnative Human Interface Guidelines Second Beta Draft (1986) l͜ͷઅͰ͸ɺ"QQMFώϡʔϚϯΠϯλʔϑΣΠεͷഎޙʹ͋Δݪଇɺ͢ͳΘͪ ΠϯλʔϑΣΠεͷਫ਼ਆΛ֓આ͠·͢ɻ͜ΕΒͷݪଇ͸ݱࡏͷʮσεΫτοϓʯ

    ΠϯλʔϑΣΠεʹݶఆ͞Εͳ͍ΑΓҰൠతͳ΋ͷͰ͋Γɺ৽͍͠ΠϯλʔϑΣ ΠεͷϝλϑΝʔ͕ݟ͔ͭͬͨ৔߹Ͱ΋༗ޮͰ͢ɻͨͱ͑͹ɺίϯϐϡʔλ͸ৗ ʹ৘ใͷදࣔΛఏڙ͠·͕͢ɺඞͣ͠΋ʮ΢Πϯυ΢ʯΛ࢖༻͢Δඞཁ͸͋Γ· ͤΜɻz
  4. ‣ Metaphors from the real world ‣ Direct manipulation ‣

    See-and-point (instead of remember-and-type) ‣ Consistency ‣ WYSIWYG (what you see is what you get) ‣ User control ‣ Feedback and dialog ‣ Forgiveness ‣ Perceived stability ‣ Aesthetic integrity Apple Human Interface Guidelines (1987) #macosnative General design principles (1987)
  5. ‣ Metaphors ‣ Direct Manipulation ‣ See-and-Point ‣ Consistency ‣

    WYSIWYG (What You See Is What You Get) ‣ User Control ‣ Feedback and Dialog ‣ Forgiveness ‣ Perceived Stability ‣ Aesthetic Integrity ‣ Modelessness Macintosh Human Interface Guidelines (1992) #macosnative Human Interface Principles (1992)
  6. ‣ Mental Model ‣ Metaphors ‣ Explicit and Implied Actions

    ‣ Direct Manipulation ‣ Consistency ‣ User Control ‣ Feedback and Commiunication ‣ Forgiveness ‣ Aesthetic Integrity OS X Human Interface Guidelines (2016) #macosnative Design Principles (2016)
  7. ߲໨ ߲໨ ߲໨ ߲໨ … PNG Done # બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ #macosnative

    ⌘C ? ⌘A ? ⌫ ? ίϯςΫετϝχϡʔʁ υϥοάʁ web
  8. ߲໨ ߲໨ ߲໨ ߲໨ … PNG Done # બ୒ର৅͕ड͚෇͚ΔΞΫγϣϯʁ #macosnative

    ⌘C ? ⌘A ? ⌫ ? ίϯςΫετϝχϡʔʁ υϥοάʁ web
  9. ✓ ΫϩεϓϥοτϑΥʔϜͰ։ൃίετ͕Ӡʑ ✓ macOS / Windows / web ͍ͣΕͰ΋ಉ͡Α͏ʹ࢖͑Δ ✓

    ωΠςΟϒΞϓϦέʔγϣϯ։ൃͷෑډ͕ߴ͍ ‣ ύϑΥʔϚϯε͕ѱ͍ ‣ Cocoa Λ׆༻Ͱ͖ͳ͍ Non-native App ߟ #macosnative #
  10. ‣ Human Interface Guidelines Λक͍ͬͯͳ͍ ‣ ਅͷωΠςΟϒΠϯλʔϑΣΠεͰ͸ͳ͍ ‣ macOS ωΠςΟϒ؀ڥશମͰ༗ޮͳΠϯλϥΫγϣϯ͕௨͡ͳ͍

    ‣ macOS ͷσβΠϯʹద߹͍ͯ͠ͳ͍ ‣ ͦΕͧΕͷʮؒʯΛऔΔͨΊʹɺத్൒୺ͳ඼࣭ͷΠϯλʔϑΣΠε ʹ࢓্͕͍ͬͯΔ Non-native App ߟ #macosnative %
  11. #macosnative Designing Desktop Interactions.key Designing Desktop Interactions.key 74.8 MB ໊শະઃఆϑΥϧμ

    Keynote.app ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత બ୒͢Δ Ϟϊ ΞΠίϯͰදݱͰ͖Δ ࣮ߦ͢Δ ίτ ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍ Clarus.moof
  12. #macosnative ΦϒδΣΫτɿ໊ࢺత ΞΫγϣϯɿಈࢺత બ୒͢Δ Ϟϊ ΞΠίϯͰදݱͰ͖Δ ࣮ߦ͢Δ ίτ ΞΠίϯͰදݱ͠ʹ͍͘ʗඞཁͳ͍ ΦϒδΣΫτͳͷͰ

    ਤܗతͳදݱ͕Մೳ Designing Desktop Interactions.key Designing Desktop Interactions.key 74.8 MB ໊শະઃఆϑΥϧμ Keynote.app Clarus.moof
  13. #macosnative Inspector movie.mov Source: ~/Desktop/movie.mov Format: H.264 1024 × 576

    AAC 44100 Hz Stereo L R FPS: 23.976 Data Size: 402.5 MB Data Rate: 1992.30 kbit/s Current Size: 1024 × 576 Window
  14. ‣ ૢ࡞Λதஅ͢Δ͜ͱͰɺࣗಈతʹϞʔυ͔Βൈ͚Β ΕΔ ‣ όωػߏʹΑͬͯϞʔυ͔Βԡ͠ग़͞ΕΔΠϝʔδ ‣ ಛఆͷΩʔΛԡԼத ‣ Ϛ΢εԡԼத ‣

    υϥοά࠷த #macosnative όωࣜϞʔυʢٖࣅϞʔυʣ ⇧ Ϣʔβʔ͕ૢ࡞͢ΔؒͷΈ༗ޮͳ୹ظؒͷϞʔυ
  15. ‣ ୹ظؒͷҰճ׬݁ܕϞʔυ ‣ ϞʔμϧύωϧΑΓ΋ܰྔͳϞʔυ ‣ Popover ֎ͷૢ࡞Ͱࣗಈऴྃ ‣ ϞʔυͷࣗಈऴྃΛ્ࢭͰ͖ͳ͍ ‣

    ల։ͨ͠Β͙͢ʹ໭͢લఏͰͷར༻ ‣ ΑΓϦονͳϝχϡʔͷΑ͏ͳҐஔ෇͚ ‣ ෳࡶͳΠϯλϥΫγϣϯΛආ͚Δ #macosnative Popovers ϞʔυϨεύωϧ ‣ ૢ࡞Λ੍ݶ͢ΔϞʔυ͕ͳ͍ ‣ Ϣʔβʔ͕Ϟʔυͷঢ়ଶΛ஌Δඞཁ͕ͳ͍ ‣ ͍ͭͰ΋ด͡Δ͜ͱ͕Ͱ͖Δ ‣ ։͍ͨ··Ͱ΋ྑ͍ ‣ ϝΠϯ΢Πϯυ΢͔Β཭ͯ͠ஔ͍͓͚ͯΔ