Phân cấp thị giác trong thiết kế giao diện website by LEWISKIU_ab

PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ

GIAO DIỆN WEBSITE Visual hierarchy in

website interface design

GIỚI THIỆU Thiết kế đã có từ thời sơ khai, từ thời kỳ đồ đá đến thời kỳ hiện đại ngày nay, chúng ta đã, đang và tiếp tục sử dụng thiết kế để truyền tải những thông điệp quan trọng. Mọi yếu tố trong thiết kế sẽ giúp cải thiện trải nghiệm người dùng và truyền tải thông điệp đó rõ ràng hơn. Trong bài nghiên cứu này, nhóm chúng tôi sẽ tìm hiểu về phân cấp thị giác - một khái niệm được dựa trên lý thuyết tâm lý học của Gestalt đầu thế kỷ 20 của Đức. Đây là một nguyên tắc thiết kế trực quan mà các nhà thiết kế sử dụng để tổ chức nội dung của trang web. Nghiên cứu sẽ đưa ra khái niệm và chỉ ra tầm quan trọng của phân cấp thị giác trong thiết kế giao diện website. Bên cạnh đó, chúng tôi đưa ra mô hình xử lý thông tin thị giác của con người, cách người thiết kế thiết lập luồng thị giác và nhấn mạnh vào các nguyên tắc phân cấp thị giác trong thiết kế giao diện website. Ngoài ra còn đưa ra một số lưu ý trong phân cấp thị giác, một số tip và ví dụ để hiểu rõ áp dụng vào những trường hợp thực tế. Như vậy người thiết kế có thể áp dụng phân cấp thị giác nó để cải thiện thiết kế giao diện website và tối ưu hóa trải nghiệm của người dùng.

OVERVIEW Design has been around since the beginning of time, from the stone age to the modern age, we have been and continued to use the design to communicate important messages. All elements in the design will help improve the user's experience and more clearly convey that message. In this research, our team will be investigating about visual hierarchy- a concept based on Gestalt psychological theory in early 20th century Germany. This is a visual design principle which designers use to organize the content of the website. The study will provide the concept and point out the importance of visual hierarchy in website interface design. In addition, we offer patterns which we process visual information, the way the designer establishes the visual flow and emphasizes the principles of visual hierarchy in website interface design. There are also some notes and some tips, examples to apply in actual cases. Thus, the designer can apply visual hierarchy to improve the website interface design and optimize the user's experience.

MỤC

LỤC 02

MỤC LỤC Mở đầu

Chương 1: Tổng quan về phân cấp thị giác

1. Khái niệm phân cấp thị giác 2. Vai trò của phân cấp thị giác trong thiết kế giao diện website. Chương 2: Phân cấp thị giác trong thiết kế website

1. Cách con người xử lý thông tin thị giác 2. Các nguyên tắc phân cấp thị giác trong thiết kế website 3. Các lưu ý khi phân cấp thị giác trong thiết kế giao diện website Chương 3: Tổng kết

Mở đầu Trong thời đại công nghệ thông tin phát triển mạnh mẽ như hiện nay, internet đã có khắp nơi từ thành phố đến nông thôn, từ miền đảo đến vùng núi đã thu hút tất cả mọi tầng lớp từ già đến trẻ, trai lẫn gái,... ai cũng lên mạng để xem tin tức, tìm hiểu thông tin, giải trí,... Khi mà internet có một sức hút mạnh mẽ như thế thì tầm quan trọng nó mang lại cho sự phát triển của công ty, doanh nghiệp là rất lớn.

Website là thương hiệu của công ty/cá nhân, công cụ hiệu quả để tiến hành các chiến dịch PR và marketing online. Việc thiết kế website giúp nâng tầm thương hiệu của doanh nghiệp/cá nhân đó lên cao hơn gấp nhiều lần vì độ phổ biến vốn có. "Nếu từ 5 - 10 năm nữa bạn không kinh doanh qua internet thì tốt nhất bạn đừng kinh doanh nữa" - Bill Gates đã nói vào năm 2007. Và giờ đây, chúng ta đang sống và làm việc trong thời kỳ của cuộc cách mạng "Công nghiệp 4.0". Cuộc cách mạng này ảnh hưởng mạnh tới mức mà "Bất cứ doanh nghiệp (cá nhân kinh doanh) nào nằm ngoài cuộc cách mạng đều sẽ thất bại".

"Nếu từ 5 - 10 năm nữa bạn không kinh doanh qua internet thì tốt nhất bạn đừng kinh doanh nữa" - Bil Gates đã nói năm 2017

Website đã trở thành bộ mặt, một kênh quan trọng để doanh nghiệp tiếp thị sản phẩm của mình tới mọi nơi trên thế giới. Đầu tiên và quan trọng, website phải có thiết kế đẹp mới có thể hấp dẫn người dùng. Thế nhưng, quan điểm về cái đẹp là một điều rất phức tạp vì nó dựa trên các đánh giá chủ quan. Các website thu hút sẽ không cố gắng làm mọi thứ cùng một lúc, thay vào đó, họ tập trung vào việc bổ sung các yếu tố thực sự mang đến giá trị cho website, tạo nên phong cách và đặc điểm riêng thu hút người dùng và khiến họ nhớ mãi.

Mục đích tối cao của các thiết kế là truyền tải thông điệp mà tổ chức mong muốn đến người dùng hiệu quả nhất có thể. Một trong những yếu tố quan trọng góp phần nâng cao hiệu quả thiết kế của bạn là sắp đặt và phân cấp rõ ràng, bằng việc làm này bạn chỉ cho người xem đâu là điểm quan trọng được nhấn mạnh trong tác phẩm, từ đó truyền tải thông điệp một cách rõ ràng và chuẩn xác.

Để tổ chức nội dung trong giao diện người dùng rõ ràng, nhà thiết kế áp dụng một kỹ thuật nổi tiếng được gọi là: Phân cấp thị giác.

Phân cấp thị giác hay Phân cấp trực quan là một trong những kỹ thuật cốt lõi được áp dụng cho quá trình thiết kế. Nó ban đầu được dựa trên lý thuyết tâm lý Gestalt kiểm tra nhận thức trực quan của người dùng về các yếu tố liên quan đến nhau và cho thấy cách mọi người có xu hướng thống nhất các yếu tố hình ảnh thành các nhóm.

Trong thiết kế giao diện website, chúng ta thường sử dụng 3 phương pháp chính để phân cấp thị giác tốt. Thứ nhất là phân cấp nội dung, thứ hai là phân cấp màu sắc và cuối cùng là phương pháp khoảng cách. Và để phân cấp thị giác trong thiết kế giao diện đạt hiệu quả tốt các nhà thiết kế thường kết hợp các phương pháp với nhau.

Trình bày trực quan các yếu tố giao diện người dùng có ảnh hưởng lớn đến trải nghiệm người dùng của sản phẩm. Nếu các thành phần nội dung trông giống như một mớ hỗn độn, mọi người không thể điều hướng trong một sản phẩm hoặc tương tác với sản phẩm đó một cách chính xác. Hơn nữa, nội dung không có cấu trúc dễ đọc sẽ khiến người dùng không thể đọc lướt nhanh và họ cần phải mày mò tìm kiếm dữ liệu họ đang càn. UX xấu như vậy có thể dẫn đến sự hài lòng của người dùng kém có nghĩa là một sản phẩm sẽ không được nhiều người sử dụng.

Nhiều chữ cái hợp lại thành một từ, nhiều từ hợp lại thành câu văn, câu văn cấu thành đoạn văn và tạo ý nghĩa cho cả một bài văn, thiết kế đồ họa cũng giống như vậy, bằng việc nhào nặn các yếu tố thiết kế, chúng ta tạo ra một sản phẩm truyền thông thị giác mà chỉ bằng việc nhìn người xem có thể hiểu được thông điệp, thông điệp có rõ ràng, dễ hiểu phần lớn thuộc về bố cục của tác phẩm, và sự phân cấp thị giác đóng vai trò rất quan trọng giúp người thiết kế định hướng người xem, kể cho người xem một câu chuyện, thông điệp phi ngôn từ hấp dẫn, thú vị. 05

01 01 TỔNG QUAN VỀ

PHÂN CẤP THỊ GIÁC

Khái niệm

phân cấp thị giác

Theo thuật ngữ cơ bản, Phân cấp thị giác (Visual hierarchy) hay phân cấp trực quan là sự căn chỉnh kích thước và phân phối các yếu tố trong một thiết kế, thứ tự mà con người xử lý thông tin trên một trang, mô tả yếu tố nào chi phối sự chú ý của người dùng và thu hút ánh nhìn của họ nhất.

Phân cấp thị giác là một cách thức thiết kế để tăng cường khả năng ghi nhớ, sức thuyết phục và sự giao tiếp, bằng cách sử dụng typo, màu sắc, hình ảnh.. được phân chia thành các cấp bậc khác nhau. Theo đó tạo nên một thiết kế có mức độ ưu tiên, sự nhấn mạnh và mức độ sáng tối là điểm khởi đầu trong việc tạo nên một sự phân cấp hấp dẫn (điều này đặc biệt đúng với chữ). Phương pháp này tạo nên một sự hấp dẫn thị giác trong việc giao tiếp và có thể được sử dụng một cách vô cùng hiệu quả để truyền đạt và đơn giản hóa thông tin, không chỉ gia tăng sự hiểu biết, mà tạo nên quá một quá trình đọc tràn đầy hứng thú.

Vai trò của phân cấp thị giác trong thiết kế giao diện website. Phân cấp thị giác các thông tin trên một trang web là một yếu tố giúp khẳng định sự khác biệt giữa một trang web có sự ảnh hưởng bởi chiến lược sắp xếp, phân cấp với một trang web nhìn qua chỉ đẹp một cách đơn điệu.

Điều quan trọng là phải tổ chức các yếu tố theo cách mắt người có thể hiểu được chúng. Nhưng không có cách nào đúng để xây dựng một hệ thống phân cấp cụ thể và các nhà thiết kế cạnh tranh phải hoàn thiện các phương pháp khác nhau - hoặc phát minh ra những phương pháp mới - để luôn dẫn đầu các xu hướng thiết kế.

Chúng ta không thể nhấn mạnh mọi thứ. Khi bạn cố gắng làm điều đó, tất cả các yếu tố thiết kế sẽ cạnh tranh để được chú ý và không có gì nổi bật. Ví như tất cả chúng ta đều đang la hét cùng một lúc. Mọi thứ đều lớn hơn, nhưng vẫn không nghe thấy rõ được câu nào. Nhấn mạnh là tương đối. Để một yếu tố nổi bật, yếu tố khác phải đóng vai trò là nền mà từ đó yếu tố đầu tiên trở nên nổi bật. Một số yếu tố cần thống trị những yếu tố khác để thiết kế của bạn hiển thị bất kỳ loại phân cấp trực quan nào.

Vậy nên, phân cấp thị giác là một hệ thống ưu tiên các yếu tố để chúng dễ hiểu. Nếu không có cấu trúc thiết kế hoặc phân cấp thị giác, người dùng có thể bị choáng ngợp và kết quả là không thể tiếp nhận bất cứ thứ gì. Cụ thể, khi không áp dụng một hệ thống thị giác tốt, người dùng website có thể sẽ gặp một số vấn đề phổ biến như là:

Khi quá nhiều thông tin bị sắp xếp quá dày đặc chẳng hạn, người dùng sẽ bị choáng ngợp và khó có thể tiếp nhận được thông tin mà website muốn truyền tải.

Người dùng sẽ bỏ qua trang web vì bản chất của con người rất lười. Họ lười hiểu và có thể tìm cách sử dụng các chức năng, ứng dụng trang web đúng theo trình tự mà đơn vị mong muốn.

Người dùng bị bối rối khi không thể nhận ra được đâu là thông tin chính của trang web, khi đó họ sẽ phải đọc đi đọc lại để hiểu và ghi nhớ thông tin. .

Tóm lại, hệ thống phân cấp thị giác vô cùng quan trọng trong việc kiểm soát việc cung cấp trải nghiệm cho người dùng. Nếu người dùng gặp khó khăn trong việc tìm một vị trí trên website, nhiều khả năng là bố cục của website đang thiếu một hệ thống phân cấp thị giác rõ ràng.

02 PHÂN CẤP THỊ GIÁC

TRONG THIẾT KẾ

GIAO DIỆN WEBSITE

Cách con người xử lý thông tin thị giác Tùy thuộc vào các nền văn hóa mà con người đọc thông tin theo những cách khác nhau nhưng thông thường là đọc từ trên xuống dưới, từ trái sang phải. Tuy vậy, con người vẫn có cách xử lý thông tin thị giác theo một quy luật chung dựa trên 2 mô hình sau:

Mô hình chữ F và Z trong thiết kế

giao diện Layout

Fpattern

Zpattern

MÔ HÌNH CHỮ F

Điều này là phổ biến nhất cho các thiết kế nặng văn bản.

Nó theo hình dạng của chữ ‘F’, bắt đầu từ trên cùng bên trái và di chuyển theo chiều ngang qua phía trên bên phải. Sau đó, người xem quét phía bên trái của trang để tìm kiếm các tiêu đề ngắn hoặc đầu phụ để nhanh chóng quét bên phải.

Trên đây là các bản đồ nhiệt từ các nghiên cứu theo dõi mắt của ba trang web được thực hiện bởi nhóm Nielson Norman.

Các khu vực mà người dùng trông giống nhất có màu đỏ. Các khu vực màu vàng biểu thị ít tầm nhìn hơn, theo sau là các khu vực màu xanh ít được xem nhất.

Các khu vực màu xám không thu hút bất kỳ sự cố định nào. Các bản đồ nhiệt ở trên cho thấy cách người dùng đọc ba loại trang web khác nhau: một bài viết trong phần "Giới thiệu về chúng tôi" của một trang web của công ty (ngoài trái), một trang sản phẩm trên trang web thương mại điện tử (giữa) và kết quả công cụ tìm kiếm trang.

Nếu bạn nheo mắt và tập trung vào các khu vực màu đỏ (được xem nhiều nhất), cả ba bản đồ nhiệt đều hiển thị mẫu F dự kiến. Tất nhiên, có một số khác biệt. Mô hình xem F là một hình dạng thô, chung hơn là một hành vi đồng nhất, hoàn hảo pixel. Ý nghĩa của mô hình F về hệ thống phân cấp trực quan trong thiết kế trang web Người dùng sẽ không đọc kỹ văn bản của bạn theo cách từng chữ. Vâng, một số người sẽ đọc thêm, nhưng hầu hết sẽ không. Hai đoạn đầu tiên phải nêu thông tin quan trọng nhất, mặc dù chúng có thể sẽ đọc nhiều hơn đoạn đầu tiên so với thứ hai. Bắt đầu các tiêu đề phụ, đoạn văn và điểm đạn với các từ mang thông tin mà người dùng sẽ nhận thấy khi quét xuống bên trái nội dung của bạn.

MÔ HÌNH CHỮ Z

Các thiết kế ít dày đặc hơn theo một hình dạng 'Z'.

Liên quan chặt chẽ, bố cục chữ Z gợi ý khách truy cập trên các trang web có lượng nội dung văn bản thấp sẽ bắt đầu ở góc trên cùng bên trái của trang web và quét theo chiều ngang đến góc trên bên phải, sau đó theo đường chéo xuống phía dưới. Ngay trước khi kết thúc với một chuyển động ngang khác đến phía dưới bên phải - tạo thành hình dạng của chữ "Z".

Tùy thuộc vào những gì bạn đang thiết kế, bố cục chữ Z này cho một dấu hiệu tốt mà trong đó các yếu tố quan trọng nhất của bạn nên được đặt theo.

Ý nghĩa của mô hình chữ Z: về hệ thống phân cấp trực quan, chúng ta thường thấy nguyên tắc phân cấp trực quan này ảnh hưởng đến việc thiết kế các trang sản phẩm trên các trang web thương mại điện tử. Bạn cũng có thể sử dụng mẫu quét trang này bằng cách bao gồm các thông tin quan trọng nhất dọc theo mô hình Z mà chuyển động của mắt theo sau.

Trên nhiều trang web, Logo thường ở góc trên cùng bên trái. Điều này đã được chứng minh là tăng nhận dạng thương hiệu và cải thiện điều hướng.

Trên bản in, Logo thường ngồi ở cuối trang cùng với một cuộc gọi hành động cho người xem phải làm gì trước khi họ lật trang. Cả hai đều dựa trên khái niệm dòng chảy thị giác. Là một nhà thiết kế, bạn kiểm soát dòng chảy, đặt các đối tượng theo cách sẽ thu hút mắt đến những thứ cụ thể. Khi thiết kế, hãy tự hỏi ba câu hỏi này:

Đôi mắt của người xem ban đầu sẽ đi (tiêu điểm) ở đâu?

Nơi thứ hai mắt sẽ đi?

Mắt người xem cuối cùng dừng ở đâu? Thiết lập một dòng chảy thị giác để tránh mắt bị nhức mỏi xung quanh thiết kế.

CÁC NGUYÊN TẮC Yếu tố chi phối và tiêu điểm

Sự chi phối

Cách thiết lập sự chi phối

Khi so sánh hai yếu tố bất kỳ trong một thiết kế. Các yếu tố sẽ ngang nhau về mọi mặt hoặc một yếu tố sẽ chiếm ưu thế ở một mức độ nào đó so với yếu tố kia. Yếu tố nổi trội hơn sẽ thu hút ánh nhìn và được chú ý đầu tiên. Nó thậm chí có thể thể hiện một số kiểu kiểm soát đối với phần tử kém ưu thế hơn.

Thiết kế một yếu tố để có nhiều ưu thế hơn yếu tố khác bằng cách tạo cho nó nhiều trọng lượng trực quan hơn. Trọng lượng thị giác của nó càng lớn, thì một yếu tố càng thu hút mắt và thể hiện sự thống trị.

Yếu tố chi phối hơn có thể có trọng lượng trực quan lớn hơn các yếu tố mà nó chi phối. Nó dường như sẽ tác động lực lên những gì xung quanh nó.

Tạo ra sự thống trị thông qua độ tương phản, điểm nhấn và tính tương đối của trọng lượng thị giác. Các yếu tố giống hệt nhau không thể chi phối lẫn nhau. Để có được sự thống trị, một phần tử phải trông khác với những phần tử mà nó muốn chi phối.

Tạo ra sự thống trị thông qua điều hướng trực quan. Ví dụ: bạn có thể bao quanh một phần tử bằng các mũi tên đều trỏ đến phần tử đó. Nếu có đủ tín hiệu định hướng, phần tử có thể trở nên nổi trội ngay cả khi nó có trọng lượng hình ảnh thấp hơn các phần tử khác trên trang.

Tạo ra sự đồng thống trị, trong đó hai yếu tố thống trị cùng tồn tại trong một bố cục. Tuy nhiên, cả hai sẽ cạnh tranh để được chú ý và cuối cùng gây phân tán sự chú ý nếu không có sự cân bằng tổng thể phù hợp trong thiết kế.

Yếu tố

Yếu tố chi phối trong thiết kế là yếu tố có trọng lượng thị giác lớn nhất (hoặc yếu tố mà mọi thứ khác hướng đến). Đây là yếu tố thu hút ánh nhìn đầu tiên, hơn bất kỳ yếu tố nào khác trên trang.

Hãy cẩn thận để không làm cho yếu tố nay nổi trội đến mức che khuất hoàn toàn mọi thứ khác, nhưng hãy làm cho chúng nổi bật trong thiết kế. Yếu tố chủ đạo của bạn là điểm khởi đầu cho câu chuyện bạn đang kể. Đó là điểm khởi đầu trong thiết kế của bạn. Nó sẽ thu hút khách đến nơi đầu tiên mà bạn muốn họ nhìn.

chi phối

Đây là cách bạn bắt đầu cuộc trò chuyện với khách truy cập. Yếu tố chi phối được chú ý đầu tiên và đặt bối cảnh cho những gì được xem tiếp theo. Nó ở trên cùng của hệ thống phân cấp. Nó phải nhấn mạnh thông tin quan trọng nhất của bạn, bởi vì nó có thể là thứ duy nhất mà mọi người sẽ nhìn thấy. Bất kỳ thông điệp nào bạn muốn mọi người truyền đi đều phải được truyền đạt rõ ràng trong hoặc gần yếu tố chi phối của bạn. Nếu không có điểm vào, người xem sẽ phải vất vả hơn để tìm đường vào thiết kế của bạn. Họ sẽ phải tạm dừng và nghĩ xem nên xem ở đâu trước và nghĩ về điều gì thực sự quan trọng trên trang. Việc thiếu điểm vào sẽ làm tăng tải nhận thức đối với khách truy cập. Đừng bắt họ phải suy nghĩ. Cung cấp một điểm vào thiết kế của bạn.

Tiêu

điểm

Tiêu điểm là các khu vực quan tâm, điểm nhấn hoặc sự khác biệt trong bố cục thu hút và thu hút sự chú ý của người xem. Các tiêu điểm trong thiết kế của bạn nên nổi bật nhưng cần được chú ý sau yếu tố chiếm ưu thế nhất. Đối với yếu tố chi phối, bạn có thể tạo tiêu điểm bằng cách cho chúng có trọng lượng trực quan hơn tất cả mọi thứ ngoại trừ yếu tố chi phối - một lần nữa, là tiêu điểm nổi trội nhất của bạn. Bạn cũng có thể tạo hướng trực quan dẫn đến các tiêu điểm khác nhau.

Sự tương phản là một cách tốt để tạo điểm nhấn, bởi vì sự tương phản gây chú ý cho chính nó vì sự khác biệt. Bất kỳ thứ gì có thể tương phản và bất kỳ thứ gì có thể ảnh hưởng đến trọng lượng hoặc hướng thị giác đều có thể được sử dụng để tạo điểm nhấn, giống như cách mà nó có thể được sử dụng để tạo ra yếu tố chi phối. Sự khác biệt chỉ đơn giản là mức độ.

Kích thước và tỉ lệ

Before

Các yếu tố quan trọng nhất thường lớn hơn và nổi bật hơn những yếu tố ít quan trọng hơn. Trong một thiết kế hiệu quả, tất cả các yếu tố không được có cùng trọng lượng trực quan; nếu vậy, tất cả họ sẽ tranh giành sự chú ý và người xem sẽ không biết phải xem ở đâu trước

After

Các đối tượng có kích thước lớn hơn - cụ thể là phạm vi có thể nhấp - sẽ dễ tương tác hơn. Nói cách khác, người dùng tốn ít công sức hơn để nhấp vào các mục lớn hơn. Tuy nhiên phải có sự hài hòa giữa các yếu tố. Các yếu tố lớn hơn đáng chú ý hơn, nhưng không phải lúc nào cũng tốt hơn. Các yếu tố quan trọng nhất phải là yếu tố lớn nhất nhưng khi đi sâu vào chi tiết sẽ trở nên phức tạp

Sự khác biệt về kích thước phải sao cho khách truy cập có thể xem các mặt hàng theo thứ tự quan trọng và thứ tự mổ xẻ của mọi thứ là hiển nhiên. Phóng to kích thước của một đối tượng và tỷ lệ là một trong những cách dễ dàng và hiệu quả nhất để mang lại tầm quan trọng trực quan cho nó

Cách tạo cấu trúc phân cấp thi giác với

không gian Sử dụng tỉ lệ và độ tương phản để tiết kiệm không gian Khi được bảo quanh bởi các yếu tố nhỏ hơn, một yếu tố có kích thước trung bình sẽ xuất hiện lớn hơn. Phạm vi kích thước từ nhỏ nhất đến lớn nhất sẽ xác định khả năng mở rộng của trang

Kích thước bổ sung với chủ nghĩa tối giản Các thiết kế tối giản làm nổi bật kích thước tốt và tăng trọng lượng cho chúng. Chủ nghĩa tối giản càng phát triển như một kỹ thuật thiết kế, chúng ta càng thấy nhiều yếu tố đơn lẻ, quy mô lớn chiếm vị trí trung tâm Nếu chỉ muốn tập trung sự chú ý của người dùng vào một hoặc hai hình ảnh chính, hãy thử cắt bỏ các yếu tố phụ khác. Sau đó phóng to các yếu tố chính để nhấn mạnh vẻ đẹp của những yếu tố còn lại.

Màu sắc và tương phản

Màu sắc của chúng ta được thu hút một cách trực quan, đặc biệt là khi nó được sử dụng một cách chiến lược để làm nổi bật thông tin hoặc hình ảnh quan trọng. Có nhiều cách sáng tạo mà màu sắc và độ tương phản có thể được áp dụng trong thiết kế để hướng ánh nhìn của người xem, bao gồm

Nhiệt độ Màu sắc có thể làm mát (như xanh lam và xanh lục), ấm (như đỏ, cam và vàng) hoặc trung tính (như đen, trắng, xám và đôi khi là nâu / be). Trộn các nhiệt độ màu - đặc biệt là các nhiệt độ màu có độ tương phản cao có thể thu hút nhiều sự chú ý của thị giác.

Giá trị Độ đậm hay nhạt của một màu được gọi là giá trị của nó. Giống như nhiệt độ, các màu có giá trị khác nhau có thể tương phản với nhau để tạo hiệu ứng ấn tượng, trong khi các màu có giá trị tương tự có xu hướng có trọng lượng thị giác bằng nhau hơn

Độ bão hòa Màu ở dạng tinh khiết nhất, sáng nhất có độ bão hòa 100%. Nó càng gần với màu xám, nó càng được khử bão hòa. Sử dụng màu sáng hoặc màu tắt (riêng lẻ hoặc kết hợp với nhau) có thể là một cách chiến lược để tạo ra những vị trí có độ tương phản cao hoặc thấp trong một thiết kế.

Kiểu chữ

Đối với bất kỳ thiết kế nào liên quan đến văn bản (hầu hết), hệ thống phân cấp kiểu chữ là một thành phần của hệ thống phân cấp trực quan.

Có một hệ thống phân cấp kiểu chữ rõ ràng sẽ nâng cao khả năng đọc và khả năng sử dụng của nội dung của chúng ta. Trong một trang web khi thực hiện phân cấp thông tin, ta thường phân nhóm để sắp xếp chúng thành ba phần quan trọng

Tiêu đề Tiêu đề của bài viết cần chọn kiểu chữ phù hợp vì nó là phần quan trọng nhất trong thiết kế và là yếu tố đầu tiên thu hút người xem. Để đạt được hiệu quả thu hút thị giác, ta sẽ chọn size chữ to và đậm hơn, tạo sự tương phản lớn với các phần thông tin khác của trang web

Tiêu đề phụ

Giúp tổ chức nội dung thành các phần hoặc nhóm các thông tin liên quan lại với nhau. Chúng không nên nổi bật như kiểu chữ cấp một, nhưng chúng sẽ giúp phân biệt rõ ràng các phần khác nhau của nội dung

Nội dung

Là thông điệp hoàn chỉnh trong nội dung. Nó có thể dài hoặc ngắn. Nó có thể là một ghi chú ngắn hoặc toàn bộ bài báo. Chú ý không sử dụng cỡ chữ quá nhỏ vì nội dung vẫn cần phải dễ đọc.

Khoảng trắng

Khi bạn mong muốn đưa vào trong thiết kế càng nhiều thông tin càng tốt mà không để một số không gian trống trong bố cục sẽ làm thiết kế có nguy cơ lộn xộn, khó hiểu. Đó là bởi vì không gian màu trắng rất cần thiết để phân tách và tổ chức các yếu tố trong thiết kế của bạn và giúp nó trông có trật tự và cân đối.

Các loại khoảng trắng

Khoảng trắng nhỏ ( Micro white space) Khoảng không gian nhỏ giữa các phần tử đồ họa như chữ cái, dòng văn bản, đoạn văn, nút và biểu tượng.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

khoảng trắng lớn( Macro white space)

không gian giữa các phần tử đồ họa lớn hơn của thành phần thiết kế dưới dạng cột văn bản và đồ họa. Đóng vai trò như một vùng chứa của toàn bộ

thiết

kế,

nhấn

mạnh

các

phần

khác nhau của bố cục thiết kế.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Khoảng trắng bị động

(Passive white space) Khoảng không gian trống xuất hiện tự nhiên ví dụ như khoảng cách giữa các chữ cái hoặc các dòng hoặc khoảng không xung quanh một đối tượng.

Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Khoảng trắng chủ động

(Active white space) Không gian được thêm vào trong một bố cục thiết kế có chủ ý, chức năng chính là tạo điểm nhấn hoặc cấu trúc cho thiết kế .

Vai trò của khoảng trắng Việc sử dụng không gian âm như một thành phần của thiết kế sẽ làm cho thiết kế trở nên hiệu quả hơn

Nhấn mạnh, tập chung các yếu tố thiết kế chính, làm cho phần đó dễ dàng nhận biết và hiển thị rõ ràng bằng cách thêm nhiều không gian âm hơn.

Phân cấp thông tin tăng khả đọc và hiểu nội dung văn bản.

năng dễ

Nhóm các yếu tố bằng không gian âm giúp người dùng dễ dàng phân biệt các thành phần khác nhau của thiết kế bao gồm hình ảnh văn bản hoặc các yếu tố thương hiệu.

Nguyên tắc gần nhau

Các đối tượng đứng gần nhau được cho là gắn kết hơn những đối tượng ở xa và được não bộ gom chúng thành một nhóm. Như vậy các yếu tố khác nhau được nhìn nhận chủ yếu theo một nhóm hơn là những yếu tố riêng biệt.

Theo nguyên tắc này, việc nhóm các thông tin tương đồng, những yếu tố liên kết được đặt gần nhau, trong khi những yếu tố không liên quan cách xa sẽ giúp tăng cường phân cấp thị giác, bố cục thoáng và khiến cho người dùng dễ dàng quét thông tin, đào sâu vào phần nội dung hơn.

Căn chỉnh

Căn chỉnh là cách sắp xếp văn bản hoặc đồ họa trên một trang. Việc căn chỉnh hợp lý có thể làm cho thiết kế tổng thể trở nên hấp dẫn có tính thẩm mỹ hơn.

Căn chỉnh thúc đẩy tổ chức các thành

phần

thiết

kế

tạo

sự

thống nhất trong sản phẩm, điều này

sẽ

giúp

điều

dướng

người

dùng, giúp họ dễ dàng thấy điều họ muốn.

Căn chỉnh

Căn lề

Căn lề là vị trí của các yếu tố thiết kế được căn chỉnh theo cạnh của bố cục

Căn trái

Căn phải

Căn trên

Căn dưới

Căn giữa

Căn giữa là các phần tử được căn với giữa trang, dọc theo trục trung tâm

Căn giữa theo chiều ngang

Căn giữa theo chiều dọc

Sử dụng căn chỉnh như một quy tắc chung,trong

hợp

có

thể phá vỡ căn chỉnh để tạo ra sự

một

số

trường

sự

chú ý, thu hút người dùng.

Sự lặp lại

Khả năng bẩm sinh của con người đó là phát hiện ra những thay đổi về hình dạng, kiểu mẫu và trạng thái xung quanh kết hợp với khả năng nhìn thấy sự đồng nhất về hình dáng, màu sắc và kiểu mẫu - sự tương đồng giữa một nhóm đồ vật này với một nhóm đồ vật khác.

Nó không chỉ giúp hiểu được các mẫu mà còn đánh giá chính xác được độ tương phản

cho

phép

tiếp

thu

và

thích

ứng

nhanh hơn

Sử dụng yếu tố lặp lại trong thiết kế là minh họa các yếu tố nhất định giống nhau như thế nào và có thể dựa vào các yếu tố đó để chúng vẫn giống nhau trong suốt bản thiết kế và trên tất cả các yếu tố thiết kế tương tự.

Các yếu tố lặp lại này có thể được sử dụng để thêm điểm nhấn hoặc tính nhất quán trên các khu vực nhất định hoặc để làm thiết kế trông đẹp hơn.

Đối với một thiết kế hợp nhất, lặp lại một số yếu tố cho dù đó là phông chữ, màu sắc, hình dạng hoặc kích thước của toàn bộ bố cục. Phong cách nhất quán giúp xác định rõ ràng hệ thống phân cấp trực quan của bất kỳ thiết kế.

Một ví dụ dễ hiểu về mức độ ảnh hưởng của sự lặp lại trong thiết kế đó là các siêu liên kết.

Các siêu liên kết luôn được gạch chân bằng màu xanh lam, trải qua quá trình phát triển, với những tiến bộ to lớn trong ngành thiết kế thì người dùng web vẫn mong muốn một siêu liên kết ít nhất phải được gạch chân nhưng lý tưởng nhất là có cùng màu với màu quen thuộc đã được hình thành

Dòng gợi ý chuyển động Để hướng sự chú ý đến chủ thể, các dòng gợi ý chuyển động cũng có thể kéo người xem về phía xa một cách trực quan. Về cơ bản là tạo ra luồng thị giác vì một đường kẻ sẽ dẫn mắt một cách tự nhiên theo đường đó và xuyên qua hình ảnh.Khi được sử dụng trong các dòng dẫn đầu thiết kế web có thể giúp người xem xử lý thông tin được cung cấp theo đúng trình tự hoặc bạn có thể đưa người xem đến với “lời kêu gọi hành động”.

Có một số cách để đạt được các dòng gợi ý chuyển động: các mẫu, màu sắc và các đường. Con người vốn tư duy theo cách trực quan chứ không phải là xử lý dữ liệu. Khi tiếp nhận và xử lý thông tin một cách đồng đều, mọi người sắp xếp những gì họ nhìn thấy theo “mối quan hệ trực quan”.

Do đó, một đường có thể hướng mắt và nhanh chóng cảm nhận được hình ảnh cho phép não bộ xử lý những gì dọc theo đường đó đến điểm lấy nét. Không chỉ nhanh hơn, mà não có thể duy trì sự chú ý lâu hơn trong khi xử lý những gì dọc theo dòng vì nó được tập trung.

Lưới trong thiết kế

Các thiết kế hiệu quả nhất được sáng tác thông qua một số loại lưới . Lưới điển hình nhất là lưới mô-đun cổ điển.

Các nghệ sĩ, nhiếp ảnh gia và nhà thiết kế đồ họa từ lâu đã sử dụng quy tắc một phần ba để cải thiện sự cân bằng tổng thể của các tác phẩm. Quy tắc liên quan đến việc phân chia một bố cục thành một lưới gồm hai đường ngang và hai đường thẳng đứng hoặc chín phần riêng biệt.

Các yếu tố hình ảnh quan trọng được đặt dọc theo các đường, nhấn mạnh bốn điểm mà các đường gặp nhau.

Các bố cục ngoài trung tâm thường được coi là thẩm mỹ hơn khi so sánh với các thiết kế trong đó tiêu điểm chính được đặt ở giữa khung.

Quy tắc khuyến khích sử dụng không gian âm, sự gần gũi thông minh của các yếu tố và căn chỉnh hiệu quả. Không chỉ phổ biến nhất, mà lưới mô-đun nói chung là thiết kế dễ đọc nhất. Tuy nhiên, đôi khi cách tốt nhất để tạo sự nhấn mạnh là phá vỡ các quy tắc.

Thiết

kế

lưới

thay

thế,

thay vì lưới ngang dọc cổ

điển,

các

nhà

thiết

kế có thể chọn bố cục theo

hướng

chéo

để

đảm bảo sáng tạo của họ

nổi

bật

trên

một

trang và thu hút sự chú ý chung của người xem.

Một số nhà thiết kế sẽ chọn phá vỡ hoàn toàn lưới, đặt ngẫu nhiên các yếu tố trực quan trên một trang để nổi bật nhất với văn bản được khóa lưới xung quanh. Đó là văn bản xung quanh có thể trong cùng một thiết kế hoặc trên một trang xung quanh.

Phối cảnh

Bằng cách sử dụng phối cảnh , nhà thiết kế có thể tạo ra một ảo giác về chiều sâu khác nhau, từ một vài inch đến vài dặm.

Bởi vì chúng ta thấy những ảo ảnh tương tự trong thế giới thực, chúng ta thường cảm nhận các vật thể lớn hơn gần hơn các vật thể nhỏ hơn tương tự và do đó, chúng thường thu hút sự chú ý trước bất kỳ đối tượng nào khác trên một trang.

Quy tắc số lẻ

Quy tắc số lẻ cho phép nhà thiết kế nhấn mạnh các hình ảnh cụ thể bằng cách sử dụng nhóm đối tượng có số lượng lẻ. Bằng cách đặt các đối tượng lân cận ở hai bên của tiêu điểm chính một số lượng bằng nhau sẽ tạo điểm nhấn ở yếu tố trung tâm.

Phổ biến nhất là ba hoặc hai yếu tố ở bên ngoài cùng cân bằng tiêu điểm ở chính giữa, tạo nên sự cân bằng đơn giản, tự nhiên.

Before

After

03 TỔNG KẾT

TỔNG KẾT

Khi các công nghệ và giao diện người dùng thay đổi, nhu cầu về kỹ năng thiết kế trong thiết kế trực quan tiếp tục tăng lên. Với các ví dụ mới về giao diện người dùng điển hình xuất hiện hàng năm, liệu sự hiểu biết cơ bản của chúng ta về Phân cấp thị giá, nhận thức và bố cục có thay đổi?

Hệ thống phân cấp thị giác phục vụ như cấu trúc chính của thiết kế. Nó hướng mắt người xem đến trọng tâm của thiết kế một cách hợp lý và có ý nghĩa. Ngoài việc điều hướng đôi mắt người xem thông qua thiết kế, việc sử dụng phân cấp thị giác có thể củng cố nội dung truyền tải và gợi lên một tập hợp cảm xúc cụ thể. Hệ thống phân cấp nếu không được thực hiện tốt khiến người xem của bạn có cảm giác trống rỗng và vô tổ chức.

Phân cấp thị giác hiệu quả trên website không chỉ thiên về thẩm mỹ. Nó nhằm mục đích giải quyết các vấn đề về chuyển hướng, các hệ thống tương tác cũng như trải nghiệm thân thiện với người dùng. Để tạo ra một hệ thống phân cấp thị giác hoàn thiện, các nhà thiết kế cần thiết lập tất cả các yếu tố UI tập trung vào chức năng và mục đích kinh doanh.

Tóm lại, phân cấp thị giác

là nền tảng của kiến trúc thông tin hiệu quả. Khi các yếu tố giao diện người dùng được cấu trúc và sắp xếp, mọi người thích sử dụng một sản phẩm và sẽ hiệu quả hơn trong việc giải quyết các vấn đề của họ. Hơn nữa, hệ thống phân cấp thị giác cải thiện mạnh mẽ hệ thống định vị vì mọi người có thể định hướng tốt hơn trong một sản phẩm.

Khái niệm hiện đại về nhận thức thị giác bắt nguồn không chỉ trong khoa học mà còn trong tâm lý học. Do đó, bất kể giao diện người dùng thay đổi liên tục, cách chúng ta nhìn và nhận biết thông tin hình ảnh vẫn sẽ như cũ. Các quy tắc nền tảng của hệ thống phân cấp thị giác là rất quan trọng đối với bất kỳ thiết kế hình ảnh nói chung hay trang web nói riêng nào, vì chúng chỉ dẫn làm thế nào thông tin với ý nghĩa nhúng có thể được truyền đạt nhanh nhất có thể.

Ngày nay có hơn 200 kích cỡ màn hình khác nhau được sử dụng. Đầu tiên, đó là internet, trình duyệt, máy tính để bàn, sau đó đến điện thoại di động và máy tính bảng, và bây giờ có các công nghệ như TV tương tác, thiết bị thực tế ảo,... Thiết kế thực sự đẩy ranh giới của phương tiện truyền thông kỹ thuật số vẫn còn ở giai đoạn sơ khai.

Hệ thống phân cấp thị giác là một khái niệm đơn giản và việc hiểu lý thuyết thực sự dễ dàng hơn một nhà thiết kế có khả năng thực tế trong việc thực hiện một số bố cục có cấu trúc tốt. Tuy nhiên, để được sáng tạo trong một phương tiện mới trong khi duy trì thiết kế tốt vẫn là một thách thức lớn.

PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ

GIAO DIỆN WEBSITE Nhóm 6

Tạ Kiều Oanh - B18DCPT175

Đỗ Tâm Linh An - B18DCPT001

Nguyễn Thị Hồng Hạnh - B18DCPT072

Tạ Thị Hiền - B18DCPT081

Vũ Thị Hòa - B18DCPT090

Trần Thị Linh - B18DCPT138