Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

ロジカルなUIデザイン 考え方と関わり方 / A Logical Approach to UI...

usagimaru
October 15, 2024
5.5k

ロジカルなUIデザイン 考え方と関わり方 / A Logical Approach to UI Design, How to Think and Engage

「ロジカルなUIデザイン 考え方と関わり方」
ソフトウェアエンジニアリングの視点から、UIデザインの考え方や関わり方の事例を紹介します。また、役割や職種の異なるエンジニア/デザイナー同士の共通言語の持ち方や、協業の仕方について考えます。

Offers
https://offers.jp/worker_events/connpass_44
https://offers-jp.connpass.com/event/327741/
#Offers_DeepDive

--

本講演資料は、オファーズさん主催のオンラインイベント「エンジニア出身デザイナーusagimaru氏と学ぶ ロジカルに考えるエンジニアのためのUIデザイン」にて使用したものの編集版です。

usagimaru

October 15, 2024
Tweet

More Decks by usagimaru

Transcript

  1. © 2024 usagimaru ιϑτ΢ΣΞσβΠφʔ / UIΞʔΩςΫτ / σϕϩούʔ usagimaru גࣜձࣾλΠϜϥϘ

    @usagimaru @usagimaruma bento.me/usagimaru ! ! ! ex גࣜձࣾάουύον
  2. © 2024 usagimaru ιϑτ΢ΣΞσβΠϯ UI / ৘ใΞʔΩςΫνϟ / ΠϯλϥΫγϣϯ AppleϓϥοτϑΥʔϜͰͷΞϓϦ։ൃ

    ߨԋɾొஃɺࣥච׆ಈɺΠϕϯτӡӦ΄͔ ιϑτ΢ΣΞΤϯδχΞϦϯά ίϛϡχέʔγϣϯ
  3. © 2024 usagimaru UI Design ୯ͳΔň͓ֆඳ͖ʼn ……ͱ͍͏Θ͚Ͱ͸ͳ͍ʂ → γεςϜΛߏங͢Δ͜ͱʹ૊Έࠐ·ΕΔ →

    ιϑτ΢ΣΞͷݪཧΛ஌Δඞཁ͕͋Δ → ΤϯδχΞϦϯάͱ΋ຊ࣭͸ࣅ͍ͯΔ
  4. UIઃܭͷݪཧݪଇͱϩδοΫ Apple Human Interface Guidelines / Design Principles © 2024

    usagimaru • ൺᄻͷ࢖༻ • ௚઀ૢ࡞ • ݟͨ΋ͷΛࢦࣔ • Ұ؏ੑ • WYSIWYGʢݟͨ··Λඳըʣ • ϢʔβʔʹΑΔ੍ޚ • ϑΟʔυόοΫ • ׮༰ੑ • ҆ఆੑ • ඒత੔߹ੑ Human Interface Guidelines: The Apple Desktop Interface HIG for Desktop (1987) iOS HIG (2017) • ൺᄻͷ࢖༻ (Metaphors) • ௚઀ૢ࡞ (Direct Manipulation) • Ұ؏ੑ (Consistency) • ϢʔβʔʹΑΔ੍ޚ (User Control) • ϑΟʔυόοΫ (Feedback) • ඒత੔߹ੑ (Aesthetic Integrity)
  5. UIઃܭͷݪཧݪଇͱϩδοΫ ϠίϒɾχʔϧηϯͷϢʔβϏϦςΟ10ݪଇ © 2024 usagimaru https://u-site.jp/about/nielsen • γεςϜঢ়ଶͷࢹೝੑΛߴΊΔ • ࣮؀ڥʹ߹ͬͨγεςϜΛߏங͢Δ

    • Ϣʔβʔʹίϯτϩʔϧͷओಋݖͱࣗ༝౓Λ༩͑Δ • Ұ؏ੑͱඪ४ԽΛอ࣋͢Δ • ΤϥʔͷൃੜΛࣄલʹ๷ࢭ͢Δ • هԱ͠ͳͯ͘΋ɺݟΕ͹Θ͔ΔΑ͏ͳσβΠϯΛߦ͏ • ॊೈੑͱޮ཰ੑΛ࣋ͨͤΔ • ࠷খݶͰඒ͍͠σβΠϯΛࢪ͢ • ϢʔβʔʹΑΔΤϥʔೝࣝɺ਍அɺճ෮Λαϙʔτ͢Δ • ϔϧϓͱϚχϡΞϧΛ༻ҙ͢Δ
  6. υϦϧμ΢ϯ © 2024 usagimaru ૈ ࡉ 情報の粒度・解像度 #1 #2 #3

    ໭Δ ໭Δ 奥に潜るほど情報が⾼解像化 A1
  7. ॏ૚Խʢ͋Δ͍͸Ϟʔμϧʣ © 2024 usagimaru 情報は「重層化」され、⼿前にくるほど新しい ৽ ݹ ৘ ใ ͷ

    ৽ ن ੑ ࠷৽ લ ޙ ৘ ใ ͷ ֊ ૚ ྫɿϞʔμϧϏϡʔ UIを覆い隠し、「着⽬すべき情報」を⽰す A2
  8. © 2024 usagimaru πϦʔߏ଄ άϧʔϓ͕1ɺཁૉ͕ෳ਺ άϧʔϓͱཁૉͷؔ܎ʹ͓͍ͯ ɹ ϑΝΠϧ͔Βݟͯ ɹ ϑΥϧμ͸

    1 ɹ ϑΥϧμ͔Βݟͯ ɹ ϑΝΠϧ͸ 0..n ཁૉ͸Ұͭͷάϧʔϓʹॴଐ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ • σΟϨΫτϦʗϑΥϧμ֊૚ • ੓෎૊৫ɾاۀͷߏ଄ • ݐ෺ͷߏ଄ • ॅॴͷදݱ • ػցͷߏ଄ άϧʔϓ ཁૉ 0..n 1 C1
  9. © 2024 usagimaru ཁૉ͸ෳ਺ͷάϧʔϓʹॴଐ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ ηϛϥςΟεߏ଄ • λάωοτϫʔΫ • iPhoneͷࣸਅΞϧόϜ

    • ԻָܥappͷεϚʔτϓϨΠϦετ • πϦʔܕͷ౷࣏ػߏʢॅॴʣͱɺ ࣮ࡍͷਓʑͷ׆ಈൣғ άϧʔϓ͕ෳ਺ɺཁૉ͕ෳ਺ άϧʔϓͱཁૉͷؔ܎ʹ͓͍ͯ ɹ ࣸਅ͔Βݟͯ ɹ ΞϧόϜ͸ 1..n ɹ ΞϧόϜ͔Βݟͯ ɹ ࣸਅ͸ 0..n 0..n 1..n άϧʔϓ ཁૉ C2
  10. © 2024 usagimaru ۩ମ෺Λ࡞Βͳ͍ͱ൑அͰ͖ͳ͍΋ͷ͸ ϓϩτλΠϓͰධՁ w w w w w

    w ص্Ͱݕ౼Մೳͳ΋ͷ͸ ϞσϧͰධՁ w w w • ߏ଄ͷ࿦ཧੑ • දࣔܗଶ • φϏήʔγϣϯʗঢ়ଶભҠ • Ϣʔβʔͷ༻్ͱधཁ • දݱͷଥ౰ੑ • ݟͨ໨ɾಈ͖ͷҹ৅΍ײ৮ • ϢʔβϏϦςΟɺΞΫηγϏϦςΟ • ϓϨθϯςʔγϣϯɺ૯߹తͳσβΠϯͷධՁ
  11. ίϯςϯπߏ଄ͷϞσϧԽ ϨγϐαʔϏεͷྫ © 2024 usagimaru Ϩγϐ ࡐྉ ྉཧݚڀՈ Ϣʔβ ίϝϯτ

    ௐཧಈը ίϝϯτऀ ౤ ߘ ऀ ౤ ߘ ಺ ༰ ౤ߘ಺༰ ౤ߘઌ Ϩ γ ϐ ࡐ ྉ ؂मϨγϐ ؂मऀ ಈը ίϝϯτ౤ߘ ͨ͠Ϩγϐ
  12. ϢʔεέʔεͷϞσϧԽ Ϣʔεέʔεఆٛͷྫ © 2024 usagimaru Use-case #A1-1 ň༧໿Λొ࿥Ͱ͖Δʼn Use-case #A1-2

    ň༧໿Λ࡟আͰ͖Δʼn Use-case #A1-3 ň༧໿ΛฤूͰ͖Δʼn Use-case #A2-1 ňϓϩϑΟʔϧΛొ࿥Ͱ͖Δʼn Use-case #A2-2 ňϓϩϑΟʔϧΛ࡟আͰ͖Δʼn Use-case #A2-3 ňϓϩϑΟʔϧΛฤूͰ͖Δʼn