Có một kích thước tiêu chuẩn cho chiều rộng của một trang web trong một mockup? Kích thước đó là gì? Tại sao?
Câu trả lời:
Tôi bắt đầu hầu hết các mockup của mình ở độ rộng 1200px mặc dù tôi đang thiết kế cho độ phân giải 1024px. Tôi thiết lập các hướng dẫn trong mockup cho 1000px. Chiều cao có thể thay đổi. Lý do tôi làm cho tệp mockup của mình rộng hơn là để xem thiết kế cảm thấy như thế nào với phòng thở xung quanh nó. Hầu hết mọi người sử dụng cao hơn 1024px ngày nay.
Có một chiều rộng tiêu chuẩn để thiết kế mockup trang web?
Có, không, có thể?
Ngày xửa ngày xưa (xem bên dưới) thiết kế web phần lớn đã cố gắng tạo ra một chế độ xem phù hợp với hầu hết các màn hình. Trong năm năm qua, điều đó đã thay đổi mạnh mẽ với việc áp dụng Thiết kế Web đáp ứng (RWD).
RWD là một nguyên tắc thiết kế để tạo ra các thiết kế theo cách cho phép chúng phù hợp một cách hợp lý trên mọi thiết bị bất kể kích thước của thiết bị.
Trong phát triển web, các truy vấn phương tiện thường được sử dụng để áp dụng các bộ kiểu khác nhau cho các trang web tùy thuộc vào một số yếu tố. Một số yếu tố phổ biến bao gồm:
Vì các kiểu có thể được nhắm mục tiêu đến kích thước màn hình cụ thể, nên việc tạo ra nhiều bộ thiết kế nhắm mục tiêu đến các phạm vi cụ thể là không phổ biến.
Để rõ ràng, không có "tiêu chuẩn" nào được đặt ra. Không có cơ quan hay tổ chức quản lý nào nói rằng "các nhà thiết kế nên tạo ra các thiết kế theo các hướng dẫn định cỡ này", vì cuối cùng, đó là một lời kêu gọi phán xét.
Như đã nói, ngành công nghiệp phát triển web đã tổ chức đưa ra một loạt các điểm dừng phổ biến xảy ra lặp đi lặp lại.
Điểm dừng điển hình là cho chiều rộng màn hình hiện tại và thường:
đơn vị ở px
Lý do cho những con số cụ thể là khá trần tục. IPhone ban đầu có màn hình với kích thước 320 × 480; iPad nguyên bản có màn hình với kích thước 768 × 1024; 1600 × 1200 là phổ biến cho độ phân giải màn hình lớn hơn.
Mặc dù thường thấy các mockup tại một số hoặc tất cả các điểm dừng đó, nhưng cũng cần phải cung cấp nhiều kết xuất của một trang cụ thể hiển thị các điểm uốn của thiết kế trung gian.
Một comp có chiều rộng chất lỏng hiển thị các mục được xếp chồng ở độ rộng 768px có thể cần bao gồm một thiết kế cho 900px trong đó các mục đã chuyển sang hai cột. Nếu bạn thấy rằng bạn cần cung cấp nhiều bộ thiết kế cho các điểm dừng trung gian này, tôi khuyên bạn nên thiết kế các thành phần riêng lẻ và hiển thị các điểm dừng trong đó một thành phần thay đổi trên cơ sở từng thành phần, không bao gồm phần còn lại của trang trong mockup.
Điều này cũng giúp tránh các cạm bẫy thiết kế phổ biến khi các thành phần UI cụ thể bị thiếu hoặc không đồng nhất giữa các điểm dừng.
Sau đây là phiên bản cũ hơn của câu trả lời này mà tôi đang giữ cho hậu thế, nhưng đôi khi nó không liên quan
Tôi ngạc nhiên không ai đề cập đến điều này:
Google có một công cụ phát triển tốt đẹp được gọi là
Nó sẽ trả lời khá nhiều câu hỏi của bạn một mình.
Tôi có một vài lưu ý về xu hướng hiện tại:
Hiện tại đại đa số người dùng có độ phân giải 1024x600 (máy tính bảng / netbook) hoặc lớn hơn. Bạn phải nhớ xóa khoảng 24pxcho các thanh cuộn, để lại chiều rộng 1000px đẹp. Về chiều cao: người dùng web rất giỏi cuộn theo chiều dọc, vì họ đã quen với việc cuộn bánh xe trên chuột. Chiều cao ban đầu rất quan trọng đối với lần hiển thị đầu tiên.
Người dùng không hoàn toàn giỏi trong việc cuộn theo chiều ngang, do đó, không nên bố trí rộng hơn 1000px.
Ngoài ra, nhiều người dùng có màn hình lớn hơn không sử dụng toàn bộ màn hình cho trình duyệt web của họ. Đặc biệt là bây giờ Windows 7 bao gồm chức năng kéo-n-dock đơn giản để thả một cửa sổ trên một nửa màn hình.
Tóm tắt:
Câu trả lời ngắn: 775x400 cho 800x600 và cho 1024x768 sử dụng 1000x500.
Câu trả lời dài: Bạn không bao giờ có thể chắc chắn rằng bản trình bày của bạn sẽ trông đúng trên máy khách của bạn (nó có thể có một hệ thống hoạt động khác, trình duyệt, màn hình hiệu chỉnh khác hoặc độ phân giải thấp hơn với phông chữ lớn được xử lý để đọc tốt hơn). Vì lý do này, tôi có xu hướng hiển thị luôn trình bày trên máy tính của mình nếu tôi có thể.
Nếu tôi không thể hiển thị nó trên máy tính của mình về vấn đề kích thước, tôi sử dụng các quy tắc cá nhân của mình (Đừng lấy số đo của tôi là thánh, mọi người đều có quyền riêng của mình):
Với kích thước an toàn, nó được tối ưu hóa tốt cho 800x600 (loại bỏ thanh cuộn và thanh trên cùng tôi sử dụng 775x400 là "phía trên dòng"). Nhưng ngày nay với màn hình rẻ hơn với tiêu chuẩn rộng hơn, tôi bắt đầu thiết kế cho 1024x768 (1000x500)
Điều quan trọng là tối ưu hóa không phải cho chiều cao mà cho chiều rộng. Chiều cao có thể giải quyết được bằng một cuộn chuột đơn giản, với chiều rộng nếu bạn không có chuột mac, bạn không thể cuộn theo chiều ngang để xem thêm thông tin. Tuy nhiên, thật tốt khi biết nơi ít nhiều có thể được định vị dòng dưới cùng của màn hình, ngay cả khi không thể xác định chính xác.
LƯU Ý: Tôi sử dụng chiều cao thấp như vậy ngay cả trên 1000px vì mọi người có xu hướng có nhiều thanh cuộn bổ sung trên trình duyệt cơ bản (ví dụ như GoogleRank hoặc dấu trang và nhiều trang khác), vì vậy tôi luôn muốn thiết kế cho tình huống xấu nhất có thể.
Ps xin lỗi vì tiếng anh không tốt của tôi :)
Chúng tôi có một chương trình theo dõi cho chúng tôi biết thông tin về người dùng của chúng tôi. Hơn một nửa là ở 1024x768. Vì vậy, tôi sử dụng đó là kích thước màn hình "tiêu chuẩn".
Tuy nhiên, đó không phải là khu vực trực tiếp của bạn cho trang web của bạn - mọi người có thanh bên, họ không luôn mở cửa sổ trình duyệt toàn bộ chiều rộng, v.v.
Tôi thích hệ thống lưới 960 . Các con số rất linh hoạt và trang web cung cấp rất nhiều mẫu để tải xuống. Tôi sử dụng nó cho các mockup của tôi, và mọi người đều rất hạnh phúc.
Tôi phải tìm số liệu thống kê để sao lưu cho tôi (chẳng hạn như bài đăng trên blog SO này ), nhưng 1024x768 đã lấy hoặc đang chiếm lấy mẫu số chung tiêu chuẩn cho độ phân giải màn hình. Tôi thiết kế các mockup web cho các đối tượng chung có chiều rộng 1000 px để tính đến các thanh cuộn và viền cửa sổ với độ phân giải với chiều rộng 1024 px. Đối với khán giả cụ thể hơn, quyền của Pekka trong nhận xét của mình. Tìm hiểu những gì các tiêu chuẩn là đối tượng mục tiêu.
Kích thước trình duyệt ngày nay là một câu hỏi khó vì mọi người đang sử dụng hai loại thiết bị, máy tính có độ phân giải cao hơn và cao hơn và điện thoại có độ phân giải tương đối thấp.
Nếu bạn đang tạo một trang web để trở thành một trang web hơn hầu hết các máy tính hiện nay (hầu hết là 90% trở lên) có độ phân giải tối thiểu 1024. Nếu bạn muốn máy tính ít hơn một chút nhưng vẫn có tỷ lệ tốt hơn 1200 cũng nằm trong phạm vi đó.
Nếu bạn đang tạo một trang web dành cho thiết bị di động, hầu hết các điện thoại đều đạt tối đa 480px để duyệt ngang, nhưng hầu hết trong số chúng cũng có một số hệ thống kết xuất cho các trang web lớn hơn.
Câu hỏi về kích thước là tất cả về đối tượng của riêng bạn, nếu mục tiêu của bạn là một nhóm các nhà thiết kế, bạn có thể có một trang web lớn hơn, nếu đó là những người trung niên đang tìm kiếm bảo hiểm xe hơi mới hơn bạn nên làm việc nhỏ hơn một chút và nếu đó là cho điện thoại Người dùng nhìn vào trong khi trên điện thoại của họ, thậm chí còn nhỏ hơn.
Điều này hoàn toàn phụ thuộc vào trang web của bạn, theo quy định, tôi có xu hướng không vượt quá 1000 cho những khách hàng đó trên các máy cũ. Tuy nhiên, các nghiên cứu hiện đang chỉ ra rằng thiết kế cho 1200 hiện đã được chấp nhận trong thế giới thiết kế, vì vậy đó là thực phẩm đáng suy nghĩ.
Kế hoạch của bạn là đạt được mẫu số chung thấp nhất và nếu đó là Joe Dinosaur trên máy Windows 95 800x600 thì đó là người bạn nên phục vụ.
Ngoài ra nó hoàn toàn phụ thuộc vào thiết kế trang web của bạn. Tôi hiện đang thiết kế một trang web cho đại lý của mình và nó sẽ rộng 800, dành cho sở thích, không phục vụ cho bất kỳ ai cụ thể.
Thật không may, không có bất kỳ kích thước tiêu chuẩn nào vì các trang web hiện được truy cập trong một số màn hình. Mặc dù để an toàn hơn, vui lòng nghiên cứu về các độ phân giải phổ biến nhất (Ví dụ: 1024x768) và thiết kế trên cơ sở mức độ phổ biến.
Câu trả lời là: Không, không có "tiêu chuẩn".
Tôi khuyên bạn nên sử dụng 960px cho chiều rộng của mẫu, vì hầu hết độ phân giải màn hình là 1028px, vì vậy thanh cuộn sẽ không xuất hiện và bạn cũng sẽ thấy nền mà bạn đã sử dụng.
Tôi sẽ đề nghị bạn sử dụng 1024px cho chiều rộng tiêu chuẩn. Bởi vì, số lượng máy tính tối đa được xây dựng với màn hình crt và độ phân giải của màn hình này là 1024 * 768px.