Rule of third เขาใช้กันมาตั้งแต่สมัยปู่ผมยังไม่เกิด สมัยที่เว็บไซต์เขียนกันด้วยสีน้ำและผืนผ้าใบ (มีด้วยหรอวะ) จริงๆพวกศิลปินที่เขาวาดรูปใช้กันมาก่อน ใช้ในการ แบ่งอะไรต่อมิอะไร ให้ดูน่าสนใจยิ่งขึ้น ศิลปินเก่งๆในอดีตได้ทำการค้นคว้าศึกษากันมานานจนสรุปได้ว่า
สายตาของ มนุษย์เรามักสนใจอะไรที่เป็น 1/3 หรือ 2/3แบบนี้
หรืออีกนัยนึงก็คือแบ่งความกว้างทั้งหมดเป็น 3 ส่วน ด้านหนึ่งเอาไป 2 ด้านหนึ่งเอาไป 1 กฏเกณฑ์นี้ยังคงใช้ได้ดีในการดึงดูดสายตาผู้ชมตลอดมาจนถึงทุกวันนี้
ปัจจุบันเว็บดีไซนเนอร์ได้ขอยืม Rule of third มาใช้ในการสร้างเลเอาท์และวาง element ต่างๆ ใน เว็บไซต์
โดยอาจจะแบ่งเลเอาท์ออกเป็น 3 ส่วน โดยให้ 2 ส่วนเป็น content 1 ส่วนเป็น sidebar อย่าง theme blog ผมตอนนี้หรืออาจะแบ่ง 2 ส่วนเป็นเนื้อหา อีก 1 ส่วนเป็น white space หรือ element อื่นๆก็ตามแต่ชอบแต่ขอให้อยู่ใน ขอบเขตที่ว่า ด้านหนึ่ง 2/3 ด้านหนึ่ง 1/3
พิจารณาเลเอาท์นี้
มาดูกันว่าเลย์เอาท์นี้ใช้ rule of third อย่างไร
ดูสี่เหลี่ยมสีน้ำตาลอ่อนที่ผมวางทับไว้ เพื่อแสดงให้เห็นขอบเขตการแบ่ง และ ตัวเลข 1/3 และ 2/3 จะเห็นว่าเลเอาท์นี้แบ่งด้วย rule of third
แต่จริงๆมันยุ่งยากกว่ารูปข้างบนนิดหน่อย แบบนี้ :
เวลาเราเปิดเว็บบราวเซอร์เข้ามาก่อนที่เราจะ scroll เราจะไม่เห็นความสูงของเว็บทั้งหมด ในเลย์เอาท์นี้ได้ประมาณไว้ว่าตรงสีเขียวตามรูปด้านล่างนี้น่าจะเป็นสิ่งที่ ผู้ใช้เปิดเข้ามาแล้วเจอโดยที่ผู้ใช้ไม่ต้อง scroll ลงมา โอ้ scroll เขียนผิดด้วยแฮะ
ออกมาประมาณนี้
ปล. เนื้อหาในเลเอาท์ที่เห็นเป็นเพียงแค่ข้อมูลตัวอย่างในการเขียนบทความไม่สามารถใช้อ้างอิงได้
credit: http://www.daclubb.com
ลองเอาไปประยุกต์ใช้กับโปรเจคดูนะ เอาไว้สร้างเว็บเจ๋งๆ
มันทำให้เว็บที่เราจะทำดูน่าสนใจ
ตอบลบและสวยขึ้น ส่วนใหญ่เว็บในตอนนี้
จะออกแนวนี้ น่าเอาไปใช้
ณัฐพล(ท๊อป)
เป็นการจัดการกับหน้าเว็บเพจแต่ละหน้าของเราได้ดีมั่กๆ
ตอบลบแต่ทำไมเวลาเราเขียนเว็บเพจแต่ละหน้าทามมัยมันเหนื่อยจัง
เราก็เลยมาขอแอบไปไว้เพื่อใช้กับของเราบ้างดีกว่า
(จะทันม่ะหว่า...!)
วิภารัตน์ (แหม่ม)