it-swarm-vi.com

Độ rộng cột lý tưởng cho các đoạn văn trực tuyến

Không có gì tệ hơn là bắt gặp một trang web với các đoạn trải dài theo chiều rộng của độ phân giải màn hình của bạn. Chúng thường rất khó đọc, tôi thậm chí không bận tâm.

Rất nhiều nhà thiết kế web sử dụng hệ thống lưới và cột chung, nhưng tôi không cảm thấy những điều này đã được tối ưu hóa để dễ đọc, họ hướng dẫn thiết kế nhiều hơn về tính thẩm mỹ chung.

Tôi đoán nó đi xuống từ trên mỗi dòng. Các quy tắc áp dụng cho phương tiện in giống nhau cho phương tiện màn hình?

Có bất kỳ loại hướng dẫn nào giúp tôi kích thước chiều rộng của đoạn văn trên màn hình không?

Tôi muốn xem xét:

  • Các khuôn mặt phông chữ chính của web (tức là Arial, Verdana, Georgia, Times)
  • Một kích thước phông chữ phạm vi (nghĩa là 8px-24px)
  • Khoảng cách giữa các cột
102
theorise

Độ dài dòng lý tưởng là ngắn hợp lý hoặc dài hợp lý; những gì nói chung thẩm mỹ để đọc nói chung là một dấu hiệu tốt.

Cột trong ngữ cảnh web chỉ có ý nghĩa nếu bạn đang tập trung vào nội dung rất nhỏ gọn; trong đó đánh bại mục đích sử dụng các cột ngoài việc làm đẹp. Lý do họ không có ý nghĩa khác không phải vì họ được hỗ trợ kém, mà vì cuộn; trừ khi bạn đang tạo bố cục ngang có các cột có thể dẫn đến việc người dùng của bạn cuộn lên xuống. Tôi cũng có thể thấy bất cứ điều gì ngoài hai cột gây nhầm lẫn vì nó làm căng bộ nhớ người dùng khi họ tạm dừng một chút khi đọc sách xem xét cách các cột thêm trục thứ hai.


Quá dài - nếu một dòng văn bản quá dài, mắt khách truy cập sẽ gặp khó khăn khi tập trung vào văn bản. Điều này là do độ dài làm cho khó có được ý tưởng về nơi dòng bắt đầu và kết thúc. Hơn nữa, có thể khó tiếp tục từ dòng chính xác trong các khối văn bản lớn. - Christian Holst

Quá ngắn - nếu một dòng quá ngắn, mắt sẽ phải di chuyển trở lại quá thường xuyên, phá vỡ nhịp điệu của người đọc. Các dòng quá ngắn cũng có xu hướng gây căng thẳng cho mọi người, khiến họ bắt đầu ở dòng tiếp theo trước khi hoàn thành dòng hiện tại (do đó bỏ qua các từ có khả năng quan trọng). - Christian Holst

Ngoài ra, bạn có thể muốn rất ý thức về kích thước nội dung của bạn. Đối với nội dung dài hơn thích dòng dài hơn; với nội dung ngắn thích dòng ngắn hơn. Thông thường, hãy lấy kích thước của các đoạn văn và các phần trong nội dung của bạn làm biến đổi theo thời gian của dòng nên bạn không muốn các đoạn văn 1 dòng, nhưng cũng không kém phần bạn không muốn các đoạn 30 dòng. Chọn một mức trung bình hạnh phúc làm cho nội dung dễ hình dung.

Quy tắc chung của ngón tay cái

Lấy những thứ này với một hạt muối, chúng chỉ là hướng dẫn; hãy phá vỡ chúng Tôi nhắc lại, chúng không phải là "một quy tắc cho tất cả" mà bạn cần áp dụng; chỉ cần đẩy/đầu mối đúng hướng.

  • 12 từ trên mỗi dòng
  • 39 ký tự bất kể kích thước loại (bảng chữ cái và một nửa)
  • nhân kích thước điểm với 2 và giải thích nó là picas (điểm-lần-hai)
  • khoảng 50-60 đến tối đa 75 ký tự (bao gồm khoảng trắng) - đây thường là hướng dẫn mượn từ bạn bè của chúng tôi trong kiểu chữ

"Các yếu tố của phong cách đánh máy" của Robert Bringhurst, đề cập đến các phép đo cụ thể hơn sau đây

  • Độ dài dòng 45 đến 75 ký tự (số đo); cụ thể là 66 bao gồm cả không gian; Cột đơn
  • 40 đến 50 ký tự; nhiều cột
  • 85 đến 90 ký tự; văn bản không liên tục; hào phóng hàng đầu
  • 40 ký tự (tối thiểu); biện minh
  • 12 đến 15 ký tự; ghi chú ngoài lề; Tiếng Anh

Các biến trong khả năng đọc:

  • cỡ chữ
    • lớn hơn = Tôi đã thử nó, (một số) mọi người thấy khó chịu. Chỉ cần nhắm đến "kích thước trung bình" hạnh phúc
    • trung bình/tiêu chuẩn = chiều rộng lớn hơn
    • nhỏ hơn = chiều rộng nhỏ hơn
  • chiều cao giữa các dòng
    • lớn (1.9+) = dễ quét các dòng hơn, các dòng dài hơn trở nên dễ chấp nhận hơn
    • bình thường = dòng ngắn hơn
    • nhỏ hơn = dòng rất ngắn
  • thời lượng nội dung
    • blob lớn = dòng dài + chiều cao dòng lớn
    • tin nhắn ngắn = dòng ngắn + chiều cao dòng hợp lý

Miễn là bạn giữ đúng với "khả năng sử dụng thông thường", sẽ không có cài đặt nào sai cả. Không giống như hầu hết các khía cạnh thiết kế, bạn cũng có thể tự kiểm tra nó, chỉ cần đặt một số nội dung có thể đọc được vào phần tử (không nhất thiết phải là gì để đến đó, và tốt nhất là mới!) Và xem bạn có thể thoải mái đọc nó không. Nếu bạn có thể, tuyệt vời; mặt khác, tinh chỉnh nó cho đến khi cài đặt khớp với nội dung của bạn (kiểm tra nó với một vài phông chữ, không chỉ phông chính của bạn).

92
srcspider

Ngoài ra, hãy kiểm tra liên kết này: http://www.inaturesarchitects.jp/en/100e2r/ .

Thiết kế cúi xuống với khuôn mặt dán vào màn hình có hại cho lưng của bạn; hãy thử ngả người ra sau và tiếp tục thiết kế ở tư thế thoải mái. Thiết kế của bạn sẽ thoải mái hơn, và bạn cũng vậy.

Để nhận ra văn bản nhỏ như thế nào trên nhiều trang web, hãy so sánh với một cuốn sách mà bạn cảm thấy thoải mái khi đọc, sau đó thay đổi kích thước phông chữ cho đến khi loại trên sách và màn hình có cùng kích thước:

Chiều cao dòng HTML mặc định quá nhỏ. Nếu bạn tăng chiều cao dòng, văn bản sẽ trở nên dễ đọc hơn. Đối với loại trên màn hình, 140% hàng đầu là một điểm chuẩn tốt.

Họ đề xuất có kích thước phông chữ 100% (mặc định của trình duyệt), 10 từ15 trên mỗi dòng (thường là 50% cửa sổ trình duyệt có phông chữ mặc định), chiều cao dòng 140% - nghe có vẻ khá hợp lý đối với tôi.

8
Nikita Prokopov