thiết kế

Cách thiết kế và khai thác dấu hiệu hình ảnh để người xem không cần phải nghĩ

content2 — Wed, 04 Jan 2023 08:00:14 +0000

Cách thiết kế và khai thác dấu hiệu hình ảnh để người xem không cần phải nghĩ content2 T4, 01/04/2023 - 15:00 UX/UI

Hãy cho cái gì mà khán giả của bạn ngay lập tức hiểu mà không cần nhiều nỗ lực suy nghĩ.

Một số designer có thể nghĩ rằng tôi đang nói về CTA. Vũng có thể coi là như vậy, nhưng nó chỉ là bề nổi. Chúng ta cần cho thiết kế có chiều sâu hơn.

Có nhiều lý thuyết bên dưới câu hỏi “Cho cái gì vào đây?”. Khi bạn ứng dụng những lý tuyết ấy, thiết kế của bạn sẽ trở nên hiệu quả và thuyết phục hơn rất nhiều

Mô Hình Nhận Thức nghiên cứu thiết kế thiết kế

Một trong những câu hỏi mà designer thường tự đặt ra khi làm việc đó là: “Cho cái gì vào đây?”

Bài viết liên quan

Hãy cho cái gì mà khán giả của bạn ngay lập tức hiểu mà không cần nhiều nỗ lực suy nghĩ.

Một số designer có thể nghĩ rằng tôi đang nói về CTA. Vũng có thể coi là như vậy, nhưng nó chỉ là bề nổi. Chúng ta cần cho thiết kế có chiều sâu hơn.

Có nhiều lý thuyết bên dưới câu hỏi “Cho cái gì vào đây?”. Khi bạn ứng dụng những lý tuyết ấy, thiết kế của bạn sẽ trở nên hiệu quả và thuyết phục hơn rất nhiều.

Nhận thức thô (Pre-attentive Processing)

Đây là một cơ chế cấp thấp của hệ thống thị giác của chúng ta. Giải thích đơn giản thì nhận thức thô là một giới hạn về hình ảnh mà não có thể xử lý nhanh chóng. Nó là “cái gì” trong tâm trí của khán giả.

Đó là cách mà não chúng ta lọc thông tin hình ảnh, chọn ra thông tin mà nó cho là quan trọng. Những thông tin này là những dấu hiệu hình ảnh. Một trong những dấu hiệu hình ảnh mạnh nhất là màu sắc, tuy nhiên, đấu hiệu này cũng sẽ phụ thuộc vào bối cảnh và tương quan hình ảnh xung quanh.

Các nhà nghiên cứu đã tìm ra hơn 18 dấu hiệu hình ảnh có thể kích thích hệ thống thị giác của chúng ta. Những dấu hiệu hình ảnh này có thể là hướng của nét, kích thước của đối tượng, chuyển động,... Những dấu hiệu này được minh họa qua những hình ảnh dưới đây.

Đọc thêm: Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI

The Cues

Mắt của chúng ta tự động bị thu hút bởi những tương phản này, ngay lập tức nó sẽ đặt ra câu hỏi: tại sao nó lại như vậy? và nó có ý nghĩa gì?

Với vai trò là một designer, chúng ta nên hiểu những dấu hiệu hình ảnh, ứng dụng chúng một cách thông minh để đưa người dùng tới mục tiêu của họ. Điều này sẽ cải thiện trải nghiệm người dùng của thiết kế.

Câu hỏi “cho cái gì vào đây?” là một câu hỏi quan trọng. Và trong hầu hết trường hợp, có nhiều thứ mà chúng ta cần cho vào, vậy nên, chúng ta cần phân cấp những thứ đó và chọn ra dấu hiệu hình ảnh nên được đưa vào.

Nhận thức thô cung cấp một framework tốt để hỗ trợ những quyết định thiết kế này.

Dù là landing page hay trang liên hệ, ứng dụng những hiểu biết này vào giao diện sẽ đều mang lại hiệu quả về tương tác, điều hướng trên trang. Vậy nên, mọi designer nên lưu ý tới nó mỗi khi thiết kế.

Đọc thêm: Tâm lý học Màu sắc và ứng dụng trong thiết kế

Sắp xếp mức độ ưu tiên

Hẳn bạn đã nghe câu “đừng bắt khách hàng nghĩ”. Những giao diện hiệu quả nhất là những giao diện có thể giúp người dùng tìm thấy cái họ muốn tìm mà không phải tốn nhiều nỗ lực. Với người dùng, các hoạt động, nhiệm vụ và mục tiêu có trong sản phẩm có những mức độ ưu tiên khác nhau. Điều hướng của giao diện càng tốt thì người dùng càng ít phải nghĩ.

Để làm được điều ấy:

Liệt kê danh sách những thứ mà người dùng muốn làm, mục tiêu của họ trên sản phẩm
Đánh giá mức độ ưu tiên từ 1 đến 10 cho mỗi nhiệm vụ, sắp xếp danh sách theo mức độ ưu tiên
Cân nhắc dấu hiệu hình ảnh thích hợp cho các nhiệm vụ
Xếp các dấu hiệu ấy theo nhiệm vụ
Thực hiện thử hiện và đánh giá hiệu của của các dấu hiệu

Ví dụ:

Trong một nhiệm vụ, một cảnh báo có mức ưu tiên là 10. Bạn có thể thiết kế nó với hiệu ứng nháy để người dùng chú ý và hiểu rằng nó là thông tin quan trọng. Còn nếu cảnh cáo có mức ưu tiên là 5, lúc này chúng ta chỉ cần cho nó một màu nổi bật là được.

Mô hình nhận thức

Tuy vậy, chúng ta cũng không nên lạm dụng nó. Tôi có làm theo quy trình ấy mỗi khi thiết kế không? Câu trả lời là tuy, bởi nó phụ thuộc vào độ phức tạp của thiết kế mà tôi làm. Dù vậy, có thêm một mô hình nhận thức để nghĩ về thiết kế cũng không tổn hại gì.

Ngày nay, với Google Glass và Leap Motion, những giao diện cảm ứng với nhiệm vụ thực hiện bằng tay đã trở thành quy chuẩn và những nguyên tắc chúng ta đã lêu trên cũng trở nên thiết thực.

Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế? Nghiên cứu hành vi người dùng bằng phương pháp 5 Tại sao Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp

Off

Hướng dẫn sử dụng hiệu ứng trong Zero Block

content2 — Mon, 07 Nov 2022 09:01:06 +0000

Hướng dẫn sử dụng hiệu ứng trong Zero Block content2 T2, 11/07/2022 - 16:01 UX/UI

Blur, brightness, contrast, grayscale, hue-rotate, inversion, saturation, and sepia— 8 hiệu ứng đã được thêm vào Zero Block Settings. Để sử dụng những hiệu ứng này cho dự án, vào Zero Block Settings → Effects.

Cách thiết kế các hiệu ứng Zero Block

Chi tiết về các hiệu ứng được trình bày dưới đây:

Bạn có thể sắp xếp các element rồi dùng filter bên trên. Ví dụ như bạn muốn làm mờ hình ảnh bên dưới shape, thực hiện theo các bước:

Tạo một shape phủ kín hình ảnh
Giảm opacity của shape
Thêm hiệu ứng blur

Theo cách này, hiệu ứng được dùng cho layer shape cũng sẽ tạo hiệu ứng cho cả nhưng layer bên dưới. Hiệu ứng này có được là nhờ việc giảm opacity của lớp layer bên trên.

Các hiệu ứng trong bài có thể được dùng cho text, shape, hình ảnh và nút. Và thành quả sẽ là một thiết kế như dưới đây.

zero block thiết kế hình khối trong thiết kế thiết kế giao diện

Hiệu ứng zero block là một hiệu ứng đang trending trong thiết kế. Bạn muốn biết cách áp dụng hiệu ứng này, hãy đọc tiếp.

Cách thiết kế các hiệu ứng Zero Block

Chi tiết về các hiệu ứng được trình bày dưới đây:

Hiệu ứng effect Blur
Hiệu ứng effect Brightness
Hiệu ứng effect Grayscale
Hiệu ứng effect Hue rotation
Hiệu ứng effect Invert
Hiệu ứng effect Saturate
Hiệu ứng effect Sepia

Bạn có thể sắp xếp các element rồi dùng filter bên trên. Ví dụ như bạn muốn làm mờ hình ảnh bên dưới shape, thực hiện theo các bước:

Tạo một shape phủ kín hình ảnh
Giảm opacity của shape
Thêm hiệu ứng blur

Các hiệu ứng trong bài có thể được dùng cho text, shape, hình ảnh và nút. Và thành quả sẽ là một thiết kế như dưới đây.

Đọc thêm: Làm sao để thiết kế tìm được tới insight?

Chiến lược chuyển đổi số: 4 bước thay đổi doanh nghiệp cần chuẩn bị Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế? Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác Nghiên cứu người dùng: Không gì hiệu quả hơn đặt đúng câu hỏi Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp

Off

Tìm hiểu về tương phản (Contrast) và nhận thức thị giác (Visual Perception) trong thiết kế

content2 — Tue, 04 Oct 2022 09:04:42 +0000

Tìm hiểu về tương phản (Contrast) và nhận thức thị giác (Visual Perception) trong thiết kế content2 T3, 10/04/2022 - 16:04 Cảm hứng thiết kế sáng tạo

Tương phản - Contrast là gì?

Tương phản là tương quan giá trị của hai yếu tố. Tương phản cũng là cách mà các giác quan của chúng ta cảm nhận và tương tác với các đối tượng. Như Dan M. Mrejeru đề cập: “Dựa trên tương phản, nhận thức của chúng ta phân biệt tín hiệu với tiếng ồn, tiền cảnh với hậu cảnh”

Khác với các yếu tố khác trong thiết kế như màu sắc hay hình dạng, tương phản không thể đứng độc lập. Màu sắc, hình dạng có thể xuất hiện trên thiết kế mà không có tương phản, nhưng tương phản không thể có nếu không có yếu tố khác. Bởi tương phản là sự tương quan, so sánh giữa hai yếu tố và hai yếu tố ấy phải có cùng ít nhất một tính chất chung. Ví dụ, chúng ta sẽ nói màu xanh tương phản với màu đỏ, nhưng không thể nói màu xanh tương phản với hình tròn, chúng không thể so sánh nên không thể có tương phản.

Nhưng vì sao cần có tương phản? Vì nó tạo ra sự hấp dẫn.

Một thiết kế nếu chỉ có duy nhất một màu hay chỉ sử dụng duy nhất một kích thước hình sẽ rất khó để thu hút khán giả. Sự tương phản giữa các yếu tố trong thiết kế sẽ khiến mặt chúng ta chú ý, cũng như, ở lại lâu hơn để so sánh, phân tích mối tương quan ấy. Bởi vậy, sự hấp dẫn của một thiết kế liên quan rất lớn tới yếu tố tương phản.

Tương phản trong thiết kế có thể xuất hiện dưới nhiều hình thức. Nó có thể là tương phản về màu, tương phản về hình, cũng có thể là tương phản tỷ lệ. Để hiểu hơn về tương phản, chúng ta sẽ đi vào phân tích từng yếu tố:

Các loại tương phản - contrast trong thiết kế

Màu sắc

Mắt của chúng ta được tiến hóa để cảm nhận ánh sáng. Các sóng ánh sáng với nhiều tần số khác nhau sẽ được phản chiếu từ môi trường tới mắt. Chúng có tần số từ 400 tới 700 nanometer. Mỗi màu sắc sẽ ứng với một giải tần số nhất định. Ví dụ như xanh lam có tần số từ 490 đến 450 nanometer.

Có một số lý thuyết cho rằng, tương phản màu được tạo ra từ độ chênh lệch tần số của hai màu. Dù nó đúng với mọi cặp màu nhưng riêng với đỏ và tìm thì không. Cặp màu này có biên độ tần số rất cao, 700-635 và 450-400, nhưng bản thân chúng lại không có tương phản cao. Chúng ta không có câu trả lời bằng khoa học cho nó, nhưng may mắn, mắt chúng ta có thể.

Đọc thêm: Ứng dụng màu sắc trong thiết kế website

Isaac Newton, sau nhiều năm nghiên cứu ánh sáng, ông là người tạo ra vòng tròn màu - hệ thống màu tới nay chúng ta vẫn sử dụng. Nhờ có vòng tròn màu, chúng ta có thể dễ dàng hình dung ra mối quan hệ giữa các màu sắc, trong đó có tương phản.

Nếu xuôi theo vòng tròn màu chúng ta sẽ tìm được những cặp màu có tương phản thấp, ví dụ như vàng và cam. Còn nếu chúng ta lấy hay máu đối diện nhau, nó sẽ tạo ra cặp màu tương phản cao nhất. Tóm gọn, khoảng cách trên vòng tròn màu của cặp màu càng xa thì tương phản càng cao.

Tỷ lệ

Tỷ lệ là tương quan kích thước giữa hai yếu tố hình, sự khác biệt về kích thước càng lớn sẽ tạo tương phản càng cao. Hai hình này có thể có cùng hình dạng hoặc không, miễn kích thước của chúng khác nhau, chúng sẽ tạo ra tương phản.

Sự nhạy cảm về tỷ lệ này của chúng ta được cho rằng liên quan tới quá trình tiến hóa, con người thích đối xứng và không thích khi nó bị phá vỡ. Như Dan M. Mrejeru từng chỉ ra:
Tương xứng đóng vai trò trong tiến hoá, chúng được thấy trong khắp tự nhiên, còn bất đối xứng là thứ gì đó khác thường, tạo ra cảm giác nguy hiểm.

Đối xứng cho chúng ta cảm giác an toàn nhưng cũng mang tới sự nhạt nhẽo. Một thiết kế có tương phản về tỷ lệ, mới có thể thu hút sự chú ý và tạo hứng thú cho khán giả. Thế nhưng chúng ta sẽ làm như thế nào? Johannes Kepler đã cho chúng ta câu trả lời: “Hình học có hai kho báu lớn, đó là định luật Pythagoras và tỷ lệ vàng”

Tỷ lệ vàng không tuân theo quy tắc đối xứng, nó bất đối xứng, nhưng với một tỷ lệ vừa đủ để thiết kế không bị nhạt nhẽo mà vẫn giữ được sự hài hòa. Hoặc nói đơn giản, nó cho chúng ta một độ tương phản vừa đủ.

Nếu để nói kỹ về tỷ lệ vàng, chúng ta sẽ mất cả ngày. Tuy nhiên, nói riêng về thiết kế, tỷ lệ vàng là quy chuẩn cho nhiều thiết kế nổi tiếng. Quả táo của Apple, logo Pepsi, logo Twitter đều dựa trên tỷ lệ ấy.

Đọc thêm: 11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn

Hình dạng

Dù tương phản tỷ lệ không phụ thuộc hình dạng nhưng hình dạng vẫn có thể có tương phản. Tương phản ấy được tạo ra từ việc đặt hai hình có hình dạng khác nhau trên cùng một mặt phẳng và độ tương phản của chúng phụ thuộc vào đặc tính của hai hình. Ví dụ, hình vuông với hình chữ nhật, cả hai cùng là tứ giác, vậy nên chúng không có nhiều tương phản. Nhưng nếu chúng ta đặt hình tròn với hình tam giác, chúng sẽ có một tương phản lớn, bởi hình tròn mềm mại, không có góc, còn hình tam giác thì sắc nhọn.

Những tương phản hình dạng này đặc biệt phổ biến trong thiết kế typeface. Bản thân cấu tạo của chữ là sự kết hợp của nhiều hình dạng và chúng tạo ra tương phản cho bộ chữ. Tùy vào thiết kế mà chữ có thể có tương phản cao hoặc thấp. Thường tương phản cao được thấy trong những bộ typeface display, tương phản thấp được thấy trong các bộ serif hoặc sans serif ứng dụng cho body text.

nghiên cứu thiết kế thiết kế ứng dụng màu sắc Tỷ lệ thiết kế

Vì sao cần có tương phản? Vì nó tạo ra sự hấp dẫn. Sự tương phản giữa các yếu tố trong thiết kế sẽ khiến người dùng chú ý lâu hơn, và dễ để ý hơn.

Tương phản - Contrast là gì?

Nhưng vì sao cần có tương phản? Vì nó tạo ra sự hấp dẫn.

Các loại tương phản - contrast trong thiết kế

Off

Các loại toggle trong thiết kế UI, dùng gì? khi nào?

content2 — Tue, 09 Aug 2022 04:01:49 +0000

Các loại toggle trong thiết kế UI, dùng gì? khi nào? content2 T3, 08/09/2022 - 11:01 UX/UI

Lựa chon loại trừ (mutually exclusive) và lựa chọn không loại trừ (mutually inclusive)

Hãy bắt đầu bằng định nghĩa về của hai khái niệm này:

Trái: lựa chọn loại trừ, phải: lựa chọn không loại trừ

Khi hai sự kiện A và B không thể xảy ra cùng lúc đó là lựa chọn loại trừ. Đây là cách cơ bản mà radio button hoạt động, chúng ta có rất nhiều lựa chọn nhưng chỉ được chọn một và bỏ chọn tất cả lựa chọn còn lại. Mỗi khi thiết bị hoạt động, luôn có một lựa chọn được chọn, không có trường hợp bỏ chọn toàn bộ các lựa chọn.

Ở phía bên kia, lựa chọn không loại trừ là khi chúng ta có thể chọn nhiều lựa chọn cùng lúc, mọi lựa chọn có thể được chọn hoặc bỏ chọn cùng lúc.

Trong một checkbox có thể là lựa chọn loại trừ hoặc không loại trừ. Với một checkbox duy nhất, chúng ta chỉ có thể tích chọn hoặc không chọn. Với một tập checkbox, chúng ta gộp nhóm chúng với một checkbox mẹ, chúng có thể chọn một vài checkbox và bỏ chọn một vài checkbox, vậy checkbox mẹ có thể:

Chọn: Nếu tất cả các checkbox con được chọn
Bỏ chọn: Nếu tất cả các checkbox con bỏ chọn
Cả hai: Các checkbox con có cả chọn và được chọn

Toggle, switch, and checkbox

Các loại toggle khác nhau

Có nhiều tên cho những nút này như: toggle switch, checkbox toggle, toggle button… Tất cả chúng có cùng một cơ chế như một điều khiển dùng để chuyển giữa hai trạng thái/chế độ.

Đầu tiên, chúng ta cần phân biệt giữ toggle button và toggle switch, chúng đều có khả năng chuyển giữa hai chế độ nhưng không thực sự theo cùng một cách:

- Toggle button: Đại diện cho một hành động thay đổi trạng thái

- Toggle switch: Đại diện cho hai (hoặc nhiều hơn) trạng thái loại trừ hoặc là lựa chọn có thể được chuyển qua lại

Tip: Nếu toggle là một hành động (play/pause) nhãn/tên đi cùng hành vi đó nên thể hiện sự chuyển đổi. Nếu toggle là một lựa chọn (on/off), nó nên thể hiện trạng thái hiện tại.

Nếu chúng ta nghĩ về hành vi của checkbox, đó cũng chính là cách mỗi checkbox hoạt động, có hai trạng thái, chọn hoặc không chọn. Nhưng khi nào dùng cái nào thì còn tùy vào bối cảnh:

Toggle: Dùng cho hành động hoặc lựa chọn có ảnh hưởng ngay lập tức tới giao diện. Những hành động này thường không cần xác nhận lại từ người dùng.
Checkbox: Dùng khi đó là thay đổi bổ xung, thường thấy trong form và cần được xác nhận lại.

Vậy điều gì xảy ra khi chúng ta có nhiều hơn 2 lựa chọn? Bạn có thể tạo một toggle có 3 trạng thái nhưng hãy cần thận, vì có thể nó sẽ gây khó khăn khi sử dụng.

Khi có nhiều hơn 2 lựa chọn sẽ là một trường hợp khác mà chúng ta nên cân nhắc sử dụng checkbox, radio button hoặc segmented control thay vì toggle.

Radio group and segmented control

Radio group (trái) và segmented control (phải)

Theo Human interface guidlenes của Apple, một segmented control là một giải lựa chọn có từ hai lựa chọn trở lên, hoạt động theo cách lựa chọn loại trừ. Ví dụ như lựa chọn căn văn bản của Word là một segmented control, bạn chỉ có thể chọn một trong ba căn trái, căn phải hoặc căn giữa.

Tương tự như vậy với radio group, vậy thì khi nào sẽ dùng cái nào?

Radio group: Tương tự như checkbox, dùng nó khi đó là lựa chọn bổ xung, thường thấy trong form và cần được xác nhận trước khi đi tới bước tiếp theo.
Segmented control: Dùng cho thay đổi tạo tác động tới UI ngay tức thì.

Đối với radio button, để đảm bảo tính dễ đọc, chúng ta nên đặt các lựa chọn theo chiều dọc để người dùng có thể quét qua các lựa chọn. Ngược lại nếu lựa chọn buộc phải đặt ngang, chú ý về khoảng cách giữa chúng.

Toggle button group

Toggle button group (trái) vs segmented control (phải).

Cuối cùng là toggle button group, nó là một nhóm các toggle hoạt động theo cách lựa chọn không loại trừ, tức mỗi toggle có thể được chọn hoặc không chọn một cách độc lập.

Về mặt hiển thị, toggle button group và segmented control có hình thức tương tự nhau. Khi đưa vào sử dụng, cách hoạt động của chúng sẽ được nhúng vào mô hình tư duy của người dùng. Tuy nhiên, không nên dùng cả hai loại cùng lúc, trừ khi chúng ta chắc được rằng người dùng có thể hiểu được chức năng và bối cảnh tương ứng của mỗi cái.

Usage recommendations

Tóm tắt những ý chính:

Không dùng toggle trong form, thay vào đó, dùng checkbox hoặc radio button
Không dùng toggle trong filter hoặc tùy chọn có nhiều hơn 2 lựa chọn
Dùng toggle cho cài đặt hoặc thay đổi tương tác tới UI ngay lập tức
Tránh dùng toggle button group cùng segmented controls cùng lúc
Chú ý cách sắp xếp lựa chọn và khoảng cách của radio group
Tránh dùng switch với nhiều lựa chọn

Thiết kế UI ui design UX/UI nghiên cứu thiết kế thiết kế

Chúng ta thường xuyên sử dụng toggle trong thiết kế UI/UX. Vậy bạn đã biết dùng chúng như thế nào và khi nào để đạt được hiệu quả tốt nhất?

Lựa chon loại trừ (mutually exclusive) và lựa chọn không loại trừ (mutually inclusive)

Hãy bắt đầu bằng định nghĩa về của hai khái niệm này:

Trái: lựa chọn loại trừ, phải: lựa chọn không loại trừ

Ở phía bên kia, lựa chọn không loại trừ là khi chúng ta có thể chọn nhiều lựa chọn cùng lúc, mọi lựa chọn có thể được chọn hoặc bỏ chọn cùng lúc.

Chọn: Nếu tất cả các checkbox con được chọn
Bỏ chọn: Nếu tất cả các checkbox con bỏ chọn
Cả hai: Các checkbox con có cả chọn và được chọn

Toggle, switch, and checkbox

Các loại toggle khác nhau

Đầu tiên, chúng ta cần phân biệt giữ toggle button và toggle switch, chúng đều có khả năng chuyển giữa hai chế độ nhưng không thực sự theo cùng một cách:

- Toggle button: Đại diện cho một hành động thay đổi trạng thái

- Toggle switch: Đại diện cho hai (hoặc nhiều hơn) trạng thái loại trừ hoặc là lựa chọn có thể được chuyển qua lại

Toggle: Dùng cho hành động hoặc lựa chọn có ảnh hưởng ngay lập tức tới giao diện. Những hành động này thường không cần xác nhận lại từ người dùng.
Checkbox: Dùng khi đó là thay đổi bổ xung, thường thấy trong form và cần được xác nhận lại.

Khi có nhiều hơn 2 lựa chọn sẽ là một trường hợp khác mà chúng ta nên cân nhắc sử dụng checkbox, radio button hoặc segmented control thay vì toggle.

Radio group and segmented control

Radio group (trái) và segmented control (phải)

Tương tự như vậy với radio group, vậy thì khi nào sẽ dùng cái nào?

Radio group: Tương tự như checkbox, dùng nó khi đó là lựa chọn bổ xung, thường thấy trong form và cần được xác nhận trước khi đi tới bước tiếp theo.
Segmented control: Dùng cho thay đổi tạo tác động tới UI ngay tức thì.

Toggle button group

Toggle button group (trái) vs segmented control (phải).

Usage recommendations

Tóm tắt những ý chính:

Không dùng toggle trong form, thay vào đó, dùng checkbox hoặc radio button
Không dùng toggle trong filter hoặc tùy chọn có nhiều hơn 2 lựa chọn
Dùng toggle cho cài đặt hoặc thay đổi tương tác tới UI ngay lập tức
Tránh dùng toggle button group cùng segmented controls cùng lúc
Chú ý cách sắp xếp lựa chọn và khoảng cách của radio group
Tránh dùng switch với nhiều lựa chọn

Thiết Kế Web Chuyên Nghiệp – Nền Tảng Thành Công Của Các Doanh Nghiệp Kỷ nguyên Số: Khi trải nghiệm UX làm nên thương hiệu Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi? Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI Tâm lý học Màu sắc và ứng dụng trong thiết kế Phương Pháp Design Sprints cho Định Vị Thương Hiệu

Off

Kiến thức cơ bản về digital design — các thuật ngữ, loại, công cụ

content2 — Mon, 08 Aug 2022 10:01:50 +0000

Kiến thức cơ bản về digital design — các thuật ngữ, loại, công cụ content2 T2, 08/08/2022 - 17:01 UX/UI

Ngày nay, khi chúng ta nói về graphic design chúng ta sẽ nghĩ tới in ấn, trong khi digital design là những thiết kế được hiển thị trên thiết bị điện tử. Tuy nhiên, hai phạm trù ấy vẫn có những điểm chung và thường xuyên phải kết hợp trong nhiều dự án. Để đáp ứng nhu cầu, nhiều graphic designer ngày nay cũng sẽ biết cả digital design. Để hiểu rõ hơn, chúng ta sẽ tìm hiểu về công việc của các digital designer qua bài viết này.

CÁC THUẬT NGỮ CỦA DIGITAL DESIGN

UX design

Trải nghiệm người dùng (UX) là một phần lớn và thú vị của thiết kế. Chỉ riêng nó có thể tạo ra mọt khác biệt, quyết định thành công hoặc thất bại của sản phẩm. UX bao gồm tất cả những cảm xúc và tương tác mà người dùng có với một sản phẩm hoặc dịch vụ.

Việc thiết kế trải nghiệm người dùng là tham gia vào tất cả các bước mà người dùng có thể có với sản phẩm để xác định trải nghiệm của họ. Nó bao gồm các công việc như nghiên cứu, thiết kế và phát triển sản phẩm, để tạo ra trải nghiệm tối ưu nhất cho khách hàng.

UI design

Giao diện người dùng (UI) luôn song hành với trải nghiệm người dùng. Nếu trải nghiệm người dùng là trải nghiệm chúng ta có với sản phẩm thì giao diện người dùng là thiết kế của sản phẩm. Giao diện người dùng bao gồm các nút, text, hình ảnh, cùng mọi thứ hiển thị trên sản phẩm. Mục tiêu của nó là đảm bảo sản phẩm mà chúng ta phát triển không chỉ có thiết kế đẹp mà còn là phục vụ những mục tiêu cụ thể về nhận diện, thương hiệu.

IA (Information Architecture)

Cấu trúc thông tin là cách nội dung thông tin được sắp xếp và tổ chức trên một trang. IA tập trung tạo một cấu trúc nội dung tối ưu nhất cho người dùng dễ dàng được điều hướng và tìm thấy bất cứ thông tin gì họ cần.

NHỮNG KIỂU DIGITAL DESIGNER

Graphic designers

Như đã đề cập, graphic design thường liên quan tới in ấn, những nó cũng là thuật ngữ được sử dụng cho nhiều công việc thiết kế khác. Trong giới hạn bài viết này, chúng ta có thể coi graphic designer cũng là digital designer. Họ là những người thế kế những thiết kế tĩnh như logo, inforgraphic, minh họa, etc.

Web designers

Công việc của web designer là thiết kế giao diện cho các website. Kiến thức của họ tập trung vào UX/UI, layout, typography, màu sắc và mọi element xuất hiện trên website.

Mobile designers

Để trở thành mobile designer, bạn cần nhận thức về cách người dùng sử dụng thiết bị di động của họ, đồng thời, bạn cũng cần cập nhật những xu hướng công nghệ mới. Vì thiết bị di động có nhiều hệ điều hành cùng nhiều kích thước màn hình khác nhau, hiểu sự phức tạp ấy là điều quan trọng đối với mobile designer.

UX designers

UX designer chủ yếu tập trung vào những câu hỏi tại sao, cái gì và như thế nào, để hiểu động lực, hành vi và thói quen của người dùng. Họ thường xuyên thực hiện các nghiên cứu về người dùng, kiểm tra khả năng sử dụng và tính năng của sản phẩm.

UI designers

UI designer là những người thiết kế những giao diện của các thiết kế digital. Họ thường là những người tạo ra các hệ thống thiết kế để quy định về cách các element được sử dụng trên các giao diện website, ứng dụng nhằm cho thiết kế của những sản phẩm ấy được thống nhất.

Product designers

Đây là một vai trò mới trong ngành. Trong nhiều công ty, vai trò này gắn chặt với UX designer, tuy nhiên, công việc của họ không chỉ xoay quanh trải nghiệm người dùng. Họ là những người quyết định sản phẩm nên hoạt động như thế nào, hay nó nên cung cấp gì cho người dùng.

Interaction designers

Công việc của interaction designer là tham gia xây dựng một trải nghiệm tối ưu hơn khi người dùng trải nghiệm các sản phẩm như website hay ứng dụng. Một ví dụ đơn giản là khi người dùng tìm một nút trên giao diện, interaction designer đảm bảo nó phải được hiển thị một cách trực quan, cho người dùng dễ dàng nhận biết.

Animation designers

Công việc của họ nằm giữa graphic desgn và video editing. Animation designer tạo những đồ họa chuyển động phù hợp cho yêu cầu của các thiết kế digital, ví dụ như những chuyển động chuyển trang, di chuyển hoặc thay đổi hình dạng element.

CỘNG CỤ NÀO DIGITAL DESIGNERS SỬ DỤNG?

Adobe Creative Cloud

Adobe là cái tên quen thuộc trong thế giới digital. Họ là công ty cung cấp phầm mềm thiết kế lâu đời. Dù giá của các phầm mềm này tương tối đắt nhưng bởi sự hữu dụng, họ cũng không thể bị thay thế. Adobe có rất nhiều phần mềm phục vụ cho nhiều mục đích thiết kế khác nhau, một số phềm mềm phổ biến có thể nhắc tới như Adobe Illustrator, Adobe Photoshop, Adobe InDesign, Adobe After Effects và Adobe XD.

GIMP

Nếu bạn mới bắt đầu tìm hiểu về thiết kế, các công cụ của Adobe có thể khiến bạn choáng ngợp, bối rối khi sử dụng. Tuy nhiên, với một giao diện đơn gian, GIMP sẽ khiến việc tìm hiểu và sử dụng dễ dàng hơn rất nhiều. Đồng thời, với mức giá phải chăng, nó cũng sẽ là lựa chọ hợp lý cho những beginner.

Sketch

Trong nhiều năm, Sketch đã là lựa chọn hàng đầu của nhiều interface designer. Những người dùng Sketch chủ yếu là UX/UI designer, dùng để thiết kế website hoặc mobile app. Tuy nhiên, Sketch chỉ tích hợp trên các thiết bị của Apple.

Figma

Figma, giống như Adobe XD, họ cung cấp một bản miễn phí với đầy đủ tính năng. Về công năng, nó là một web app có hiệu suất nhanh hơn hẳn so với Sketch và các công cụ tương tự. Bên cạnh đó, nó chạy trên mọi hệ điều hành.

digital design UX/UI Designer Digital agency thiết kế thiết kế giao diện

Digital design đã trở thành một phạm trù thiết kế không thể thiếu trong bối cảnh hiện đại, nhưng liệu bạn đã biết tất cả các kiến thức liên quan chưa? Bài viết này sẽ đem đến cho bạn những khái niệm đó một cách ngắn gọn nhất.

Các thuật ngữ của digital design

UX design

UI design

IA (Information Architecture)

Những kiểu digital designer

Graphic designers

Web designers

Mobile designers

UX designers

UI designers

Product designers

Interaction designers

Animation designers

Công cụ nào được sử dụng bởi digital designer

Adobe Creative Cloud

GIMP

Sketch

Figma

Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác 9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research) Nghiên cứu hành vi người dùng bằng phương pháp 5 Tại sao Tối ưu CX (trải nghiệm khách hàng) với sơ đồ hành trình khách hàng (CJM) Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu? Bạn đã biết về Quy tắc thiết kế UI cho website?

Off

Cùng ngược dòng lịch sử đồ hoạ với những dấu mốc quan trọng

content — Thu, 28 Apr 2022 03:02:21 +0000

Cùng ngược dòng lịch sử đồ hoạ với những dấu mốc quan trọng content T5, 04/28/2022 - 10:02 Cảm hứng thiết kế sáng tạo

Lịch sử đồ hoạ đã trải qua một hành trình dài với nhiều cột mốc phát triển để hình thành nên thiết kế đồ hoạ ngày hôm nay.

Về mặt chuyên môn tất nhiên, không phải ai cũng biết và có thể làm đồ hoạ, thế nhưng điều này không có nghĩa là thiết kế đồ hoạ xa lạ với số đông mọi người. Đồ hoạ ở mọi nơi, từ những vật có thể cầm nắm như bao bì thực phẩm, biển bảng trưng bày, cho tới những sản phẩm trên digital như giao diện, hình ảnh mà chúng ta xem qua điện thoại, máy tính.

Đồng thời thiết kế đồ hoạ cũng không hề mới, không phải cần tới máy tính hay photoshop để có thiết kế đồ hoạ. Thiết kế đồ hoạ chính là những biểu tượng bí ẩn trong hang đá, là chữ viết trong những cuốn kinh thánh cổ, là những thứ đã có lịch sử hàng ngàn năm. Thiết kế đồ hoạ đã trải qua một hành trình dài với nhiều cột mốc phát triển để hình thành nên thiết kế đồ hoạ ngày hôm nay.

Xem thêm: Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?

Những dấu ấn đầu tiên của con người - Sự khởi đầu của lịch sử đồ hoạ

Từ 7000 năm trước Công Nguyên con người đã in dấu tay mình trên những hang đá. Và khoảng 4000 năm trước Công Nguyên đã phát minh những ký hiệu đầu tiên, đó là những hình vẽ trong lăng mộ Pharaoh, là những ký hiệu trên đá của người Sumer. Tất cả chúng đều là những ký hiệu nhằm in dấu cá nhân, để lại lời dăn hay thuật lại một câu chuyện.

Những cuốn kinh thánh viết tay

Tất nhiên chữ viết đã có từ rất lâu từ trước nhưng nó sẽ chỉ là những bản khắc trên đá hoặc viết tay trong thư từ cá nhân. Nhưng với kinh thánh - một loại văn bản đầy tính thiêng liêng, chữ viết được đẩy lên một tầm cao mới. Được viết bằng tay nhưng vô cùng chuẩn chỉ trong hình dáng và kích thước chữ, cùng với hình minh hoạ và tính trang trí cao, những cuốn kinh thánh thời Trung Cổ là những sản phẩm mang đầy tính thiết kế.

Chiếc máy in đầu tiên

Lịch sử thiết kế đồ hoạ luôn gắn liền với lịch sử công nghệ, kỹ thuật của con người. Chứng minh rõ cho điều ấy chính là dấu mốc lịch sử của chiếc máy in đầu tiên. Được phát minh vào thế kỷ 15, chiếc máy in của Gutenberg đã xoá đi cảnh tu sĩ ngày qua ngày ngồi chép tay nhưng cuốn kinh thánh. Xuất bản văn bản nay đã dễ dàng hơn rất nhiều lần. Dấu mốc này tạo tiền đề cho sự mở rộng tri thức, là bước đầu cho sản xuất công nghiệp và ngành chế tạo font chữ.

Những chiếc poster đầu tiên trong lịch sử đồ hoạ

Vào cuối thế kỷ 19, với sự phát triển của công nghệ in ấn người ta bắt đầu có thể in màu, cùng với sự phát triển của thương mại thúc đẩy sự hình thành của poster quảng cáo. Chúng gắn liền với Bella Epoque, thời kỳ tươi đẹp với âm nhạc, kiêu vũ và nghệ thuật,.. tất cả chúng được đưa lên những chiếc poster đầu tiên, tạo dấu ấn cho một thời kỳ lạc quan, sung túc.

=> Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI

Bauhaus - Nơi khai sinh thiết kế hiện đại

Là trường nghệ thuật được thành lập đầu thế kỷ 20, Bauhaus đã tạo ra những nghệ sĩ, nhà thiết kế như: Herbert Bayer, Paule Klee, Joseff Albers, Marcel Breuer,... Cùng phong cách thiết kế mang tính biểu tượng sử dụng ba hình cơ bản: vuông, tròn, tam giác, Bauhaus đặt nền móng đầu tiên cho thiết kế hiện đại. Cho tới tận giờ, Bauhaus vẫn là một biểu tượng thiết kế, mang tính đầy lịch sử và nhắc tới ba hình: vuông, tròn, tam giác vẫn sẽ là nhắc tới Bauhaus.

Swiss Design trong dòng chảy lịch sử đồ hoạ

Di chuyển tới giữa thế kỷ 20, tại Thuỵ Sỹ phong trào thiết kế đã lên một tầm cao mới, với sự ra đời của Swiss Style hay còn gọi là International Style.

Yếu tố quan trọng về mặt lịch sử của Swiss Design đó là đã tạo ra hệ thống lưới (grid) mà sau này trở thành tiêu chuẩn của thiết kế đồ hoạ. Nhờ có hệ thống lưới mọi thứ được phân cấp rõ ràng, tạo nên tính “sạch sẽ” đặc trưng của Swiss Design.

Xem thêm: Truyền Thông Thị Giác: Nhận Thức Và Thao Túng

Psychedelic Style

Những năm 60, bị ảnh hưởng bởi phong trào hippie với tư tưởng về sự tự do, khai sáng, thiết kế được biến hoá hoàn toàn với sự phá vỡ hình khối, màu sắc ấn tượng. Đặc trưng của phong cách này là tạo hình mềm mại, hoà vào nhau giống như chất lỏng, màu sắc ấn tượng, liên tưởng tới ảo giác.

Với ảnh hưởng bởi phong trào nghệ thuật Art Nouveau, Psychedelic Style cũng thường có hình chân dung phụ nữ với tính thơ mộng, bay bổng.

New Wave

New Wave hay Swiss Punk Typography là một phong trào thiết kế những năm 70. Với tư tưởng của Hậu Hiện Đại, đi cùng phong trào Punk, đồng thời là phản đề của Swiss Design trước đó.

Nếu Swiss Design là ngay hàng thẳng lối, phân cấp rõ ràng thì New Wave là hỗn loạn, bất quy tắc. Sử dụng rất nhiều yếu tố về typography, phá vỡ font chữ, phá vỡ lưới, thể hiện tinh thần bất mãn, mong cầu tự do của thời kỳ ấy.

Cyberpunk

Với sự phát triển của công nghệ, con người có thể bay vào vũ trụ tạo ảnh hưởng tới các phong trào văn hoá, nghệ thuật. Nhiều tác phẩm văn học giả tưởng về vũ trị, người ngoài hành tinh được xuất bản, đi theo đó cũng là những tác phẩm điện ảnh cùng chủ đề, từ đó cũng phát triển một phong cách thiết kế mới, Cyberpunk. Phong cách thiết kế đặc trưng với đèn neon, tàu vũ trị, súng may, người máy,...

Xem thêm: Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Thiết kế đồ hoạ Thiết kế đồ hoạ cho doanh nghiệp thiết kế nghiên cứu thiết kế lịch sử thiết kế đồ hoạ lịch sử đồ hoạ Thiết kế sáng tạo

Thiết kế đồ hoạ đã trải qua một hành trình dài với nhiều cột mốc phát triển để hình thành nên thiết kế đồ hoạ ngày hôm nay.

Bài viết liên quan

Xem thêm: Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?

Những dấu ấn đầu tiên của con người - Sự khởi đầu của lịch sử đồ hoạ

Những cuốn kinh thánh viết tay

Chiếc máy in đầu tiên

Những chiếc poster đầu tiên trong lịch sử đồ hoạ

=> Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI

Bauhaus - Nơi khai sinh thiết kế hiện đại

Swiss Design trong dòng chảy lịch sử đồ hoạ

Di chuyển tới giữa thế kỷ 20, tại Thuỵ Sỹ phong trào thiết kế đã lên một tầm cao mới, với sự ra đời của Swiss Style hay còn gọi là International Style.

Xem thêm: Truyền Thông Thị Giác: Nhận Thức Và Thao Túng

Psychedelic Style

Với ảnh hưởng bởi phong trào nghệ thuật Art Nouveau, Psychedelic Style cũng thường có hình chân dung phụ nữ với tính thơ mộng, bay bổng.

New Wave

Cyberpunk

Xem thêm: Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn? 11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn Creative Agency Model - Khám phá các mô hình Agency sáng tạo mới Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Ý nghĩa màu sắc và cách ứng dụng màu trong thiết kế

Off

Bạn đã biết về Quy tắc thiết kế UI cho website?

content — Fri, 08 Apr 2022 02:52:34 +0000

Bạn đã biết về Quy tắc thiết kế UI cho website? content T6, 04/08/2022 - 09:52 Cảm hứng thiết kế sáng tạo

Việc sử dụng và áp dụng đúng quy tắc thiết kế UI cho website luôn hữu ích cho việc xây dựng và phát triển một website.

Quy tắc thiết kế UI cho website là gì?

Quy tắc thiết kế UI cho website (User Interface Guidelines) là một tài liệu chứa các quy tắc để thiết kế một trang web. Chúng là tập hợp các khuyến nghị về cách áp dụng các nguyên tắc thiết kế để mang đến trải nghiệm người dùng tích cực. Mục đích là cung cấp hướng dẫn rõ ràng, dễ tiếp thu và hiệu quả cho các nhà thiết kế và nhà phát triển sản phẩm.

Tại sao chúng ta phải đưa ra quy tắc thiết kế UI cho website?

Lý do chính tại sao nó được đặt ra là để ưu tiên “tiêu chuẩn và tính nhất quán” trong việc triển khai mọi văn bản, nút, biểu tượng, khoảng cách, màu sắc, v..v…trong quá trình phát triển hệ thống hay một website.

Nếu một nhà thiết kế hay nhà phát triển thấy một số thiết kế không nhất quán, họ có thể dễ dàng nhìn vào bản quy tắc thiết kế UI để biết đâu là điểm bất hợp lý. Không chỉ vậy, để một hệ thống có thể phát triển, những yếu tố sẵn có hiện tại cần có khả năng mở rộng và tạo ra các thành phần mới phức tạp hơn.

Đối với trường hợp của chúng tôi, vì hệ thống được phát triển bởi 2 nhóm riêng biệt, team chúng tôi và team khác cần quy tắc thiết kế UI để tuân thủ và thống nhất hướng làm việc.

Những khía cạnh nào được thấy trong quy tắc thiết kế UI cho website?

Bây giờ chúng ta xem xét những khía cạnh nào nên được sử dụng làm quy tắc khi thiết kế UI cho website. Các khía cạnh này bao gồm:

Typography: Loại font chữ, lựa chọn kiểu chữ, kích thước được phép sử dụng
Màu sắc: Các màu được sử dụng, gồm màu chính, màu phụ thứ nhất và màu phụ thứ hai.
Nút: Hình dạng, màu sắc, văn bản, bán kính, kích thước và hành động gắn với nút.
Nhập và biểu mẫu: Quy định về hình dạng, kích thước.
Icon: Loại icon, kích thước của chúng.
Khoảng cách: Khoảng cách, khoảng trống giữa các yếu tố.
Tương tác và hành động: Các hành động và tương tác của người dùng với một yếu tố (di chuột, cuộn, nhấp,.v..v…)
Lỗi và trạng thái hệ thống: Những quy tắc về thông tin hiển thị khi xảy ra lỗi hoặc thông báo về trạng thái.

Đưa nhận diện thương hiệu của khách hàng vào website

Các quy tắc thiết kế UI cho website cần dựa trên những quy tắc về nhận diện của thương hiệu (brand identity). Trong một số trường hợp, khách hàng không đưa ra yêu cầu cụ thể liên quan đến nhận diện thương hiệu nhưng bạn vẫn nên nói chuyện với họ về vấn đề này. Bởi website cũng là một phần của thương hiệu, chúng nên được xây dựng dựa trên những quy tắc về nhận diện thương hiệu. Hãy nghiên cứu và quan sát xem liệu nhận diện thương hiệu của khách hàng và giao diện mà chúng ta thiết kế đã đồng nhất hay chưa.

Xem thêm: 10 nguyên tắc cốt lõi để có một thiết kế Website tốt

Sử dụng công cụ nào?

Khi đưa ra quy tắc giao diện người dùng, tôi đã thực hiện mọi phần trên Figma. Lý do chình là vì Figma chứa công cụ master component và reusable style, tối ưu cho việc thiết kế một hệ thống. Với những công cụ này, tôi có thể dễ dàng tái sử dụng lại những phần mà tôi đã thiết kế trước đó, điều chỉnh một số chi tiết nhỏ mà không cần phải duplicate.

Quy tắc thiết kế UI cho website

Typography

Nguyên tắc giao diện người dùng trong kiểu chữ bao gồm các quy tắc sử dụng font chữ, cỡ chữ, độ đậm (weight) và tất cả những thứ liên quan tới việc sử dụng văn bản trên một trang web. Ví dụ về quy định typography với typeface Nunito Sans:

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Màu sắc trong Quy tắc thiết kế UI cho website

Tạo quy định cho màu sắc bằng cách liệt kê các màu cơ bản sẽ được dùng, ví dụ như đen, trắng, xám và những màu phụ như đỏ - để báo lỗi, xanh lá - báo thành công và màu thương hiệu của khách hàng - trong trường hợp này là cam.

Xem thêm: Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Từ bộ màu này, một số cấp độ màu (sáng hơn hoặc đậm hơn) có thể được tạo ra. Màu phụ sử dụng để điều chỉnh các yêu cầu hệ thống để nó không bị cứng nhắc hay giới hạn, dưới đây là bảng quy tắc giao diện người dùng cho màu:

Nút (Button) khi thiết kế UI

Quy tắc tạo nút được thực hiện bằng cách xác định các loại nút và hành động gắn với chúng. Ví dụ như khi di chuột qua nút hay khi nút bị vô hiệu quá. Nút có thể được thiết kế với một hệ thống phân cấp về mức độ quan trọng: Chính (primary), cấp hai (secondary) và cấp ba (triad).

Khoảng cách

Ngoài typeface, màu sắc và icon, khoảng cách cũng là một trong những yếu tố quan trọng nhưng lại ít được chú ý đó là khoảng cách. Mặc dù có vẻ tầm thường nhưng khoảng cách giúp thiết kế có không gian “thở” giữa những yếu tố khác. Khoảng cách cũng rất hữu ích để thiết kế được tối giản và sạch sẽ hơn. Để tạo thuận lợi cho giai đoạn thiết kế và phát triển front-end, đơn vị khoảng cách được sử dụng nên là bội số của 4.

Dưới đây là một quy tắc về khoảng cách và cách nó được triển khai trên thiết kế:

Icon

Icon giúp nhấn mạnh vào trọng tâm thông tin qua một hệ thống đồ họa. Hệ thống icon cần được đồng nhất về style thiết kế. Bạn có thể dùng icon từ Material Design Icons, kho icon từ hệ thống thiết kế của Google.

Dưới đây là ví dụ về cách triển khai icon:

Sau khi đã có những quy tắc về màu sắc, typeface và icon, chúng ta kết hợp chúng lại tạo hệ thống layout. Trong một website, các trang của nó sẽ có sự tương đồng về cả yếu tố nhỏ lẫn tổng thể layout, việc tạo hệ thống layout cho chúng ta khả năng tái sử dụng nó ở những trang khác.

Xem thêm: Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng

Khi tạo quy tắc giao diện người dùng trên Figma, những quy tắc này có thể được lưu lại dưới dạng “local style” và “asset list”. Dưới đây là một ví dụ:

Lợi ích của quy tắc thiết kế UI cho website trong giai đoạn phát triển

Tất nhiên, trong giai đoạn thiết kế, quy tắc giao diện người dùng rất hữu ích cho các nhà thiết kế, nhưng với những nhà phát triển nó hữu ích như thế nào?

Với những nhà phát triển back-end, những hướng dẫn này hữu ích cho việc hỗ trợ chuẩn bị mô hình cơ sở dữ liệu rõ ràng hơn và giúp hiểu về quy trình kinh doanh mà người dùng muốn đạt được.

Từ quan điểm của nhà phát triển back-end, các nguyên tắc này hữu ích cho việc tạo HTML và CSS cho các phần trên website. Không chỉ vậy, với sự hỗ trợ của Figma, nhà phát triển front-end cũng có thể sao chép code từ CSS của mỗi phần. Bởi vậy, việc tạo và tuân thủ quy tắc thiết kế UI cho website sẽ rút ngắn đáng kể thời gian và công sức khi xây dựng một trang web.

Kết luận

Việc sử dụng và áp dụng đúng quy tắc thiết kế UI cho website sẽ hữu ích cho việc xây dựng và phát triển một website. Ngoài ra, những nguyên tắc này cũng có thể được tạo và áp dụng với các sản phẩm số khác như ứng dụng web, ứng dụng di động. Đặc biệt là đối với những nhà thiết kế, những quy tắc ấy là nền tảng để xây dựng một thiết kế đồng bộ, có hệ thống. Và nó cũng là bản đồ cho quá trình thiết kế, loại bỏ tình trạng thiết kế đi lạc hướng.

Với trường hợp website sẽ mở rộng và phát triển trong tương lai, thiết kế có thể được điều chỉnh theo nhu cầu/yêu cầu dựa trên những quy tắc sẵn có đó. Việc thay thế hay thêm/bớt có thể được thực hiện dễ dàng, chỉ cần tuân thủ theo những quy tắc ấy.

nghiên cứu thiết kế Thiết kế UI Thiết kế Web thiết kế Thiết kế bộ nhận diện thương hiệu thiết kế logo UI Giao diện người dùng Thiết kế Website

Việc sử dụng và áp dụng đúng quy tắc thiết kế UI cho website luôn hữu ích cho việc xây dựng và phát triển một website.

Quy tắc thiết kế UI cho website là gì?

Tại sao chúng ta phải đưa ra quy tắc thiết kế UI cho website?

Những khía cạnh nào được thấy trong quy tắc thiết kế UI cho website?

Bây giờ chúng ta xem xét những khía cạnh nào nên được sử dụng làm quy tắc khi thiết kế UI cho website. Các khía cạnh này bao gồm:

Typography: Loại font chữ, lựa chọn kiểu chữ, kích thước được phép sử dụng
Màu sắc: Các màu được sử dụng, gồm màu chính, màu phụ thứ nhất và màu phụ thứ hai.
Nút: Hình dạng, màu sắc, văn bản, bán kính, kích thước và hành động gắn với nút.
Nhập và biểu mẫu: Quy định về hình dạng, kích thước.
Icon: Loại icon, kích thước của chúng.
Khoảng cách: Khoảng cách, khoảng trống giữa các yếu tố.
Tương tác và hành động: Các hành động và tương tác của người dùng với một yếu tố (di chuột, cuộn, nhấp,.v..v…)
Lỗi và trạng thái hệ thống: Những quy tắc về thông tin hiển thị khi xảy ra lỗi hoặc thông báo về trạng thái.

Đưa nhận diện thương hiệu của khách hàng vào website

Xem thêm: 10 nguyên tắc cốt lõi để có một thiết kế Website tốt

Sử dụng công cụ nào?

Quy tắc thiết kế UI cho website

Typography

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Màu sắc trong Quy tắc thiết kế UI cho website

Xem thêm: Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Nút (Button) khi thiết kế UI

Khoảng cách

Dưới đây là một quy tắc về khoảng cách và cách nó được triển khai trên thiết kế:

Icon

Dưới đây là ví dụ về cách triển khai icon:

Xem thêm: Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng

Lợi ích của quy tắc thiết kế UI cho website trong giai đoạn phát triển

Kết luận

Xu Hướng Thiết Kế Website 2018 - 2020 Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn? Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế? Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu? Cách thương hiệu ứng dụng màu sắc trong thiết kế nhận diện

Off

Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu?

content — Mon, 28 Mar 2022 04:12:57 +0000

Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu? content T2, 03/28/2022 - 11:12 UX/UI

Nghiên cứu thiết kế hiệu quả không chỉ dừng lại với dữ liệu giá trị, nó chỉ dừng lại với thiết kế và chức năng tốt mà người dùng yêu thích, muốn và cần.

Nghiên cứu thiết kế thường bị bỏ qua bởi designer thường quá bận tâm tới việc thiết kế nhìn trông như thế nào. Điều này dẫn tới sự hiểu người dùng của họ chỉ dừng lại ở lớp bề mặt, mà suy nghĩ này lại đi ngược lại với những gì UX thực sự là - lấy người dùng là trung tâm.

Thiết kế UX tập trung vào nghiên cứu để hiểu nhu cầu của con người và loại sản phẩm hay dịch vụ mà chúng ta làm ra sẽ giúp họ như thế nào.

Dưới đây là một số loại nghiên cứu thiết kế mà mọi designer nên biết khi bắt đầu một dự án. Và dù bạn không phải là người trực tiếp làm nghiên cứu, thì những kiến thức này bạn vẫn sẽ giúp bạn dễ dàng trao đổi với người làm nghiên cứu, điều thúc đẩy tương tác và hiệu quả công việc.

Xem thêm: Hãy tránh 10 thành kiến sau khi Nghiên Cứu Người Dùng

Nghiên cứu chính về thiết kế

Nghiên cứu chính về cơ bản là đưa ra dữ liệu mới để hiểu bạn đang thiết kế cho ai và bạn có khả năng lên kế hoạch thiết kế những gì. Nó cho phép chúng ta xác nhận ý tưởng của mình với người dùng và thiết kế các giải pháp có ý nghĩa hơn cho họ. Các designer thường thu thập loại dữ liệu này thông qua các cuộc phỏng vấn với các cá nhân hoặc thông qua các nhóm nhỏ, khảo sát hoặc bảng câu hỏi.

Điều quan trọng là phải xác định rõ cần nghiên cứu những gì trước khi bắt đầu tìm nhóm người theo loại hay chất lượng của dữ liệu bạn muốn thu thập. Trong một bài viết từ đại học Surrey đề cập hai điểm quan trọng cần giải quyết khi tiến hành nghiên cứu chính là: giá trị và tính thực tiễn.

Giá trị của dữ liệu đề cập đến sự thật mà nó cho biết về chủ đề hoặc hiện tượng đang nghiên cứu. Một dữ liệu có thể có tính xác thực nhưng không có giá trị với mục tiêu nghiên cứu.

Xem thêm: Nghiên cứu UX định lượng khác gì với Phân tích dữ liệu?

Tính thực tiễn của nghiên cứu là những yếu tố về tính khả thi, cần được xem xét cẩn thận khi phát triển hướng nghiên cứu thiết kế, ví dụ:

Chi phí và ngân sách
Thời gian và quy mô
Kích thước của mẫu

Bryman viết trong Social Research Methods (2001) xác định bốn loại giá trị có thể ảnh hưởng đến kết quả của bạn:

Giá trị đo lường hoặc giá trị xây dựng: Liệu phương pháp đang sử dụng có thực sự đo lường những gì nó đề cập không. Ví dụ, số liệu thống kê về lượng người đi lễ nhà thờ có đo lường được mức độ sức mạnh của niềm tin tôn giáo không?
Giá trị nội tại: Đề cập đến quan hệ nhân quả và liệu một kết luận của nghiên cứu hoặc lý thuyết được phát triển có phản ánh đúng nguyên nhân hay không. Ví dụ, thất nghiệp có thực sự là nguyên nhân gây ra tội phạm hay không? có những cách giải thích khác không?
Giá trị bên ngoài: Xem xét liệu kết quả của một phần nghiên cứu cụ thể có thể được khái quát hóa cho các nhóm khác hay không. Ví dụ, một cách phát triển cộng đồng hiệu quả ở khu vực này, thì nó có tác động tương tự ở một địa điểm khác không?
Giá trị sinh thái: Xem xét liệu “những phát hiện khoa học xã hội có phù hợp với bối cảnh tự nhiên hàng ngày của con người hay không” (Bryman, 2001). Ví dụ, nếu một tình huống được xét trong một bối cảnh sai, nó ảnh hưởng như thế nào đến hành vi của con người?

Nghiên cứu thiết kế thứ cấp

Nghiên cứu thiết kế thứ cấp là sử dụng dữ liệu đã tồn tại trên internet, sách, báo để hỗ trợ lựa chọn thiết kế và bối cảnh đằng sau thiết kế. Nghiên cứu thứ cấp cũng được sử dụng như một cách để xác nhận thêm thông tin về người dùng từ nghiên cứu chính và tạo ra một bối cảnh hay tình huống cụ thể hơn cho thiết kế. Một nghiên cứu thứ cấp thường tóm lược cả lại những nghiên cứu hiện có.

Bạn có thể chỉ dùng phương pháp nghiên cứu thứ cấp để đánh giá thiết kế, nhưng nếu có thời gian, bạn nên làm cả nghiên cứu chính để có một cái nhìn rõ nét nhất về người dùng, và để nhận được nhiều insight thú vị hơn những dữ liệu có sẵn. Khi bạn thu thập được nhiều dữ liệu hữu ích, bạn sẽ có insight tốt hơn, đồng nghĩa với thiết kế và sản phẩm tốt hơn.

Nghiên cứu thiết kế sử dụng cách đánh giá

Nghiên cứu đánh giá là đánh giá một vấn đề để đảm bảo khả năng sử dụng, căn cứ vào nhu cầu và mong muốn cụ thể. Một cách để làm nghiên cứu đánh giá đó là thử nghiệm sản phẩm, bằng cách mời một người dùng tới dùng thử sản phẩm và đưa ra những câu hỏi và nhiệm vụ để họ thực hiện. Có hai loại nghiên cứu đánh giá: đánh giá tổng quan và đánh giá cuối.

Đánh giá tổng quan: Đánh giá về kết quả và tác động sản phẩm. Nó tập trung vào kết quả đạt được thay vì quá trình. Nghiên cứu đánh giá có thể bao gồm:

Tài chính: Mức chi phí, lợi ích tiết kiệm, lợi nhuận,...
Tác động: Hiệu ứng của nó bao gồm cả tích cực lẫn tiêu độ sâu, rộng và thời gian
Kết quả: Bao gồm cả kết quả mong muốn và không mong muốn
Phân tích thứ cấp: Phân tích dữ liệu hiện có thể được thêm thông tin
Phân tích tổng hợp: Tích hợp kể quả của nhiều nghiên cứu

Đánh giá cuối: Sử dụng để cải thiện hay củng cố sản phẩm, nó có thể bao gồm:

Thực thi: Giám sát một quá trình hay một dự án hoàn thiện
Nhu cầu: Xem xét về loại và mức độ nhu cầu ứng với sản phẩm
Tiềm năng: Khả năng khai thác thông tin để thúc đẩy cải thiện sản phẩm

Nghiên cứu thiết kế qua khám phá

Nghiên cứu khám phá là tiến hành nghiên cứu xung quanh một chủ đề chưa có nhiều sự hiểu biết. Mục đích của nghiên cứu khám phá là để hiểu sâu sắc và làm quen với một chủ đề bằng cách tiếp nhận dữ liệu, thông tin về nó càng nhiều càng tốt, nhằm tạo ra định hướng sử dụng cho các dữ liệu này trong tương lai.

Với nghiên cứu thiết kế qua khám phá, bạn có cơ hội đạt được những hiểu biết mới và tạo ra các giải pháp đáng giá cho các vấn đề lớn với nhiều ý nghĩa hơn những giải pháp đã có sẵn.

Nghiên cứu khám phá cho phép chúng ta xác nhận những giả định của mình trong một chủ đề thường bị bỏ qua, bằng cách cung cấp cơ hội để tạo ra những ý tưởng mới và phát triển cho các vấn đề/cơ hội hiện có.

Xem thêm: Nghiên cứu hành vi người dùng bằng phương pháp 5 Tại sao

Dựa trên một bài báo của trường đại học Lynn, nghiên cứu khám phá cho chúng ta biết:

Thiết kế là một cách tiếp cận hữu ích để thu thập thông tin cơ bản về một chủ đề cụ thể.
Nghiên cứu khám phá rất linh hoạt và có thể giải quyết các câu hỏi nghiên cứu thuộc mọi loại (what, why, how)
Cung cấp cơ hội để xác định các thuật ngữ mới và làm rõ các khái niệm hiện có
Các nghiên cứu thiết kế qua khám phá giúp xác định thứ hạng ưu tiên cho các nghiên cứu tiến hành sau đó

Nghiên cứu thiết kế phong cách sản xuất

Nghiên cứu thiết kế theo sản xuất là việc chọn ra những insight và vấn đề nhất định đã xác định được trong các nghiên cứu trước đó và tạo ra giải pháp cho chúng. Các giải pháp này có thể là giải pháp giải quyết một vấn đề mới hoặc cải thiện một giải pháp đã có.

Bởi nghiên cứu sản xuất ít nhiều sẽ là giai đoạn tạo cơ hội hay giải pháp, vậy nên bạn cần hiểu rõ nhu cầu, mục tiêu của người dùng trước khi bắt đầu. Nghiên cứu sản xuất cho phép chúng ta quan sát các hành vi người dùng trong bối cảnh tự nhiên, thứ có thể hiểu hơn bằng nhân khẩu học, phỏng vấn, nhóm tập trung và khai thác dữ liệu.

Nghiên cứu UX nghiên cứu thiết kế Nghiên cứu người dùng UX Thiết kế UX User Research thiết kế

Trong UX, nghiên cứu thiết kế là phần cơ bản trong việc giải quyết hoặc tìm ra và thu hẹp vấn đề mà người dùng phải đối mặt. Công việc của một designer là hiểu người dùng của họ, điều có nghĩa là vượt ra khỏi giả định, đặt mình vào vị trí của người dùng nhằm tạo ra những sản phẩm có thể đáp ứng nhu cầu của họ.

Bài viết liên quan

"Nghiên cứu thiết kế hiệu quả không chỉ dừng lại với dữ liệu giá trị, nó chỉ dừng lại với thiết kế và chức năng tốt mà người dùng yêu thích, muốn và cần."

"Thiết kế UX tập trung vào nghiên cứu để hiểu nhu cầu của con người và loại sản phẩm hay dịch vụ mà chúng ta làm ra sẽ giúp họ như thế nào."

Xem thêm: Hãy tránh 10 thành kiến sau khi Nghiên Cứu Người Dùng

Nghiên cứu chính về thiết kế với Design Thinking

Xem thêm: Nghiên cứu UX định lượng khác gì với Phân tích dữ liệu?

Tính thực tiễn của nghiên cứu là những yếu tố về tính khả thi, cần được xem xét cẩn thận khi phát triển hướng nghiên cứu thiết kế, ví dụ:

Chi phí và ngân sách
Thời gian và quy mô
Kích thước của mẫu

Bryman viết trong Social Research Methods (2001) xác định bốn loại giá trị có thể ảnh hưởng đến kết quả của bạn:

Giá trị đo lường hoặc giá trị xây dựng: Liệu phương pháp đang sử dụng có thực sự đo lường những gì nó đề cập không. Ví dụ, số liệu thống kê về lượng người đi lễ nhà thờ có đo lường được mức độ sức mạnh của niềm tin tôn giáo không?
Giá trị nội tại: Đề cập đến quan hệ nhân quả và liệu một kết luận của nghiên cứu hoặc lý thuyết được phát triển có phản ánh đúng nguyên nhân hay không. Ví dụ, thất nghiệp có thực sự là nguyên nhân gây ra tội phạm hay không? có những cách giải thích khác không?
Giá trị bên ngoài: Xem xét liệu kết quả của một phần nghiên cứu cụ thể có thể được khái quát hóa cho các nhóm khác hay không. Ví dụ, một cách phát triển cộng đồng hiệu quả ở khu vực này, thì nó có tác động tương tự ở một địa điểm khác không?
Giá trị sinh thái: Xem xét liệu “những phát hiện khoa học xã hội có phù hợp với bối cảnh tự nhiên hàng ngày của con người hay không” (Bryman, 2001). Ví dụ, nếu một tình huống được xét trong một bối cảnh sai, nó ảnh hưởng như thế nào đến hành vi của con người?

Nghiên cứu thiết kế thứ cấp

Nghiên cứu thiết kế sử dụng cách đánh giá

Tài chính: Mức chi phí, lợi ích tiết kiệm, lợi nhuận,...
Tác động: Hiệu ứng của nó bao gồm cả tích cực lẫn tiêu độ sâu, rộng và thời gian
Kết quả: Bao gồm cả kết quả mong muốn và không mong muốn
Phân tích thứ cấp: Phân tích dữ liệu hiện có thể được thêm thông tin
Phân tích tổng hợp: Tích hợp kể quả của nhiều nghiên cứu

Đánh giá cuối: Sử dụng để cải thiện hay củng cố sản phẩm, nó có thể bao gồm:

Thực thi: Giám sát một quá trình hay một dự án hoàn thiện
Nhu cầu: Xem xét về loại và mức độ nhu cầu ứng với sản phẩm
Tiềm năng: Khả năng khai thác thông tin để thúc đẩy cải thiện sản phẩm

Nghiên cứu thiết kế qua khám phá

Xem thêm: Nghiên cứu hành vi người dùng bằng phương pháp 5 Tại sao

Dựa trên một bài báo của trường đại học Lynn, nghiên cứu khám phá cho chúng ta biết:

Thiết kế là một cách tiếp cận hữu ích để thu thập thông tin cơ bản về một chủ đề cụ thể.
Nghiên cứu khám phá rất linh hoạt và có thể giải quyết các câu hỏi nghiên cứu thuộc mọi loại (what, why, how)
Cung cấp cơ hội để xác định các thuật ngữ mới và làm rõ các khái niệm hiện có
Các nghiên cứu thiết kế qua khám phá giúp xác định thứ hạng ưu tiên cho các nghiên cứu tiến hành sau đó

Nghiên cứu thiết kế phong cách sản xuất

Cải thiện trải nghiệm khách hàng (CX) trong 4 bước 9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research) Nghiên cứu hành vi người dùng bằng phương pháp 5 Tại sao Tối ưu CX (trải nghiệm khách hàng) với sơ đồ hành trình khách hàng (CJM) 5 yếu tố cải thiện trải nghiệm người dùng UX - Tầm nhìn, Trải nghiệm, và Design Thinking

Off

Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng

cindy — Mon, 21 Jun 2021 08:54:31 +0000

Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng cindy T2, 06/21/2021 - 15:54 UX/UI thiết kế Thiết kế Website Luật xa gần Quy luật thị giác Negative space Visual Depth Perception

I. Lời mở đầu

Chúng ta đang sống trong không gian có ít nhất 3 chiều (thậm chí tới 11 chiều theo Stephen Hawking). Nhận thức được thế giới dưới con mắt đa chiều quả thực là một điều thú vị trong cuộc sống, vì nó giúp chúng ta cảm nhận và hiểu mọi thứ rõ ràng, cụ thể hơn. Không gian 3 chiều trong Toán học được mô tả bằng hệ trục Oxyz, tuy nhiên trong đời sống hàng ngày, khi không còn những khái niệm Toán học và con số toạ độ, chúng ta thường sử dụng chiều dài, chiều rộng và chiều sâu để nói về sự vật xung quanh mình.

Trong đời sống ngày nay, con người ta dành rất nhiều thời gian “nhìn” thế giới thông qua màn hình điện thoại hay máy tính. Tất cả hiện ra trên một mặt phẳng, thông qua những cú Click hay những cái lăn chuột. Như vậy chiều sâu của không gian đã biến đi đâu? Nó đã bị lược bỏ khi hiển thị phẳng, khiến mọi hình ảnh trước mắt bạn không còn độ “nổi khối”, không còn khoảng cách, tất cả như bị ép dính vào nhau. Tuy nhiên, khi xem một bức tranh phong cảnh núi non trùng điệp, bạn có cảm nhận được không gian ấy không, hay tất cả chỉ còn là những mảng màu bệt? Chắc chắn trong tiềm thức chúng ta sẽ hình thành những ý niệm về độ sâu, về khoảng cách khi quan sát bức tranh ấy. Và ý niệm này sẽ rõ ràng hơn khi “chiều sâu” được mô tả một cách trực quan hơn, như trong những tấm ảnh “xoá phông” với chủ thể nổi bật và background mờ mịt. Trên một khía cạnh kém rõ ràng hơn, thì trong bức tranh dưới đây cũng ẩn chứa sự mô tả độ sâu đầy tinh tế chứ không đơn giản chỉ là chuỗi những chấm tròn.

Những chấm tròn với kích thước tăng tuyến tính

Như vậy, có thể nói rằng bằng cách này hay cách khác, không gian 3 chiều nói chung và đặc biệt là chiều sâu nói riêng vẫn tồn tại ngay cả trong những thiết kế phẳng 2 chiều, và nó được biết đến dưới thuật ngữ “Visual depth”. Trong ngành thiết kế đồ hoạ cũng như thiết kế web, khéo léo sử dụng Visual depth để tạo ra ảo giác về mặt không gian sẽ góp phần tạo nên sự tin cậy ngay từ trong tiềm thức cho người xem, gián tiếp điều tiết cảm xúc của họ khi đứng trước bản thiết kế. Khi đã làm được điều này, designer sẽ làm chủ được những tác phẩm của chính mình.

II. Sơ lược về không gian 3 chiều và luật xa gần

Những ý niệm về việc thể hiện không gian ba chiều trên 1 mặt phẳng thông qua những đường nét phối cảnh tuyến tính được phát triển như một kĩ thuật kiến trúc vào thế kỉ XV tại nước Ý - trung tâm của thời kì Phục Hưng, bởi cha đẻ của kiến trúc Phục Hưng Filippo Brunelleschi và kiến trúc sư Leone Battista Alberti. Bằng việc ứng dụng toán học, họ đã phát minh ra hệ thống phối cảnh dựa theo tỉ lệ, đánh dấu bước ngoặt quan trọng trong sự phát triển của chủ nghĩa hiện thực bằng hình ảnh.

Điểm tụ thu hút ánh nhìn vào tâm ảnh

Những quy tắc phối cảnh được áp dụng vào mọi lĩnh vực nghệ thuật: tranh phong cảnh, tĩnh vật, chân dung, hình hoạ, điêu khắc, vv… Nếu chỉ dừng lại ở góc độ lí thuyết thì mọi thứ dường như rất mơ hồ và sẽ chỉ trực quan hơn khi áp dụng vào thực tế. Trên thực tế, nền tảng của luật xa gần dựa trên đặc điểm nhận thức thị giác của con người, là cách não bộ thông qua thị giác tiếp nhận hình ảnh và xử lí chúng. Có 3 đặc điểm thiết yếu như sau:

Kích thước vật thể sẽ trở nên nhỏ hơn khi vật thể lùi ra xa người quan sát. Vật thể càng xa sẽ cho cảm giác kích thước càng nhỏ và ngược lại.
Các vật thể ở gần người quan sát sẽ cho cảm giác lớn hơn các vật thể ở xa hơn, và tuỳ góc nhìn cũng như cách sắp đặt, vật thể ở gần có thể che khuất vật thể ở xa.
Các đường thẳng song song sẽ cho cảm giác hội tụ ở vô cực - điểm này trong tiếng Anh gọi là Vanishing point, còn trong tiếng Việt nó chính là “điểm tụ”.

Trong Hình 3 dưới đây, 3 hình người A- B -C có kích thước bằng nhau đặt tại 3 vị trí khác nhau. Chiếu theo các đường dẫn trong hình, thì người C có vẻ như đang ở gần điểm tụ nhất. Khi tiếp nhận hình ảnh này, trong tiềm thức ta sẽ bắt đầu phân tích: 2 hình ảnh trông có vẻ bằng nhau, vậy cái nào ở xa hơn thì kích thước thật của nó sẽ lớn hơn cái còn lại. Chính vì thế, não bộ sẽ bị đánh lừa rằng C có kích thước lớn hơn A.

Ảo giác về kích thước vật thể khi đặt tại các vị trí khác nhau

III. Những yếu tố ảnh hưởng đến Visual depth

1. Vị trí đặt vật

Vị trí vật thể là yếu tố trực tiếp tạo ra chiều sâu trong khung hình. Dễ thấy nhất chính là các thiết kế thể hiện rõ việc chồng lớp các layer: layer ở trên (đứng trước) sẽ che bớt 1 phần layer ở dưới (đứng sau). Như trong Hình 4 dưới đây thể hiện rất rõ layer dưới cùng là bức tranh đường phố mờ ảo, kế tiếp trên nó là layer chữ “Blk Mdre” nằm dưới layer minh hoạ người đàn ông áo đỏ, và trên nữa là layer chữ “Visual Arts Studio’.

Cảm nhận Visual depth thông qua việc chồng layer

2. Kích thước

Như đã đề cập ở phần trước, kích thước của hình ảnh vật thể mà não bộ tiếp nhận được sẽ thay đổi tuỳ vào vị trí đặt vật. Bên cạnh đó, visual weight cũng ảnh hưởng tới việc element nằm ở lớp trên hay dưới. Trong một Frame hình không thể hiện rõ các đường dẫn hay điểm tụ, phần lớn các element có kích thước lớn hơn hoặc visual weight nặng hơn sẽ cho cảm giác nổi lên trên. Trong ví dụ minh hoạ dưới đây, mặc dù phần description có kích thước không hề nhỏ nhưng tỉ trọng về mặt thị giác của nó khá thấp vì được dùng với màu xám, nhẹ hơn nhiều so với phần title hay Button đang dùng với màu trắng tuyệt đối #FFFFFF, vậy nên khi chiếu các element theo điểm tụ là center point của màn hình thì Title và Button là 2 lớp ở trên cùng, còn Description bị đẩy xuống dưới.

Trình duyệt của bạn không hỗ trợ HTML5.

Element ở layer trên cùng sẽ có kích thước hoặc visual weight lớn

Tuy nhiên khi điều tiết khối lượng element cũng cần chú ý vị trí của nó. Như trong phần bên trái thiết kế trong Hình 6 dưới đây, những con số được in đậm nằm quá gần phần biên của ô xám dưới nó vẫn được xem là phần nền, phần chân đế, dẫn đến cảm giác chênh vênh về vị trí các element này. Các element như vậy rất dễ gây cảm giác “rớt” ra khỏi nền nếu đặt quá sát lề. Bản chất phần nền xám này cũng là 1 mặt phẳng, vì vậy khi đặt element lên nó cũng cần xem xét mọi yếu tố như khi thiết kế toàn màn hình, tránh tình trạng “đứt gãy” liên kết giữa các element với nhau.

Element có visual weight lớn cần đặt ở vị trí phù hợp

3. Ánh sáng

Trong thiết kế 2D nói chung và thiết kế web nói riêng, ánh sáng là một phần không thể thiếu. Bản chất ánh sáng là 1 sóng hạt có cường độ giảm dần khi lùi xa nguồn sáng. Dựa vào nguyên lí này, khi quan sát các thiết kế 2D chúng ta có thể cảm nhận được sự xa-gần thông qua việc đánh giá mức độ rõ ràng của Element khi nó được “soi sáng”.

Element tối hơn sẽ cho cảm giác bị nhấn xuống lớp dưới (ở xa hơn)

Như trong hình 7, có thể dễ thấy các từ PRODUCTION, BRANDS và DISTRIBUTION đang sử dụng cùng 1 typeface và font size, tuy nhiên PRODUCTION sử dụng màu sáng hơn, từ đó nó như được nổi lên 1 lớp không gian trên so với 2 từ còn lại. Rõ ràng, element ở xa hơn không thể nhận được nhiều ánh sáng như element ở gần. Điều tương tự cũng xảy ra trong frame Hình 8 dưới đây.

Cụm text ở trung tâm sáng rõ nổi lên so với lớp phía dưới chứa hình ảnh

Nhắc đến ánh sáng thì không thể thiếu yếu tố shadow. Sử dụng shadow là cách mô tả trực tiếp việc sắp xếp layer theo kiểu “lớp chồng lớp” và nó chỉ diễn ra khi có từ 2 hay nhiều layer xếp chồng lên nhau trong khung hình. Có thể xem việc dùng shadow trong thiết kế là cách nhấn mạnh Visual depth, vì chiều sâu của không gian đã hình thành ngay khi các element chồng lên nhau.

Đổ bóng để nhấn mạnh chiều sâu trong thiết kế

Ngoài ra còn phải nhắc tới trào lưu glassmorphism - mang lại cảm giác khi nhìn mọi thứ qua tấm kính mờ. Với trào lưu này, một phần hay toàn bộ element ở lớp trên giống như một tấm kính trong cho phép ta nhìn xuyên qua nó để thấy những element ở lớp dưới như Hình 10.

Hiệu ứng nhìn xuyên qua tấm kính trong phong cách Glassmorphism

IV. Tác dụng của Visual depth

Một trong những ứng dụng của sử dụng chiều sâu không gian trong thiết kế là nhấn mạnh những element quan trọng trong frame. Nói một cách đơn giản hơn, việc tạo ra chiều sâu với lớp chính ở trên cùng và các lớp ít quan trọng hơn được đấy xuống dưới sẽ tạo ra tương phản chính phụ trực quan hơn, khiến cho cognitive load của người xem được giảm tải, giúp họ có thể tập trung vào yếu tố được nhấn mạnh trong khung hình.
Thêm vào đó, tạo ra tương phản tốt cũng là cách tạo ra flow đọc hiệu quả cho mắt người dùng. Nhiều nghiên cứu cũng chỉ ra rằng khi đứng trước hệ thống thông tin trên màn hình, mắt người sẽ không đọc toàn bộ mà bắt đầu “quét” qua một lượt và dừng lại ở thông tin nào người xem cho là hữu ích với họ. Thế nên một thiết kế với luồng đọc tốt không chỉ làm nổi bật những nội dung cốt lõi mà còn giúp cho cấu trúc thông tin được phân cấp tốt hơn, phân cấp rõ ràng hơn như trong Hình 11.

Người đọc sẽ quét các element nổi bật trước khi đọc cả site

Thiết kế cũng giống như âm nhạc. Một bài hát hay có nhịp điệu khi trầm khi bổng thì một thiết kế tốt cũng chứa đựng nhịp điệu lên xuống đúng lúc đúng chỗ. Người làm thiết kế cũng như người chơi nhạc, cần hiểu thiết kế của mình để có thể tạo ra những điểm nhấn nhả phù hợp, không chỉ điều tiết luồng đọc mà còn phải điều tiết cảm xúc của người xem. Theo nhiều kết quả nghiên cứu, nhịp tim của người đọc sẽ tăng lên khi nhìn thấy hình ảnh, thông điệp mạnh và giảm về bình thường khi đọc những đoạn text chỉ toàn chữ. Những thiết kế chứa quá nhiều nội dung mà không có chính-phụ sẽ gây ra sự căng thẳng cho người xem vì họ phải “đào bới” tất cả khối lượng thông tin đó để tìm ra cái nào là quan trọng hoặc cái nào là cái họ cần. Nói cách khác, chiều sâu sẽ tạo ra những “cột mốc” trên thiết kế, báo hiệu cho người dùng những vị trí quan trọng mà họ có thể nên quét qua trước tiên. Nếu không có những cột mốc này, người dùng hoàn toàn có thể lạc lối trên những layout phức tạp chứa nhiều thông tin không phân cấp.

Bên cạnh đó, Hình 12 dưới đây thể hiện mối tương quan về khoảng cách các element trên mặt phẳng (màn hình) và độ nông sâu của chúng. Khoảng cách từ Title tới Description cạnh quá ngắn sẽ tạo ra “độ dốc” cao vì mắt người xem giống như bị “rơi” từ layer trên xuống layer dưới quá nhanh. Giãn cách các element ra sẽ khiến đường mắt dẫn từ layer này sang layer khác trở nên “thoải” hơn, đó cũng là cách điều tiết nhịp trên thiết kế cho bớt gấp gáp, giúp người xem dễ dàng đi sâu vào trong thiết kế và cảm nhận nó.

Trình duyệt của bạn không hỗ trợ HTML5.

Element chính nổi lên trên so với element phụ

V. Lời kết

Chiều sâu trong thiết kế phẳng là khái niệm không mới, sách vở và các tài liệu chuyên ngành thường nhắc đến nó khi nói về negative space. Dù con mắt người xem vẫn cho rằng những thiết kế graphic hay UI là thiết kế dạng phẳng, chiều sâu vẫn chiếm một vai trò quan trọng trong việc điều tiết không gian trong thiết kế cũng như cảm xúc của người nhìn. Nội dung trong khuôn khổ bài viết này không mang mục đích tạo đưa ra các quy tắc hay hướng dẫn sử dụng visual depth, đây chỉ là những kiến thức nền tảng trong quá trình tìm hiểu về hiệu ứng thị giác và tâm lí nhận thức của người dùng. Tuy vậy, trước tiên các designer vẫn cần hiểu được nó, còn áp dụng vào thiết kế hay không, áp dụng tới đâu, hay thậm chí phá vỡ nó, đều tuỳ thuộc vào ý đồ thiết kế. Hẹn gặp lại trong các bài viết sau!

Tìm hiểu về thiết kế trải nghiệm người dùng (UX Design) Thiết Kế Web Chuyên Nghiệp – Nền Tảng Thành Công Của Các Doanh Nghiệp Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI Tâm lý học Màu sắc và ứng dụng trong thiết kế Phương Pháp Design Sprints cho Định Vị Thương Hiệu

Off

Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI

hapham — Thu, 19 Sep 2019 08:14:58 +0000

Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI hapham T5, 09/19/2019 - 15:14 UX/UI

Đã bao giờ bạn nhìn lên những đám mây trên bầu trời và tự vẽ lên cho mình những hình ảnh của một con thú quen thuộc hay một đồ vật nào đó chưa? Và đã bao giờ bạn tự hỏi rằng, tại sao chúng ta luôn liên tưởng những hình ảnh như vậy từ những đám mây không có hình dạng nhất định? Đó là bởi cách thức bộ não chúng ta vận hành.

Bộ não con người luôn cố gắng gán ý nghĩa cho thế giới quan bằng cách so sánh với những trải nghiệm hoặc những hình ảnh chúng đã từng thấy trước đó và sau đó kết nối chúng lại với nhau. Đúng vậy, để vẽ bức tranh tổng quan, bộ não con người nhận biết hình dáng, hình thức, nhóm thông tin và điền vào những khoảng trống theo một cách khá “kì quặc” của riêng nó.

Hiểu cách thức hoạt động của bộ não con người sẽ giúp bạn trở thành một người thiết kế khôn ngoan hơn, hay hơn thế nữa, bạn có thể trở thành một bậc thầy Visual Communication (Truyền Thông Thị Giác). Bạn có thể quyết định được yếu tố thị giác nào hiệu quả và phù hợp trong một tình huống nhất định, từ đó gây ảnh hưởng đến sự nhận thức, thu hút sự chú ý và tạo nên thay đổi trong hành vi của đối tượng. Điều này đặc biệt hữu ích cho các thiết kế trực quan có định hướng mục tiêu nhằm giải quyết vấn đề, đó là Thiết kế giao diện người dùng (UI Design).

Ông Laura Busche, Chiến lược gia nội dung thương hiệu tại Autodesk chia sẻ rằng: “Một người thiết kế giỏi hiểu được sức mạnh của tâm lý học trong việc nhận thức về mặt thị giác. Điều gì sẽ xảy ra nếu ai đó nhìn vào sản phẩm thiết kế của bạn? Họ sẽ phản ứng ra sao với thông điệp mà bạn gửi gắm trong sản phẩm của bạn?”

Rõ ràng là, thiết kế và tâm lý có một sự kết nối chặt chẽ với nhau, và chúng có thể ảnh hưởng lẫn nhau. Các nguyên tắc Gestalt sẽ giúp chúng ta hiểu rõ và kiểm soát được những liên kết này.

Gestalt là gì?

Gestalt (trong tiếng Đức mang nghĩa là hình dáng, hình thức) là một tập hợp của những nguyên tắc nhận thức về mặt thị giác, được phát triển bởi những nhà tâm lý học người Đức vào những năm 1920. Nó được xây dựng dựa trên lý thuyết “con người sẽ luôn nhìn nhận một tổng thể hơn là tập trung vào các phần nhỏ của nó”.

“The whole is other than the sum of the parts.”

— Kurt Koffka

Nguyên tắc Gestalt miêu tả cách con người tiếp nhận những yếu tố thị giác trong những điều kiện nhất định. Các nguyên tắc được xây trên 4 ý chính:

Emergence

Con người thường nhận ra các yếu tố thị giác thông qua phác thảo tổng quan của chúng. Bộ não của chúng ta có khả năng nhận dạng được một vật thể đơn giản được định nghĩa rõ ràng nhanh hơn là một vật thể chi tiết.

Reification

Con người có khả năng nhận ra các đối tượng nhất định kể cả khi đối tượng bị thiếu một phần. Đó là vì bộ não của chúng ta luôn kết nối các hình ảnh quen thuộc trong trí nhớ, và rồi tự động lấp đầy những khoảng không.

Multi-Stability

Con người thường phân tích những đối tượng không rõ ràng theo nhiều cách khác nhau. Bộ não của chúng ta thường cân nhắc giữa các lựa chọn khác nhau để tìm kiếm sự chắc chắn. Kết quả là, một hình ảnh sẽ độc chiếm trong trí não của chúng ta trong khi hình ảnh còn lại sẽ khó để nhìn ra hơn.

Invariance

Con người có thể nhận ra những đối tượng đơn giản, kể cả khi chúng bị xoay chuyển, thay đổi kích thước và biến dạng. Bộ não của chúng ta có thể nhận thức được đối tượng từ nhiều khía cạnh khác nhau mặc cho sự thay đổi của hình dáng của chúng

Những nguyên tắc Gestalt dưới đây có thể gói gọn việc thiết kế UI ngày nay.

Proximity

Các đối tượng được sắp xếp gần với nhau được cho là gắn kết hơn là những đối tượng đặt ở xa. Theo nguyên tắc nà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.

Nguyên tắc Proximity (Tính Gần Nhau) được áp dụng trong thiết kế UI như thế nào?

Chúng ta có thể sử dụng nguyên tắc Proximity trong thiết kế UI bằng việc nhóm lại các thông tin tương đồng, sắp xếp nội dung và bố cục. Nếu biết áp dụng đúng cách, các nguyên tắc này sẽ có ảnh hưởng tích cực lên truyền thông thị giác và trải nghiệm người dùng.

Như đã đề cập phía trên, những yếu tố mang tính liên kết nên được đặt gần nhau, trong khi những yếu tố không liên quan cần cách xa. Hơn thế nữa, những khoảng trắng (white space) đóng một vai trò quan trọng trong việc tạo nên sự tương phản, từ đó dẫn mắt người nhìn đi theo một hướng có chủ đích. Ngoài ra, các khoảng trắng có thể tăng cường phân cấp thị giác và luồng thông tin, giúp cho bố cục thoáng và dễ quét thông tin hơn. Điều này sẽ giúp người dùng đáp ứng được nhu cầu nhanh hơn và đào sâu được vào phần nội dung hơn.

Chúng ta có thể áp dụng nguyên tắc Proximity khá nhiều ở mọi nơi từ thanh điều hướng, thẻ, gallery và banner cho đến danh sách, văn bản và phân trang.

Common Region

Tương tự như nguyên tắc Proximity, những yếu tố được đặt gần nhau trong một khu vực được nhìn nhận như một nhóm.

Nguyên tắc Common Region được áp dụng trong thiết kế UI như thế nào?

Nguyên tắc Common Region đặc biệt hữu ích trong việc nhóm các luồng thông tin và sắp xếp nội dung, đồng thời phân tách nội dung để người dùng tập trung vào các tiêu điểm (focal point).

Nguyên tắc này tăng tính phân cấp, khả năng quét và hỗ trợ quảng bá thông tin.

Nguyên tắc Common Region có thể kết hợp rất nhiều yếu tố khác nhau, đảm bảo sự thống nhất với của chúng bên trong một tổ hợp lớn hơn. Chúng ta có đạt được điều này qua việc sử dụng các đường thẳng, màu sắc, hình dạng và đổ bóng.

Một ví dụ về việc áp dụng tốt nguyên tắc Common Region trong thiết kế UI; các thẻ được định nghĩa rõ ràng trong một diện tích hình chữ nhật.

Similarity

Những yếu tố thiết kế mang những đặc điểm thị giác tương đồng thường được xem là liên quan đến nhau hơn.

Nguyên tắc Similarity áp dụng trong thiết kế UI như thế nào?

Chúng ta có xu hướng nhận thức các yếu tố theo một nhóm hoặc mô hình. Chúng ta cũng cho rằng chúng phục vụ chung mục đích. Sự tương đồng có thể giúp chúng ta tổ chức và phân loại các đối tượng trong một nhóm và liên kết chúng với một ý nghĩa hoặc chức năng cụ thể.

Có nhiều cách để thiết kế các yếu tố sao cho các yếu tố trông tương đồng và liên quan tới nhau. Những cách đó bao gồm tương đồng về màu sắc, kích thước, hình dáng, chất liệu, không gian và định hướng; trong đó một vài yếu tố sẽ đưa ra thông điệp mạnh hơn (ví dụ như màu sắc > kích thước > hình dáng). Khi nguyên tắc Similarity được áp dụng, một yếu tố có thể được nhận mạnh bằng cách trông khác biệt với các yếu tố khác, cách thức này được gọi là “Anomaly” và có thể sử dụng tạo tính tương phản. Cách này tập trung sự chú ý của người dùng vào một nội dung nhất định (focal point) trong khi vẫn đảm bảo tính dễ quét, dễ nhận diện và luồng tổng quan.

Chúng ta có thể sử dụng nguyên tắc Similarity cho điều hướng, link, button, tiêu đề, call to action…

Closure

Một tập hợp các yếu tố thường được nhìn nhận như một hình dạng nhất định. Nguyên tắc Closure cũng được áp dụng khi một đối tượng không hoàn thiện.

Nguyên tắc Closure được áp dụng trong thiết kế UI như thế nào?

Theo nguyên tắc Closure, khi được cung cấp một lượng thông tin phù hợp, não bộ sẽ tự động đưa ra kết luận bằng cách lấp vào những khoảng trống và tạo nên một thể thống nhất. Bằng cách này, chúng ta có thể giảm số lượng các yếu tố cần thiết để truyền đạt thông tin, giảm mức độ phức tạp và làm cho các thiết kế trở nên thu hút hơn. Ngoài ra, áp dụng nguyên tắc Closure có thể giúp giảm thiểu độ nhiễu khi truyền tải thông điệp, nhất là trong những không gian hạn chế.

Chúng có thể áp dụng nguyên tắc Closure trong thiết kế icon, sự đơn giản giúp truyền tải ý nghĩa nhanh chóng và ngắn gọn.

Symmetry

Các yếu tố đối xứng thường được đánh giá liên quan tới nhau, mặc cho khoảng cách của chúng. Điều này tạo cho chúng ta một cảm giác liên kết và mạch lạc.

Nguyên tắc Symmetry được áp dụng trong thiết kế UI như thế nào?

Các yếu tố đối xứng rất đơn giản, hài hoà và thoả mãn thị giác. Mắt của chúng ta luôn tìm kiếm thuộc tính mạch lạc và ổn định, chính vì vậy, áp dụng nguyên tắc Symmetry sẽ giúp truyền tải thông tin nhanh hơn, hiệu quả hơn bởi người nhìn có thể dễ dàng tập trung vào những nội dung quan trọng.

Các tổ hợp đối xứng nhìn chung tạo được sự thỏa mãn trong mắt người nhìn, nhưng đồng thời chúng có thể trở nên tĩnh và buồn tẻ. Việc cho thêm những yếu tố bất đối xứng vào những thiết kế đối xứng có thể thu hút được sự chú ý và gây được ấn tượng mạnh mẽ hơn. Điều này sẽ hữu ích trong việc thiết kế những điểm cần thú hút sự chú ý, ví dụ như Call to Action. Việc cân bằng giữa việc áp dụng sự đối xứng và bất đối xứng là rất quan trọng trong bất cứ thiết kế nào.

Nên sử dụng Nguyên tắc Symmetry cho portfolio, gallery, hiển thị chi tiết sản phẩm, list liệt kê, điều hướng, banner và các trang nặng về content.

Continuation
Các yếu tố được sắp xếp trên một đường thẳng hay một đường cong mềm mại được nhìn nhận liên kết với nhau hơn là sắp xếp một cách ngẫu nhiên.

Nguyên tắc Continuity được áp dụng trong thiết kế UI như thế nào?

Những yếu tố thiết kế được đặt trên một đường liền mạch thường được xem như một nhóm. Áp dụng nguyên tắc Continuity giúp căn gióng các yếu tố và hướng đường mắt đi xuyên suốt thiết kế, tăng mức độ dễ đọc. Đồng thời, nguyên tắc này nhấn mạnh các thông tin theo nhóm, tăng cường phân cấp và dẫn dắt người dùng tới những phân đoạn content khác nhau. Sự gián đoạn của tính liên tục có thể báo hiệu sự kết thúc của một phần và hướng sự chú ý tới một phần nội dung mới.

Sự sắp xếp theo đường thẳng của các cột dọc và hàng ngang là những ví dụ điển hình cho Nguyên tắc Continuity, ví dụ như ở menu và sub-menu, danh sách liệt kê, sản phẩm, dịch vụ hoặc trình bày quy trình.

Common Fate

Những yếu tố chuyển động theo cùng một hướng được nhìn nhận như một tập hợp có liên quan chặt chẽ hơn là những yếu tố chuyển động theo những hướng khác nhau hoặc không chuyển động.

Nguyên tắc Common Fate được áp dụng trong thiết kế UI như thế nào?

Mặc cho sự sắp xếp xa cách và sự khác nhau về bề ngoài của những yếu tố thiết kế, nếu chúng đều di chuyển động cùng hướng với nhau, người dùng vẫn sẽ nhìn nhận chúng như một tập hơn có sự gắn kết chặt chẽ.

Nguyên tắc Common Fate sẽ trở nên hiệu quả hơn khi các yếu tố di chuyển một cách đồng bộ: cùng chiều hướng, thời gian và vận tốc. Thêm nữa, điều này cũng hỗ trợ trong việc nhóm các thông tin liên quan lại với nhau. Sự gián đoạn trong những chuyển động mang tính đồng bộ này có thể thu hút con mắt người dùng tới một điểm yếu tố cụ thể. Ngoài ra, điều này còn giúp thiết lập mối quan hệ giữa các nhóm khác nhau.

Chúng ta có thể sử dụng nguyên tắc Common Fate trong các menu mở rộng, accordions, mẹo công cụ, thanh trượt sản phẩm, và chỉ dẫn cuộn, parallax.

Tạm Kết

Thiết Kế Giao Diện Người Dùng không chỉ dừng lại ở việc nắn nót từng pixel hay đồ hoạ cuốn hút. Thực tế, các thiết kế phải được dựa vào tính giao tiếp, kết nối và thuận lợi cho người dùng. Những nguyên tắc Gestalt được áp dụng để đạt được các mục tiêu trên, mang đến một trải nghiệm dễ dùng cho người sử dụng và mang lại một thành công lớn cho doanh nghiệp.

Dịch nguồn: muz.li

Quy luật thị giác Design thiết kế Thiết kế Website Brand Identity visual perception

Đã bao giờ bạn nhìn lên những đám mây trên bầu trời và tự vẽ lên cho mình những hình ảnh của một con thú quen thuộc hay một đồ vật nào đó chưa? Và đã bao giờ bạn tự hỏi rằng, tại sao chúng ta luôn liên tưởng những hình ảnh như vậy từ những đám mây không có hình dạng nhất định? Đó là bởi cách thức bộ não chúng ta vận hành theo quy luật thị giác, một quy luật được áp dụng thường xuyên trong thiết kế UI.

Bài viết liên quan

Bộ não con người luôn cố gắng gán ý nghĩa cho thế giới quan bằng cách so sánh với những trải nghiệm hoặc những hình ảnh đã từng thấy trước đó và rồi kết nối chúng lại với nhau. Đúng vậy, để vẽ bức tranh tổng quan, bộ não con người nhận biết hình dáng, hình thức, nhóm thông tin và điền vào những khoảng trống theo một cách khá “kì quặc” của riêng nó.

Laura Busche, Chiến lược gia nội dung thương hiệu tại Autodesk chia sẻ rằng: “Một người thiết kế giỏi nên hiểu được sức mạnh của tâm lý học và quy luật thị giác. Điều gì sẽ xảy ra nếu ai đó nhìn vào sản phẩm thiết kế của bạn? Họ sẽ phản ứng ra sao với thông điệp mà sản phẩm gửi gắm?”

Rõ ràng là, thiết kế và tâm lý có một sự kết nối chặt chẽ với nhau, và chúng có thể ảnh hưởng lẫn nhau. Các nguyên tắc quy luật thị giác Gestalt sẽ giúp chúng ta hiểu rõ và kiểm soát được những liên kết này.

Xem thêm: Thiết Kế Web Chuyên Nghiệp – Nền Tảng Thành Công Của Các Doanh Nghiệp

Quy luật thị giác Gestalt là gì?

Gestalt (trong tiếng Đức mang nghĩa là hình dáng, hình thức) là một tập hợp của những nguyên tắc nhận thức về mặt thị giác, được phát triển bởi những nhà tâm lý học người Đức vào những năm 1920. Nó được xây dựng dựa trên lý thuyết “con người sẽ luôn ưu tiên nhìn nhận tổng thể hơn là tập trung vào các chi tiết”.

“The whole is other than the sum of the parts.”

— Kurt Koffka

Nguyên tắc Gestalt miêu tả cách con người tiếp nhận những yếu tố thị giác trong những điều kiện nhất định. Các nguyên tắc được xây trên 4 ý chính:

Emergence

Reification

Multi-Stability

Invariance

Những nguyên tắc quy luật thị giác Gestalt dưới đây có thể gói gọn việc thiết kế UI ngày nay.

Proximity

Nguyên tắc Proximity (Tính Gần Nhau) được áp dụng trong thiết kế UI như thế nào để tận dụng quy luật thị giác?

Chúng ta có thể áp dụng nguyên tắc Proximity khá nhiều ở mọi nơi từ thanh điều hướng, thẻ, gallery và banner cho đến danh sách, văn bản và phân trang.

=> 10 nguyên tắc cốt lõi để có một thiết kế Website đẹp

Common Region

Tương tự như nguyên tắc Proximity, những yếu tố được đặt gần nhau trong một khu vực được nhìn nhận như một nhóm.

Nguyên tắc Common Region được áp dụng trong thiết kế UI như thế nào?

Nguyên tắc này tăng tính phân cấp, khả năng quét và hỗ trợ quảng bá thông tin.

Similarity

Những yếu tố thiết kế mang những đặc điểm thị giác tương đồng thường được xem là liên quan đến nhau hơn.

Nguyên tắc Similarity áp dụng trong thiết kế UI như thế nào?

Chúng ta có thể sử dụng nguyên tắc Similarity cho điều hướng, link, button, tiêu đề, call to action…

Closure

Nguyên tắc Closure được áp dụng trong thiết kế UI như thế nào?

Chúng có thể áp dụng nguyên tắc Closure trong thiết kế icon, sự đơn giản giúp truyền tải ý nghĩa nhanh chóng và ngắn gọn.

Symmetry

Nguyên tắc Symmetry được áp dụng trong thiết kế UI như thế nào?

Nên sử dụng Nguyên tắc Symmetry cho portfolio, gallery, hiển thị chi tiết sản phẩm, list liệt kê, điều hướng, banner và các trang nặng về content.

Nguyên tắc Continuity được áp dụng trong thiết kế UI như thế nào?

Common Fate

Nguyên tắc Common Fate được áp dụng trong thiết kế UI như thế nào?

Chúng ta có thể sử dụng nguyên tắc Common Fate trong các menu mở rộng, accordions, mẹo công cụ, thanh trượt sản phẩm, và chỉ dẫn cuộn, parallax.

Tạm Kết

Thiết Kế UI - Thiết Kế Giao Diện Người Dùng không chỉ dừng lại ở việc nắn nót từng pixel hay đồ hoạ cuốn hút. Thực tế, các thiết kế phải được dựa vào tính giao tiếp, kết nối và thuận lợi cho người dùng. Những nguyên tắc quy luật thị giác Gestalt được áp dụng để đạt được các mục tiêu trên, mang đến một trải nghiệm dễ dùng cho người sử dụng và mang lại một thành công lớn cho doanh nghiệp.

Xem thêm: Tâm lý học về Màu sắc và ứng dụng trong thiết kế

Xu Hướng Thiết Kế Website 2018 - 2020 Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn? Tận Dụng Các Mô Hình Nhận Thức Vào Thiết Kế Sản Phẩm p2 Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 Tâm lý học Màu sắc và ứng dụng trong thiết kế Creative Agency Model - Khám phá các mô hình Agency sáng tạo mới Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác Nghiên cứu UX định lượng khác gì với Phân tích dữ liệu?

Off