ทริคDesign
ระยะห่างและการจัดเลย์เอาต์ (Spacing & Layout)
ระยะห่างที่สม่ำเสมอช่วยให้ผู้ใช้เข้าใจการจัดกลุ่ม จังหวะ และความสัมพันธ์ระหว่างองค์ประกอบบนหน้าจอ.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
ระยะห่างและการจัดเลย์เอาต์ (Spacing & Layout) คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
การ์ดหรือตัวกรองดูอัดแน่นเกินไป ไม่มีที่หายใจ
อ่านแล้วทำอะไรต่อ
วางตัวกรองให้อยู่ใกล้ช่องค้นหา แล้วเว้นระยะห่างของส่วนต่างๆ ให้ชัดเจนเพื่อแยกผลลัพธ์ออกมา
ใช้ตอนไหน?
- การ์ดหรือตัวกรองดูอัดแน่นเกินไป ไม่มีที่หายใจ
- หน้าจอเพี้ยนหรือพังเมื่อดูบนมือถือ
- ผู้ใช้แยกไม่ออกว่าข้อความกำกับอันไหนคู่กับค่าอันไหน
ความหมาย
ระยะห่างและการจัดวาง (spacing and layout) คือการกำหนดว่าเนื้อหาจะถูกจัดกลุ่ม จัดแนว และกระจายตัวอย่างไรบนหน้าจอคอมพิวเตอร์และมือถือ
กฎของระยะห่าง
ใช้ค่าระยะห่างให้น้อยแบบ แล้วนำค่าเดิมมาใช้ซ้ำอย่างสม่ำเสมอ
Small gap = related items
Medium gap = group separation
Large gap = section separationตัวอย่างการใช้
การจัดวางตัวกรองกับผลลัพธ์
วางตัวกรองให้อยู่ใกล้ช่องค้นหา แล้วเว้นระยะห่างของส่วนต่างๆ ให้ชัดเจนเพื่อแยกผลลัพธ์ออกมา