Wireframe คืออะไร

Wireframe คืออะไร

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

Wireframe คือ โครงสร้าง แผนผัง หรือพิมพ์เขียว ซึ่งจะช่วยในการออกแบบและจัดองค์ประกอบของหน้าจอของเว็บไซต์หรือซอฟต์แวร์ เพื่อให้ผู้ใช้งาน ผู้ออกแบบและผู้พัฒนาเห็นภาพและเข้าใจภาพรวมตรงกัน ซึ่งการทำ Wireframe จะช่วยลดปัญหาในเรื่องของความเข้าใจที่คลาดเคลื่อนและเป็นข้อตกลงร่วมกันก่อนที่จะลงมือพัฒนาโปรแกรม

ระดับของ Wireframe (Wireframe Level)

Wireframe แบ่งเป็น 3 level ดังนี้

·        Low-fidelity wireframes: เป็นการออกแบบหรือเขียนแบบคร่าวๆ เช่น การเขียนลงในกระดาษ

·        Medium-fidelity wireframes: จะมีความละเอียดมากขึ้น เช่น มีการลงตำแหน่ง รายละเอียดการจัดวางในหน้าจอ

·        High-fidelity wireframes: เป็นการออกแบบที่เสมือนจริง มีการใส่รายละเอียดอย่างครบถ้วนหรือใกล้เคียงกับหน้าจอที่สมบูรณ์มากที่สุด

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

เครื่องมือที่นิยมใช้ทำ (Wireframe Tools)

ในการพัฒนาหรือทำ Wireframe นั้นมีเครื่องมือให้เลือกใช้ได้หลากหลายขึ้นอยู่กับความถนัดและความสะดวกในการใช้งานของผู้ทำ ซึ่งจะมีเครื่องมือทั้งแบบออนไลน์และออฟไลน์

1.      เครื่องมือแบบออนไลน์ ได้แก่

–        Cacoo

–        Jumpchart

–        FrameBox

–        iPlotz

–        MockFlow

–        Google Docs

2.      เครื่องมือแบบออฟไลน์ ได้แก่

–        Microsoft Visio

–        OmniGraffle

–        Adobe Photoshop

–        Adobe Firework

–        Pencil Project

–        Justinmind