10 รูปแบบ แนวทางวาง Layout ห้ามพลาด! สาย UI ต้องอ่าน!!
Layout UI นั้นมีหลายรูปแบบแตกต่างกันออกไป ดังนั้นจึงเป็นหน้าที่สำคัญของนักออกแบบที่จะทำให้มีประสิทธิภาพมากที่สุด
สำหรับการออกแบบ Layout เว็บจึงส่งผลให้เกิดการผสมผสานระหว่างความเป็นมิตรต่อผู้ใช้และความสามารถในการปรับตัวเข้ากับเทรนด์และเทคโนโลยีที่เปลี่ยนแปลง
รูปแบบ Layout UI ที่มีประโยชน์ต้องสามารถปรับเปลี่ยนได้ตามแนวโน้มที่เปลี่ยนแปลงไป ตัวอย่างเช่น เลย์เอาต์สไตล์การ์ด และกริดสามารถนำไปใช้ได้หลายวิธี สามารถปรับตัวให้ดูทันสมัยและตามเทรนด์ต่อไปได้ แม้ว่า Layout เหล่านี้จะอยู่มาหลายปีแล้วก็ตามแต่ก็ยังสามารถปรับใช้ให้ดูทันสมัยได้ตลอด
Layout คืออะไร?
Layout คือ โครงสร้างองค์ประกอบภาพของอินเทอร์เฟซ การจัดลำดับความสำคัญของเนื้อหาช่วยให้ผู้ใช้สามารถมองเห็นเนื้อหาได้มากขึ้น
การออกแบบโครงร่างที่ดีนั้นเกี่ยวข้องกับผู้ใช้งาน และสะท้อนให้เห็นถึงประสบการณ์การใช้งานที่ดี ดังนั้นเราจึงสามารถพูดได้ว่าการวาง Layout ที่ถูกต้องช่วยให้ผู้ใช้สามารถค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว สิ่งนี้สะท้อนให้เห็นในการแปลงมากขึ้นและช่วยให้มีส่วนร่วมมากขึ้นบนเว็บไซต์
เราสามารถพัฒนาสิ่งนี้ด้วยการ Layout ที่เหมาะสม และเพิ่มไดนามิกลงไปให้เว็บดูหน้าสนใจมากขึ้น ไม่ใช่แค่การสวยงามแต่มันเป็นมิตรกับผู้ใช้งานอีกด้วย ในการสร้างเค้าโครงเราจำเป็นต้องรู้เกี่ยวกับหลักการของการวางช่องว่างต่างๆ เพื่อที่จะสามารถสร้าง Layout แบบมืออาชีพ
รูปแบบเค้าโครงเว็บสไตล์การ์ด (Card Style Layout)
รูปแบบการ์ดได้รับความนิยมจากเว็บไซต์อย่าง Pinterest, Facebook และ Twitter สิ่งเหล่านี้ได้กลายเป็นมาตรฐานสำหรับเว็บไซต์ข่าวและบล็อก เนื่องจากมันสามารถวางเนื้อหาจำนวนมากได้ในหน้าเดียว ในขณะที่ยังคงรักษาความแตกต่างของเนื้อหาแต่ละส่วน
Layout เหล่านี้ใช้บล็อกเนื้อหาที่คล้ายกับการ์ดที่มีรูปร่างและขนาดต่างๆ มีสองรูปแบบเค้าโครงหลัก เลย์เอาต์หนึ่งจัดเรียงการ์ดที่มีขนาดเท่ากันบนกริด ในขณะที่อีกอันใช้เลย์เอาต์ด้วยการ์ดขนาดต่างๆ ที่จัดเรียงเป็นคอลัมน์อย่างเป็นระเบียบ แต่ไม่มีแถวที่ชัดเจน (เช่น เลย์เอาต์ของ Pinterest)
เลย์เอาต์แบบการ์ดทำงานได้ดีเพราะช่วยให้สามารถจัดเรียงเนื้อหาที่แตกต่างกันได้อย่างเป็นระเบียบในขณะที่แยกชิ้นส่วนทั้งหมดออกจากกัน การ์ดยังเป็นที่คุ้นเคยของผู้คนเพราะผู้ใช้งานต่างคุ้นเคยกันดี
เค้าโครงแยกหน้าจอ (Split-Screen Layout)
เค้าโครงแบบแยกหน้าจอเริ่มได้รับความนิยมในปี 2013 และเริ่มได้รับความนิยมอย่างมากในปี 2016 เค้าโครงแบบแยกหน้าจอเป็นตัวเลือกการออกแบบยอดนิยมเมื่อองค์ประกอบสองอย่างต้องมีน้ำหนักเท่ากันในหน้าหนึ่งๆ และมักจะใช้ในการออกแบบที่ต้องแสดงข้อความและรูปภาพให้เด่นชัด
การออกแบบแบ่งหน้าจอส่วนใหญ่จะแบ่งเท่าๆ กัน แม้ว่าบางแบบจะแบ่งตามอัตราส่วนที่ต่างกัน สัดส่วนแบ่งแบบ 33:66 หรือ 40:60 ดูเหมือนจะเป็นอัตราส่วนที่ได้รับความนิยมมากที่สุด เมื่อแบ่งหน้าจอออกเป็นขนาดที่เล็กกว่า 1 ใน3 จะเหมือนกับแถบด้านข้างมากกว่าการออกแบบหน้าจอแยก
การออกแบบแยกหน้าจอเหมาะอย่างยิ่งสำหรับหน้าผลิตภัณฑ์บนเว็บไซต์อีคอมเมิร์ซ รูปภาพสินค้าต้องโดดเด่นในหน้าเหล่านี้ สามารถข้อมูลสำคัญ เช่น ราคา ข้อมูลจำเพาะ ปุ่มเพิ่มในรถเข็น และตัวเลือกสินค้าก็เช่นกัน
พิมพ์ใหญ่ (Big Typography Layout)
พิมพ์ใหญ่เป็นที่นิยมโดยเฉพาะในหัวเรื่องและชื่อเรื่อง แต่ก็มีให้เห็นในเนื้อหาในบางเว็บไซต์ด้วย เมื่อเลือกแบบอักษรที่เหมาะสม ข้อความขนาดใหญ่จะอ่านได้ง่ายขึ้นและปรับปรุงประสบการณ์ของผู้ใช้ นอกจากนี้ยังทำให้เห็นภาพที่ทรงพลัง เป็นที่นิยมโดยเฉพาะอย่างยิ่งในการออกแบบมินิมอลซึ่งองค์ประกอบภาพอื่น ๆ ขาดหายไปเป็นส่วนใหญ่
Personalization
อัลกอริธึมที่มีการปรับเปลี่ยนไปตามผู้ใช้งานมีมานานหลายปี โดยปรับแต่งประสบการณ์ดิจิทัลให้เหมาะกับความชอบของแต่ละคน AI ทำให้อัลกอริทึมเหล่านี้มีประโยชน์มากยิ่งขึ้น ด้วยคุณลักษณะต่างๆ เช่น อัลกอริทึมมีคำแนะนำที่สามารถคาดเดาได้อย่างแม่นยำว่าผู้คนต้องการดู อ่าน เรียนรู้ หรือซื้ออะไรต่อไป
เพื่อให้ผู้ใช้งานได้ดูเนื้อหาที่ตรงกับความต้องการของตัวเอง เช่น Netflix มีอัลกอริธึมการคาดเดาที่เหนือกว่าซึ่งนำเสนอภาพยนตร์และรายการทีวีที่พวกเขามีแนวโน้มจะดูมากที่สุดตามตัวเลือกก่อนหน้าของสมาชิก
กริด (Grid)
เส้นกริดเป็นส่วนหนึ่งของการออกแบบ UI มานานแล้ว โดยเริ่มจากเค้าโครงแบบตาราง เส้นตารางให้ความสมดุลของภาพและลำดับในการออกแบบ ซึ่งทำให้ผู้คนบริโภคเนื้อหาได้ง่ายขึ้น ในเวลาเดียวกัน กริดสามารถให้ความยืดหยุ่นอย่างมากในการจัดวางเว็บ ระบบกริดส่วนใหญ่ใช้ทั้ง 12 หรือ 16 คอลัมน์โดยช่องว่างอยู่ระหว่างนั้น
นอกจากกริดเค้าโครงตามคอลัมน์แล้ว กริดพื้นฐานยังใช้กันทั่วไปในการออกแบบเว็บเพื่อเว้นวรรคองค์ประกอบในแนวนอน เห็นได้ชัดที่สุดในการพิมพ์เมื่อตรวจสอบระยะห่างระหว่างบรรทัดของเนื้อหาและพาดหัวข่าว เป็นต้น ระยะห่างระหว่างเส้นกริดในแนวนอนนั้นสัมพันธ์อย่างใกล้ชิดกับระยะห่างของกริดในแนวตั้งที่ใช้ในการออกแบบเว็บ
เค้าโครงเว็บสไตล์นิตยสาร (Magazine Style Web Layout)
ในยุคแรกๆ จะเห็นได้ในเว็บไซต์ข่าวและนิตยสารออนไลน์เป็นส่วนใหญ่ เมื่อเวลาผ่านไป ความนิยมของพวกเขาก็เพิ่มขึ้นในส่วนอื่นๆ และตอนนี้จะพบเห็นได้บนไซต์ประเภทต่างๆ รวมถึงไซต์อีคอมเมิร์ซและบล็อก
เลย์เอาต์แบบนิตยสารประกอบด้วยบทความเด่นๆ จะมีหลายคอลัมน์สำหรับเนื้อหา บางครั้งก็แบ่งออกเป็นส่วนต่างๆ เค้าโครงเว็บเหล่านี้ทำงานได้ดีสำหรับไซต์ที่มีเนื้อหาจำนวนมาก โดยเฉพาะอย่างยิ่งไซต์ที่มีเนื้อหาสดใหม่เพิ่มเข้ามาทุกวัน
เลย์เอาต์หน้าเดียว (Single Page Layout)
เลย์เอาต์หน้าเดียวทำให้เนื้อหาหลักทั้งหมดสำหรับไซต์อยู่ในหน้าเว็บเดียว โดยจะใช้การนำทางไปยังส่วนอื่นๆ ด้วยการเลื่อนไปเรื่อยๆ และมักจะมีทางลัดเพื่อข้ามไปยังส่วนใดส่วนหนึ่ง บางครั้งมีเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์
รูปแบบเว็บไซต์แบบหน้าเดียวเป็นโซลูชันที่ยอดเยี่ยมสำหรับไซต์ที่มีเนื้อหากระจัดกระจาย นอกจากนี้ยังเป็นตัวเลือกที่สมบูรณ์แบบสำหรับเนื้อหาเรื่องเล่า เช่น หนังสือเด็กแบบโต้ตอบ
รูปแบบ F และ Z (F- Z- Pattern)
รูปแบบ F และ Z หมายถึงการที่สายตาของบุคคลเคลื่อนที่ไปบนหน้า ซึ่งหมายถึงวิธีที่ผู้คนสแกนเนื้อหา รูปแบบ F มีเนื้อหาที่โดดเด่นที่ด้านบนของหน้า โดยมีเนื้อหาเพิ่มเติมที่จัดชิดด้านล่างทางด้านซ้ายของหน้า (ในรูปประมาณตัว “F”)
รูปแบบ Z มีเนื้อหาที่โดดเด่นที่ด้านบน โดยมีเนื้อหาเพิ่มเติมที่มีคุณค่าอยู่ด้านล่าง ดวงตาถูกวาดในแนวทแยงมุมจากมุมขวาบนไปยังมุมซ้ายล่างของหน้า (เป็นรูปตัว “Z”)
รูปแบบ F เหมาะกับหน้าที่มีเนื้อหามากกว่ารูปแบบ Z ซึ่งมีลำดับชั้นภาพที่ชัดเจน รูปแบบ Z จะมีประโยชน์มากกว่าเมื่อมีเนื้อหาที่เกี่ยวข้องกันสองส่วนเท่าๆ กัน (หรือใกล้เคียงกัน) ที่ผู้เข้าชมควรดู
ความไม่สมดุล (Asymmetry)
ในแง่ที่ง่ายที่สุด ความไม่สมดุลคือการไม่มีความสมมาตรในการออกแบบ ความไม่สมดุลจะสร้างผลกระทบต่อภาพที่มีไดนามิกและเป็นธรรมชาติมากขึ้น ในกรณีส่วนใหญ่ความไม่สมมาตรจะถูกสร้างขึ้นโดยใช้รูปภาพและข้อความที่ไม่ได้สมดุลซึ่งกัน
เนื่องจากความไม่สมมาตรสร้างความประทับใจทางภาพที่มีชีวิตชีวาและมีพลัง จึงมีประโยชน์สำหรับแบรนด์ที่ต้องการสื่อสารภาพประเภทนั้น ความไม่สมมาตรอาจเป็นสิ่งที่คาดไม่ถึง ทำให้การออกแบบน่าจดจำยิ่งขึ้น และใช้งานได้จริง
แท็บการนำทาง (Navigation Tabs)
เดิมทีแท็บการนำทางเป็นแกนหลักของการออกแบบ Skeuomorphic คล้ายกับแท็บในโฟลเดอร์ไฟล์หรือตัวแบ่งแฟ้ม จุดเด่นของแท็บการนำทางคือแต่ละรายการในเมนูมีภาพแยกจากรายการเมนูอื่นๆ บางครั้งก็ละเอียดอ่อน และบางครั้งก็ปรากฏขึ้นเฉพาะเมื่อเลือกรายการเมนูหรือวางเมาส์เหนือเท่านั้น สามารถใช้ร่วมกับดร็อปดาวน์สำหรับเมนูย่อยเพื่อเพิ่มฟังก์ชันการทำงานได้
จะเห็นได้ว่าการวางโครงสร้างแบบวาง Layout นั้น มีค่อนข้างหลากหลาย นอกจากจะสามารถความสวยงาม และง่ายต่อผู้ใช้งานแล้ว ในอีกแง่นึงยังสามารถช่วยให้นักออกแบบ UI สามารถทำงานได้ง่ายขึ้นอีกด้วย เพราะการที่เรามีโครงสร้างที่ดี จะทำให้เราสามารถจัดสัดส่วนต่างๆ ได้ง่ายมากขึ้น
สำหรับคนที่สนใจในด้านการออกแบบเว็บไซต์หรือต้องการให้เว็บของคุณดูดีมีระดับขึ้นมากกว่าเดิม สามารถใช้ยริการของทาง Astra Studio ได้ ทางเรามีทีมงานที่มีประสบการณ์สูงพร้อมให้คำแนะนำและคำปรึกษา เพื่อให้คุณแน่ใจว่างานของคุณจะออกมาได้ตามที่ตั้งใจไว้
อย่าลืมกดติดตามช่องทางต่างๆ ของเราเพื่อรับข้อมูลข่าวสารเพิ่มเติมกันนะ
บริการของเรา >> บริการ Astra studio
Medium: Medium Astra Studio
Website: Astra Studio