ทฤษฎี UI

Gestalt Theory Rule#2-ความเหมือน

0

2. ความเหมือนหรือคล้ายคลึงกัน

ทฤษฎีนี้เข้าใจได้ไม่ยาก วัตถุที่มีคุณลักษณะที่เหมือนกัน เราจะเข้าใจว่าวัตถุนั้นมีความสัมพันธ์กัน ไม่ว่าจะเป็นรูปทรง สี ขนาด พื้นผิว น้ำหนัก กลิ่น ฯลฯ

similarity-01

จากรูปเราจะเห็นว่ากลุ่มวัตถุแม้จะมีรูปทรงเดียวกันหมด แต่ด้วยสีแล้ว ทำให้เราเห็นว่ามีการแบ่งความสัมพันธ์ออกเป็น 2 กลุ่ม

similarity-02

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

similarity-03

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

Bake a web logo

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

Flight370Cover_thumb_w_580

และตัวอย่างสุดท้าย หน้าปกนิตยสาร Time ฉบับเดือนมีนาคม 2014 ซึ่งผมชอบมาก แสดงการใช้เส้น 2 น้ำหนัก (2 กลุ่มวัตถุ) เพื่อสร้างภาพเครื่องบินออกมา ง่ายๆ แต่สุดยอดใช่ไหมครับ นี่แหละครับพลังของทฤษฎีข้อนี้

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

Gestalt Theory Rule#1-ความใกล้ชิด

Previous article

Gestalt Theory Rule#3-รูปร่างและพื้นหลัง

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *