UX UI Design Day 1blog.bru.ac.th/wp-content/uploads/bp-attachments/27504/บทที่-3... · Wireframe • ภาพร่างที Ñบอกว่าหน...

บทท 3

เทคนคการวเคราะหและออกแบบสวนตดตอผใชงาน

4123310 การพฒนาและการออกแบบสวนตดตอผใชงาน

cr. Krissada Chalermsook, facebook.com/theselfmadethailand

We are here !!

interactions, animation

Fidelity = ความแมนย า, ซอตรง

สรป Process ของการ Design App

Sketch

- วาดดวยมอ

- ไมไดเปนงานทเรยบรอย

- เปนการจดไอเดยเพอใชในอนาคต

- เปนวธการเรวๆ ทจะสอถง ไอเดย, รปภาพ หรอ

หลกการออกมา

ตวอยาง Dashboard จรง

Wireframe

• ภาพรางทบอกวาหนาตาของโปรดกสจะเปน “ประมาณ” ไหน

•“พมพเขยว” ของโปรดกส

Wireframes

● เนนทการจดต าแหนงขององคประกอบตางๆในหนาจอ ล าดบความส าคญของขอมล และ

ฟงกชนของโปรดกส

● ไมเนนหนาตาสสนของโปรดกส

● ท างาย แกไขไดงาย และพรอมทจะถกแกไขตลอด

● ใชเปนสอกลางในการพดคยกนในทม

● ชวยใหเหนภาพรวมของโปรดกส มากกวารายละเอยดปลกยอย

“Focus ท Functionality และ Behaviour”

Low-Fidelity Wireframes

Low-Fidelity Wireframes - ใชเมอไหร, ดยงไง

- ส าหรบงานทเนนความรวดเรว สามารถสอสารเพอเขาใจถงการ

ท างานของระบบนนๆได

- ยงไมลงรายละเอยดของหนา มเพยงภาพคราวๆ กอน

- ขอดทตามมาคอ

- เราจะไดผลตอบรบอยางรวดเรวในการท าแบบน

- สะดวกแกการแกไขงาน กอนจะเรมลงมอท าจรง

- หากมขอผดพลาดจะใชเวลานอยมากในการสรางขนมาใหม

High-Fidelity Wireframes

High-Fidelity Wireframes - ใชเมอไหร? ดยงไง?

- ส าหรบการน าเสนอไอเดยหรอรปแบบการ Action ใหแก

Customer เสมอนงานสมจรงมากทสด

- เปนงานทเหมอนของจรงแลวกอนน าไปสรางเปนสนคาตวจรง

- ใชเวลาเยอะกวาแบบ Low เปนอยางมาก

- สราง เมอเรามนใจในโครงหนาและ Flow ของระบบจรงๆ แลว

เทานน

เครองมอใชสราง Wireframes

•ปากกา + กระดาษ – ใชเวลานอยทสด ควรใชกอนเครองมอชนดอนเสมอ

•PowerPoint (Presentation Software) – ใชขนโครงตอจากปากกา + กระดาษ

แตการใชงานจะคอนขางยากและเสยเวลา

•Illustrator – ใชออกแบบหนา High-fidelity Wireframe ซงกนเวลานานมากแต

จะสวยทสด

เครองมอใชสราง Wireframes

● Sketch – ใชออกแบบหนาจอยอดนยมมากทสด แตไมฟรและไมสามารถท างาน

พรอมกนหลายคนได

● Adobe XD – แนะน าใหใช (ฟร 1 project) ใชงานงาย Share Link ผาน Web

Browser ไดงาย

● figma.com – แนะน าใหใช (ฟร 3 project) ใชงานงาย Share Link ผาน

Web Browser ไดงาย ท างานหลายคนพรอมกนได

UI Toolkits ของ Figma - เปน Design ทมมาให เพอใหการท างานไดงายขน

Wireflow - Flow Chart ทบอกถงการเชอมตอกนของ Wireframe

Mockup

Mockup

- เนน “Style” , “Color”, “Right Content”

- Click ไมได

- ชวยใหเหน Visual ทงหมด และสามารถน าไปทดสอบ เพอกลบมา

ปรบแก

Prototype

- คลายๆ Mockup แตท าเพอใชในการน าเสนอผใชงาน เพอใหเหมอนเปน Product จรง

มากทสด แตกบ Mockup ท- Clickable

- Animation

- เหมอนเปน Final Product แตกไมใช Final Product เพราะไมมการเขยนโคดจรง ไมได

เชอม Database

https://www.youtube.com/watch?v=fogFZ3ROrYU&app=desktop

ทบทวน

interactions, animation

Workshop

•เขยน Low-Fidelity Wireframe ลง Post-it หนงแผนตอหนง

หนา

•เขยนชอหนาจอก ากบดวย

Workshop

•สราง Wireflow จาก Wireframe ทเขยนบน Post-it

•เพม Wireframe หากจ าเปน

- 1 PostIT = 1 หนา

- เขยนชอหนาดวย

Workshop - แปลงทก Post-it เปน Hi-fi Wireframe ลง

กระดาษ A4 ( 1 post-it / 1 A4 พบครง )