Layout

เมื่อไรควรใช้

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

ทริกเกอร์ที่ดี: “ทุกอย่างรู้สึกแออัด” “มันอ่านเหมือนกำแพง” “ฉันไม่รู้ว่าควรมองที่ไหนก่อน”

วิธีการทำงาน

สกิลตรวจสอบผ่านห้ามิติของเลย์เอาต์:

1. ระยะห่าง: สเกลระยะห่างสม่ำเสมอหรือมีช่องว่าง 13px แบบสุ่มไหม อิลิเมนต์ที่เกี่ยวข้องจัดกลุ่มแน่นพร้อมระยะห่างมากระหว่างกลุ่มไหม มีจังหวะเลยกว่า
2. ลำดับชั้นภาพ: สายตาลงบนแอคชันหลักภายใน 2 วินาทีไหม ลำดับชั้นทำงานจริงหรือทุกอย่างกำลังตะโกน
3. กริดและโครงสร้าง: มีกริดพื้นฐานหรือเลย์เอาต์แบบสุ่ม อิลิเมนต์จัดชิดเส้นฐานไหม
4. จังหวะ: หน้าสลับระหว่างระยะห่างแน่นและกว้าง หรือทุกอย่างสม่ำเสมอ
5. ความหนาแน่น: เลย์เอาต์แออัดหรือสิ้นเปลือง ความหนาแน่นตรงกับประเภทเนื้อหาไหม

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

ลองใช้งาน

/impeccable layout the settings page

การเปลี่ยนแปลงทั่วไป:

• สเกลระยะห่างรวมเป็น 8 / 16 / 24 / 48 / 96px
• ตัวแบ่งส่วนที่ 48px ช่องว่างแถวที่ 16px กลุ่มฟิลด์ฟอร์มที่ 8px
• แอคชันหลักดึงออกจากโฟลว์ฟอร์มด้วยบัฟเฟอร์ 32px
• ขอบตกแต่งถูกลบ แทนที่ด้วยการจัดกลุ่มตามระยะห่าง
• สัดส่วนไซด์บาร์และคอลัมน์หลักปรับสมดุลใหม่ (280 / flex vs 25 / 75)

ข้อควรระวัง

• สับสน arrange กับ distill หากปัญหาคือมีสิ่งต่างๆ มากเกินไป รัน /impeccable distill ก่อน Layout มีไว้สำหรับจัดเรียงสิ่งที่เป็นชุดที่ถูกต้องแล้ว
• คาดหวังให้มันกู้กริดที่เสีย หากหน้าไม่มีกริดเลย arrange จะสร้างใหม่ แต่รู้ไว้ว่า diff จะใหญ่กว่าที่คุณคาด
• เพิกเฉอผลการตัดสินลำดับชั้น หาก arrange บอกว่า “ไม่มีอะไรเป็นหลัก” การทำงานด้านระยะห่างไม่ว่าเท่าไหร่ก็ไม่แก้ได้ คุณต้องการการตัดสินใจด้านเนื้อหา ไม่ใช่การปรับเลย์เอาต์