ทฤษฎี UI

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

0

3. รูปร่างและพื้นหลัง

04-figure-ground

รูปนี้คุณเห็นอะไรเอ่ย?? คนหันหน้าเข้าหากันกับกระถางแจกันใช่ไหมครับ

18-04_dog

ส่วนรูปนี้ ผมเคยเกริ่นนำไปในตอนแรกแล้วใช่ไหมครับว่าเป็นภาพอะไร ใครยังไม่รู้ ต้องไปย้อยดูเฉลยข้อแรกนะ

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

ส่วนใหญ่เราจะเห็นนักออกแบบโลโก้ใช้เทคนิคนี้กันมาก มาดูตัวอย่างกันครับ

NBC

โลโก้ของสถานีโทรทัศน์ชื่อดังของอเมริกา NBC ที่ใช้พื้นที่สีขาวทำให้เราเห็นภาพเป็นนกยูงได้ โอ้โหเลยล่ะซิ

fedex-logo

ส่วนโลโก้ FedEx ให้ดูดีๆ ว่ามีสื่อสัญลักษณ์อะไรซ่อนอยู่ครับ คนส่วนใหญ่มักไม่ค่อยเห็น แต่ลองมองไปที่ตัว E กับ x ดูซิครับ พื้นที่สีขาว (Negative space) ระหว่าง 2 ตัวอักษรนี้ จะเป็นรูปลูกศรชี้ไปทางขวา เห็นเนอะ แต่ในกรณีนี้ พื้นที่สีขาวเป็นสิ่งที่ไม่ได้ต้องการจะสื่อออกมาให้เห็นเด่นชัด เป็นลูกเล่นที่คนออกแบบโลโก้นี้เค้าซ่อนไว้นั่นเอง น่านับถือจริงๆ

54d156a6688249264c817d4a5a6df788

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

carrefour-logo

ก่อนจบ อันนี้เป็นโลโก้ปราบเซียน มองเห็นอะไรไหมเอ่ย… ยอมรับเลย ถ้าผมไม่ดูเฉลย ผมก็ไม่รู้เหมือนกัน แต่บางคนอาจจินตนาการดีกว่าผมก็จะเห็นตัว C เบอร์เร่อเลย อันนี้ขอคารวะครับ คนฝรั่งเศสนี่ช่างคิดจริงๆ Tres bien!

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

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

Previous article

Gestalt Theory Rule#4-ความสมมาตร

Next article

You may also like

Comments

Leave a reply

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