UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... ·...
Transcript of UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... ·...
![Page 1: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/1.jpg)
บทท 3
เทคนคการวเคราะหและออกแบบสวนตดตอผใชงาน
4123310 การพฒนาและการออกแบบสวนตดตอผใชงาน
cr. Krissada Chalermsook, facebook.com/theselfmadethailand
![Page 2: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/2.jpg)
We are here !!
![Page 3: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/3.jpg)
interactions, animation
![Page 4: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/4.jpg)
Fidelity = ความแมนย า, ซอตรง
![Page 5: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/5.jpg)
![Page 6: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/6.jpg)
สรป Process ของการ Design App
![Page 7: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/7.jpg)
Sketch
- วาดดวยมอ
- ไมไดเปนงานทเรยบรอย
- เปนการจดไอเดยเพอใชในอนาคต
- เปนวธการเรวๆ ทจะสอถง ไอเดย, รปภาพ หรอ
หลกการออกมา
![Page 8: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/8.jpg)
![Page 9: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/9.jpg)
ตวอยาง Dashboard จรง
![Page 10: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/10.jpg)
![Page 11: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/11.jpg)
![Page 12: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/12.jpg)
Wireframe
• ภาพรางทบอกวาหนาตาของโปรดกสจะเปน “ประมาณ” ไหน
•“พมพเขยว” ของโปรดกส
![Page 13: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/13.jpg)
![Page 14: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/14.jpg)
![Page 15: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/15.jpg)
Wireframes
● เนนทการจดต าแหนงขององคประกอบตางๆในหนาจอ ล าดบความส าคญของขอมล และ
ฟงกชนของโปรดกส
● ไมเนนหนาตาสสนของโปรดกส
● ท างาย แกไขไดงาย และพรอมทจะถกแกไขตลอด
● ใชเปนสอกลางในการพดคยกนในทม
● ชวยใหเหนภาพรวมของโปรดกส มากกวารายละเอยดปลกยอย
“Focus ท Functionality และ Behaviour”
![Page 16: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/16.jpg)
Low-Fidelity Wireframes
![Page 17: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/17.jpg)
Low-Fidelity Wireframes - ใชเมอไหร, ดยงไง
- ส าหรบงานทเนนความรวดเรว สามารถสอสารเพอเขาใจถงการ
ท างานของระบบนนๆได
- ยงไมลงรายละเอยดของหนา มเพยงภาพคราวๆ กอน
- ขอดทตามมาคอ
- เราจะไดผลตอบรบอยางรวดเรวในการท าแบบน
- สะดวกแกการแกไขงาน กอนจะเรมลงมอท าจรง
- หากมขอผดพลาดจะใชเวลานอยมากในการสรางขนมาใหม
![Page 18: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/18.jpg)
High-Fidelity Wireframes
![Page 19: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/19.jpg)
High-Fidelity Wireframes - ใชเมอไหร? ดยงไง?
- ส าหรบการน าเสนอไอเดยหรอรปแบบการ Action ใหแก
Customer เสมอนงานสมจรงมากทสด
- เปนงานทเหมอนของจรงแลวกอนน าไปสรางเปนสนคาตวจรง
- ใชเวลาเยอะกวาแบบ Low เปนอยางมาก
- สราง เมอเรามนใจในโครงหนาและ Flow ของระบบจรงๆ แลว
เทานน
![Page 20: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/20.jpg)
![Page 21: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/21.jpg)
เครองมอใชสราง Wireframes
•ปากกา + กระดาษ – ใชเวลานอยทสด ควรใชกอนเครองมอชนดอนเสมอ
•PowerPoint (Presentation Software) – ใชขนโครงตอจากปากกา + กระดาษ
แตการใชงานจะคอนขางยากและเสยเวลา
•Illustrator – ใชออกแบบหนา High-fidelity Wireframe ซงกนเวลานานมากแต
จะสวยทสด
![Page 22: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/22.jpg)
เครองมอใชสราง Wireframes
● Sketch – ใชออกแบบหนาจอยอดนยมมากทสด แตไมฟรและไมสามารถท างาน
พรอมกนหลายคนได
● Adobe XD – แนะน าใหใช (ฟร 1 project) ใชงานงาย Share Link ผาน Web
Browser ไดงาย
● figma.com – แนะน าใหใช (ฟร 3 project) ใชงานงาย Share Link ผาน
Web Browser ไดงาย ท างานหลายคนพรอมกนได
![Page 23: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/23.jpg)
UI Toolkits ของ Figma - เปน Design ทมมาให เพอใหการท างานไดงายขน
![Page 24: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/24.jpg)
Wireflow - Flow Chart ทบอกถงการเชอมตอกนของ Wireframe
![Page 25: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/25.jpg)
Mockup
![Page 26: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/26.jpg)
Mockup
- เนน “Style” , “Color”, “Right Content”
- Click ไมได
- ชวยใหเหน Visual ทงหมด และสามารถน าไปทดสอบ เพอกลบมา
ปรบแก
![Page 27: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/27.jpg)
![Page 28: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/28.jpg)
![Page 29: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/29.jpg)
![Page 30: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/30.jpg)
Prototype
- คลายๆ Mockup แตท าเพอใชในการน าเสนอผใชงาน เพอใหเหมอนเปน Product จรง
มากทสด แตกบ Mockup ท- Clickable
- Animation
- เหมอนเปน Final Product แตกไมใช Final Product เพราะไมมการเขยนโคดจรง ไมได
เชอม Database
![Page 31: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/31.jpg)
https://www.youtube.com/watch?v=fogFZ3ROrYU&app=desktop
![Page 32: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/32.jpg)
ทบทวน
interactions, animation
![Page 33: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/33.jpg)
Workshop
•เขยน Low-Fidelity Wireframe ลง Post-it หนงแผนตอหนง
หนา
•เขยนชอหนาจอก ากบดวย
![Page 34: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/34.jpg)
Workshop
•สราง Wireflow จาก Wireframe ทเขยนบน Post-it
•เพม Wireframe หากจ าเปน
- 1 PostIT = 1 หนา
- เขยนชอหนาดวย
![Page 35: UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน Òาตาของโปรดักส์จะเป็น“ประมาณ”](https://reader034.fdocument.pub/reader034/viewer/2022051923/6010ce4e893938479f7fb947/html5/thumbnails/35.jpg)
Workshop - แปลงทก Post-it เปน Hi-fi Wireframe ลง
กระดาษ A4 ( 1 post-it / 1 A4 พบครง )