3C of Interface Design

 3C là một framework giúp định hướng thiết kế giao diện theo ba tiêu chí:

• Clarity (Rõ ràng): Người dùng hiểu ngay lập tức
• Consistency (Nhất quán): Giao diện hoạt động theo quy luật quen thuộc
• Content (Nội dung): Nội dung có hữu ích, đúng và phù hợp không?

Ba yếu tố này kết hợp với nhau để tạo ra một giao diện không chỉ “đẹp”, mà còn dễ sử dụng và đáng tin cậy.

(Nguồn: https://www.geeksforgeeks.org/web-templates/user-interface-ui/ )

Clarity – Sự rõ ràng

Clarity là khả năng giúp người dùng hiểu giao diện ngay từ cái nhìn đầu tiên, mà không cần suy nghĩ nhiều. Một giao diện rõ ràng sẽ trả lời ngay những câu hỏi cơ bản:

• Đây là gì?
• Dùng để làm gì?
• Nhấn vào sẽ xảy ra điều gì?

Ví dụ, một nút “Đăng ký ngay” sẽ rõ ràng hơn một nút “Tiếp tục”, vì nó mô tả chính xác hành động. Tương tự, icon đi kèm nhãn sẽ dễ hiểu hơn icon đứng một mình. Clarity giúp giảm “gánh nặng nhận thức” (cognitive load), từ đó giúp người dùng thao tác nhanh và chính xác hơn.

(Nguồn: https://asher-designs.com/user-interface-design-principles/ )

Consistency – Sự nhất quán

Consistency là việc giữ cho giao diện nhất quán về hình thức và hành vi.

Điều này bao gồm:

• Màu sắc mang ý nghĩa cố định (ví dụ: xanh = xác nhận, đỏ = cảnh báo)
• Button giống nhau  thì chức năng giống nhau
• Layout quen thuộc  sẽ giúp dễ định hướng

Khi giao diện nhất quán, người dùng không cần “học lại” mỗi lần sử dụng. Họ có thể áp dụng kinh nghiệm từ phần này sang phần khác của hệ thống. Các hệ thống thiết kế lớn như Google (Material Design) hay Apple (Human Interface Guidelines) đều đặt tính nhất quán làm nền tảng.

(Nguồn: https://blog.pixelfreestudio.com/the-importance-of-consistency-in-ux-design/ )

Content  –Nội dung

Content là yếu tố thường bị đánh giá thấp trong thiết kế giao diện, nhưng thực tế lại là linh hồn của toàn bộ hệ thống.

Một giao diện có thể đẹp và dễ dùng, nhưng nếu nội dung không rõ ràng, không hữu ích, hoặc không đúng nhu cầu thì trải nghiệm vẫn thất bại.

Content trong UI/UX bao gồm:

• Văn bản (microcopy, hướng dẫn, thông báo)
• Hình ảnh
• Dữ liệu hiển thị
• Thông tin phản hồi (feedback)

Content tốt cần:

• Chính xác
• Ngắn gọn
• Phù hợp với ngữ cảnh
• Hướng đến người dùng

Ví dụ, một thông báo lỗi như “Có lỗi xảy ra” không hữu ích bằng “Thanh toán thất bại – vui lòng kiểm tra lại thông tin thẻ”.

Vì sao 3C quan trọng?

Ba yếu tố này không hoạt động độc lập, mà bổ trợ lẫn nhau. Khi cả ba yếu tố được đảm bảo, giao diện sẽ:

• Dễ hiểu
• Dễ sử dụng
• Dễ tạo sự tin cậy

Trong thực tế, 3C xuất hiện ở hầu hết các sản phẩm số:

• Ứng dụng mobile
• Website
• Dashboard quản lý
• Hệ thống e-learning

Dù không luôn được gọi tên trực tiếp, nhưng các nguyên tắc của 3C đều được tích hợp trong các design system hiện đại.

Tài liệu tham khảo và đọc thêm

• https://www.scribd.com/document/944009541/Unit-3
• https://thesunflowerlab.com/principles-of-ui-design/
• https://parel.co/key-principles-to-choose-the-right-colour-scheme-for-your-mobile-app-design/

White space

White space (hay còn gọi là khoảng trắng) là phần không chứa nội dung chính trong thiết kế, giúp tổ chức bố cục, tăng khả năng đọc và cải thiện trải nghiệm người dùng.

Trong một trang web hoặc tài liệu:

• Khoảng cách giữa các dòng chữ
• Khoảng trống giữa các đoạn văn
• Khoảng cách giữa hình và text
• Padding trong một khối nội dung

đều là white space

(Nguồn: https://keyframe.vn/bai-viet/so-sanh-white-space-va-negative-space-49.html)

So sánh Negative space và White space

Vai trò chính của white space là:

• Tăng khả năng đọc 
• Giảm cảm giác “quá tải thông tin”
• Tạo nhịp điệu và sự cân bằng trong bố cục

Trong thiết kế giao diện, white space là một công cụ mang tính kỹ thuật và tổ chức. Nó giúp nội dung trở nên rõ ràng và dễ tiếp cận hơn.

(Nguồn: https://www.manypixels.co/blog/web-design/white-space)

Trong khi đó, negative space mang một ý nghĩa sâu hơn.

Negative space không chỉ là khoảng trống, mà là khoảng trống được sử dụng có chủ đích để tạo hình, định hướng nhận thức hoặc truyền tải thông điệp.

Ví dụ, trong thiết kế logo, phần không gian trống có thể tạo thành một hình ảnh ẩn. Trong bố cục, negative space có thể được dùng để làm nổi bật một đối tượng hoặc dẫn dắt ánh nhìn của người xem.

(Nguồn: https://keyframe.vn/bai-viet/so-sanh-white-space-va-negative-space-49.html )

Nói cách khác, nếu white space giúp bạn “dễ đọc”, thì negative space giúp bạn “hiểu sâu”. Negative space mang tính:

• Khái niệm (conceptual)
• Sáng tạo (creative)
• Nhận thức (perceptual)

Sự khác biệt giữa hai khái niệm này không nằm ở hình thức, mà nằm ở mục đích và cách sử dụng.

White space là một phần của bố cục — nó giúp nội dung được trình bày rõ ràng hơn. Negative space, ngược lại, là một công cụ tư duy — nó giúp tạo ra ý nghĩa từ chính khoảng trống.

Có thể hiểu một cách đơn giản:

• White space là “khoảng cách”
• Negative space là “ngôn ngữ”

White space trả lời câu hỏi: Làm sao để nội dung dễ đọc hơn?
Negative space trả lời câu hỏi: Làm sao để thiết kế truyền tải nhiều hơn mà không cần thêm nội dung?

Tài liệu tham khảo và đọc thêm

• https://keyframe.vn/bai-viet/so-sanh-white-space-va-negative-space-49.html
• https://mastermedia.vn/resources/white-space-va-negative-space-trong-thiet-ke/
• https://www.geeksforgeeks.org/web-templates/negative-space-or-white-space-in-design/
• https://colorme.vn/blog/white-space-va-tam-quan-trong-17428
• https://keyframe.vn/bai-viet/so-sanh-white-space-va-negative-space-49.html

Negative space

Negative Space là gì?

Negative space là phần không chứa nội dung chính trong một thiết kế. Đó có thể là khoảng trắng giữa các đoạn văn, khoảng cách giữa các hình ảnh, hay vùng trống bao quanh một đối tượng. Nhưng điều quan trọng là:

negative space không phải là phần dư thừa, mà là một yếu tố được thiết kế có chủ đích.

Trong một thiết kế, sẽ có hai khoảng không gian: 

• Positive space: phần chứa nội dung chính (chữ, hình, icon)

• Negative space: phần không chứa nội dung, nhưng bao quanh và định hình nội dung

Hai yếu tố này không đối lập, mà bổ trợ lẫn nhau. Một thiết kế hiệu quả là sự cân bằng giữa “cái có” và “cái không”.

(Nguồn: https://schoolofsketching.com/blog-in-english/positivenegativespace )

Nói cách khác, negative space không phải là “thiếu thiết kế” — mà là một phần của thiết kế. Một thiết kế tốt không chỉ nằm ở những gì được thêm vào, mà còn ở những gì được loại bỏ. Negative space đóng vai trò quan trọng trong nhiều khía cạnh.

• Thứ nhất, tăng khả năng đọc và hiểu nội dung.

Khoảng cách hợp lý giữa các dòng chữ, đoạn văn và tiêu đề giúp người đọc không bị “ngợp” thông tin. Điều này đặc biệt quan trọng trong thiết kế web và tài liệu học thuật.

• Thứ hai, tạo cấu trúc và thứ bậc thông tin.

Negative space giúp phân tách các nhóm nội dung, từ đó tạo ra một hệ thống rõ ràng. Người dùng có thể nhanh chóng nhận biết đâu là phần quan trọng, đâu là phần phụ.

• Thứ ba, tạo điểm nhấn.

Một đối tượng được đặt trong không gian rộng sẽ trở nên nổi bật hơn. Đây là nguyên lý đơn giản nhưng rất mạnh mẽ trong thiết kế.

• Thứ tư, ảnh hưởng đến cảm xúc.

Một thiết kế nhiều khoảng trống thường tạo cảm giác tinh tế, cao cấp và dễ chịu. Ngược lại, một thiết kế dày đặc có thể gây cảm giác căng thẳng và khó tiếp cận.

(Nguồn: https://blog.tubikstudio.com/negative-space-in-design-tips-and-best-practices/)

 

Trong thiết kế giao diện số, negative space xuất hiện ở khắp nơi:

• Khoảng cách giữa các nút (buttons)

• Padding trong một khối nội dung

• Margin giữa các phần của trang web

• Khoảng trống giữa các section

Các công ty như Apple nổi tiếng với việc sử dụng negative space để tạo ra trải nghiệm tối giản nhưng cao cấp. Negative space được xem như một công cụ giúp tối ưu hóa cách con người tiếp nhận thông tin.

(Nguồn: https://www.creativebloq.com/art/art-negative-space-8133765)

Tài liệu tham khảo và đọc thêm

• https://csc.edu.vn/tin-tuc/Blog-chia-se/Negative-space--Khong-khi-trong-Thiet-ke-Do-Hoa-8299
• https://keyframe.vn/bai-viet/so-sanh-white-space-va-negative-space-49.html
• https://4pixostraining.com/vi/blog/tim-hieu-ve-negative-space-trong-dien-hoa-kien-truc/
• https://www.thenegativespace.life/what-is-negative-space/
• https://photographylife.com/negative-space-in-photography

Fluent design

Fluent Design là một design system được xây dựng nhằm tạo ra trải nghiệm giao diện liền mạch, đa nền tảng và giàu tính tương tác.

Không giống các phong cách thiết kế trước đó chỉ tập trung vào hình thức, Fluent Design đặt trọng tâm vào:

• Cảm giác tương tác

• Chuyển động

• Chiều sâu

• Sự phản hồi theo hành vi người dùng

Nói cách khác, Fluent Design không chỉ là “cách giao diện trông như thế nào”, mà là cách giao diện phản ứng và “chuyển động” cùng người dùng. Fluent Design được xây dựng dựa trên một ý tưởng quan trọng:

Giao diện không phải là một bề mặt tĩnh, mà là một môi trường sống động, có thể phản hồi và thích nghi.

Fluent Design hướng đến việc tạo ra một trải nghiệm nhất quán trên mọi thiết bị và mọi hình thức tương tác.

(Nguồn: https://www.techmagic.co/blog/design-systems)

5 yếu tố nền tảng của Fluent Design

Fluent Design được cấu thành từ năm yếu tố chính, tạo nên “ngôn ngữ” của hệ thống này.

• Light (Ánh sáng)

Ánh sáng được sử dụng để hướng dẫn sự chú ý và phản hồi tương tác. Khi người dùng hover hoặc chạm vào một thành phần, hiệu ứng ánh sáng giúp họ nhận biết rằng giao diện đang phản hồi.

• Depth (Chiều sâu)

Fluent Design sử dụng layering, blur và transparency để tạo cảm giác không gian. Điều này giúp phân cấp thông tin rõ ràng và tăng khả năng định hướng.

• Motion (Chuyển động)

Chuyển động không chỉ mang tính thẩm mỹ mà còn giúp giải thích hành vi. Các animation được thiết kế để người dùng hiểu sự thay đổi trạng thái một cách tự nhiên.

• Material (Vật liệu số)

Các hiệu ứng như acrylic (mờ, trong suốt) và mica tạo cảm giác “vật liệu kỹ thuật số”. Đây không phải là mô phỏng vật lý như skeuomorphism, mà là một dạng “material” đặc trưng của môi trường số.

• Scale (Tỷ lệ và khả năng thích ứng)

Giao diện có thể thay đổi linh hoạt theo kích thước màn hình và thiết bị, từ desktop đến mobile, từ 2D đến không gian 3D.

(Nguồn: https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/)

 

Fluent Design trong tiến trình phát triển UI/UX

Fluent Design không xuất hiện một cách độc lập, mà là kết quả của một quá trình tiến hóa:

• Skeuomorphism: giúp người dùng làm quen bằng cách mô phỏng thế giới thật

• Flat design: tối giản và tăng hiệu năng

• Material Design: kết hợp trực quan và cấu trúc

• Fluent Design: hướng tới trải nghiệm động, đa chiều và thích nghi

Điều này phản ánh một xu hướng rõ ràng: Giao diện đang chuyển từ “hiển thị thông tin” sang “tạo trải nghiệm tương tác”.

Fluent Design được áp dụng rộng rãi trong hệ sinh thái của Microsoft, bao gồm:

• Windows 10 và Windows 11

• Microsoft Edge

• Office 365

• Các ứng dụng và nền tảng web

Ngoài ra, nó cũng ảnh hưởng đến nhiều thiết kế hiện đại trong các hệ thống đa nền tảng.

Tài liệu tham khảo và đọc thêm

• https://fptshop.com.vn/tin-tuc/danh-gia/fluent-design-la-gi-137517
• https://topdev.vn/blog/fluent-design-ngon-ngu-thiet-ke-moi-cua-microsoft/
• https://www.behance.net/gallery/210368867/Microsoft-Fluent-Illustration
• https://quantrimang.com/cong-nghe/fluent-design-la-gi-173139

Material design

Material Design là một hệ thống thiết kế được phát triển bởi Google, nhằm tạo ra trải nghiệm người dùng nhất quán, trực quan và hiệu quả trên nhiều nền tảng như Android, web và các ứng dụng số.

Khác với flat design thuần túy, Material Design không hoàn toàn “phẳng”. Nó đưa vào một ý tưởng cốt lõi:

Giao diện số được tạo thành từ các “tấm vật liệu” có thể xếp chồng, di chuyển và tương tác theo quy luật vật lý.

Những “material” này không phải vật thể thật, nhưng được thiết kế để tạo cảm giác có chiều sâu và cấu trúc rõ ràng.

(Nguồn: https://onextrapixel.com/flat-design-and-material-design-are-same-oh-are-they-really/)

Các nguyên lý cốt lõi của Material Design

Material Design không chỉ là phong cách, mà là một hệ thống có triết lý rõ ràng.

• Thứ nhất, “Material as metaphor” (vật liệu như một phép ẩn dụ).

Các thành phần giao diện được xem như các lớp vật liệu có độ cao (elevation), có thể chồng lên nhau và tạo ra bóng đổ. Điều này giúp người dùng hiểu đâu là thành phần chính, đâu là lớp phía sau.

• Thứ hai, “Bold, graphic, intentional” (mạnh mẽ và có chủ đích).

Thiết kế sử dụng màu sắc rõ ràng, typography nổi bật và bố cục có tổ chức. Mọi yếu tố đều có mục đích cụ thể, không mang tính trang trí dư thừa.

• Thứ ba, “Motion provides meaning” (chuyển động mang ý nghĩa).

Animation trong Material Design không chỉ để tạo hiệu ứng đẹp, mà còn giúp người dùng hiểu hành động. Ví dụ, khi một phần tử mở rộng hoặc chuyển vị trí, chuyển động đó giải thích mối liên hệ giữa các trạng thái.

(Nguồn: https://www.creative-tim.com/blog/web-development/material-design-comparison/)

 

 Vì sao Material Design quan trọng?

Material Design ra đời để giải quyết một vấn đề lớn trong thiết kế số: làm sao để vừa đơn giản, vừa dễ hiểu. Flat design giúp giao diện nhẹ và hiện đại, nhưng đôi khi thiếu gợi ý tương tác. Skeuomorphism thì dễ hiểu, nhưng nặng và rối. Material Design đứng ở giữa, tạo ra sự cân bằng:

• Giữ sự tối giản của flat design
• Bổ sung chiều sâu để tăng trực quan
• Thêm chuyển động để giải thích hành vi

(Nguồn: https://devopedia.org/material-design)

Kết quả là một giao diện:

• Dễ hiểu
• Dễ sử dụng
• Nhất quán trên nhiều nền tảng

Material Design được sử dụng rộng rãi trong:

• Ứng dụng Android
• Website hiện đại
• Dashboard quản lý
• Sản phẩm số của Google như Gmail, Google Maps, YouTube

Ngoài ra, nó còn trở thành một chuẩn tham chiếu cho nhiều hệ thống thiết kế khác.

Tài liệu tham khảo và đọc thêm

• https://m2.material.io/design/introduction
• https://fmit.vn/en/glossary/thiet-ke-material-la-gi
• https://colorme.vn/blog/material-design-la-gi

Flat design

Flat design là gì?

Flat design là phong cách thiết kế giao diện (UI) theo hướng tối giản, hai chiều (2D), loại bỏ các yếu tố mô phỏng vật thể thật như:

• Bóng đổ (shadows)

• Hiệu ứng nổi (3D effects)

• Texture (gỗ, da, kim loại…)

(Nguồn: https://mona.media/thiet-ke-phang-la-gi/ )

Thay vào đó, flat design tập trung vào:

• Màu sắc rõ ràng

• Hình khối đơn giản

• Typography dễ đọc

• Bố cục gọn gàng

Nói cách khác, flat design không cố gắng “bắt chước” thế giới vật lý, mà xây dựng một ngôn ngữ thị giác riêng cho môi trường số.

Sự trỗi dậy của flat design không phải là ngẫu nhiên, mà phản ánh một bước chuyển trong cách con người tương tác với công nghệ. Trước đó, các giao diện thường theo phong cách skeuomorphism — mô phỏng vật thể thật để giúp người dùng dễ làm quen. Tuy nhiên, khi người dùng đã trở nên “quen với môi trường số), việc mô phỏng này trở nên không còn cần thiết.

Khoảng năm 2013, Apple với iOS 7 đã đánh dấu bước ngoặt lớn khi chuyển sang thiết kế phẳng. Sau đó, Google cũng phát triển Material design — một phiên bản nâng cao của flat design.

Những lý do chính khiến flat design trở nên phổ biến bao gồm:

• Giao diện nhẹ hơn, tải nhanh hơn

• Phù hợp với nhiều kích thước màn hình (responsive design)

• Giảm nhiễu thông tin, giúp người dùng tập trung

• Tạo cảm giác hiện đại, nhất quán

Đặc trưng của flat design

Flat design có thể được nhận diện qua một số đặc điểm chính.

• Thứ nhất là tính tối giản. Mọi yếu tố không cần thiết đều bị loại bỏ. Thiết kế chỉ giữ lại những thành phần phục vụ trực tiếp cho chức năng.

• Thứ hai là màu sắc rõ ràng và tương phản cao. Các màu đơn sắc hoặc bảng màu giới hạn giúp tăng khả năng nhận diện và tạo điểm nhấn.

• Thứ ba là hình học đơn giản. Các icon và thành phần giao diện thường được xây dựng từ các hình cơ bản như hình vuông, hình tròn, đường thẳng.

• Thứ tư là tập trung vào nội dung. Thay vì gây ấn tượng bằng hiệu ứng, flat design ưu tiên khả năng đọc, hiểu và tương tác.

(Nguồn: https://blog.ferpection.com/en/flat-design-skeuomorphism-which-style-for-designing-an-interface)

 Flat design và những hạn chế

Dù mang lại nhiều lợi ích, flat design không phải là hoàn hảo.

Một trong những vấn đề lớn nhất là thiếu “gợi ý tương tác” (affordance). Khi các nút bấm không có bóng đổ hay hiệu ứng nổi, người dùng có thể khó nhận ra đâu là yếu tố có thể tương tác.

Ngoài ra, việc quá tối giản đôi khi khiến giao diện trở nên:

• Khó hiểu đối với người mới

• Thiếu chiều sâu thị giác

• Dễ bị “đồng nhất hóa”, thiếu cá tính

(Nguồn:  https://www.seobility.net/en/wiki/Flat_Design)

Tài liệu tham khảo và đọc thêm

• https://arena.fpt.edu.vn/flat-design/
• https://ixdf.org/literature/topics/flat-design
• https://www.canva.com/learn/flat-design/
  
  

Skeuomorphism

Skeuomorphism là cách thiết kế trong đó các yếu tố số được tạo ra để mô phỏng hình dáng, chất liệu hoặc cách hoạt động của các vật thể ngoài đời thực.

Nói cách khác, đây là việc mang “ký ức vật lý” vào môi trường số.

Ví dụ:

• Ứng dụng ghi chú trông như một cuốn sổ giấy
• Ứng dụng đọc sách hiển thị sách trên kệ gỗ
• Máy tính điện tử có nút bấm giống máy thật

(Nguồn: https://sketchplanations.com/skeuomorph )

Những yếu tố này không cần thiết về mặt chức năng, nhưng lại rất quan trọng về mặt trải nghiệm và nhận thức. Nó gắn liền với cách con người xử lý thông tin. Trong tâm lý học nhận thức, con người thường hiểu cái mới thông qua cái quen thuộc. Skeuomorphism tận dụng nguyên lý này để làm cho công nghệ trở nên dễ tiếp cận hơn.

Ở góc độ này, skeuomorphism là một dạng của behavioral design — thiết kế dựa trên hành vi và nhận thức của con người.

Tài liệu tham khảo và đọc thêm

• https://www.nngroup.com/articles/skeuomorphism/
• https://sketchplanations.com/skeuomorph