ทฤษฎี UI Gestalt Theory Rule#4-ความสมมาตร By uiblogaziner June 29, 20143040 views ShareTweet 0 ให้เราลองดูรูปด้านบนก่อนนะครับ สักประมาณ 1-3 วินาที คิดว่าพวกเราส่วนใหญ่จะเห็นความสมดุล ความสมมาตรในรูปใช่ไหมครับ แทนที่จะเห็นกลุ่มวัตถุ 4 กลุ่ม เพราะจากข้อที่แล้วเรื่องความใกล้ชิดที่บอกว่า วัตถุที่อยู่ใกล้กัน เราจะเข้าใจว่าวัตถุพวกนั้นเป็นกลุ่มเดียวกัน (วงเล็บอันแรกคือกลุ่มที่ 1 วงเล็บที่ 2 และ 3 คือกลุ่มที่ 2 วงเล็บที่ 4 และ 5 คือกลุ่ม 3 และอันสุดท้ายคือกลุ่มที่ 4) แต่ในกรณีนี้ เรากลับเห็นวัตถุ 3 กลุ่ม เพราะสมองเรามีแนวโน้มที่จะเห็นและเข้าใจภาพที่สมมาตรก่อนเรื่องความใกล้ของวัตถุ ว้าวๆๆ ความสมมาตรไม่เพียงแต่ใช้ได้กับเรื่องรูปร่างเท่านั้นนะ ที่ยังรวมถึงสี องค์ประกอบในภาพด้วย มาดูตัวอย่างการใช้งานกันครับ รูปแบนเนอร์ด้านบนเป็นรูปที่ผมออกแบบให้กับเว็บบริษัทญี่ปุ่น ในตอนแรกผมก็แค่ใส่เพียงโลโก้ของบริษัทเท่านั้น แต่รู้สึกว่ามันโล่งๆ ขาดอะไรไป ไม่น่าสนใจ จากนั้นก็ทดลองใส่รูปภาพที่สอดคล้องกับธุรกิจและภาพลักษณ์ของบริษัท ผลลัพธ์คือ องค์ประกอบโดยรวมดูมีความสมดุลขึ้นมากครับ อีกกรณี มาดูตัวอย่างแบบที่ผมออกแบบสำหรับส่วนแสดงสินค้า เราจะเห็นเลยว่าองค์ประกอบของภาพเทน้ำหนักมาอยู่ที่ด้านซ้ายหมดเลย หากเราใช้ความเข้าใจเรื่องกฎข้อนี้ แล้วลองย้ายปุ่มมาทางด้านขวาดู จะเห็นชัดเจนว่า โดยรวมดูมีความสมมาตรขึ้น ขณะเดียวกัน ปุ่ม Call-to-Action ก็ดูเด่นขึ้นมาทันที ตัวอย่างสุดท้าย แบบประยุกต์ใช้สิ่งที่เราได้เรียนรู้มาจากรูปแรกเลย ในกรณีที่พื้นที่ค่อนข้างจำกัดในการแสดงสินค้า เราอาจจะจัดรูปให้ชิดกันได้ แต่ต้องรักษาความสมดุลของสินค้าแต่ละภาพให้ดี จะเห็นว่าราคา1.3 M แม้จะอยู่ใกล้ชื่อ Condominium 2 มากกว่า แต่สมองเราก็รับรู้ว่า ข้อมูลนี้เป็นของ Condominium 1 เพราะด้วยแนวการวางข้อความและรูปให้เกิดความรู้สึกเป็นกลุ่มก้อนเดียวกัน และความสมมาตรของกลุ่มวัตถุนั่นเอง
