Skip to main content

วิธีใช้การจัดแนวในเค้าโครงหน้าเว็บ

Anonim

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

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

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

ประโยชน์ของการจัดแนวในการออกแบบหน้า

การจัดเรียงองค์ประกอบบนหน้าเว็บหรือหน้าเว็บสำหรับทำหน้าที่:

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

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

ประเภทการจัดแนวสำหรับการจัดวางหน้ากระดาษ

  • การจัดแนวแนวนอน:ในแนวนอนแนวขอบด้านซ้ายและด้านขวาตรงหรือตรงกับสายตา การจัดแนวแนวนอนสามารถข้ามหน้าหรือภายในคอลัมน์ได้ ไม่จำเป็นต้องหมายความว่าตรงกลาง บล็อกข้อความซ้าย / หยักศกที่ล้างอาจถูกจัดเรียงตามแนวนอน แม้ว่าบรรทัดข้อความแต่ละบรรทัดจะไม่ได้รับการจัดชิดกันอย่างสมบูรณ์ในแต่ละด้าน แต่ให้ความสนใจกับพื้นที่สีขาวที่ส่วนท้ายของบรรทัดอาจทำให้ขอบของข้อความในแต่ละด้านมีสัดส่วนที่มองเห็นได้
  • การจัดแนวแนวตั้ง:ในแนวตั้งแนวขอบขอบด้านบนและด้านล่างตรงหรือตรงกับสายตา การจัดแนวแนวตั้งอาจเป็นหน้าที่เต็มหรือภายในส่วนของหน้าเว็บ
  • การจัดแนวขอบ:เส้นขอบจัดเรียงข้อความหรือวัตถุตามแนวขอบด้านบนด้านล่างซ้ายหรือด้านขวา การจัดตำแหน่งตามขอบด้านซ้าย (เรียกว่า right-rogged) มักถูกมองว่าเป็นข้อความในหนังสือพิมพ์และในหน้าเว็บเพราะว่าตาของเราใช้ในการดูและอ่านข้อความในลักษณะนี้
  • จัดตำแหน่งศูนย์กลาง:การจัดแนวกึ่งกลางอาจเป็นแนวนอนหรือแนวตั้งหรือทั้งสองอย่าง
  • การจัดแนวภาพหรือแสง: การจัดตำแหน่งภาพหรือแสงช่วยแก้ไขปัญหาบางอย่างที่อาจเกิดขึ้นกับการจัดแนวประเภทอื่น ๆ อันเนื่องมาจากรูปร่างและตัวอักษรที่แตกต่างกัน ในการจัดตำแหน่งภาพวัตถุอาจไม่ได้รับการจัดตำแหน่งให้พอดี แต่ในสายตาพวกเขาจะเรียงราย

ใช้การจัดตำแหน่ง

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

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