Cách lên kế hoạch sắp xếp nội dung cho thiết kế đáp ứng
Trong một bài đăng gần đây, tôi đã thảo luận về cách nội dung trực quan liên quan tới thiết kế bố trí. Tuy nhiên, chủ đề này rất chi tiết và chia thành nhiều chủ đề phụ, một trong số đó là tổ chức trực quan cho bố trí đáp ứng.
Trong bài đăng này, tôi muốn tìm hiểu sâu hơn về nội dung đáp ứng để xem xét một số thực tiễn tốt nhất cho sắp xếp lại nội dung cho màn hình nhỏ hơn. Trong thiết kế UI & UX, không có câu trả lời đúng duy nhất cho mọi dự án nhưng có xu hướng hoạt động tốt, và từ những xu hướng này, bạn có thể xây dựng ý tưởng của riêng mình.
Sắp xếp lại lưới vào danh sách
Mỗi trang web sử dụng một số loại lưới cho dù nó có thể nhìn thấy hay không. Nội dung trong một lưới vững chắc thường nhóm lại với nhau theo chiều ngang trên màn hình rộng hơn, nhưng điều này không có ý nghĩa trên các thiết bị nhỏ hơn. Biện pháp khắc phục tốt nhất là phá vỡ các lưới này trên các màn hình nhỏ hơn và chuyển đổi các mục thành danh sách.
Ví dụ 1: Hội đồng thành phố Wellington
Hãy xem trang web của Hội đồng thành phố Wellington, nơi sử dụng một số phần theo kiểu lưới trên trang chủ.
Có một slideshow nhỏ các liên kết vuông mà giảm khi cửa sổ trình duyệt thay đổi kích thước. Phần chân trang cũng trở nên nhỏ hơn, và cuối cùng chuyển đổi thành một danh sách liên kết dọc.
Trên điện thoại rất nhỏ với chiều rộng 320px, bạn cần thiết kế cho kích thước thiết bị. Trong trường hợp iPhone, thiết bị cao hơn rộng hơn nên việc sắp xếp nội dung theo cách đó có ý nghĩa.
Ví dụ 2: Bánh mì kẹp thịt Mooyah
Hãy xem trang chủ của Mooyah và thử thay đổi kích thước bố cục. Có một khu vực trình chiếu nhỏ chứa ba mục trên màn hình máy tính để bàn, nhưng cái này co lại để chỉ hiển thị một mục trên thiết bị di động (thêm nhiều trang ẩn vào tiện ích).
Hai hộp quảng cáo quảng cáo ứng dụng & menu Mooyah luôn được đặt cạnh nhau cho đến khi màn hình đủ nhỏ sắp xếp lại chúng theo chiều dọc.
Các “Kết nối với chúng tôi!” phần cũng sắp xếp lại nội dung sao cho mỗi bài xã hội lấy càng nhiều phòng càng tốt. Nói chung, màn hình rộng là màn hình rộng nhất và màn hình điện thoại thông minh là cao nhất.
Ví dụ 3: Thị trường chủ đề
Khi thiết kế bố trí với lưới, bạn nên xem xét cả hai phong cách bố trí rộng và cao trước khi viết một dòng mã. Bằng cách này, bạn sẽ được chuẩn bị để xây dựng các điểm dừng có ý nghĩa.
Một trang có bố cục lưới đầy đủ nên giảm kích thước của hộp trước khi phá vỡ chúng trên một dòng mới. Ví dụ: Chợ chủ đề có một chiều rộng tối đa cố định 1240 và lưới chứa bốn khối mỗi hàng.
Khi màn hình nhỏ hơn, các khối này giảm chiều rộng, nhưng cuối cùng phá vỡ đến để lại ba hộp mỗi hàng. Ở kích thước nhỏ nhất, bạn nhận được một hộp mỗi hàng và nó có nhiều phòng cho văn bản và hình ảnh tỏa sáng.
Luôn có sự cân bằng của giữ càng nhiều thông tin trong tầm nhìn càng tốt kết hợp với nhu cầu làm cho văn bản dễ đọc. Bạn càng xây dựng bố cục lưới càng dễ tìm thấy điều này cân bằng sắp xếp nội dung.
Ẩn hoặc xóa cột
Màn hình rộng hơn và hỗ trợ thêm trình duyệt cho phép các nhà phát triển xây dựng bố cục cực kỳ phức tạp. Tôi thường thấy blog với ba hoặc thậm chí bốn cột chiếm một phần tốt của màn hình.
Tuy nhiên, các thiết bị nhỏ hơn cần một luồng nội dung có ý nghĩa theo chiều dọc. Tôi đã tìm thấy hai lựa chọn cho xử lý sidebars quá mức:
- Thả chúng bên dưới nội dung chính
- Ẩn chúng hoàn toàn
Ví dụ 1: Dừng bấm
Hãy xem trang web Stop Press. Nó có bốn cột dọc trên màn hình máy tính để bàn của tôi.
Cột bên trái là một menu điều hướng dọc, cột tiếp theo là cột nội dung chính với các bài viết gần đây. Sau đó, chúng tôi có hai cột thanh bên khác nhau tràn thêm “qua một bên” Nội dung.
Khi cửa sổ trình duyệt thay đổi kích thước, các cột này giảm dần kích thước. Việc đầu tiên phải làm là điều hướng bên trái bị ẩn đằng sau biểu tượng menu hamburger.
Điểm dừng tiếp theo ẩn cột giữa cùng với các nút chia sẻ xã hội hàng đầu. Cuối cùng, trên màn hình nhỏ nhất, thanh bên phải hoàn toàn biến mất chỉ để lại cột trung tâm chính nội dung.
Không có nội dung thanh bên nào xuất hiện bên dưới nội dung chính. nó là hoàn toàn ẩn khỏi tầm nhìn, và đây là một lựa chọn hoàn toàn chấp nhận được giảm tải trang và để giữ chiều cao thanh cuộn ở kích thước vừa phải.
Mặt khác, nhiều blog không di chuyển thanh bên dưới nội dung chính giống như trên Concept Art Empire có các bài đăng liên quan trong thanh bên cuối cùng giảm xuống dưới nội dung.
Ví dụ 2: Blog Wishpond
Blog Wishpond cũng vậy loại bỏ hoàn toàn thanh bên từ màn hình trên các khung nhìn nhỏ hơn. Khu vực thanh bên này thường chứa quảng cáo, hình thức đăng ký và liên kết bài đăng liên quan. Không có nội dung này là quan trọng nhưng nó có thể tăng thêm giá trị cho khách truy cập.
Tôi thích theo dõi phương pháp lai nơi tôi di chuyển thanh bên dưới nội dung, nhưng cũng ẩn một vài mục trong thanh bên qua một điểm dừng nhất định.
Ví dụ: nếu tôi có ba khối quảng cáo trong bố cục đầy đủ, tôi có thể ẩn hai trong số các không gian quảng cáo đó trên thiết bị di động. Điều này làm cho nội dung thanh bên có thể truy cập nhưng không làm lộn xộn trang với nội dung quá mức.
Ví dụ 3: Madame Gautier
Tôi cũng thích cách Madame Gautier sử dụng chúng “Tin mới nhất” thanh bên trên trang chủ. Nó cuối cùng giảm xuống dưới nội dung, và chiếm một vị trí xem đầy đủ trên trang.
Hầu như mọi trang web sẽ có ít nhất một thanh bên trong thiết kế. Cho dù đây là một thanh bên trên toàn trang web hay chỉ là một cái gì đó xuất hiện trên một mẫu trang, phong cách thiết kế bên cạnh là phổ biến vì nó phù hợp với nhiều nội dung hơn trên màn hình.
Đó là lựa chọn của bạn cách xử lý nội dung. Bạn có thể thả thanh bên xuống thấp hơn, ẩn hoàn toàn hoặc sử dụng kết hợp hai kỹ thuật này. Nhưng bạn nên lựa chọn dựa trên sự liên quan của thanh bên, và nó sự cần thiết đến trang.
Điều chỉnh và ép biên
Sẽ luôn có một điểm nội dung không thể được ép hơn nữa, và một phần cần phải giảm xuống dưới cái khác.
Bởi điều chỉnh tỷ suất lợi nhuận trước khi hạ nội dung trên trang, bạn cung cấp cho người đọc phạm vi nội dung rộng hơn để chọn.
Ví dụ 1: Một thế giới
Chân trang trên One World là một ví dụ tuyệt vời. Nó có liên kết chân trang nổi đúng với một mẫu đăng ký email bên trái.
Khi bố cục thay đổi kích thước, lề và phần đệm giữa các phần tử này co lại. Các cột liên kết xích lại gần nhau hơn, và hình thức đăng ký nhỏ hơn một chút, quá.
Qua một điểm nào đó, nó có ý nghĩa với thả các liên kết bên dưới mẫu đăng ký, và đưa ra chân trang nhiều chỗ để thở.
Vâng, nó làm cho trang dài hơn và vâng, phải mất nhiều công sức hơn để cuộn xuống đến mức đó, nhưng tại các điểm dừng nhỏ hơn này, bạn có thể cho rằng người dùng là trên các thiết bị định hướng thẳng đứng.
Ví dụ 2: Đảo vàng
Một ví dụ khác mà tôi yêu thích là trang chủ Golden Isles phong cách điều hướng độc đáo. Khi bạn thay đổi kích thước cửa sổ trình duyệt, các liên kết điều hướng siết chặt với nhau. Cuối cùng họ ngắt từ một dòng duy nhất thành hai hàng, sau đó xuống thành các cột với kích thước rất nhỏ.
Các mục khác trên trang theo cùng một mô hình. Ví dụ này cho thấy sức mạnh của thay đổi kích thước lề trước khi sắp xếp lại hoàn toàn bố cục.
Dòng chảy dọc trên màn hình nhỏ hơn
Nội dung trang nên chảy tự nhiên, và căn dọc có ý nghĩa trên điện thoại di động. Điều này có nghĩa là bạn cần xem xét các khối nội dung trong trang để cập nhật phong cách nội dung cho phù hợp. Điều này bao gồm các đoạn văn, tiêu đề, khối, danh sách không có thứ tự và cả hộp nội dung tùy chỉnh.
Ví dụ 1: BodyBu dựng.com Bài đăng đơn
Lấy ví dụ bài đăng BodyBu dựng này sử dụng hộp nhỏ để thể hiện tập luyện glute khác nhau.
Những hộp này bao gồm hình thu nhỏ ở bên phải để chứng minh bài tập. Trên màn hình nhỏ hơn, những hình thu nhỏ này phá vỡ một dòng mới, và cuối cùng chồng lên nhau.
CSS đáp ứng của bạn nên xem xét các chi tiết vụn vặt này cho mọi trang của trang web.
Ví dụ 2: Hội chợ Vanity
Để biết ví dụ lớn hơn, hãy xem trang chủ Vanity Fair sắp xếp lại hoàn toàn thanh trượt câu chuyện đặc trưng. Trên màn hình toàn màn hình, các tiêu đề liệt kê các câu chuyện với một hình ảnh đặc trưng hiển thị sang một bên. Khi trình duyệt thay đổi kích thước nhỏ hơn, phần câu chuyện hàng đầu này trở thành một băng chuyền trượt.
Giao diện chính nó thay đổi hoàn toàn bằng cách thêm điều hướng dấu chấm, mũi tên và hình ảnh đặc trưng cho mỗi câu chuyện trong danh sách. Danh sách các bài báo toàn màn hình của họ là nhiều hơn “theo chiều dọc”, nhưng cách bố trí này khó hơn khi vận hành trên màn hình di động, vì vậy thay đổi nó thành băng chuyền trượt là một lựa chọn tốt hơn.
Suy nghĩ thêm về dòng chảy của người dùng thay vì lưu lượng nội dung của bạn. Nội dung không phải luôn luôn bị buộc phải bố trí theo chiều dọc trên màn hình nhỏ. Chỉ cần nghĩ về cách tổ chức nội dung theo cách hỗ trợ trải nghiệm duyệt dọc.
Bớt tư tưởng
Thiết kế đáp ứng là điều cần thiết trong những ngày này, và mọi nhà thiết kế và phát triển web nên hiểu cách thức hoạt động của nó. Khách truy cập mong đợi tất cả các trang web được thân thiện với thiết bị di động. Bất cứ khi nào tôi vấp vào một trang web không phản hồi, tôi co rúm lại khi nhìn thấy thanh cuộn ngang đó.
Thực hiện theo các mẹo trong bài này cho hoạch định chiến lược thiết kế để sắp xếp lại nội dung cho trải nghiệm người dùng tốt nhất có thể trên tất cả các thiết bị.
