การใช้อัตราส่วนทองคำในการออกแบบที่ทันสมัย

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

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

โกลเด้นอะไร?

กล่าวง่ายๆคืออัตราส่วนทองคำ (หรือเรียกอีกอย่างว่า สัดส่วนของพระเจ้า หรือ ค่าเฉลี่ยสีทอง) เป็นค่าคงที่ทางคณิตศาสตร์ที่ปรากฏซ้ำ ๆ ในธรรมชาติและงานศิลปะ.

แสดงว่าเป็นสมการเมื่อใด มีขนาดใหญ่กว่า ข, (a + b) หารด้วย เท่ากับ หารด้วย ข (ดูที่ภาพด้านล่าง) ซึ่งเท่ากับ 1.618033987. ตัวเลขนั้นมักจะแสดงโดยตัวอักษรกรีก "phi" คือ อัตราส่วนทองคำ.

(ที่มาของภาพ: mathsisfun.com)

ทฤษฎีเดียวกันนี้สามารถใช้สร้างสี่เหลี่ยมที่เรียกว่า สี่เหลี่ยมผืนผ้าทองคำ. สามารถวางรูปภาพที่ตามอัตราส่วนทองคำได้อย่างเรียบร้อยภายในสี่เหลี่ยมที่เป็นไปตามอัตราส่วน.

(ที่มาของภาพ: creativeautomaton.com)

หากต้องการสร้างสี่เหลี่ยมทองคำให้เลือกตัวเลขที่จะเป็นความยาวของด้านสั้นของสี่เหลี่ยมผืนผ้า เพื่อประโยชน์ในการโต้แย้งสมมติว่า 500 พิกเซล คูณด้วย 1.618 ผลลัพธ์คือ 809 พิกเซลคือความยาวของด้านยาวของสี่เหลี่ยมของคุณ ดังนั้นสี่เหลี่ยมผืนผ้าที่มีขนาด 500 พิกเซลคูณด้วย 809 พิกเซลจึงเป็นสี่เหลี่ยมสีทอง มันเป็นไปตามอัตราส่วนทองคำ.

ความงามของธรรมชาติ

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

ใบหน้าของมนุษย์นั้นมีอัตราส่วนต่อเช่นกันและเราพบว่าคนที่ใบหน้าของเขานั้นมีอัตราส่วนที่น่าดึงดูดยิ่งกว่า Seashells ชิ้นเอกยุคฟื้นฟูศิลปวิทยาคลาสสิกสถาปัตยกรรมจากสมัยโบราณและแม้กระทั่งส่วนต่างๆของร่างกายมนุษย์นั้นได้รับการจัดสัดส่วนตามอัตราส่วนลงมาถึงนิ้วมือ.

(ที่มาของรูปภาพ: in2visualdesign)

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

องค์ประกอบของพระเจ้า

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

คิดว่ามันเป็นเครื่องมือแทนกรง ที่พื้นฐานที่สุดคุณสามารถใช้อัตราส่วนทองคำเพื่อกำหนดขนาดและตำแหน่งของพื้นที่เนื้อหาและแถบด้านข้าง เค้าโครงความกว้างคงที่เป็นแอปพลิเคชั่นที่ง่ายที่สุด ตัดสินใจเกี่ยวกับขนาดโดยรวมของเลย์เอาต์ของคุณด้วยวิธีการสร้างสี่เหลี่ยมสีทอง.

สำหรับกริด / บล็อก

สแควร์ที่สร้างโดยเส้นจะเป็นบล็อกเนื้อหาของคุณ สี่เหลี่ยมเล็ก ๆ จะเป็นแถบด้านข้างหรือแถบนำทาง เมื่อคุณหาขนาดสี่เหลี่ยมของคุณได้แล้วการหาว่าแถบนำทางของคุณต้องกว้างขนาดไหนเป็นคณิตศาสตร์ง่าย.

• สำหรับตัวอย่างนี้เราจะบอกว่าสี่เหลี่ยมผืนผ้าของคุณคืออะไร 525 พิกเซลโดย 850 พิกเซล.
• 525 คือ และ 850 คือ (a + b), และ ข จะเป็นความกว้างของแถบด้านข้างของคุณ.
• การค้นหา ข, เราก็แค่ลบจาก (a + b), ซึ่งก็คือ 325.
• ดังนั้นความกว้างของแถบด้านข้างของคุณคือ 325.

โปรดจำไว้ว่ารูปสี่เหลี่ยมผืนผ้าของคุณสามารถพลิกกลับได้เพื่อให้เหมาะกับวัตถุประสงค์ของคุณวางแถบด้านข้างที่ด้านบนด้านล่างหรือด้านตรงข้าม ตราบใดที่อัตราส่วนนั้นยังคงอยู่การออกแบบของคุณจะรู้สึกกลมกลืน.

สำหรับข้อความ

มีวิธีที่เร็วกว่าในการรับการวัดที่คุณต้องการและสามารถนำไปใช้กับเนื้อหาข้อความได้.

• สมมติว่าข้อความบริบทของคุณมีขนาด 12.
• ทวีคูณ 12 ด้วย 1.618, อัตราส่วนทองคำและคุณจะได้ 19.416.
• ขนาดข้อความส่วนหัว 19 หรือ 20 จะเป็นไปตามอัตราส่วนทองคำอย่างใกล้ชิด.

อัตราส่วนทองคำเป็นภาษาที่จิตใจของคุณเข้าใจและโดยการสื่อสารกับมันความคิดของคุณจะได้อย่างมีประสิทธิภาพมากขึ้น คุณไม่ต้องทำตามอย่างแน่นอน หลักการพื้นฐานก็เพียงพอแล้ว การใช้อัตราส่วนกับขนาดภาพความสัมพันธ์ระหว่างตำแหน่งข้อความและรูปภาพและการสร้างส่วนย่อยภายในแถบด้านข้างเป็นแนวคิดที่เป็นไปได้ทั้งหมด.

ตารางการทำงาน: กฎข้อที่สาม

หากคณิตศาสตร์ไม่ใช่ถ้วยชาของคุณแนวคิดของอัตราส่วนทองคำก็สามารถทำให้ง่ายขึ้นได้ กฎข้อที่สาม ควบคุมการวางตำแหน่งของจุดสนใจในฉาก แบ่งภาพใด ๆ ให้เป็นสามในแนวนอนและแนวตั้ง คุณจะได้รับ 9 กริด.

(ที่มาของภาพ: digital-photography-school.com)

ตามกฎข้อที่สามจุดยอดของเส้นเหล่านั้น (ที่เส้นตัดกัน) เป็นตำแหน่งที่เหมาะสำหรับจุดที่น่าสนใจ คนที่กำลังสแกนหน้านี้มักจะสังเกตเห็นสิ่งต่าง ๆ ที่วางไว้ใกล้กับจุดต่างๆ การออกแบบที่ซับซ้อนมากขึ้นเป็นไปได้โดยแบ่งย่อยส่วนที่สามออกเป็นสามส่วนเพิ่มเติม.

(ที่มาของภาพ: net.tutsplus.com)

ในระยะสั้นตาสามารถขี้เกียจและไม่ต้องค้นหารายละเอียดที่สำคัญ สมองของเราเช่นนี้ รูปภาพหลักกล่องข่าวแถบค้นหาและจุดสนใจอื่น ๆ สามารถอยู่ในหรือใกล้กับจุดยอด ทางลัดขนาดเล็กที่เรียบร้อยนี้จะให้การออกแบบที่ง่ายต่อการมองเห็นและทำให้ผู้คนเข้าถึงข้อมูลที่สำคัญ.

คอลัมน์และขนาดตัวอักษร: ลำดับ Fibonacci

อีกเครื่องมือที่ง่ายสำหรับการออกแบบเว็บที่เชื่อมโยงกับอัตราส่วนทองคำคือ ตัวเลขฟีโบนักชี. ลำดับ Fibonacci เริ่มต้นด้วย 0 และ 1 หมายเลขสองก่อนหน้าถูกรวมเข้าด้วยกันเพื่อสร้างหมายเลขถัดไปในลำดับ: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... และอื่น ๆ.

คณิตศาสตร์น้อยบอกเราว่าความสัมพันธ์ระหว่างตัวเลขลำดับฟีโบนักชีต่อเนื่องนั้นใกล้เคียงกับอัตราส่วนทองคำ - หารตัวเลขใด ๆ ในลำดับนั้นกับตัวเลขก่อนหน้านั้นและคุณจะได้ - คุณเดาได้ - 1.618.

เช่นเดียวกับอัตราส่วนทองคำตัวเลข Fibonacci สามารถใช้เพื่อกำหนดความสัมพันธ์ระหว่างส่วนหัวและขนาดข้อความเนื้อหา นอกจากนี้ยังสามารถใช้เพื่อกำหนดความกว้างของคอลัมน์และมีประสิทธิภาพโดยเฉพาะในบล็อกและรูปแบบข้อความหนาแน่นอื่น ๆ องค์ประกอบอาจถูกสร้างขึ้นตามแนวคิดของ Fibonacci tiling ซึ่งขนาดกระเบื้องถูกสร้างขึ้นโดยใช้ลำดับ Fibonacci.

(ที่มาของภาพ: Wikipedia.org)

เกลียวทองและการจัดกลุ่มเนื้อหา

อีกวิธีที่เป็นไปได้ในการใช้ทั้งอัตราส่วนทองคำและตัวเลขฟีโบนักชีคือ เกลียวทองและเกลียวฟีโบนักชี. เกลียวทองคำได้กว้างขึ้นโดยปัจจัยเท่ากับอัตราส่วนทองคำสำหรับการเปิดทุกไตรมาสและเกลียว Fibonacci ถูกสร้างโดยใช้ Fibonacci tiling.

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

(ที่มาของภาพ: fabiovisentin.com)

เกลียวสามารถใช้เป็นแนวทางสำหรับความหนาแน่นของเนื้อหาและการจัดกลุ่ม พวกเขาสามารถทำหน้าที่เป็นรากฐานสำหรับอัตราส่วนของภาพส่วนหัวของเว็บไซต์แถบการค้นหาและแถบเครื่องมือ.

เมื่อเลือกภาพที่เหมาะสำหรับหน้าแรกที่สร้างขึ้นรอบ ๆ กราฟิกขนาดใหญ่เช่นหน้าแรกร้านค้าและเว็บไซต์ถ่ายภาพคุณยังสามารถได้รับประโยชน์จากเกลียวทองคำและฟิโบน่าชี.

ข้อความที่มีประสิทธิภาพมักจะอ่อนเกินและอัตราส่วนทองคำเป็นหนึ่งในโฆษณาที่อ่อนช้อยที่สุดของธรรมชาติ ด้วยการใช้สัดส่วนที่สูงส่งคุณจะได้รับตรรกะธรรมชาติตามธรรมชาติและความสง่างามที่มนุษย์ทุกคนมีอยู่ในจิตใต้สำนึก อัตราส่วนทองคำยังเป็นอีกเครื่องมือหนึ่งสำหรับการสร้างสรรค์ของคุณ.

อ่านเพิ่มเติม:

• การใช้อัตราส่วนทองคำกับการจัดหน้าเว็บและวัตถุ

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Chris Pentago สำหรับ Hongkiat.com Chris เป็นนักพัฒนาเว็บไซต์นักออกแบบและนักการตลาดอินเทอร์เน็ตที่มีประสบการณ์ที่สนใจในเทคโนโลยีที่สำคัญเพื่อให้ธุรกิจออนไลน์ของคุณดำเนินการได้คุณสามารถพบเขาได้ที่ Twitter.