「ちょっといいUI」を目指す努力 / Striving for Little Big Details

ライトニングトーク ｢ちょっといいUI｣を目指す努力
インタラクションの観点から、UIデザインにおける細かな振る舞いやこだわり、苦悩、課題などについて考えます。ライトニングトークでは事例をいくつか紹介します。
（ディスカッションパートの情報は本講演資料には含まれません）

Findy
https://findy.connpass.com/event/330176/
#デザインエンジニア_findy

--

本講演資料は、ファインディさん主催のオンラインイベント「usagimaruさん・もっとさんに聞く！ エンジニア視点から考えるUI表現 ～デザインシステム以外でできること～」にて使用したものの編集版です。

Transcript

1. https://findy.connpass.com/event/330176/ 2024.10.17 ňͪΐͬͱ͍͍UIʼnΛ໨ࢦ͢౒ྗ © 2024 usagimaru ʰusagimaru͞Μɾ΋ͬͱ͞Μʹฉ͘ʂ ΤϯδχΞࢹ఺͔Βߟ͑ΔUIදݱ ʙσβΠϯγεςϜҎ֎ͰͰ͖Δ͜ͱʙʱ ϥΠτχϯάτʔΫ usagimaru #σβΠϯΤϯδχΞ_findy ެ։൛
2. © 2024 usagimaru ιϑτ΢ΣΞσβΠφʔ UIΞʔΩςΫτ / σϕϩούʔ usagimaru גࣜձࣾλΠϜϥϘ @usagimaru @usagimaruma bento.me/usagimaru ! ! ιϑτ΢ΣΞσβΠϯ UI / ৘ใΞʔΩςΫνϟ / ΠϯλϥΫγϣϯ AppleϓϥοτϑΥʔϜͰͷΞϓϦ։ൃ ߨԋɺࣥච׆ಈɺΠϕϯτӡӦ΄͔ ιϑτ΢ΣΞΤϯδχΞϦϯά ίϛϡχέʔγϣϯ
3. “interaction” © 2024 usagimaru
4. © 2024 usagimaru inter-action ޓ͍ʹ࡞༻͠߹͏͜ͱ ←action feedback/action→ ໋ྩΛ༩͑Δ ৘ใΛࣔ͢ ൓ԠΛݟͯ ࣍ͷߦಈΛ ߟ͑Δ ໋ྩʹ൓Ԡ͢Δ
5. © 2024 usagimaru ςΩετ
6. © 2024 usagimaru ςΩετ Click Action Feedback Pointing
7. © 2024 usagimaru ςΩετ Click Click Action Feedback Pointing
8. © 2024 usagimaru ςΩετ Drag Action Feedback Pointing
9. © 2024 usagimaru ςΩετ Click Action Feedback Pointing
10. ඇจࣈݴޠʹΑΔϑΟʔυόοΫ © 2024 usagimaru
11. © 2024 usagimaru https://goodpatch.com/work/vegery ※άουύονॴଐ࣌୅ͷ࣮੷
12. © 2024 usagimaru ※άουύονॴଐ࣌୅ͷ࣮੷
13. © 2024 usagimaru ※άουύονॴଐ࣌୅ͷ࣮੷ https://goodpatch.com/news/sunchigooddesign
14. © 2024 usagimaru ൪֎
15. ͳΊΒ͔Ͱࣗવͳಈ͖ͷ௥ٻ © 2024 usagimaru
16. © 2024 usagimaru System EaseInOut https://note.com/usagimaruma/n/nd0bcd7aa43ff ৄ͘͠͸try! Swift Tokyo 2024੿ߨԋ͓ΑͼnoteͰ “EaseInOut”Λ ࢖༻͠ͳ͍ Ճ଎͕ͳ͚Ε͹ ό΢ϯεͤ͞ͳ͍ +
17. © 2024 usagimaru
18. © 2024 usagimaru Release Drag… Projection Target Nearest Target (Destination) Initial Velocity (x) + Deceleration Bounce Move Accelerate https://note.com/usagimaruma/n/nd0bcd7aa43ff ৄ͘͠͸try! Swift Tokyo 2024੿ߨԋ͓ΑͼnoteͰ Ξχϝʔγϣϯʹ ׂΓࠐΈૢ࡞Մೳʹ Ճ଎͕͋Ε͹ ద੾ʹό΢ϯεͤ͞Δ +
19. © 2024 usagimaru ࢀߟɿWWDC18 803 “Designing Fluid Interfaces” https://developer.apple.com/videos/play/wwdc2018/803/
20. σεΫτοϓΒ͍͠ ΠϯλϥΫγϣϯͷ௥ٻ © 2024 usagimaru
21. © 2024 usagimaru
22. © 2024 usagimaru 100 59 71 12 100 59 71 12
23. © 2024 usagimaru
24. © 2024 usagimaru
25. © 2024 usagimaru