Từng là phần quan trọng nhất của bất kỳ thiết kế trang web nào, nền của trang web có thể được sử dụng theo nhiều cách để giúp tạo trải nghiệm người dùng tốt hơn.
Ngày nay, việc tạo nền phù hợp khó khăn hơn trước đây và đặt ra một số thách thức mới, đồng thời hạn chế một số tiềm năng có thể làm nền khác.wise sẽ có.
Ví dụ: nền ở những lần trước thực sự có thể được sử dụng như một phần thực tế của thiết kế. Ví dụ: bạn có thể đặt mũi tên lên đó để hướng sự chú ý của người xem đến điều gì đó quan trọng.
Tại sao mọi thứ đã thay đổi là vì nhu cầu responsive thiết kế cũng như sự đa dạng của các kích cỡ màn hình và loại màn hình khác nhau mà mọi người có thể đang sử dụng.
Kết quả là nền đã trở thành một yếu tố ít quan trọng hơn trong thiết kế trang web ngày nay và khá nhiều trang web không có nền tảng chính thức nào cả.
Hình nền có thực sự quan trọng? Để tìm hiểu, chúng tôi đã kiểm tra 30 trang web được xếp hạng hàng đầu (không bao gồm các trang web lặp lại) và kết quả rất thú vị.
Như bạn có thể thấy từ hình ảnh trên, các trang web được xếp hạng hàng đầu hoàn toàn không bận tâm đến hình nền và dường như điều đó không gây hại cho họ chút nào về sự chấp nhận của người dùng.
Điều này trái ngược với suy nghĩ thông thường liên quan đến thiết kế trang web, nhưng thật khó để tranh luận với những sự thật phũ phàng. Thật ngạc nhiên, trang web đầu tiên trong danh sách có nền sẽ không hoạt động cho đến khi bạn đạt đến vị trí thứ 10, tức là Twittervà nền đó chỉ hiển thị nếu bạn chưa đăng nhập.
Trong 30 trang web hàng đầu năm 2017, các trang web duy nhất có hình nền phù hợp là:
- Twitter, có nền chụp ảnh (xếp thứ 10)
- Live (Outlook), với nền đồng màu (xếp thứ 12)
- NetFlix, với nền ghép (xếp thứ 21)
- WordPress, với nền đồng màu (xếp thứ 26th)
- Bing, có nền tảng về nhiếp ảnh (xếp thứ 29th)
- Tumblr, với nền nhiếp ảnh (xếp thứ 30th)
Vì vậy, chỉ có 20% trong số 30 trang web hàng đầu có hình nền, và những trang có hình nền đó đều nằm cuối danh sách.
Ưu điểm duy nhất của nền trang web là nó giúp duy trì cảm giác nhận dạng trang web trên nhiều trang, nhưng vì có những yếu tố khác cũng có thể đạt được mục tiêu này và có thể tốt hơn nên đó không thực sự là một lợi thế lớn.
Nhược điểm là rất nhiều. Hình nền giới thiệu thêm những thách thức khi nói đến trang web responsiveness, và có thể yêu cầu cập nhật thường xuyên để tránh trở nên cũ kỹ.
Một thách thức khác đối với nhà thiết kế hiện đại là ngoài nền tĩnh, giờ đây còn có thể tạo nền video. Nếu bạn chọn cách thứ hai, điều quan trọng là phải biết bạn đang làm gì vì nhiều người dùng sẽ thấy nền video được thiết kế kém gây khó chịu.
Với rất nhiều lý do để không sử dụng hình nền, bạn có thể quyết định đi theo bước chân của những trang web được xếp hạng hàng đầu đó và từ bỏ toàn bộ ý tưởng về hình nền một lần và mãi mãi. Nhưng nếu bản tóm tắt nhấn mạnh rằng trang web cần có nền tảng thì bạn có thể làm gì? Đó là những gì chúng tôi sẽ cố gắng giải quyết trong phần còn lại của bài viết này.
Hình nền nên được chứa
Nội dung phải luôn nằm trên một lớp phía trên nền trang. Nếu bạn không tách các phần tử trang của mình thành các lớp khác nhau, điều đó có thể gây ra vấn đề cho bạn khi cần thay đổi điều gì đó.
Cách tốt nhất là sử dụng sự tách lớp này càng nhiều càng tốt. Ví dụ: logo của trang web có thực sự cần được đưa trực tiếp vào nền không? Thông thường, sẽ hợp lý hơn nếu đặt logo ở một lớp riêng biệt. Bằng cách này, nếu logo cần được cập nhật, nó có thể được cập nhật độc lập với toàn bộ nền.
Sử dụng các lớp theo cách này có nghĩa là bạn sẽ phải làm nhiều việc hơn trong khâu sáng tạo nhưng lại làm ít việc hơn ở khâu bảo trì. Nó cũng mang lại cho bạn quyền kiểm soát tối đa, vì bạn có thể giấu mọi thứ, di chuyển chúng hoặc khiến chúng hoạt động khác nhau tùy theo nhu cầu của bạn bất cứ lúc nào.
Hình ảnh này thể hiện cấu trúc lý tưởng cho một mẫu thiết kế nền:
Trong mỗi lớp (ngoại trừ lớp cơ sở), có khả năng tạo các lớp bổ sung để có mức độ phân tách lớn hơn nếu bạn cần chúng.
Bạn càng tạo ra nhiều mức độ tách biệt thì bạn càng có thể đạt được nhiều quyền kiểm soát hơn. Bạn có thể cảm thấy điều đó không quan trọng với mình lúc này, nhưng sau này nó thường xảy ra.
Điều quan trọng nhất cần hiểu là “nền” là bất cứ thứ gì không phải là nội dung. Vì vậy, văn bản hoặc hình ảnh có mục đích xuất hiện trên trang nhưng không phải là nội dung được tính là một phần của nền, nhưng không phải ai cũng phân loại chúng theo cách đó.
Framing
Quay lại những ngày đầu của thiết kế web, việc tạo khung chỉ là một vấn đề đơn giản để tìm ra vị trí của nội dung so với nền. Trong ngày này responsive tuy nhiên, thiết kế thường phức tạp hơn thế.
Với responsive thiết kế, bạn chỉ có hai lựa chọn để giải quyết vấn đề đóng khung. Tùy chọn đầu tiên là chia tỷ lệ nội dung và hình nền tương ứng với kích thước màn hình có sẵn. Điều này là tối ưu khi tính toàn vẹn của thiết kế là yếu tố quan trọng nhất, mặc dù đây sẽ là một tình huống khá hiếm gặp.
Tùy chọn thứ hai là loại bỏ dần các phần của nền hoặc thậm chí toàn bộ nền, trong tình huống phổ biến hơn khi mức độ dễ đọc của nội dung quan trọng hơn tính toàn vẹn của thiết kế.
Nhân tiện, vấn đề về “tính toàn vẹn của thiết kế” chỉ đơn giản có nghĩa là thiết kế luôn trông giống nhau, bất kể nó được xem trên loại màn hình nào. Ngược lại là nội dung luôn trông (ít nhiều) giống nhau bất kể nó được xem trên loại màn hình nào.
Sử dụng tỉ lệ cho responsiveNess
Khi bạn sử dụng tỷ lệ để giữ khung hình đồng nhất trên các loại thiết bị và hướng khác nhau, nó sẽ duy trì tính toàn vẹn của thiết kế của bạn, nhưng kết quả có thể không phải lúc nào cũng như những gì bạn mong đợi hoặc thậm chí mong muốn, đặc biệt nếu bạn sử dụng nền ảnh.
Hãy xem một ví dụ về kỹ thuật này đang hoạt động. Bắt đầu với Samsung Galaxy S5 ở chế độ dọc (lưu ý rằng những hình ảnh này được thu nhỏ để phù hợp với bài viết, vì vậy văn bản bạn có thể thấy ở đó thực sự có thể đọc được trên chính thiết bị).
Đây là giao diện ở chế độ ngang (gần như luôn tốt hơn nếu cầm điện thoại theo hướng ngang cho mọi việc ngoại trừ gọi điện thoại, tuy nhiên mọi người vẫn nhất quyết cầm điện thoại của họ theo hướng dọc.
Như bạn có thể thấy, bố cục hoàn toàn ổn khi được chia tỷ lệ, ngay cả khi bạn chỉ có 640 x 360 pixel để làm việc. Tiếp theo chúng ta có iPad ở hướng dọc.
Và phong cảnh.
Điều bạn sẽ nhận thấy khi sử dụng tỷ lệ là có rất ít sự khác biệt giữa các thiết bị và độ phân giải khác nhau, ngoại trừ việc có thể có rất nhiều không gian dọc bị lãng phí trên chế độ xem dọc.
Thực sự sẽ tốt hơn nếu sử dụng các phương pháp khác nhau trên phần nền và phần nội dung, sao cho các mục menu sẽ bao bọc thành lưới 2×2 thay vì luôn giữ nguyên bố cục 1×4, nhưng lý do nó không được thực hiện theo cách đó là vì không thể dự đoán được sẽ có bao nhiêu không gian theo chiều dọc.
Do đó, lợi thế của việc chia tỷ lệ là khi bạn muốn đảm bảo rằng một số thành phần luôn ở trong tầm nhìn, bất kể hoàn cảnh có thể xảy ra như thế nào.
Sử dụng ẩn và hiển thị theo từng giai đoạn responsiveNess
Một kịch bản thực tế hơn và kịch bản mà hầu hết các nhà thiết kế sẽ muốn sử dụng hầu hết thời gian là một thiết kế trong đó nền (hoặc các phần của nó) có thể bị loại bỏ dần nếu không có đủ chỗ để hiển thị nó, vì vậy nội dung trang web luôn nhận được sự chú ý tối đa.
Dưới đây là một ví dụ về sự khác biệt khi sử dụng phương pháp này. Chúng ta sẽ sử dụng các thiết bị và hướng tương tự để minh họa. Đầu tiên là ảnh chân dung của Samsung Galaxy S5.
Toàn cảnh Samsung Galaxy S5.
Chân dung iPad.
Phong cảnh iPad.
Ở đây bạn có thể thấy sự khác biệt đáng kể giữa các thiết bị. Màn hình nhỏ của Samsung Galaxy S5 không cho phép hiển thị nền, bất kể thiết bị được giữ ở hướng dọc hay hướng ngang và những gì hiển thị đều được điều chỉnh để phù hợp với không gian có sẵn.
Khi cùng một trang web được xem trên iPad, nền luôn được hiển thị bất kể hướng nào, nhưng có một số khác biệt về nội dung được nhìn thấy.
Những ý tưởng tốt nhất cho thiết kế nền (theo thứ tự)
1. Màu đặc (hoặc không màu)
2. Chụp ảnh (kéo dài)
3. Ngói nhỏ (liền mạch hoàn hảo)
4. Gạch lớn (liền mạch hoàn hảo)
Điều bạn nên tránh là lát nền ảnh trừ khi việc đó có thể được thực hiện theo cách không gây chú ý. Kéo giãn thường là cách tốt nhất đối với nền ảnh hoặc để giới hạn chúng trong một không gian được xác định trước.
Thời đại của nền lấp lánh lớn gần như đã chết ngoại trừ các trang web chuyên biệt chỉ dành cho việc xem trên desktop. Hầu hết các hình nền được thiết kế cho desktops sẽ không đẹp khi xem trên điện thoại.
Một cách giải quyết khác mà bạn có thể làm là thiết lập một số lượng lớn các điểm ngắt trong tệp CSS của mình và thiết kế theodivinền kép cho mỗi điểm dừng, nhưng như thường lệ, bạn gặp phải thách thức là không bao giờ có thể tính được không gian dọc sẵn có, ngay cả khi đã biết loại thiết bị.
hình ảnh tiêu đề lịch sự của
Nhận xét Responses 0