ทำความเข้าใจและออกแบบด้วยระบบกริด

เผยแพร่แล้ว: 2019-02-20

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

สารบัญ ซ่อน
1. การจัดระเบียบเนื้อหา
2. ระบบกริดช่วยปรับปรุงกระบวนการออกแบบ
3. ระบบกริดจัดระเบียบวิชาการพิมพ์
4. ระบบกริดทำให้การทำงานร่วมกันเป็นเรื่องง่าย
4. ระบบกริดช่วยสร้างองค์ประกอบที่สมดุล
5. กริดและความยืดหยุ่น
บทสรุป:

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

1. การจัดระเบียบเนื้อหา

เข็มหมุด

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

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

2. ระบบกริดช่วยปรับปรุงกระบวนการออกแบบ

เข็มหมุด

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

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

3. ระบบกริดจัดระเบียบวิชาการพิมพ์

เข็มหมุด

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

4. ระบบกริดทำให้การทำงานร่วมกันเป็นเรื่องง่าย

เข็มหมุด

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

4. ระบบกริดช่วยสร้างองค์ประกอบที่สมดุล

เข็มหมุด

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

5. กริดและความยืดหยุ่น

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

เข็มหมุด

เข็มหมุด

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

เข็มหมุด

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

บทสรุป:

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