6 nguyên tắc phân cấp thị giác cho các nhà thiết kế

Đầu tiên là những tấm bia đá, những cuộn giấy cói và giấy. Sau đó đến màn hình máy tính và máy tính bảng điện tử. Khi công nghệ hiển thị trang phát triển, công việc của nhà thiết kế là sắp xếp nội dung rõ ràng. Nhưng cách tốt nhất là gì? Nói ngắn gọn, phân cấp trực quan.

Dưới đây là định nghĩa về phân cấp trực quan: Phân cấp trực quan là sự sắp xếp các thành phần đồ họa trong một thiết kế theo thứ tự mức độ quan trọng của từng thành phần. Trọng lượng trực quan xác định tầm quan trọng của một yếu tố trong hệ thống phân cấp của thiết kế, truyền đạt cho người xem những gì cần tập trung và theo thứ tự.

Đó là một câu hỏi ngày càng quan trọng, vì các khuôn khổ đáp ứng buộc các nhà thiết kế phải suy nghĩ về nhiều trang khác nhau cùng một lúc. Đối mặt với văn bản dày đặc và khoảng thời gian chú ý ngắn, các nhà thiết kế đã phát triển 6 nguyên tắc để hướng mắt người đọc đến những thông tin quan trọng nhất.

Này 6 nguyên tắc của hệ thống phân cấp thị giác sẽ giúp bạn thiết kế mọi thứ từ tài liệu quảng cáo đến ứng dụng, đảm bảo trải nghiệm đọc tích cực cho người dùng cuối.

1. Đọc mẫu
_

Tất cả các nền văn hóa đọc từ trên xuống và hầu hết các nền văn hóa đọc từ trái sang phải. Nhưng trong khi kiến ​​thức đó là quan trọng đối với thiết kế trang, các nhà thiết kế biết rằng nhiệm vụ phức tạp hơn nhiều.

Các nghiên cứu gần đây đã chỉ ra rằng mọi người quét một trang đầu tiên để biết liệu họ có quan tâm hay không, trước khi quyết định đọc nó. Các mẫu quét có xu hướng có một trong hai hình dạng, “F” và “Z” và bạn có thể tận dụng điều này trong thiết kế của mình.

F-Patterns

F-pattern áp dụng cho các trang truyền thống, nhiều văn bản như bài báo hoặc bài đăng trên blog. Người đọc quét xuống phía bên trái của trang, tìm kiếm các từ khóa thú vị trong các tiêu đề căn trái hoặc các câu chủ đề đầu tiên, sau đó dừng lại và đọc (ở bên phải) khi họ tìm thấy điều gì đó thú vị. Kết quả trông giống như một chữ F (hoặc E, hoặc một cái gì đó có nhiều thanh ngang hơn; nhưng thuật ngữ “F” đã bị mắc kẹt).

Làm thế nào bạn có thể sử dụng điều này? Căn chỉnh thông tin quan trọng của bạn ở bên trái và sử dụng các tiêu đề ngắn, được in đậm, dấu đầu dòng và các yếu tố thu hút sự chú ý khác để chia nhỏ các khối đoạn văn.

Z-pattern

Z-pattern áp dụng cho các loại trang khác, như quảng cáo hoặc trang web, nơi thông tin không nhất thiết phải được trình bày trong các đoạn khối. Đầu tiên, mắt người đọc sẽ quét qua đầu trang, nơi thông tin quan trọng có thể được tìm thấy, sau đó bắn xuống góc đối diện theo đường chéo và thực hiện điều tương tự trên phần dưới của trang.

Các nhà thiết kế web thường xây dựng các trang của họ để tuân theo hành vi này một cách rõ ràng, đặt thông tin quan trọng nhất vào các góc và định hướng thông tin quan trọng khác dọc theo các thanh trên cùng và dưới cùng và kết nối theo đường chéo.

Trong thiết kế dưới đây cho hội nghị Build 2010, các yếu tố quan trọng bao gồm biểu trưng (phía trên bên trái), nút “đăng ký ngay bây giờ” (phía trên bên phải) và danh sách diễn giả (phía dưới), tất cả đều được đặt ở vị trí chiến lược hình chữ Z.

2. Vấn đề kích thước
_

Cái này đủ đơn giản: mọi người đọc những thứ lớn hơn trước. Nếu mắt bạn chuyển sang “màn trình diễn” trước khi “vỡ vụn” trong quảng cáo dưới đây cho nhà hát Young Vic, thì bạn nên liên hệ với một nhà tâm lý học tri giác ngay lập tức: bạn có thể kiếm được một số tiền tốt khi trải qua thử nghiệm như một trường hợp bất thường hiếm gặp.

Điều thú vị là xu hướng này thực sự đủ mạnh để ghi đè quy tắc từ trên xuống. Trong hình trên, “crack” ghi đè lên “time to action” vì nó lớn hơn và ở bên trái (vì vậy quy tắc từ trái sang phải rất hữu ích).

Nhưng trong trang dưới đây từ Báo cáo Thường niên: Chiến dịch Nhân quyền 2012 (do Column Five Media thiết kế), chúng tôi đọc bản in khổ lớn “Đấu tranh cho Bình đẳng trên Đường mòn Chiến dịch” trước dòng chữ ngay trên nó, “Bầu cử 2012”.

“Bầu cử 2012” là thứ tự thông tin cấp cao nhất: nó cho chúng ta biết chủ đề chung mà thông tin dưới đây bao gồm. Nhưng nhà thiết kế quyết định rằng tiêu đề bài báo thú vị hơn đối với người đọc và kích thước nó để được đọc đầu tiên.

3. Không gian và kết cấu
_

Một cách khác để thu hút sự chú ý là cung cấp cho nội dung không gian rộng rãi để thở. Nếu vẫn còn một khoảng trống đáng kể xung quanh một nút hoặc các dòng trong khối văn bản được theo dõi rộng rãi, thì những phần tử này sẽ dễ nhìn thấy hơn đối với người đọc.

Như bạn thấy trong hình ảnh bên dưới (một phần của trang web DrawtoClick), khoảng cách có thể là một giải pháp thay thế hoặc bổ sung trang nhã cho việc sử dụng kích thước. Ở đây, điểm bán hàng, “Notre agence vous compleagne…”, có một phông chữ rất nhỏ, nhưng nó được bao quanh bởi một khoảng trắng thừa báo hiệu tầm quan trọng của nó. Bên dưới, các cụm từ “Le Compendre”, “Le Réaliser” và “Le Partager” được nhấn mạnh hơn khi được tách ra khỏi không gian xung quanh.

Khi mọi người nói về “kết cấu” liên quan đến hệ thống phân cấp trực quan, họ không đề cập đến các hiệu ứng kết cấu bằng hình ảnh. Đúng hơn, loại “kết cấu” này đề cập đến sự sắp xếp tổng thể hoặc kiểu không gian, văn bản và các chi tiết khác trên một trang. Ví dụ này của Bright Pink minh họa khái niệm một cách độc đáo:

Trong hình ảnh đầu tiên, từ “Thể thao” được xếp hạng cao hơn so với “cầu lông” do cao hơn, lớn hơn và táo bạo hơn. Trong hình ảnh thứ hai, hai từ tương đương nhau, nhờ vào một hình chữ nhật màu đen làm nổi bật “cầu lông” và đặt nó vào không gian riêng của nó.

Trong hình ảnh thứ ba, hình nền nguệch ngoạc làm gián đoạn không gian của “Thể thao” chứ không phải “cầu lông” và do đó dẫn đến sự đảo ngược trong đó “cầu lông” cao nhất trong hệ thống phân cấp. Sự tiến triển như vậy rất khó dự đoán, vì vậy các nhà thiết kế thường đánh dấu nó theo một ý nghĩa tổng thể về “kết cấu”.

4. Trọng lượng kiểu chữ và ghép nối
_

Lựa chọn kiểu chữ là rất quan trọng để thiết lập hệ thống phân cấp trực quan. Trong số các thuộc tính quan trọng nhất của một kiểu chữ là trọng lượng – chiều rộng của các nét tạo nên các chữ cái của nó – và kiểu dáng, như serif và sans serif. Các sửa đổi khác như in nghiêng cũng có thể đóng một vai trò nào đó.

Lưu ý rằng kiểu chữ ảnh hưởng như thế nào đến thứ tự phân cấp của các từ trong thiết kế web dưới đây cho The Tea Factory: “loại trà hoàn hảo để giữ ấm cho bạn” là tiêu điểm, nhưng sự khác biệt về độ đậm của kiểu chữ và độ nghiêng, ngoài vị trí của từ, tạo ra một năng động hơn, ít tuyến tính hơn, trải nghiệm đọc. “Hãy xem lựa chọn của chúng tôi”, lời kêu gọi hành động, được nhấn mạnh hơn văn bản phía trên do định cỡ và khoảng cách.

Trong một số trường hợp, mục tiêu là trình bày nhiều loại thông tin cũng cấp thiết như nhau. Đặt tất cả ở cùng một kích thước và trọng lượng sẽ tạo ra sự tương đương, nhưng cũng sẽ khiến nó trở nên đơn điệu. Phân biệt các kiểu chữ là một cách để tránh điều này, như trên trang bìa tạp chí Trendi bên dưới.

Ở đây, năm đoạn giới thiệu xung quanh phần ngoại vi của trang đều bằng nhau trên hệ thống phân cấp, nhưng đạt được sự đa dạng bằng cách thay đổi giữa hai kiểu chữ được ghép nối tốt – một là serif trọng lượng trung bình, còn lại là sans serif nhẹ nhưng cao.

5. Màu sắc và sắc thái
_

Đây là một điều không cần bàn cãi khác: màu sắc tươi sáng nổi bật so với màu bị tắt tiếng hoặc thang độ xám, trong khi các sắc thái sáng hơn có vẻ “xa cách” hơn và do đó giảm dần trên hệ thống phân cấp so với các sắc thái đậm hơn, đậm hơn. Trang web về Nơi họ ở tương phản ánh sáng màu vàng và màu của bút đánh dấu dựa trên lưới đen trắng để tạo ra hiệu ứng nổi bật:

Trang web Guggenheim sử dụng màu sắc để làm nổi bật các thông tin quan trọng như lựa chọn địa điểm, danh sách các triển lãm hiện đang được xem và các liên kết đến các triển lãm đặc biệt.

Mặt khác, trang web của Bảo tàng Whitney thiết lập hệ thống phân cấp trong một kiểu chữ, trọng lượng và tông màu duy nhất (màu đen) bằng cách sử dụng tông màu (ám chỉ việc bổ sung màu trắng vào tông màu cơ bản, làm cho nó nhẹ hơn). “Cory Arcangel on Pop Culture” rõ ràng nằm bên dưới “New on Whitney Stories” trên hệ thống phân cấp hình ảnh, không chỉ vì nó được đặt thấp hơn mà vì tông màu của nó nhạt hơn, khiến nó ít nổi bật hơn đối với mắt trên nền trắng.

Màu sắc có tầm quan trọng đặc biệt trong thiết kế ứng dụng dành cho thiết bị di động, nơi kích thước màn hình nhỏ sẽ hạn chế khả năng sử dụng các chiến lược khác của bạn như phân biệt kích thước và giãn cách rộng. Trên ứng dụng của Grainger Industrial Supply, nút “tiến hành thanh toán” có màu đỏ, làm cho nó nổi bật so với bất kỳ trang nào mà nó xuất hiện. Ngược lại, thanh “Thu hẹp kết quả tìm kiếm của bạn” có màu xám, khiến nó gần như tương đương trên hệ thống phân cấp với các phần tử khác như thanh tìm kiếm và liên kết sản phẩm.

6. Phương hướng
_

Bố cục trang thường được thiết kế theo lưới các đường dọc và ngang, theo quy ước và vì đây là định dạng dễ đọc nhất. Trong một hệ thống như vậy, một cách mới để thiết lập hệ thống phân cấp xuất hiện: phá vỡ mạng lưới.

Văn bản được sắp xếp trên một đường cong hoặc đường chéo sẽ tự động nổi bật so với văn bản được khóa lưới xung quanh, chiếm vị trí trung tâm. Đây từ lâu đã là một chiến lược hiệu quả trong các quảng cáo như tấm áp phích trạm xe buýt dưới đây của Frost Design.

Bạn nghĩ nguyên tắc phân cấp trực quan nào là quan trọng nhất? Chia sẻ trong các ý kiến!