UX UI Wireframe คืออะไร?

UX UI So What?
May 23, 2023

--

Wireframe หรือ โครงร่าง คือการออกแบบเบื้องต้นในขั้นตอนแรกของการออกแบบ UX UI การทำ Wireframe นั้นจะทำให้เราสามารถจัด Layout ของ Product ได้เบื้องต้น

ข้อดีของการทำ Wireframe

  • นักออกแบบ UX UI และทีมอื่นๆที่เกี่ยวข้องสามารถปรึกษากันโดยใช้ข้อมูลมาอ้างอิง และสามารถแก้ไขได้ในทันที
  • สามารถนำไปทดสอบให้กับลูกค้าหรือผู้ใช้งานได้และแก้ไขได้ทันที
  • สามารถนำ Wireframe ไปพัฒนาต่อได้ทันทีหลังจากแก้ไขและทดสอบแล้ว

Level ของ Wireframe

Low — — — > Medium — — — > High

การออกแบบ Wireframe จะแบ่งออกเป็น 3 Levels ขึ้นอยู่กับลักษณะการใช้งาน โดยแบ่งออกได้เป็น

Low-fidelity Wireframes

เป็นการออกแบบเขียนบนกระดาษ เหมาะสำหรับเขียนไอเดียคร่าวๆและแก้ไขได้ทันที

Medium-fidelity Wireframes

ออกแบบและจัดวาง Layout บนหน้าจอ เพื่อการออกแบบที่ง่ายและมองเห็นภาพได้

High-fidelity Wireframes

การออกแบบโดยมีรายละเอียดที่เกือบเทียบเท่าตัวจริง บางครั้งอาจจะมี Prototype สำหรับใช้งานได้คล้ายกับตัวจริง ทำให้สามารถมองภาพรวมและแก้ไขได้จริง

การทำ Wireframe เป็นเสมือนก้าวแรกของการออกแบบที่หลายคนมักมองข้ามไป แม้ว่าเราจะมีประสบการณ์ที่มากแค่ไหน แต่เราต้องไม่ลืมพื้นฐานไปด้วยเช่นกัน ไม่เช่นนั้นสิ่งเล็กๆน้อยๆก็อาจจะกลายมาเป็นปัญหาในภายภาคหน้าได้

ฝากกดติดตามเพจ UX UI แล้วไง? ด้วยนะครับ
https://web.facebook.com/uxuisowhat

แล้วพบกันใหม่ในบทความหน้านะ

--

--

UX UI So What?

This is a blog to know and share UX UI design ideas for a free person like me who can't find a place to vent. Facebook @uxuisowhat