Chúng đã bắt đầu được áp dụng từ 2026. Đây là lộ trình phát triển tiếp theo dành cho bạn.
Sự chuyển dịch lớn nhất trong năm 2026 không phải là một phong cách trực quan mới. AI đã trở thành một phần của giao diện, và các AI agents bắt đầu sử dụng sản phẩm của chúng ta theo cách giống như con người. Mỗi năm tôi đều thấy hàng tá “danh sách xu hướng” phần lớn là đoán mò. Vì vậy lần này tôi làm khác đi. Tôi đã xem qua những gì Apple, Google, Figma, W3C, EU và Nielsen Norman Group thực sự phát hành hoặc xuất bản trong sáu tháng qua, và chọn ra 10 xu hướng đã hiện hữu. Mỗi xu hướng đều đi kèm với một ví dụ và một việc bạn có thể làm ngay. Hãy cùng bắt đầu nhé!
1. Chuẩn hóa các trạng thái của AI (AI States Standardized)
Tính năng AI không còn là thứ lạ lẫm để gắn thêm vào sản phẩm nữa. Vào tháng 6 năm 2026, Apple đã cập nhật trang Generative AI trong Hướng dẫn giao diện người dùng (Human Interface Guidelines) với các quy tắc để tinh chỉnh và hoàn tác kết quả AI, cũng như đưa ra phản hồi trong khi kết quả đang được tạo. Gemini của Google và Siri mới của Apple hiện sử dụng cùng các mẫu thiết kế này trên toàn hệ thống, vì vậy người dùng sẽ bắt đầu kỳ vọng thấy chúng ở mọi nơi. Apple thậm chí còn ưu tiên văn bản trạng thái cụ thể như “Đang tóm tắt các chủ đề chính từ ghi chú của bạn” thay vì biểu tượng xoay tròn với chữ “Đang xử lý…” mơ hồ. Nielsen Norman Group cũng bổ sung thêm một mẫu thiết kế đáng học hỏi: Trả lời trước (Answer first). Bỏ qua các câu xã giao, đưa ra câu trả lời trong khoảng 2–3 đoạn ngắn và cung cấp tùy chọn “xem thêm” khi người dùng yêu cầu.
– Ví dụ: Trình chỉnh ảnh iOS 27 đặt các hành động AI như Clean Up, Extend và Reframe ngay bên cạnh kết quả. Hãy thử điều này: Thêm phần “AI states” vào hệ thống thiết kế (design system) của bạn và tài liệu hóa thời điểm bắt buộc sử dụng từng trạng thái.
2. Thẻ xác nhận dành cho đại lý AI (Confirmation Cards for AI Agents)
Các đại lý AI hiện đã có thể hoàn thành tác vụ cho con người: đặt xe, điền giỏ hàng mua sắm, gửi tin nhắn. Gemini Intelligence của Google thực hiện các tác vụ đa bước bên trong các ứng dụng Android nhưng vẫn giữ quyền xác nhận cuối cùng thuộc về người dùng. Hướng dẫn của Apple cũng yêu cầu hỏi trước các hành động không thể đảo ngược và không bao giờ tự động hóa các hành động mang tính phá hủy như xóa hoặc mua hàng. Điều đó làm cho thẻ xác nhận trở thành một trong những thành phần quan trọng nhất của năm 2027. Apple đã giới thiệu Snippets — các thẻ nhỏ gọn mà Siri, Spotlight và Shortcuts hiển thị cho một hành động ứng dụng. Một thẻ xác nhận sẽ có nút Cancel (Hủy) và một nút chính được dán nhãn rõ ràng (“Order” – Đặt hàng, chứ không phải “OK”), và Apple yêu cầu giữ chiều cao thẻ ở mức 400 points hoặc thấp hơn. NN/g cũng phát hiện ra rằng các chi tiết mà người dùng đã xác nhận trước đó (địa chỉ, ngày tháng) phải xuất hiện trong hành động cuối cùng.
– Ví dụ: Thẻ Snippet xác nhận từ Apple. Chi tiết đơn hàng chính xác, nút Cancel và nút hành động được đặt tên rõ ràng “Order”. Hãy thử: Lập bản đồ mọi hành động của đại lý AI trong sản phẩm của bạn theo dạng có thể đảo ngược hoặc không thể đảo ngược. Những hành động không thể đảo ngược bắt buộc phải có thẻ xác nhận với các thông số chính xác.
3. Thiết kế giao diện cho đại lý AI đọc (Designing for Agentic Accessibility)
Điều này làm tôi ngạc nhiên nhất. Vào tháng 4 năm 2026, NN/g đã tuyên bố rõ ràng: Đại lý AI hiện cũng là người dùng. AI agent đọc giao diện của bạn thông qua ảnh chụp màn hình, qua cây truy cập (accessibility tree) — phiên bản cấu trúc của trang web mà trình đọc màn hình sử dụng — hoặc qua API. Nếu một màn hình chỉ hoạt động trực quan bằng mắt thường, AI agent sẽ thất bại và người gửi nó sẽ nhận lại kết quả tồi tệ hơn. Các nền tảng đang chuẩn bị cho điều này. Chrome đã bắt đầu thử nghiệm WebMCP (Chrome 149), cho phép trang web mô tả các hành động của mình dưới dạng “công cụ” mà AI agent có thể gọi thay vì phải đoán xem các nút bấm có chức năng gì. Trên các nền tảng của Apple, hướng đi là App Intents, thứ mà Siri mới sử dụng cho các hành động trong ứng dụng.
Tin tốt là gì? Hầu hết đây là những kiến thức cơ bản về khả năng truy cập (accessibility): nhãn mô tả rõ ràng (không dùng nút chỉ có icon mà không có tên), cấu trúc ngữ nghĩa, thứ tự tiêu đề hợp lý và không truyền tải ý nghĩa chỉ bằng màu sắc.
– Ví dụ: Cây truy cập trong Chrome DevTools — chế độ xem có cấu trúc mà trình đọc màn hình và nhiều AI agent dựa vào. Hãy thử điều này: Đánh giá 3 luồng người dùng (user flow) hàng đầu của bạn bằng VoiceOver hoặc TalkBack. Bất kỳ thứ gì mà trình đọc màn hình không thể đọc tên thì AI agent cũng rất dễ bỏ qua.
4. Minh bạch và gắn nhãn AI (Standardized AI Disclosures)
Cho người dùng biết khi nào họ đang tương tác với AI hiện đã trở thành một phần của giao diện người dùng, và ở EU, đó là luật pháp. Điều 50 của Đạo luật AI của EU đã áp dụng từ ngày 2 tháng 8 năm 2026: mọi người phải được thông báo khi họ tương tác với hệ thống AI (trừ khi điều đó đã quá rõ ràng), nội dung do AI tạo ra cần có nhãn máy có thể đọc được và nội dung deepfake phải được công khai. Các hệ thống Generative AI đã có mặt trên thị trường được gia hạn đến ngày 2 tháng 12 năm 2026 để hoàn thiện phần gắn nhãn. Hướng dẫn của Apple cũng đi theo hướng tương tự dưới góc độ thiết kế: hiển thị nơi AI được sử dụng và không bao giờ giả mạo AI thành con người.
– Ví dụ: YouTube dán nhãn nội dung được chỉnh sửa hoặc tổng hợp trong trình phát và phần mô tả. Meta đổi nhãn từ “Made with AI” thành “AI info” để chỉ ra việc sử dụng AI trong ảnh. Hãy thử điều này: Thiết kế một mẫu công khai (disclosure pattern) có thể tái sử dụng ở khắp mọi nơi: một nhãn cho điểm đầu vào trò chuyện/giọng nói, một thẻ “made with AI” cho hình ảnh, video và âm thanh, và một thông báo cho người hoặc sự kiện mô phỏng.
5. Khả năng truy cập dựa trên kết quả (Outcome-Based Accessibility)
Khả năng truy cập đã chuyển từ “có thì tốt” sang yêu cầu pháp lý tại Châu Âu. Đạo luật Khả năng truy cập Châu Âu (European Accessibility Act) đã áp dụng từ tháng 6 năm 2025 cho thương mại điện tử, ngân hàng, sách điện tử, vận tải, viễn thông và nhiều lĩnh vực khác. WCAG 2.2 AA vẫn là tiêu chuẩn chính: WCAG 3 vẫn chỉ là bản thảo làm việc với nhiều năm phát triển phía trước và chưa thể thay thế WCAG 2. Apple đóng góp thêm lực đẩy với Accessibility Nutrition Labels trên App Store. Các ứng dụng có thể tuyên bố hỗ trợ 9 tính năng, như VoiceOver, Larger Text, Sufficient Contrast và Reduced Motion. Bạn chỉ có thể tuyên bố hỗ trợ một tính năng nếu người dùng có thể hoàn thành tất cả các tác vụ thông thường với tính năng đó, và Apple cho biết các nhãn này sẽ trở thành bắt buộc (chưa có ngày cụ thể). Điều đó thay đổi cách chúng ta nói về khả năng truy cập. Không phải là “chúng ta đạt 90%”, mà là “còn bao nhiêu sự cố nghiêm trọng (blocking issues) đang mở trong quá trình đăng nhập, tìm kiếm và thanh toán?”. Mục tiêu phải là 0.
6. Màn hình gập và bố cục đa dạng (Adaptive Layouts for Foldables)
“Thiết bị di động” giờ đây có nghĩa là nhiều kích thước màn hình trên cùng một thiết bị. Chiếc điện thoại gập đầu tiên của Apple, iPhone Duo, có màn hình bên ngoài với chiều rộng nhỏ gọn và màn hình bên trong với chiều rộng tiêu chuẩn; ở màn hình bên ngoài, hệ thống chuyển các thanh tab và thanh công cụ sang bên cạnh. Apple yêu cầu các ứng dụng thay đổi kích thước linh hoạt theo nhóm kích thước (size classes) và vùng an toàn (safe areas), không dùng chiều rộng cố định (fixed widths), và giữ nguyên trạng thái trên cả hai màn hình. Google thậm chí còn nghiêm ngặt hơn. Các ứng dụng nhắm mục tiêu Android 17 (API 37) không còn có thể từ chối các quy tắc về hướng và khả năng thay đổi kích thước trên màn hình rộng từ 600dp trở lên, vì vậy các bố cục chỉ dành cho điện thoại, khóa màn hình dọc sẽ bị kéo giãn trên máy tính bảng và thiết bị gập.
– Ví dụ: Ứng dụng Mail trên iPhone Duo. Màn hình外 nhỏ gọn hiển thị một email; màn hình内 rộng hơn hiển thị danh sách và nội dung email sóng đôi bên cạnh nhau. Hãy thử điều này: Đối với mỗi màn hình chính, hãy thiết kế một khung nhỏ gọn (compact frame) và một khung tiêu chuẩn (regular frame), đánh dấu những gì xuất hiện ở chiều rộng tiêu chuẩn và xóa các chiều rộng cố định khỏi thông số kỹ thuật thành phần của bạn.
7. Chất liệu Liquid Glass và bộ điều khiển độ trong suốt (Liquid Glass & Material Systems)
Hiệu ứng trong suốt (translucency) vẫn tiếp tục tồn tại, nhưng giờ đây người dùng có thể kiểm soát nó. iOS 27 cải thiện khả năng đọc của Liquid Glass và thêm một thanh trượt chạy từ cực kỳ trong suốt (ultraclear) đến phủ màu hoàn toàn (fully tinted). Trên hết, giao diện thay đổi một lần nữa với các tùy chọn Reduce Transparency (Giảm độ trong suốt) và Increase Contrast (Tăng độ tương phản), ở cả chế độ sáng và tối. Trên Android, Google tiếp tục phát triển Material 3 Expressive. Hướng dẫn của Apple vẫn là quy tắc tốt nhất: Liquid Glass thuộc về lớp điều hướng và điều khiển, không thuộc về nội dung. Sử dụng biến thể thông thường cho giao diện người dùng nổi chứa nhiều văn bản, giữ biến thể trong suốt cho các bộ điều khiển nằm trên ảnh và video, và thêm một lớp làm mờ khi nội dung phía sau quá sáng.
– Ví dụ: Liquid Glass hiển thị trên nội dung sáng và biến thể trong suốt trên ảnh. Hãy thử điều này: Thêm bốn cột vào quy trình kiểm thử trực quan (Visual QA) cho các màn hình chính: ultraclear, default, fully tinted, và Reduce Transparency đi kèm Increase Contrast.
8. Ranh giới mờ nhạt giữa Thiết kế và Code (Code-Backed Prototyping)
Ranh giới giữa thiết kế và lập trình đang ngày càng mỏng đi. Vào ngày 15 tháng 10 năm 2026, Figma đã đưa Code layers (các bản prototype trực tiếp, chạy bằng code ngay trên canvas) vào bản open beta cho tất cả các gói và phát hành Figma agent rộng rãi. Figma Motion để dựng hoạt ảnh theo timeline cũng đã ở bản open beta kể từ Config. Báo cáo AI năm 2026 của chính Figma cho thấy tỷ lệ nhà thiết kế làm công việc phát triển phần mềm đã tăng gấp đôi lên 41%. Tạo ra sản phẩm giờ đây rất rẻ. Thứ hiếm hoi chính là bối cảnh (context) và sự kiểm tra (checking). NN/g gợi ý chuyển đổi nghiên cứu thành một tệp bối cảnh ngắn gọn mà máy có thể đọc được (tệp “UX.md”) để các công cụ AI phải tuân theo, và thử nghiệm đầu ra của AI trên nhiều dữ liệu đầu vào thực tế nhiều lần trước khi hoàn tất. Một kết quả tốt chỉ là một ví dụ, không phải là một sự đánh giá toàn diện. Và hãy giữ người dùng thực cho các quyết định thực sự.
9. Chuyển động tích hợp sẵn (Native View Transitions)
Chuyển động (motion) từng chỉ tồn tại trong các bản prototype và video bàn giao, rồi sau đó bị thất lạc đâu đó trên đường đi đến sản phẩm thực tế. Điều đó đang thay đổi. Figma Motion, một timeline để tạo hoạt ảnh ngay trên canvas, đã mở bản beta kể từ Config vào tháng 6 năm 2026. Lập trình viên có thể kiểm tra chuyển động và đưa thẳng vào code thay vì phải đoán từ video. Trình duyệt cũng đã bắt kịp. Các chuyển cảnh trên cùng một trang (same-page view transitions) giúp thay đổi trạng thái UI mượt mà đã hoạt động trên tất cả các trình duyệt lớn từ tháng 10 năm 2025. Chuyển cảnh giữa các trang và scroll-driven animations (hoạt ảnh cuộn) đã hoạt động trên Chrome và Safari, nhưng chưa có trên Firefox, vì vậy hãy coi chúng là một điểm cộng bổ sung chứ không phải là thành phần bắt buộc.
10. Giao diện thoáng qua cho kính AI (Transient UI for Spatial & Smart Glasses)
Màn hình tiếp theo có thể không phải là màn hình bạn cầm trên tay. Google đã xuất bản Jetpack Compose Glimmer, một hệ thống thiết kế cho kính hiển thị Android XR (SDK hiện đang ở bản xem trước cho nhà phát triển). Các quy tắc cảm thấy rất khác so với UI điện thoại: trên một màn hình nhìn xuyên qua, màu đen chính là độ trong suốt, vì vậy bạn thiết kế với các bề mặt tối và nội dung sáng, sử dụng màu sắc tiết kiệm và giữ cho UI tồn tại ngắn hạn, không cản trở tầm nhìn. Các nguyên tắc kính AI của Google đi xa hơn: thiết kế cho kính có và không có màn hình, ưu tiên giọng nói và cử chỉ, chỉ hiển thị UI khi cần thiết và không bắt người dùng phải đọc khi họ đang đi bộ. Ngay cả khi bạn không bao giờ phát triển ứng dụng cho kính, đây vẫn là sự thực hành tuyệt vời cho bất kỳ thứ gì phải hoạt động trong 1–2 giây, như widget, mặt đồng hồ và thông báo.
– Ví dụ: Glimmer được thiết kế cho màn hình trong suốt trước tiên, nơi màu đen sẽ hiển thị dưới dạng nhìn xuyên thấu. Hãy thử điều này: Lấy một khoảnh khắc dạng thông báo trong sản phẩm của bạn (ví dụ: giao hàng đang đến, lượt rẽ tiếp theo) và thiết kế nó thành một giao diện chỉ cần liếc nhìn trong 2 giây.
Lời kết và bài học rút ra
2027 không phải là một diện mạo mới. Đó là những quy tắc mới: trạng thái AI, sự xác nhận, sự minh bạch, khả năng truy cập, bố cục thích ứng và kiểm thử. Không có điều nào trong số này tự thân tạo ra một bức ảnh Dribbble bắt mắt, nhưng chúng sẽ quyết định liệu sản phẩm của bạn có đáng tin cậy trong năm tới hay không. Lời khuyên của tôi: hãy chọn hai xu hướng gần nhất với sản phẩm của bạn, thêm chúng vào lộ trình phát triển năm 2027 ngay bây giờ và giữ các xu hướng còn lại trong danh sách theo dõi.
