01 trên 07
Lưu lượng trực quan là gì?
Luồng trực quan mang mắt của người xem thông qua tài liệu theo cách mà tất cả các yếu tố quan trọng nhận được sự nổi bật, và không có gì làm mất tầm nhìn hoặc làm cho người xem mất cảm giác của mảnh. Sử dụng các yếu tố dòng chảy rõ ràng như mũi tên hoặc số là cách phổ biến nhất mà các nhà thiết kế web sử dụng, nhưng có các loại yếu tố khác có thể được sử dụng và sử dụng sai để hướng người đọc di chuyển dọc theo một con đường cụ thể. Các bước trong hướng dẫn này sẽ cho bạn thấy các ví dụ về dòng chảy tốt và xấu và giúp bạn học từ vựng của luồng trực quan trong thiết kế.
Lưu lượng trực quan có thể đạt được bằng nhiều cách:
- Mũi tên
- Hình ảnh hoặc yếu tố văn bản tuần tự
- Phối cảnh
- Gradients
- Thay đổi kích thước
- Đường cong
- Chuyển động trong hình ảnh
- Khuôn mặt - đặc biệt là đôi mắt
Các hình ảnh sau đây sẽ cho bạn thấy một số lỗi thường gặp trong luồng trên các trang Web và cách sửa chúng.
02 trên 07
Luồng văn bản phương Tây từ trái sang phải
Nếu bạn lớn lên đọc một ngôn ngữ phương Tây, bạn đang sử dụng để suy nghĩ rằng văn bản nên di chuyển từ trái sang phải. Vì vậy, khi con mắt di chuyển qua một dòng văn bản, nó di chuyển từ trái sang phải.
Trong hình trên, thác nước chảy theo hướng từ phải sang trái, và dòng chữ đang chảy lên thác nước. Vì tất cả chúng ta đều biết rằng thác nước rơi xuống, có sự ngắt kết nối theo hướng dòng chảy của nước với dòng chảy của văn bản. Mắt của người xem di chuyển theo hướng sai để đọc văn bản.
03 trên 07
Văn bản của bạn nên Flow với hình ảnh
Trong trường hợp này, hình ảnh đã được đảo ngược sao cho văn bản đang chảy theo cùng hướng với nước. Tất cả các yếu tố dẫn dắt mắt người xem xuống với dòng chảy của nước và dòng chảy của văn bản.
04/07
Trái sang phải bằng nhanh
Con ngựa trong bức ảnh này đang chạy từ phải sang trái, nhưng văn bản là tiếng Anh và từ trái sang phải. Các tác động trực quan của đua ngựa một hướng làm chậm tốc độ của toàn bộ tài liệu bởi vì nó đang đi một hướng khác so với văn bản.
Trong văn hóa phương Tây, bởi vì ngôn ngữ của chúng tôi di chuyển từ trái sang phải, chúng tôi đã kết hợp hướng trực quan từ trái sang phải khi tiến lên và nhanh, trong khi từ phải sang trái thì lạc hậu và chậm hơn. Khi bạn đang tạo bố cục với ý nghĩa tốc độ, bạn nên nhớ điều này - và giữ cho hình ảnh của bạn di chuyển theo cùng một hướng với văn bản.
05/07
Đừng ép mắt của người xem chậm lại
Khi ngựa và văn bản đều đi cùng một hướng, tốc độ ngụ ý được tăng lên.
06 trên 07
Xem mắt trong ảnh trên web
Nhiều trang web có ảnh mắc lỗi này - chúng đặt ảnh của một người trên trang và người đó đang tìm cách rời khỏi nội dung. Điều này thậm chí có thể được nhìn thấy trên trang web About.com Web Design trong thiết kế cũ.
Như bạn có thể thấy, ảnh của tôi được đặt bên cạnh một số văn bản. Nhưng tôi đang đi xa khỏi văn bản đó, tôi gần như đã quay lưng lại với nó. Nếu bạn thấy ngôn ngữ cơ thể giữa hai người trong một nhóm, sẽ dễ dàng giả định rằng tôi không thích người tôi đang ở bên cạnh (trong trường hợp này là khối văn bản).
Nhiều nghiên cứu theo dõi mắt đã chỉ ra rằng mọi người nhìn thấy khuôn mặt trên các trang Web. Và các nghiên cứu liên quan đã chỉ ra rằng khi nhìn vào hình ảnh, mọi người sau đó sẽ vô thức theo mắt để xem hình ảnh đang nhìn vào cái gì. Nếu ảnh trên trang web của bạn đang nhìn ra cạnh của trình duyệt, đó là nơi khách hàng của bạn sẽ xem xét và sau đó nhấn nút quay lại.
07/07
Đôi mắt trong bất kỳ ảnh nào phải đối mặt với nội dung
Trong thiết kế mới cho About.com, bức ảnh đẹp hơn một chút. Bây giờ đôi mắt của tôi đang nhìn về phía trước hơn, và có một chút gợi ý rằng tôi đang nhìn sang bên trái của tôi - nơi văn bản được.
Một bức ảnh tốt hơn cho vị trí đó sẽ là một nơi mà vai tôi cũng nghiêng về phía văn bản. Nhưng đây là một giải pháp tốt hơn nhiều so với bức ảnh đầu tiên. Và, đối với các tình huống mà hình ảnh sẽ ở bên phải nội dung cũng như bên trái, điều này có thể là một sự thỏa hiệp tốt.
Cũng nên nhớ rằng, trong khi hình ảnh khuôn mặt của mọi người thu hút sự chú ý nhiều nhất, điều đó cũng đúng với ảnh động vật. Ví dụ, trong cách bố trí mẫu này, tôi có con chó của tôi nhìn trái, nhưng hình ảnh là tuôn ra đúng. Vì vậy, họ đang tìm kiếm trang. Bố cục này sẽ được cải thiện nếu tôi thay đổi hướng của chó để họ nhìn vào giữa màn hình.