Máng xối - Đệm và lề cho cột có nền hoặc viền

Các hướng dẫn thiết kế được đề xuất cho máng xối khi một cột (hoặc hộp, hoặc bất kỳ mô-đun bố trí nào) có hình dạng rõ ràng vì nó có nền hoặc đường viền riêng?

Thông thường, người ta sẽ đặt một khoảng trống ở giữa cạnh của hộp và văn bản của nó. Nhưng gợi lên không gian này từ đâu? Bằng cách mở rộng hộp, hoặc thu nhỏ văn bản ?

Để minh họa, đây là một số tùy chọn (nhưng không phải tất cả) ...

.

Tôi đã trải qua một đống bài viết trên các bố cục dựa trên lưới, nhưng cho đến nay tôi chỉ thấy một bài viết đề cập đến vấn đề: Nudge Your Elements của Khôi Vinh.

Tôi đang thiếu gì? Hoặc đơn giản là không có hướng dẫn rõ ràng?

Vì một trong những động lực cho bố cục dựa trên lưới là nâng cao ý thức liên kết toàn cầu, tôi cho rằng người ta có thể tranh luận quyết định phụ thuộc vào những gì đòi hỏi sự liên kết nhiều hơn; Cái hộp, hay nội dung của nó?

Trừ khi tôi đọc sai, Khôi Vinh lập luận cho phương án 3 trong bài viết của mình.

Tôi thấy mình qua lại giữa tùy chọn 3 và tùy chọn 6. Với tùy chọn 3, hộp được căn chỉnh, nhưng văn bản của nó cảm thấy chật chội. Nhưng sử dụng tùy chọn 6, một kết thúc không có hộp cũng không được căn chỉnh văn bản (mặc dù người ta có thể nói khoảng giữa ẩn giữa cạnh văn bản và viền hộp là 'thứ' hiện được căn chỉnh).

Bước ra ngoài web, không ai trong số tôi đọc về thiết kế sách và các công cụ xây dựng trang nói về vấn đề này. Tôi có thể thấy các khẩu súng hoạt động như thế nào đối với phần lớn chữ 'đen trên nền in rõ ràng', nhưng phút thứ nhất thêm màu vào bố cục trang (hoặc đảo ngược sơ đồ đen trắng), câu hỏi máng xối trở lại.

Mmm, tôi đoán câu hỏi là; Có bất kỳ hướng dẫn nào để lựa chọn giữa các tùy chọn mà tôi đã minh họa - hoặc tôi đã mạo hiểm vượt ra ngoài luật thiết kế và vấn đề chỉ là "những gì trông và cảm thấy tốt" ?

Bất cứ khi nào bạn sử dụng lưới, bạn phải sử dụng nó một cách nhất quán trừ khi bạn có một yếu tố (thường không nhiều hơn một trên một trang nhất định) vi phạm nó vì một lý do chính đáng - để làm cho nó nổi bật hoặc thay đổi tâm trạng của trang . Sự tương phản phải được in đậm và cân nhắc rõ ràng để làm cho công việc này. ("Làm việc" Tôi có nghĩa là nó không giống như một sai lầm.)

Một lưới, theo đúng, là hòa bình. Có rất ít nếu có căng thẳng; mọi thứ hiện lên nơi mắt mong đợi chúng và người đọc không bao giờ giật mình hoặc cảm thấy khó chịu.

Trong trường hợp này, nếu nền của bạn vi phạm lưới một chút, như trong # 4, có vẻ như đó là một sai lầm. Thật là khó xử. Việc thiếu hoàn toàn máng xối làm đông các hộp lên các cột khác. Chống lại sự dẫn đầu mở của văn bản, điều này đặt ra một kỳ vọng về sự cởi mở, điều này rõ ràng chỉ là sai.

0 không cung cấp độ tương phản, do đó cột thứ hai không phân biệt với phần còn lại. Trong một số trường hợp đó là những gì bạn muốn.

Các ví dụ "nửa máng xối" trong # 5 và # 6 xác định lại máng xối, làm cho nó hẹp hơn. Họ thực sự xác định lại toàn bộ lưới theo chiều ngang và chiều dọc, bởi vì trong trường hợp này máng xối cuối cùng giống hệt như khoảng cách dòng. Điều đó không tốt cho văn bản, nhưng có thể làm việc với hộp. Tuy nhiên, ở # 6, bạn có khoảng trắng không cân xứng ở hai bên của văn bản so với trên và dưới. Điều đó thật khó xử và không thoải mái vì nó vô nghĩa. # 5 sẽ thích hợp hơn, bởi vì khoảng trắng được phân bố đều hơn. Vì lý do tương tự, # 3 thích hợp hơn # 2.

Nhìn chung, sau đó, tôi sẽ đồng ý với Lauren và đề nghị # 3 là bức ảnh đẹp nhất của bạn. Đây cũng là trường hợp chung tốt nhất, bất kể số lượng cột.

Có quy tắc. Chúng chắc chắn có thể bị phá vỡ nếu bạn có lý do chính đáng, nhưng bất cứ lúc nào bạn làm như vậy phải có mục đích, táo bạo và rõ ràng "như thiết kế". Helvetica Black kết hợp với các tác phẩm Georgia vì chúng khác nhau; Trebuchet kết hợp với Verdana làm đau dây thần kinh vì chúng không đủ khác nhau. Một hộp lớn, vuông, đỏ kéo dài một cột rưỡi có thể hoạt động; một màu xám hơi tắt sẽ không.

Tôi bỏ phiếu cho Tùy chọn 3. Các cạnh của hộp màu xám là những gì xác định cột theo chiều dọc, vì vậy những dòng đó không thể bị vi phạm (không có lý do). Các máng xối phải giống nhau cho cả ba cột, vì vậy hãy chèn văn bản bên trong hộp màu xám. Hình nhỏ của tùy chọn 2 là quá sâu.

Đó là những gì tôi đã quen với việc in ấn, vì vậy nó cũng trông "đúng" trên web.

Nếu điều này là dành cho thiết kế web, tôi khuyên bạn không nên sử dụng bất kỳ phần đệm nào theo hướng ngang nếu bạn quan tâm đến tính nhất quán của trình duyệt chéo. Các trình duyệt khác nhau đối xử với div và phần đệm khác nhau đủ để trình bày có thể bị hỏng.

Dù bạn đi bằng cách nào, chỉ sử dụng lề theo chiều ngang. Nó yêu cầu thêm một hoặc hai lớp để có bố cục chính xác mà bạn muốn (ví dụ: một bộ lề cho div và một lớp khác cho đoạn văn), nhưng về lâu dài, nó đáng tin cậy hơn. Mặc dù vậy, đệm dọc thường không phải là một vấn đề.