วันจันทร์ที่ 17 สิงหาคม พ.ศ. 2552

Rule of third (รู ออฟ เทิด)

Rule of third เขาใช้กันมาตั้งแต่สมัยปู่ผมยังไม่เกิด สมัยที่เว็บไซต์เขียนกันด้วยสีน้ำและผืนผ้าใบ (มีด้วยหรอวะ) จริงๆพวกศิลปินที่เขาวาดรูปใช้กันมาก่อน ใช้ในการ แบ่งอะไรต่อมิอะไร ให้ดูน่าสนใจยิ่งขึ้น ศิลปินเก่งๆในอดีตได้ทำการค้นคว้าศึกษากันมานานจนสรุปได้ว่า

สายตาของ มนุษย์เรามักสนใจอะไรที่เป็น 1/3 หรือ 2/3แบบนี้

rule of third

หรืออีกนัยนึงก็คือแบ่งความกว้างทั้งหมดเป็น 3 ส่วน ด้านหนึ่งเอาไป 2 ด้านหนึ่งเอาไป 1 กฏเกณฑ์นี้ยังคงใช้ได้ดีในการดึงดูดสายตาผู้ชมตลอดมาจนถึงทุกวันนี้

ปัจจุบันเว็บดีไซนเนอร์ได้ขอยืม Rule of third มาใช้ในการสร้างเลเอาท์และวาง element ต่างๆ ใน เว็บไซต์
โดยอาจจะแบ่งเลเอาท์ออกเป็น 3 ส่วน โดยให้ 2 ส่วนเป็น content 1 ส่วนเป็น sidebar อย่าง theme blog ผมตอนนี้หรืออาจะแบ่ง 2 ส่วนเป็นเนื้อหา อีก 1 ส่วนเป็น white space หรือ element อื่นๆก็ตามแต่ชอบแต่ขอให้อยู่ใน ขอบเขตที่ว่า ด้านหนึ่ง 2/3 ด้านหนึ่ง 1/3

พิจารณาเลเอาท์นี้

layout-02-draft-small


มาดูกันว่าเลย์เอาท์นี้ใช้ rule of third อย่างไร

layout-02-draf-2t

ดูสี่เหลี่ยมสีน้ำตาลอ่อนที่ผมวางทับไว้ เพื่อแสดงให้เห็นขอบเขตการแบ่ง และ ตัวเลข 1/3 และ 2/3 จะเห็นว่าเลเอาท์นี้แบ่งด้วย rule of third

แต่จริงๆมันยุ่งยากกว่ารูปข้างบนนิดหน่อย แบบนี้ :
เวลาเราเปิดเว็บบราวเซอร์เข้ามาก่อนที่เราจะ scroll เราจะไม่เห็นความสูงของเว็บทั้งหมด ในเลย์เอาท์นี้ได้ประมาณไว้ว่าตรงสีเขียวตามรูปด้านล่างนี้น่าจะเป็นสิ่งที่ ผู้ใช้เปิดเข้ามาแล้วเจอโดยที่ผู้ใช้ไม่ต้อง scroll ลงมา โอ้ scroll เขียนผิดด้วยแฮะ

layout-02-draf-3t

ออกมาประมาณนี้

layout-02-draf-4t

layout-02-ย่อ2

ปล. เนื้อหาในเลเอาท์ที่เห็นเป็นเพียงแค่ข้อมูลตัวอย่างในการเขียนบทความไม่สามารถใช้อ้างอิงได้


credit: http://www.daclubb.com

ลองเอาไปประยุกต์ใช้กับโปรเจคดูนะ เอาไว้สร้างเว็บเจ๋งๆ

2 ความคิดเห็น:

  1. มันทำให้เว็บที่เราจะทำดูน่าสนใจ

    และสวยขึ้น ส่วนใหญ่เว็บในตอนนี้

    จะออกแนวนี้ น่าเอาไปใช้


    ณัฐพล(ท๊อป)

    ตอบลบ
  2. เป็นการจัดการกับหน้าเว็บเพจแต่ละหน้าของเราได้ดีมั่กๆ

    แต่ทำไมเวลาเราเขียนเว็บเพจแต่ละหน้าทามมัยมันเหนื่อยจัง

    เราก็เลยมาขอแอบไปไว้เพื่อใช้กับของเราบ้างดีกว่า

    (จะทันม่ะหว่า...!)

    วิภารัตน์ (แหม่ม)

    ตอบลบ