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ác, nhận thức và bố cục đã thay đổi?
Các quy tắc nền tảng của nhận thức trực quan là rất quan trọng đối với bất kỳ thiết kế hình ảnh 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ể. Tuy nhiên, vì thiết kế trực quan là anh em họ gần gũi của thiết kế đồ họa, các tiêu chuẩn này đã được thiết lập cho phương tiện in ấn và vẫn chưa được xác định lại cho kỹ thuật số.
Một cái gì đó giống như một trường Bauhaus kỹ thuật số của Bau có khả năng thiết lập các nguyên tắc thiết kế mới chưa được hình thành. Khi mọi người trải nghiệm giao diện người dùng theo một cách hoàn toàn khác với in ấn, các quy tắc về phân cấp và bố cục trực quan không chỉ có niên đại, họ chỉ đơn giản thu gọn trong giao diện người dùng.
Phần lớn, các nhà thiết kế vẫn có xu hướng coi màn hình là một vật thể hai chiều tĩnh, và thách thức đối với các nhà thiết kế tương tác là đổi mới ngoài việc áp dụng các định dạng in đơn giản cho các dự án truyền thông kỹ thuật số của họ. Nhưng trước khi các thiết kế mới có thể tiến lên, một sự hiểu biết cơ bản về hệ thống phân cấp thị giác, nhận thức và bố cục cần phải được xem xét lại.
Hầu hết hệ thống phân cấp thiết kế trên web ban đầu đến từ thiết kế dựa trên in, chẳng hạn như bố cục báo.
Phân cấp trực quan: Một cách hiểu mới về thành phần trực quan cho các giao diện tương tác
Hệ thống phân cấp thị giác là gì và tại sao nó quan trọng? Hệ thống phân cấp trực quan là việc đưa ra nội dung trong một tác phẩm để truyền đạt thông tin hiệu quả và truyền đạt ý nghĩa.
Hệ thống phân cấp trực quan hướng người xem đến thông tin quan trọng nhất trước tiên, sau đó đến nội dung thứ cấp.
Được thiết lập thông qua việc sử dụng thích hợp kích thước, màu sắc, hình dạng, khoảng cách, tỷ lệ và định hướng, ý nghĩa, khái niệm và tâm trạng của một tác phẩm được truyền tải thông qua việc sử dụng sáng tạo các yếu tố đồ họa xác định thứ bậc thị giác.
Làm thế nào để các nhà thiết kế sử dụng kích thước, màu sắc, hình dạng và định hướng để truyền đạt ý nghĩa và tâm trạng trong một thiết kế?
Hệ thống phân cấp trực quan rất quan trọng đối với mọi loại thiết kế hình ảnh, cho dù đó là một trang đích cần hướng dẫn khách truy cập hay điều hướng của giao diện người dùng di động. Sự hiểu biết của người dùng về mọi yếu tố được xác định dựa trên các yếu tố khác trong bố cục và bối cảnh của chúng. Các yếu tố cấu thành được xử lý phù hợp để hình thành các mối quan hệ trực quan và từ đó thiết lập hệ thống phân cấp thị giác trên một thiết kế.
Màu Sắc trong Phân Cấp Thị Giác
Nhiều quy tắc của hệ thống phân cấp thị giác có vẻ khá đơn giản và thậm chí là tầm thường, nhưng chúng là nền tảng quan trọng để thiết kế hình ảnh tốt.
Màu sắc là yếu tố sáng tạo có ảnh hưởng nhất trong thiết kế hình ảnh.
Ví dụ, hãy xem xét ý nghĩa ngay lập tức của chữ thập đỏ so với chữ đơn sắc.
Hầu như trên toàn cầu, chữ thập đỏ biểu thị tính trung lập và bảo vệ. Đó là tiềm năng để giao tiếp ngay lập tức với việc sử dụng màu sắc. Màu sắc cũng thường được sử dụng để xác định các nhóm, vì khi một chữ thập đỏ trong số ba màu đơn sắc bằng cách nào đó nổi bật hơn nhiều.
Màu sắc, hoặc thiếu nó trong các yếu tố thiết kế đơn sắc, có thể được sử dụng để phác thảo các yếu tố UI và thu hút người dùng ở cấp độ tiềm thức.
Màu sắc cũng được gieo mầm với ý nghĩa và cảm xúc có thể truyền thông tin rõ ràng đến tiềm thức của người xem. Trong việc xây dựng thương hiệu, rất nhiều nghiên cứu tâm lý đã được thực hiện về màu sắc vì nó tạo ra phản ứng nội tạng ở người tiêu dùng trước khi họ có bất kỳ tương tác có ý nghĩa nào với thương hiệu. Ví dụ, nhạc blues thường được coi là đáng tin cậy, an toàn và làm dịu, trong khi màu đỏ rất kích thích và được biết là làm tăng người rates. Tuy nhiên, màu sắc có thể có một ý nghĩa khác nhau tùy thuộc vào văn hóa.
Một ví dụ điển hình về việc sử dụng cấu trúc màu sắc có ý nghĩa trong thiết kế web là trang web The Letters for Change. Trang web ngay lập tức truyền đạt cấu trúc của nó thông qua việc sử dụng màu sắc; tổ chức được phân tán theo mặc định nhưng có thể được sắp xếp lại theo chủ đề và / hoặc màu sắc.
Tuy nhiên, các tông màu được chọn giúp khắc phục một trong những khó khăn tiềm ẩn cho ý nghĩa của trang web. Việc gây quỹ cho các mặt hàng hàng ngày như vớ hoặc tampon không đủ hấp dẫn để bán chính nó, vì vậy giai điệu đồ họa triệt để của trang web làm tăng giá trị cảm nhận của các mặt hàng hàng ngày trong khi thiết lập cấu trúc tổ chức cơ bản cần thiết.
Cấu trúc và cấu trúc phân cấp trực quan được hỗ trợ bằng cách sử dụng màu sắc trên trang web thay vì hiển thị Tên để tạo ra sự khác biệt và chú ý. Trang web này thực sự là một giai điệu tuyệt vời của đồ hoạ.
Kích Thước trong Phân Cấp Thị Giác
Để dễ hiểu về khái niệm này, ta hãy tưởng tượng một minh họa về một con chim lớn ngồi cạnh ba con nhỏ hơn. Không có thêm thông tin, đồ họa đơn giản này ngay lập tức truyền đạt mối quan hệ giữa các yếu tố của nó: cha mẹ và con cái, cùng nhau truyền đạt một gia đình.
Trong thiết kế đồ họa truyền thống, một chiến lược điển hình là làm cho các yếu tố quan trọng nhất trở thành lớn nhất, và sau đó giảm quy mô các yếu tố theo thứ bậc. Kích thước thiết lập hệ thống phân cấp thị giác vì các yếu tố lớn nhất thu hút sự chú ý trước tiên và do đó dường như là quan trọng nhất.
Các kích thước phông chữ khác nhau cũng thường được sử dụng trong các phần văn bản để chỉ ra sự khác biệt đáng kể, chẳng hạn như tiêu đề, phần và dấu ngoặc kép. Nội dung phụ, chẳng hạn như chú thích hình ảnh, thường nhỏ hơn để không cạnh tranh với nội dung chính của văn bản.
Hãy xem xét một số giao diện trực quan được sử dụng rộng rãi nhất, chẳng hạn như Instagram. Không có gì trên màn hình cạnh tranh với hình ảnh và video mà họ chiếm hơn 60% trong hầu hết các màn hình. Mục đích của UI là ngay lập tức.
Một ví dụ nâng cao cấu trúc điển hình của hệ thống phân cấp thị giác trong thiết kế web là trang web danh mục đầu tư cho studio nghệ thuật / thiết kế Ro / Lu. Trang web bất thường của họ có thể không trực quan nhất, nhưng nó thách thức sự sắp xếp trực quan của danh mục sáng tạo trực tuyến điển hình. Do sự ngẫu nhiên có chủ ý của các dự án đa dạng của họ, một dự án khác nhau xuất hiện như chiếm ưu thế mỗi khi khách truy cập đến trang web, điều này làm cho mỗi lần truy cập trở nên độc đáo và thú vị.
Công việc không được tổ chức theo thứ bậc trong danh mục đầu tư của hầu hết các studio thiết kế sáng tạo bởi vì mỗi dự án là duy nhất và được coi là quan trọng như nhau. Thiết kế của trang Ro / Lu tạo ra một bố cục năng động với mức độ quan tâm khác nhau trong mỗi lần truy cập và khuyến khích người xem điều tra danh mục đầu tư rộng rãi của studio. Do đó, tính chất chiết trung, liên ngành của phòng thiết kế được thể hiện bằng cách hiển thị ngẫu nhiên nội dung.
Trang web cho studio nghệ thuật / thiết kế Ro / Lu nâng cấp hệ thống phân cấp thiết kế lên hiệu quả tuyệt vời.
Căn Chỉnh trong Phân Cấp Thị Giác
Sắp xếp trong hệ thống phân cấp thị giác truyền đạt ý thức về trật tự bằng cách kết nối các yếu tố không gian.
Như với các chương trong một cuốn tiểu thuyết phi tuyến tính, hãy tưởng tượng một hình vuông đứng ngoài hàng trong một tác phẩm đồ họa.
Khi một yếu tố duy nhất phá vỡ một cấu trúc được thiết lập, nó nổi bật so với thành phần và do đó đạt được ý nghĩa liên quan đến phần còn lại.
Một bố cục cứng nhắc có thể xuất hiện trì trệ và không thú vị về mặt thị giác trừ khi một yếu tố nổi bật khỏi lưới thị giác, tức là, từ ý nghĩa của trật tự. Sai lệch, hoặc phá vỡ lưới, là một cơ hội để cung cấp cho một yếu tố đồ họa thêm trọng lượng hình ảnh. Khái niệm này là cơ bản để phân cấp thị giác trong thiết kế.
Theo một nguyên tắc trong thiết kế hình ảnh truyền thống, các yếu tố được đặt ở trung tâm của khung hình dường như có ý nghĩa hơn. Ví dụ, nội dung chính hoặc các thành phần giao diện có thể được đặt ở giữa, trong khi điều hướng, menu và nội dung thứ cấp khác thường được giữ ở hai bên.
Nhưng các nhà thiết kế tiên phong thích thách thức hiện trạng. Khi thiết kế tương tác áp dụng các nguyên tắc phân cấp thị giác cơ bản và sau đó đẩy ranh giới vào các tác phẩm trực quan sáng tạo, những trải nghiệm mới thú vị được tạo ra. Bằng cách sử dụng một liên kết khác nhau, các liên kết và ý nghĩa mới được thực hiện giữa các yếu tố.
Ví dụ, dự án DNA là một trang web sử dụng một loạt các hệ thống phân cấp rời rạc để truyền đạt việc xây dựng sáng tạo của album nhạc sĩ. Cấu trúc trang web rất phức tạp, cũng như việc xây dựng album.
Đầu tiên, khách truy cập được mời nghe nhạc bằng cách nhấp qua các bản nhạc của album, được căn chỉnh theo định dạng album. Tuy nhiên, bằng cách cho phép khách truy cập sắp xếp lại các yếu tố DNA của trang web, khái niệm của album được truyền đạt, không chỉ là một loạt các bản nhạc, mà là một cấu trúc phi tuyến tính của các yếu tố phân mảnh theo thời gian.
Trang web cho Dự án DNA với hệ thống phân cấp trực quan khác thường nhưng rõ ràng.
Hình Dạng trong Phân Cấp Thị Giác
Khi nói đến hình dạng, hãy để hình ảnh xem ngay lập tức hình dạng trái tim đơn giản truyền đạt công dụng tiềm năng của nó cho for giống như trong hầu hết các giao diện người dùng mạng xã hội. Để thiết lập tầm quan trọng hoặc các nhóm, hãy xem xét một trái tim trong số bốn vòng tròn. Các hình dạng hình học giống như màu sắc trong đó hình dạng mang ý nghĩa nhất định mang lại cho các yếu tố tính cách hoặc ý nghĩa.
Trong thiết kế tương tác, hình dạng hình học là điều cần thiết để giao tiếp hiệu quả vì chúng truyền đạt ý nghĩa nhanh hơn và phổ biến hơn văn bản. Thay vì văn bản, các biểu tượng (biểu tượng), thường là các hình dạng hình học đơn giản, đã trở thành tương tự cho hầu hết các hệ thống điều hướng và giao diện người dùng.
Mục tiêu đằng sau ‘thích hình ảnh, tải xuống tệp, thực hiện cuộc gọi điện thoại hoặc kiểm tra tin nhắn được truyền tải đơn giản và trực tiếp bằng các biểu tượng (hình dạng hình học). Hình thức giao tiếp trực quan hiệu quả này ngày càng trở nên quan trọng trong thị trường toàn cầu nơi các sản phẩm kỹ thuật số thường phục vụ đối tượng quốc tế rộng lớn với nhiều ngôn ngữ.
Báo chí đã phải nhanh chóng điều chỉnh thiết kế của họ cho các công nghệ mới. Phần còn lại của ngành công nghiệp nội dung tiếp theo phù hợp.
Để làm nổi bật các chế độ tương tác khác nhau giữa phương tiện truyền thông in ấn và kỹ thuật số truyền thống, hãy xem xét sự khác biệt giữa tìm kiếm thông qua một tờ báo thực tế cho phần Nghệ thuật và sử dụng biểu tượng tìm kiếm trong hầu hết các ứng dụng. Cho đến gần đây, hầu hết các trang web báo chí đã đặt các trang của họ giống như khi chúng được in, và kinh nghiệm sàng lọc thông qua nội dung là vụng về và mất phương hướng.
Phá vỡ bố cục web truyền thống, trang web Signes du Quotidien sử dụng các hình vuông và hình tròn cơ bản theo cách tinh tế để trình bày một hệ thống phân cấp trực quan độc đáo hướng dẫn khách truy cập thông qua nội dung. Menu nằm ở giữa trang và khi khách truy cập nhấp vào nó, bốn chấm màu đại diện cho bốn phần của trang web xuất hiện. Khách truy cập sau đó kéo một trong các dấu chấm vào hình vuông để đi đến phần đó.
Signs of Everyday Life website
Chuyển Động trong Phân Cấp Thị Giác
Một yếu tố chuyển động sẽ mang trọng lượng hình ảnh lớn hơn trong một nhóm các yếu tố trì trệ và chuyển động trong hệ thống phân cấp thị giác là một nguyên tắc không thể sử dụng trong in ấn nhưng chắc chắn có thể được bao gồm trong bộ công cụ thiết kế hình ảnh trực quan.
Điều gì có thể chuyển động giao tiếp ngoài một bản dịch nghĩa đen của chính nó? Chuyển động thường được sử dụng trong UI như một đầu mối mà một yếu tố có thể được tương tác. Việc sử dụng chuyển động có thể được đẩy xa hơn và được sử dụng như một cách để truyền đạt một cái gì đó độc đáo? Nếu hệ thống phân cấp thị giác không chỉ về hiệu quả của giao tiếp, mà còn về ý nghĩa nhúng, làm thế nào chuyển động có thể được sử dụng như một công cụ giao tiếp trực quan thiết yếu?
Đối với trang I Ghi nhớ, giao diện chính (hoạt hình) ngay lập tức nổi bật khi nó mời tương tác. Mặc dù chuyển động và giao diện là các công cụ điều hướng chức năng, các nhà thiết kế hình ảnh đã sử dụng khả năng mất các yếu tố này như một cách để truyền đạt sứ mệnh cơ bản của trang web: Bệnh Alzheimer. Giống như những ký ức nhạt nhòa của những bệnh nhân mà tổ chức gây quỹ, trang web dần biến mất vào hư vô nếu không có sự tương tác tích cực.
Âm Thanh trong Hệ Thống Phân Cấp Thông Tin
Âm thanh là một công cụ khác không thể sử dụng trong phương tiện in, nhưng chưa được phát triển theo các nguyên tắc phân cấp. Vì âm thanh là hoàn toàn không trực quan, không có quy tắc để tham khảo. Nhưng âm thanh cũng có thể là một công cụ thiết kế để truyền đạt hiệu quả nội dung, cũng như tâm trạng hoặc ý nghĩa. Các yếu tố thiết kế mang âm thanh nhất định có thể được nhóm lại với nhau và những âm thanh đậm nhất có vẻ là quan trọng nhất hoặc có thể biểu thị sự tách biệt khỏi nhóm.
Chất lượng của âm thanh được gắn vào một yếu tố sẽ nhanh chóng xác định, mô tả đặc điểm hoặc giúp cấu trúc nội dung. Làm thế nào một âm thanh tương phản với yếu tố hình ảnh liên quan của nó truyền đạt ý nghĩa mới?
Bản thân âm thanh có thể phức tạp đến mức chúng thiết lập toàn bộ tâm trạng hoặc thông điệp của một thiết kế trước khi mọi thứ trực quan được cảm nhận. Giống như phông nền đầy màu sắc tạo nên tâm trạng, âm thanh có thể nằm ở phía sau hoặc cung cấp phản hồi trong giao diện người dùng, chẳng hạn như phản ứng với việc nhấn nút trên thiết bị di động. Nguyên tắc của kỹ thuật là cơ bản, nhưng sự sáng tạo mà nó có thể được sử dụng là nơi phép màu có thể xảy ra.
Do tầm quan trọng của nó trong công việc sáng tạo của tập thể, trang web được tạo ra cho triển lãm của nhóm nghệ sĩ người Đức ZERO tại Guggenheim sử dụng âm thanh làm bối cảnh không khí và cũng là một hình thức phản hồi khi điều hướng trang web. Nhạc chuông đậm thiết lập các phần thể hiện sự bắt đầu của một chủ đề, trong khi các dự án cấp ba nhấp vào nền.
Trang web dành cho nhóm nghệ sĩ ZERO tại Guggenheim, nơi âm thanh đóng vai trò quan trọng
Khái niệm Phân Cấp Thị Giác
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 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 là một thách thức.
Các phương tiện mới xuất hiện mọi lúc và các tình huống thử thách sẽ không hoàn toàn ngược lại. Ngày nay có hơn 200 kích cỡ màn hình khác nhau được sử dụng. Và đó chỉ là những người hai chiều. Đầ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ờ chúng tôi đang chuyển sang lãnh thổ mới với các công nghệ như TV tương tác, IoT, thiết bị đeo, 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. Hy vọng rằng, các nguyên tắc phân cấp thị giác và thiết kế tốt sẽ theo kịp sự phát triển nhanh chóng của công nghệ để trải nghiệm của chúng tôi về phương tiện kỹ thuật số vẫn còn đầy ý nghĩa và niềm vui.
Đặng Kim Thi
from BestDev.org
Tham khảo toptal.com
إرسال تعليق