Login

Material Design và Human Interface Guidelines: hai triết lý thiết kế di động

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Android và iOS có những quy ước thiết kế khác nhau, và người dùng mỗi bên quen với cách riêng của họ. Hai bộ hướng dẫn chính là Material Design của Google và Human Interface Guidelines (HIG) của Apple. Hiểu chúng giúp bạn làm ứng dụng trông và cảm giác tự nhiên trên từng nền tảng.

Vì sao cần quan tâm?

Người dùng không đọc hướng dẫn sử dụng ứng dụng, họ dựa vào thói quen từ các ứng dụng khác. Nếu nút quay lại nằm ở nơi họ không ngờ tới hoặc thao tác vuốt khác thường, họ sẽ bối rối. Tuân thủ quy ước nền tảng giúp giảm công sức học cách dùng.

Material Design

Material Design là hệ thống thiết kế của Google, hiện đã có nhiều phiên bản phát triển. Một số đặc điểm tiêu biểu:

  • Sử dụng màu sắc, độ cao (đổ bóng) và chuyển động để thể hiện cấu trúc và phân cấp.
  • Có hệ thống thành phần dựng sẵn: thẻ, nút, thanh ứng dụng, thanh điều hướng, hộp thoại, snackbar.
  • Hỗ trợ tạo bảng màu động từ hình nền của người dùng ở các phiên bản Android mới.
  • Thường dùng nút hành động nổi (FAB) cho tác vụ chính.

Human Interface Guidelines của Apple

HIG tập trung vào sự rõ ràng, tôn trọng nội dung và chiều sâu tinh tế. Một số đặc điểm:

  • Điều hướng bằng thanh tab ở dưới và thanh điều hướng ở trên với nút quay lại nằm góc trái.
  • Cử chỉ vuốt từ mép trái để quay lại là hành vi chuẩn.
  • Ưu tiên phông chữ hệ thống và hỗ trợ Dynamic Type để người dùng chỉnh cỡ chữ.
  • Dùng hộp chọn, action sheet, và cách trình bày modal đặc trưng.

So sánh một số điểm khác biệt

Yếu tốAndroid (Material)iOS (HIG)
Quay lạiCử chỉ hoặc nút hệ thốngNút trong thanh điều hướng và vuốt mép trái
Hành động chínhThường là nút nổiThường là nút trong thanh điều hướng hoặc nút ở nội dung
Thông báo nhỏSnackbarThường dùng cảnh báo hoặc biểu ngữ
Lựa chọn từ danh sáchMenu thả xuống, hộp thoạiAction sheet, picker
ChữRoboto hoặc phông hệ thốngPhông hệ thống của Apple

Bảng trên chỉ nêu xu hướng chung; cả hai bộ hướng dẫn đều thay đổi theo thời gian nên hãy đọc tài liệu mới nhất khi thiết kế.

Làm thế nào với framework đa nền tảng?

Với Flutter hoặc React Native, bạn có hai hướng:

  1. Một giao diện cho tất cả: nhất quán thương hiệu, tiết kiệm công sức, phù hợp ứng dụng có phong cách riêng mạnh.
  2. Thích ứng theo nền tảng: dùng thành phần kiểu Cupertino trên iOS và Material trên Android, hoặc thành phần tự điều chỉnh, để tạo cảm giác quen thuộc.
// Flutter: chọn kiểu hiển thị theo nền tảng
import 'dart:io' show Platform;

Widget buildSwitch(bool value, ValueChanged<bool> onChanged) {
  return Switch.adaptive(value: value, onChanged: onChanged);
}

Thành phần có hậu tố adaptive sẽ tự hiển thị phong cách phù hợp từng hệ điều hành.

Nguyên tắc nên giữ nhất quán ở cả hai nền tảng

  • Điều hướng chính dễ đoán và luôn có cách quay lại.
  • Phản hồi tức thì với mọi thao tác chạm.
  • Độ tương phản, kích thước vùng chạm và hỗ trợ khả năng tiếp cận.
  • Hỗ trợ chế độ tối và cỡ chữ hệ thống.

Lời khuyên cho người mới

  1. Đọc phần giới thiệu và phần thành phần của mỗi bộ hướng dẫn một lần để nắm triết lý.
  2. Mở vài ứng dụng hệ thống như Cài đặt, Lịch, Ghi chú để quan sát cách họ làm.
  3. Không sao chép máy móc, hãy hiểu lý do đằng sau mỗi quy ước.
  4. Thử ứng dụng của bạn trên cả hai nền tảng và nhờ người dùng thường xuyên của mỗi bên nhận xét.

Kết luận

Material và HIG không phải luật cứng nhưng là kinh nghiệm đúc kết từ hàng triệu người dùng. Tuân theo chúng ở những điểm cốt lõi, rồi thêm bản sắc riêng ở màu sắc và nội dung, là cách cân bằng tốt nhất.

Cách tiếp cận thực tế cho nhóm nhỏ

Nhóm nhỏ không đủ nguồn lực làm hai giao diện hoàn toàn khác nhau. Một cách cân bằng là giữ chung bố cục, màu sắc và nội dung, nhưng điều chỉnh vài điểm tiếp xúc quan trọng theo nền tảng: kiểu chuyển trang, hộp thoại, bộ chọn ngày giờ, công tắc, hành vi nút quay lại và phông chữ hệ thống. Chỉ cần những điểm này đúng chuẩn, người dùng đã thấy ứng dụng quen thuộc dù phần lớn giao diện được dùng chung.

Để học cách hiện thực các thiết kế này trong Flutter, React Native hoặc native, hãy xem thêm tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment