เคยสงสัยกันไหมเวลาเราใช้งานแอปฯ บางอันเรารู้สึกว่าหาปุ่มต่าง ๆ ง่าย ไม่ต้องเขียนอธิบายบอกก็รู้ว่าอยู่ตรงไหน ต้องทำอะไรต่อ มองดูสบายตา ในขณะที่บางแอปฯ กลับหาสิ่งที่ต้องการยาก ดูแล้วอึดอัด

สิ่งนี้ขึ้นอยู่กับ “การจัดวางองค์ประกอบต่าง ๆ ในหน้าจอ User Interface (UI)” ซึ่งส่งผลต่อความสวยงาม การใช้งาน และประสบการณ์ของผู้ใช้งาน โดยตัวช่วยสำหรับนักออกแบบ UI ที่ควรจะต้องรู้จักไว้คือ “Grid System” หรือ “ระบบกริด”

Grid system คืออะไร?

Grid system คือ การจัดวางองค์ประกอบต่าง ๆ บนหน้าจอ โดยแบ่งหน้าจอออกเป็นช่องตาราง ซึ่งสามารถกำหนดขนาดและระยะห่ในความเป็นจริง Grid ก็มีหลากหลายประเภท สำหรับการใช้งานที่แตกต่างกัน วันนี้เราจะพาทุกคนไปรู้จัก Grid ชนิดต่าง ๆ กัน!

สรุปประโยชน์ของ Grid system

• ช่วยให้การจัดวางองค์ประกอบต่าง ๆ บนหน้าจอเป็นไปอย่างเป็นระเบียบ สามารถใช้กำหนดขนาดและระยะห่างขององค์ประกอบต่าง ๆ บนหน้าจอได้อย่างสม่ำเสมอ ช่วยให้ UI เกิดความสมดุลและดูสวยงาม
• ช่วยให้ผู้ใช้งานสามารถมองเห็นองค์ประกอบต่าง ๆ บนหน้าจอได้ง่ายและสะดวก เนื่องจากองค์ประกอบต่าง ๆ บนหน้าจอจะถูกจัดวางไว้ในตำแหน่งที่คุ้นเคย
• ช่วยให้การทำงานร่วมกันระหว่างนักออกแบบ (Designer) และนักพัฒนา (Developer) เป็นไปอย่างราบรื่น สื่อสารกันได้อย่างเข้าใจ เนื่องจากทุกคนใช้ระบบการจัดวางองค์ประกอบแบบเดียวกัน

Grid ในงาน UI ไม่ได้มีแค่แบบเดียว!?

จริง ๆ แล้ว Grid มีหลากหลายประเภท สำหรับการใช้งานที่แตกต่างกัน วันนี้เราจะพาทุกคนไปรู้จัก 6 รูปแบบ Grid ที่สำคัญในงานออกแบบ UI กัน!

1. Manuscript Grid

— เป็นรูปแบบกริดที่ง่ายที่สุด ประกอบด้วยคอลัมน์เดียวที่ครอบคลุมความกว้างทั้งหมดของเค้าโครง นักออกแบบส่วนใหญ่ใช้กริดนี้สำหรับเนื้อหาข้อความรูปแบบยาวที่ต้องการให้อ่านและเขียนได้ง่าย เช่น บล็อกโพสต์หรือบทความหนังสือพิมพ์ออนไลน์ เป็นต้น

2. Column Grid

— รูปแบบกริดที่แบ่งเค้าโครงออกเป็นคอลัมน์แนวตั้งหลายคอลัมน์ ทำให้เกิดโครงสร้างที่ยืดหยุ่นสำหรับการจัดวางเนื้อหา สำหรับเค้าโครงที่ซับซ้อนขึ้น เช่น เว็บไซต์ หรือ แอปพลิเคชัน ปัจจุบันเว็บไซต์ส่วนใหญ่ใช้ระบบ Column grid โดยใช้กริด 12 คอลัมน์สำหรับ Desktop และ ลดลงเหลือกริด 2-4 คอลัมน์สำหรับอัตราส่วนหน้าจอ Mobile ที่มีขนาดพื้นที่เล็กกว่า

3. Modular Grid

— เป็นกริดอเนกประสงค์ที่แบ่งเค้าโครงออกเป็นแถวและคอลัมน์ โดยมักสร้างตารางของโมดูลในขนาดเท่า ๆ กัน นักออกแบบมักใช้ Modular grid เพื่อจัดเนื้อหาที่ต้องการความสม่ำเสมอ (Consistency) และดูเป็นเอกภาพ (Uniformity) เช่น แกลเลอรี่รูปภาพ รายการผลิตภัณฑ์ ตัวอย่างของการใช้ Modular grid คือเว็บไซต์ขายสินค้าออนไลน์ต่าง ๆ หรือกระทั่งหน้าจอ Netflix ที่แสดงโปสเตอร์ภาพยนตร์ ซีรีส์ให้เราเลือกดู ทำให้ง่ายต่อการผู้ใช้ในการเรียกดู และเปรียบเทียบรายการ

4. Hierarchical grid

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

5. Baseline Grid

— มีโครงสร้างเป็นแนวนอนช่วยให้การจัดวางแนวของตัวอักษรและองค์ประกอบอื่น ๆ มีความสม่ำเสมอ นักออกแบบนิยมใช้ Baseline Grid ในงานออกแบบที่เน้นตัวอักษร เพื่อรักษาความอ่านง่ายสบายสายตา ตัวอย่างการใช้งาน อาทิ เว็บไซต์ หรือสิ่งพิมพ์ดิจิทัล แอปพลิเคชันในส่วนที่มีเนื้อหาข้อความเยอะ

6. Square Grid 

— เป็นรูปแบบหนึ่งของ Modular Grid ทุกช่องต้องขนาดเท่ากันลักษณะเหมือนตารางหมากรุก นักออกแบบมักใช้ Square Grid เพื่อสร้างการจัดวางที่ให้สมดุลทางสายตา โดยเฉพาะอย่างยิ่งกับเนื้อหาที่เป็นรูปสี่เหลี่ยม เช่น รูปภาพ หรือ ไอคอน

Figma Tutorial: Layout Grids

Source : uxpin
———————————————-
📢 สำหรับใครที่สนใจในการออกแบบ UI ทาง True Digital Academy เปิดรับสมัคร DIY : User Interface with Figma รุ่น 3 เวิร์กชอป 2 วันเต็ม ๆ ออกแบบหน้าตา web/app ให้สวยงาม และถูกใจผู้ใช้ ด้วย Figma โปรแกรมยอดฮิตของดีไซเนอร์ทั่วโลก เรียนวันที่ 16 มี.ค. – 17 มี.ค. 2567

📌สามารถดูรายละเอียดและสำรองที่นั่ง ได้ที่ :: https://bit.ly/3UcbSSv