Một trang web cuộn ngang dường như không trực quan. Nó dường như không thân thiện với người dùng như các trang web cuộn dọc, nhưng sự thật là cuộn ngang có thể phù hợp với thiết kế trang web của bạn nhân dịp nào đó.

Tạo một trang web cuộn ngang là một bài tập khi mà những ý tưởng giường như khá là nghèo nàn. Lựa chọn thiết kế này là một xu hướng nhỏ nhưng đang phát triển. Nó là một cái gì đó khá lạ và đôi khi đó là những gì thiết kế trang web của bạn cần.

Tuy nhiên, việc tạo một trang web hiệu quả và có thể sử dụng với bố cục cuộn ngang là một thách thức. Hãy làm theo các mẹo và thủ thuật này để biết liệu một trong các bố cục này có phù hợp với bạn hay không, nếu có, hãy tìm hiểu cách tạo trang web cuộn ngang giúp tạo nên 1 website mới mẻ và sáng tạo.

Sideways Scrolling có thể được sử dụng để thu hút sự quan tâm

Gelateri Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Tạo một trang web với bố trí cuộn bên (còn được gọi là điều hướng ngang) đã là một kỹ thuật thiết kế web gây tranh cãi trong một thời gian dài. Nó từ lâu đã được coi là một trong những thiết kế web lớn nhất faux-pas.

Tuy nhiên, việc di chuyển ngang đã diễn ra kể từ lần lặp lại sớm nhất của Internet. Nó chỉ mới bắt đầu thực sự trở lại thực sự mạnh mẽ. Một số xem chúng là bố cục thiết kế web hiện đại và mới nhất.

Điều gì đã thúc đẩy sự thay đổi thái độ này? Vâng, với máy tính bảng, chuyển động vuốt đã cho phép các trang web cuộn ngang trở lại hiệu quả. Chuyển động này làm cho thao tác cuộn ngang nhiều hơn khả thi và thân thiện.

Conti-Ducco Các ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Các trang web cuộn ngang có lợi thế và thách thức của họ. Họ có thể tạo bố cục thú vị hơn. Chúng thường khiến người dùng xem trang web của bạn lâu hơn một chút.

Tuy nhiên, điều đó có nghĩa là trang web cuộn ngang của bạn cần phải được thiết kế tốt. Bạn không thể chỉ thiết lập để sử dụng bố cục cuộn bên. Bạn cần suy nghĩ cẩn thận. Nó không nhất thiết phải là một hình thức thiết kế trang web dễ dàng để tạo ra.

Bạn có chắc chắn muốn sử dụng cuộn ngang không?

Ví dụ về trang web cuộn ngang hình ảnh Grand-Image

Trước khi bạn bắt đầu theo hướng này, hãy đảm bảo trang web cuộn ngang là dành cho bạn. Cách bố trí này, như đã nói ở trên là gây tranh cãi khá nhiều. Đó là một chủ đề chính của sự tranh chấp và được tán thành bởi một số người ủng hộ trải nghiệm người dùng. Lý do thực sự duy nhất để sử dụng bố cục trang web cuộn ngang là thu hút sự chú ý của người dùng.

FireShot-Capture-2334-Glo Các ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Một nghiên cứu gần đây của chuyên gia kinh nghiệm người dùng Jakob Nielsen đã tiết lộ rằng chỉ 1% người dùng xem xét thông tin ban đầu được ẩn bởi cuộn ngang. Tuy nhiên, khi bạn thiết kế một trong những trang web này ngay, nó tạo ra trải nghiệm người dùng độc đáo và hấp dẫn. Bạn có thể sử dụng hiệu ứng thị sai cho kết quả tuyệt vời với bố cục cuộn bên.

Cách các trang web cuộn ngang có thể trở nên tuyệt vời cho trải nghiệm người dùng

Studio-Björk Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Có bốn tình huống cụ thể trong đó trang web cuộn ngang tạo trải nghiệm người dùng tốt:

  • Khi nó hiển thị một số hình ảnh, như trong một danh mục đầu tư thiết kế hoặc trang web nhiếp ảnh.
  • Khi nó hiển thị thông tin trong một không gian rộng lớn không dễ nhìn thấy, như bản đồ.
  • Khi nó hiển thị các trang trình bày hoặc các phần thông tin rời rạc trên các ứng dụng.
  • Khi nó hiển thị một danh mục lớn các mặt hàng hoặc sản phẩm theo cách mà các danh mục sản phẩm khác nhau có thể dễ dàng được hiển thị.

Screenshot002 Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Thiết kế trang web cuộn ngang tốt hơn cho các chức năng trang web nhất định so với các trang web khác. Các trang web thư viện thường sử dụng nó và do đó làm một số trang web danh mục đầu tư. Đây là một cách thú vị để cho phép khách truy cập trang web cuộn qua một tập hợp các hình ảnh.

Đôi khi các nhà bán lẻ cực kỳ thích hợp sử dụng cũng như một cách để có một cái nhìn tươi mới. Một số nhà bán lẻ điển hình hơn sử dụng nó để hiển thị các tính năng của các sản phẩm cụ thể mà họ muốn làm nổi bật.

Horizontal Scrolling là gì?

Benoît-Nihant-Chocolatier Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Tính nhất quán trên thiết bị – Các trang web cuộn ngang cho phép có giao diện nhất quán trên thiết bị di động và màn hình máy tính. Việc vuốt ngang đã trở nên rất phổ biến trên các thiết bị di động.

Nhiều ứng dụng sử dụng nó. Vì thiết kế tập trung vào thiết bị di động ngày càng quan trọng, hãy chọn sử dụng cuộn ngang làm nền tảng cho trang web của họ để tiết kiệm tài nguyên và thời gian.

Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Horizontal scrolling cho phép người dùng xem mẫu nội dung và cho phép họ lựa chọn vuốt qua hoặc nhấp để tìm hiểu thêm. Sẽ tốt nếu khách truy cập trang web không cuộn qua toàn bộ website. Bạn chỉ cần chắc chắn rằng không có nội dung quan trọng nào bị ẩn đi sau khi bạn sử dụng web cuộn ngang.

Tiết kiệm không gian màn hình dọc – Thay vì hiển thị tất cả nội dung của trang web cùng một lúc trên một trang cực kỳ dài, trang web cuộn ngang giới thiệu cho người dùng thông tin trong các thông tin nhỏ hơn, dễ tiếp nhận hơn. Một trang web di chuyển ngang, Bạn có thể thêm nội dung theo cả chiều dọc và chiều ngang.

Vấn đề kiểm soát với cuộn Sideways

Thời trang khi đi du lịch-thời tiết Ví dụ trang web cuộn ngang để sử dụng làm cảm hứng

Mục tiêu của bạn với việc thiết kế bất kỳ trang web nào là đảm bảo rằng thiết kế trang web không làm cho người dùng thấy khó chịu. Nội dung nên được điều hướng, điều hướng thông qua trang web và quá trình xem nội dung đó không nên làm cho người bị tập trung quá.

Ví dụ về trang web cuộn ngang của Norebro để sử dụng làm cảm hứng

Rất nhiều trang web cuộn ngang dựa trên chức năng trình duyệt cuộn. Điều này không phải ý tưởng tốt nhất, nhưng bạn cũng không nên loại bỏ hoàn toàn chức năng trình duyệt. Nếu không có nó, người dùng không có hướng dẫn để đi ra khỏi website của bạn.

Thay vào đó, bao gồm một loạt các trợ giúp điều hướng trên cuộn ngang. Điều này bao gồm các mũi tên và các cuộn lớn có thể phóng to trên một trang web. Họ sẽ làm cho trải nghiệm người dùng mượt mà và thoải mái hơn.

Mẹo và thủ thuật cho thiết kế trang web cuộn ngang tốt

Squares_ Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Lập kế hoạch cẩn thận

Điều này đúng với bất kỳ thiết kế trang web nào, không chỉ các trang web cuộn ngang. Nó có ý nghĩa đặc biệt đối với việc di chuyển ngang, tuy nhiên vì nó rất dễ làm sai. Đừng lười biếng và bắt đầu làm mà không có kế hoạch.

Dành thời gian để tạo ra các mô hình và các mẫu giấy. Quyết định vị trí và cách mọi thứ sẽ khớp với nhau. Có rất nhiều điều để suy nghĩ. Đặc biệt bởi vì thiết kế trang web cuộn ngang không phải là phổ biến, nó đòi hỏi nhiều suy nghĩ hơn các trang web dọc.

Điều hướng ngang

Archetype-Wine Các ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Vấn đề lớn nhất đối với người dùng các trang web cuộn ngang là cách chúng được điều hướng. Ngay cả khi chúng trông tuyệt vời, chúng có thể sẽ gây nhầm lẫn và khiến khách truy cập dời đi nếu họ cảm thấy khó khăn khi đi loanh quanh trang web.

Điều hướng cho trang web cuộn ngang của bạn phải rõ ràng và đẹp mắt. Bạn nên nhìn và hành xử như khách truy cập trang web mong đợi để biết được mình cần phải làm gì. Họ không cần phải bấm vào một thanh cuộn bên và trượt nó dọc theo. Rất nhiều người dùng sẽ sử dụng bánh xe chuột hoặc phím mũi tên để cuộn.

Hầu hết đã quên rằng bạn có thể nhấp vào thanh cuộn và sử dụng để di chuyển qua một trang web. Mọi người sử dụng thanh cuộn như một thước đo trực quan về vị trí của họ trên một trang web, đặc biệt là đối với những người trẻ tuổi, những người có nhiều khả năng trở thành đối tượng mục tiêu của trang web cuộn ngang của bạn.

Điều hướng cơ bản

ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Theo dõi các nguyên tắc cơ bản của bạn về điều hướng trang web tốt. Nó phải được nhìn thấy rõ ràng và dễ sử dụng. Thực đơn thường là một ý tưởng hay. Nó cho phép người dùng biết họ đang ở đâu và họ có thể quan tâm đến đâu.

Đừng để chúng cuộn qua trang để tìm nó. Điều này mang lại cho bạn tốt nhất của cả hai thế giới. Họ có thể thưởng thức thiết kế trang web cuộn ngang độc đáo của bạn nhưng có thể tự do điều hướng mà không gặp bất kỳ sự cố nào.

Sử dụng Nhãn

Charles-and-Ray-Eames Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Các trang web cuộn ngang không trực quan đối với người dùng dưới dạng các trang web cuộn dọc. Sử dụng nhãn miễn phí nhưng thông minh để giúp họ. Điều này sẽ giúp tránh làm cho trang web quá khó hiểu và khiến khách truy cập bị bỏ quên.

Cho phép khách truy cập của bạn biết các mục trên trang là gì, thay vì để họ nhấp vào để tìm hiểu. Cho phép họ truy cập những gì họ thực sự muốn từ trang web của bạn thay vì dành thời gian để tìm hiểu cách trang web của bạn hoạt động.

Người dùng thực sự muốn mọi thứ được viết ra cho họ. Họ không muốn cảm thấy hay nhìn ngu ngốc khi họ không biết gì đó. Họ cần để có thể tìm ra những gì đang xảy ra trên trang web và có thể làm như vậy một cách nhanh chóng.

Không bỏ qua nội dung trang web

0WQ8GWb

Nó có thể được hấp dẫn để cho thiết kế trang web di chuyển ngang của bạn nói cho chính nó. Họ có xu hướng được sử dụng trên các trang web trendier, đặc biệt là khi họ đang nặng hình ảnh. Điều này là chấp nhận được, tất nhiên, nhưng bạn cũng nên nhớ rằng trang web của bạn có một mục đích ngoài việc chỉ là một bài tập trong thiết kế độc đáo.

“Nhìn vào tất cả những thứ này mát mẻ” có thể được vui vẻ, nhưng nó hiếm khi là lý do bạn đang tạo ra một trang web. Bạn cần đảm bảo tất cả thông tin liên quan về trang web dành cho mũ, bao gồm thông tin về doanh nghiệp, sản phẩm, dịch vụ, cách liên hệ với bạn, biểu mẫu đặt hàng, v.v.

Một trang web cuộn ngang, càng tuyệt càng tốt, sẽ không bù đắp cho việc thiếu nội dung quan trọng. Nội dung là vua. Bạn cần “nội dung truyền nhiễm” để thu hút khách truy cập quay lại trang web của bạn. Đó là cách duy nhất họ thực sự sẽ xem xét một tie tại trang web di chuyển ngang thiết kế của bạn.

Coding

Vœux-2018 Ví dụ về trang web cuộn ngang để sử dụng làm cảm hứng

Coding thiết kế cuộn dọc hơn thiết kế di chuyển ngang. Nó chỉ trực quan hơn trong bối cảnh đó. Đó là thoải mái hơn và những gì các nhà thiết kế được sử dụng nhiều hơn để. Do đó, khó có thể mã hóa một trang web cuộn ngang và sẽ yêu cầu nỗ lực nhiều hơn một chút. Bạn có thể thậm chí không biết làm thế nào để làm điều đó được nêu ra.

Có một số hướng dẫn có thể giúp bạn cùng với mã hóa một trang web cuộn ngang. Có thể bạn sẽ cần phải chia nhỏ nó thành các phần tử HTML và CSS cần thiết. Học cách viết mã cho một hiệu ứng cuộn bên có thể kết thúc là một dự án cho chính nó – đó là cái gì đó khác mà bạn cần phải xem xét trước khi bạn bắt đầu thiết kế một trang web cuộn ngang.

Kết luận về thiết kế trang web cuộn ngang

Trang web cuộn ngang có thể phù hợp với thiết kế trang web của bạn. Nó có rất nhiều thử thách và không phải lúc nào cũng đúng, nhưng đó là một cách khác và nguyên bản để tạo một trang web hiển thị thông tin.

Xem thêm Thủ thuật website

Được đề xuất cho bạn

Hướng dẫn thêm Plugins chat message facebook vào website

Bài viết này mình sẽ hướng dẫn các bạn tích hợp thanh chat message facebook vào website củ…