32 khác biệt trong thiết kế ứng dụng iOS và Android

 (medium.com)
8 điểm bởi xguru 2020-05-07 | 2 bình luận | Chia sẻ qua WhatsApp

Không chỉ là so sánh đơn thuần, đây còn là bài viết rất hữu ích để hiểu các đặc điểm nổi bật của UI trên từng hệ điều hành

Những khác biệt cơ bản

  1. HIG vs. Material Design

  2. Đơn vị: pt vs. dp

  3. Màn hình: 320pt x 568pt vs. 360dp x 640dp

  4. Phông chữ: San Francisco vs. Roboto

  5. Thanh điều hướng của Android

  6. Shadow và Elevation trong Material Design

  7. Cách gọi tên:

→ Tab bar vs. Bottom Navigation Bar

→ Navigation Bar vs. Top App Bar,

→ Segmented Controls vs. Tabs

→ Alerts vs. Dialogs

→ Touch ID vs. Android Fingerprint

  1. Cách điều hướng ở cấp cao nhất

  2. Sự khác nhau giữa tab bar và bottom navigation bar

  3. Các chức năng đặc biệt của tab trên Android

  4. Sự khác nhau trong cách hiển thị các trang con

  5. Mẫu gọi ngăn điều hướng (Drawer)

  6. Sự khác nhau trong hành vi khi cuộn

  7. Sự khác nhau trong hành vi tìm kiếm

Khác biệt về thành phần (UI)

  1. Những thứ không có trên iOS

→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,

  1. Những thứ không có trên Android

→ Page Control, Toolbars, Steppers, Popovers

  1. Status Bar giống mà khác

  2. Refresh Content Control vs. Swipe to refresh

  3. Khác biệt về mặt trực quan của các control

  4. Sự khác nhau về hình dạng mũi tên quay lại và vị trí header

  5. Sự khác nhau của biểu tượng "ba chấm"

  6. Pickers: chọn ngày trên iOS là kiểu trống xoay, còn Android là dạng lịch thông thường

  7. Sự khác nhau của trường văn bản

→ iOS hiển thị nhãn phía trên trường và sẽ biến mất khi nhập, Android thì di chuyển nhãn lên trên khi nhập

→ Nút Clear nội dung thì tương tự nhau

→ Material Design nhấn mạnh đường gạch dưới bằng màu Primary khi nhập

  1. Context Menus vs. Menus

  2. Action View/Activity View vs. Modal Bottom Sheet

  3. Edit Menus vs. Text Selection Toolbar

  4. Kích thước divider: iOS 0.5pt vs. Android 1dp

Những khác biệt khác

  1. Kích thước vùng chạm: iOS 44x44pt, Android 48x48dp

  2. App Store vs. Google Play

  3. Undo/Redo độc đáo của iOS: khi người dùng lắc điện thoại thì chức năng Undo sẽ hoạt động

  4. Sự khác nhau của màn hình khởi chạy: Material cho phép logo ứng dụng trên màn hình khởi chạy, nhưng HIG không khuyến nghị dùng màn hình khởi chạy cho mục đích marketing. Chỉ nên dùng như placeholder

  5. Các yếu tố bổ sung của Material Design: Data Format, Data Visualization, Empty States, Offline States, v.v.

Bài viết liên quan

2 bình luận

 
xguru 2020-05-07

Là startup thì nên phát triển app bằng gì? Câu trả lời cơ bản của tôi cho câu hỏi này là

#1 Nếu là dịch vụ không nhất thiết phải có app, thì trước hết chỉ cần làm mobile web thật tốt là được.

#2 Nếu nhất thiết phải có app, thì giai đoạn đầu hãy hỗ trợ đồng thời nền tảng iOS/Android bằng React Native hoặc Flutter.

#3 Khi người dùng tăng lên, số lượng lập trình viên cũng nhiều hơn và có thêm vốn, thì cũng tốt nếu chuyển sang native app được tối ưu cho từng OS. (Swift & Kotlin)

Nhưng mà, câu trả lời này vẫn y hệt 10 năm trước.

Hồi đó chỉ là HTML5, Hybrid(Phonegap), Objective C++ & Java mà thôi..

Bây giờ nếu làm web bằng React thì nhờ React Native nên có lẽ sẽ tiện hơn đôi chút.

Tôi luôn khuyến nghị #1, #2, còn #3 là lựa chọn

Bài viết so sánh UI này là nội dung cần hiểu kỹ khi ở trường hợp #3, và ngay cả khi là #2 thì cũng là bài đáng xem trước.
 
laeyoung 2020-05-11

Tiếp theo bình luận mà xguru đã để lại

Tuy nhiên, nếu đó là dịch vụ phụ thuộc nhiều vào phần cứng như camera, GPS, cảm biến gia tốc, thì hãy chuyển ngay đến mục 3.

(ví dụ: muốn làm một ứng dụng bộ lọc video thời gian thực -> sang #3...)