จังหวะของเส้นแนวตั้ง / กริดพื้นฐานในการออกแบบ

ฉันเพิ่งอ่านบทความเกี่ยวกับความสำคัญของจังหวะตามแนวตั้งที่ดี / การใช้กริดพื้นฐานสำหรับการพิมพ์ที่ดีในการออกแบบเว็บ ฉันตัดสินใจที่จะลองใช้ตารางพื้นฐานเช่น 960 ตารางภาพด้านล่างเป็นภาพพื้นหลังสำหรับชุดรูปแบบการออกแบบเว็บ / WordPress ที่ฉันกำลังทำงานอยู่

960 ตาราง

ฉันพบว่ามันยากมากที่จะทำให้ทุกอย่างเรียงกันอย่างถูกต้องภายในตาราง ฉันจัดการเพื่อให้ได้ทุกอย่างภายในกริดแนวตั้งที่ขนาดตัวอักษรเริ่มต้น (16px) แต่เมื่อฉันเริ่มยุ่งกับขนาดของส่วนหัวการเพิ่มรูปภาพ ฯลฯ รายการต่าง ๆ จะไม่อยู่ในตำแหน่งที่เหมาะสมในตาราง

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

— Santaji
แหล่งที่มา

คำตอบ:

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

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

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

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

— DA01
แหล่งที่มา

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

— Lauren-Clear-Monica-Ipsum

ไม่ยากที่จะทำให้ css และ html ของคุณตรงกับ 960 grid Afterall การเขียนโค้ดเป็นเพียงคณิตศาสตร์ นอกจากนั้นโดยพื้นฐานแล้วนักออกแบบทั้งหมดใน (เช่น) themeforest.net จะใช้มัน ไม่ยากอย่างที่คุณบอก และใช่ .... แนวคิดกริดมาจากโลกการพิมพ์ อย่างไรก็ตามระบบกริด 960 ถูกแปลงสำหรับเว็บเพื่อให้ตรงกับความละเอียดขั้นต่ำ 1024x768

— Luuk

960 กริดนั้นใช้สำหรับสร้างกริดแนวนอนเป็นหลักและสิ่งที่ฉันแนะนำเป็นพิเศษในไซต์ที่มีขนาดปานกลาง มันเป็นเครื่องมือที่มีประโยชน์มาก อย่างไรก็ตามเรากำลังพูดถึงพื้นฐานประเภทแนวตั้ง ใช่การเข้ารหัสเป็นคณิตศาสตร์ อนิจจาเบราว์เซอร์และข้อมูลจำเพาะของ CSS ไม่ได้ทำสิ่งอำนวยความสะดวกอะไรเป็นพิเศษในการหาพื้นฐานของตัวอักษร คุณสามารถ ballpark ด้วยคณิตศาสตร์ของคุณ แต่คุณอยู่ในความเมตตาของเบราว์เซอร์แต่ละตัวระบบปฏิบัติการแบบอักษรที่ติดตั้งและการตั้งค่าของผู้ใช้ดังนั้นมันจึงไม่ใช่ 'คณิตศาสตร์ง่าย ๆ ' เลยที่จะทำให้ระบบกริดประเภทพื้นฐานทำงานได้

— DA01

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

— DA01

อืมฉันขาดการอ่าน;) ฉันไม่ได้สังเกตว่ามันเป็นเพียงเกี่ยวกับจังหวะแนวตั้ง ฉันต้องยอมรับว่าฉันไม่ได้ใช้ 960gs สำหรับ rythem แนวตั้งเช่นกัน สำหรับแนวนอนเท่านั้น สิ่งเดียวที่ฉันใช้ในแนวตั้งคือ "การพับ" ส่วนที่เหลือฉันจัดตำแหน่ง (อีกครั้งในแนวตั้ง) โดย "ตา"

— Luuk

จังหวะแนวตั้งไม่ยากที่จะดำเนินการโดยเฉพาะอย่างยิ่งถ้าคุณเริ่มต้นด้วยการตั้งค่า CSS ฉันสะดุดกับลิงค์นี้http://24ways.org/2006/compose-to-a-vertical-rhythmเมื่อไม่นานมานี้และตั้งแต่นั้นมาก็ใช้เทคนิคในการออกแบบทั้งหมดของฉัน

สิ่งที่ฉันได้พบคือหลังจากทำงานกับชุดการประกาศประเภท "กระป๋อง" ในไฟล์ CSS ของฉัน (h1 - h6, p, ฯลฯ - โดยเฉพาะขนาดความสูงของบรรทัดขอบล่าง) มันง่ายมาก

นี่เป็นภาพพื้นหลังที่ช่วยให้ฉันเห็นสิ่งต่าง ๆ ที่ชัดเจนขึ้น ... โดยเฉพาะเมื่อฉันใช้จังหวะเวอร์ท

ป้อนคำอธิบายรูปภาพที่นี่

อาจเป็นเรื่องยากที่จะเห็น แต่เมื่อทำซ้ำเป็นภาพพื้นหลัง: คุณจะเห็นตาราง 20x20

HTH

หมายเหตุ: ฉันชอบตัวอักษรในไซต์ที่ใช้เทคนิคนี้ดีกว่าที่ไม่มี อย่างไรก็ตามในทั้งสองกรณีดูเหมือนว่าจะมีองค์ประกอบหนึ่งหรือสองอย่างที่ต้อง "โกงระบบ" เพื่อดู "ถูกต้อง" ฉันยังพบว่าการให้ความสำคัญกับความสูงของเส้นโดยรวม (พูด 18px สำหรับฐานแบบอักษร 12px) ทำให้การตั้งค่าระยะขอบและการเว้นรอบรูปภาพส่วนหัวแบบกราฟิก นอกจากนี้ ... ความต้องการในการคำนวณทุกอย่างหายไป ... คุณจะเริ่มสังเกตเห็น "จังหวะตามแนวตั้ง" เกี่ยวกับเลย์เอาต์และสามารถดึงช่องว่างด้านขวา / ระยะขอบ / เส้นความสูงจากรายการค่าที่สั้นมาก ในหัวของคุณ.

— ดอว์สัน
แหล่งที่มา

บทความที่ดีมากเกี่ยวกับ Smashing Magazineเกี่ยวกับพื้นฐานและจังหวะในแนวตั้งช่วยให้คุณเข้าใจทั้งความสำคัญของเส้นเขตแดนในการออกแบบเว็บและวิธีการนำไปใช้ใน css ของคุณ มันใช้ขนาดตัวอักษร, ความสูงของบรรทัด, padding และระยะขอบบนองค์ประกอบ html เริ่มต้นที่จะมีทุกบรรทัดขึ้นกับตารางพื้นฐานของคุณ

เพื่อช่วยจับคู่ทุกอย่างกับกริดภาพพื้นหลังมีประโยชน์มากตามที่ดอว์สันแนะนำ

ฉันได้ติดตามเทคนิคนี้สำหรับการออกแบบล่าสุดของฉันและฉันคิดว่ามันคุ้มค่าจริงๆ

— วินเซนต์
แหล่งที่มา