PWA Night vol.14で発表に使った資料です。 使いにくいWeb: https://bad-ui.netlify.com/ それのソースコード: https://github.com/mottox2/bad-ui
2020.03.18 PWA Night vol.14 / @mottox2
View Slide
Gatsby, Gridsome, Next.js, etc…͓ࣄWatchingmottox2@ؿٔ٦ٓٝأ8FCؒٝآص،ࣗݾհͻͱ͜ͱWeb 5iOS/AndroidSaaS UI / 1.5
#pwanightͳͥPWA։ൃͰʰUI/UXʱʹண͢Δͷ͔ʁ‣ PWA‣‣ UIػೳཁ݅ ඇػೳཁ݅
#pwanight࢝ΊͯͷεϚʔτϑΥϯ‣‣‣‣UI
#pwanightεϚϗͷಓ۩తͳੑ࣭
#pwanightPCͱεϚϗ
#pwanightಓ۩ͱεϚϗ
#pwanightεϚϗͷಓ۩ੑ‣ PC‣ PC‣
#pwanight͍͍͢ಓ۩ͱԿ͔ʁ
#pwanightεϚϗͷಓ۩ੑ‣‣‣‣ 1.‣ 2.‣ 3.‣ 4.
#pwanight͍ʹ͍͘UIΛ࡞͖ͬͯ·ͨ͠‣ https://bad-ui.netlify.com‣ GitHub: mottox2/bad-ui‣ iOS Safari
#pwanight1. Ԇͳ͘ҧײͷͳ͍ಈ͖‣‣‣‣ 0=>1‣ iOS bounce Scroll‣‣‣‣
#pwanight2. ࣗͷૢ࡞ͷϑΟʔυόοΫ͕ೝͰ͖Δ‣‣‣‣‣‣
#pwanight3. ׳Εྨਪ͔Βಈ͔ͤΔ‣‣ OS‣‣‣ Web
#pwanight4. ϝλϑΝʔΛར༻͢Δ‣‣ Tinder‣‣
#pwanightΒʹͰ͖Δ͜ͱ
#pwanight࣮ػͰ͔֬ΊΔ‣‣‣‣ iOS/Android‣ Android iOS
#pwanightදݱྗΛ্͛Δ‣‣ iOS CSS‣ Ionic
#pwanightΨΠυϥΠϯΛΔ‣‣ Human Interface Guidelines Material Design‣ Material Design
#pwanightΨΠυϥΠϯΛΔ‣ iOS Design Principles‣ Direct Manipulation‣ Feedback‣ Metaphors‣ User ControlHuman Interface Guidelines
#pwanightΨΠυϥΠϯΛΔ‣ Web Component‣‣ Motion, Gesture, SoundMaterial Design
#pwanightΨΠυϥΠϯΛΔ‣‣ PWA UI Web Web
#pwanight·ͱΊ
#pwanight·ͱΊ‣ Web‣‣‣
#pwanightࢀߟॻ੶ɾαΠτ‣ (2015)‣ Apple Human Interface Guidelines‣ https://developer.apple.com/design/human-interface-guidelines/‣ Google Material Design‣ https://material.io/
#pwanightThank you!mottox2@ؿٔ٦ٓٝأ8FCؒٝآص،