Skip to main content
0

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





🤔 Grid System คืออะไร

เป็นเหมือนระบบ ๆ หนึ่งที่ช่วยจัดการองค์ประกอบหัวข้อ, เนื้อหาของหน้าตาเว็บไซต์หรือแอปให้เป็นระเบียบและสัดส่วนมากยิ่งขึ้น โดยอาจจะแบ่งเป็น Column, Row, อื่น ๆ ตามการใช้งาน


👩🏻‍💻 Grid System ประกอบไปด้วยอะไรกันบ้างนะ?

จากคำว่า System ที่แปลว่าระบบ แน่นอนว่ามันต้องประกอบไปด้วยหลายส่วนแน่ ๆ
ดังนั้น Grid System จะมีส่วนประกอบหลัก ๆ ดังนี้


  1. Column คือการแบ่ง Grid เป็น Block หรือก็คือก้อนสีเหลืองเข้มที่เป็นช่อง ๆ เรียงกันไปนั่นเอง

  2. Gutter คือระยะห่างระหว่าง Column สังเกตได้จากช่องสีฟ้าที่เรียงกันไป

  3. Margin คือระยะห่างระหว่างขอบเว็บถึงเนื้อหา ก็คือส่วนซ้ายสุดและขวาสุดที่เป็นส่วนของสีน้ำเงิน

ภาพจาก https://www.nngroup.com/articles/using-grids-in-interface-designs/



😵 แล้ว Grid System มีแบบเดียวไหมนะ?

Grid System ไม่ได้มีแค่เป็นแบบตารางแนวยาวแบบเดียวนะ ขึ้นอยู่กับการใช้งานเลยว่างานเหมาะสมกับแบบไหน
วันนี้จะขอยกตัวอย่าง 3 แบบที่เป็นที่นิยมในการใช้กันมาให้ดู

ภาพจาก https://www.nngroup.com/articles/using-grids-in-interface-designs/


  1. Column คือการแบ่ง Grid เป็น Column (แนวตั้ง)
    เหมาะกับแบบไหน? เหมาะกับการจัดวางเนื้อหาที่ต้องการความยืดหยุ่น เนื้อหาอาจจะไม่ได้ต่อเนื่องกัน

  2. Modular คือการแบ่ง Grid ออกเป็น Column (แนวตั้ง) และ Row (แนวนอน)
    เหมาะกับแบบไหน? เหมาะกับการจัดวางที่ต้องการวางเป็น Pattern เดียวกัน อย่างเช่น Youtube ที่จัดวางหน้าของคลิปต่าง ๆ ไว้เป็นแนวนอนไปในทางเดียวกัน

  3. Hierarchical คือการจัดวางเนื้อหาตามลำดับความสำคัญ
    เหมาะกับแบบไหน? หลายคนคงจะเคยอ่านข่าวกัน แน่นอนว่าหัวข้อหรือรูปภาพหลักของข่าวจะต้องมีความสำคัญมากที่สุด ดังนั้นการจัดวางหัวข้อหรือรูปภาพหลักของข่าวอาจจะต้องมีขนาดช่องที่ใหญ่มากกว่าส่วนอื่น ๆ และพวกเนื้อหาข่าวจะมีขนาดช่องที่เล็กลงมาตามลำดับ



⭐️ ตัวอย่างการใช้งาน Grid ผ่าน Figma

ขอเกริ่นก่อนว่า Figma เป็น Tool ชนิดหนึ่งที่ได้รับความนิยมในการออกแบบ User Interface หรือ UI
ซึ่ง Figma เองก็สามารถสร้าง Grid ได้! โดยทางด้านขวาจะเห็นคำว่า Layout Grid ซึ่งเราสามารถปรับแต่งได้ตามการใช้งานเลยไม่ว่าจะเป็น จำนวน Column, สี, จำนวน Gutter


อย่างในภาพก็จะเป็นนำเอา Grid System แบบ Column มาใช้ในงาน



🧐 แล้วทำไมเราถึงต้องสร้าง Grid System ขึ้นมากันนะ

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



💡 อ้างอิง

Chalisa Jarernsawat

Author Chalisa Jarernsawat

Computer Engineering student, UX/UI Designer, and 3D Modeler

More posts by Chalisa Jarernsawat
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า