UI/UX và các thành phần trong phát triển di động: định nghĩa, loại và cách sử dụng

Hệ thống thiết kế: Material Design và Human Interface Guidelines

Mỗi nền tảng cung cấp bộ quy tắc và thành phần riêng. Đối với Android, đó là Material Design, được Google phát triển vào năm 2014. Material Design sử dụng phép ẩn dụ về vật liệu vật lý — lớp, bóng (Elevation), chuyển tiếp hoạt ảnh và bố cục thích ứng. Các nguyên tắc chính bao gồm phân cấp qua độ cao, chuyển động có ý nghĩa và khả năng thích ứng với các hệ số hình dạng khác nhau. Chúng tôi khuyên bạn nên khám phá Material Design 3 (Material You) — phiên bản mới nhất với chủ đề động và màu sắc cá nhân hóa.

Apple cung cấp Human Interface Guidelines (HIG) — bộ quy tắc cho iOS, iPadOS, macOS, watchOS và tvOS. HIG nhấn mạnh kiểu chữ rõ ràng (San Francisco), Safe Area để tính đến Notch và Dynamic Island, điều hướng dựa trên cử chỉ và tính nhất quán. Không giống như Material Design, HIG không sử dụng "lớp" và Elevation — thay vào đó, nó sử dụng làm mờ (vibrancy), bóng và dấu phân cách tinh tế. Tài liệu HIG đầy đủ được cập nhật thường xuyên với các bản phát hành iOS mới.

Tại IT Sectr, chúng tôi sử dụng cả hai hệ thống thiết kế tùy thuộc vào nền tảng của khách hàng. Đối với các dự án đa nền tảng Flutter, chúng tôi phát triển một hệ thống thiết kế thống nhất kết hợp các phương pháp hay nhất của Material Design và HIG. Cách tiếp cận này giữ được UX gốc trên mỗi nền tảng mà không trùng lặp mã.

Framework UI khai báo: SwiftUI và Jetpack Compose

Cách tiếp cận truyền thống để xây dựng UI là bố cục mệnh lệnh qua XML (Android) hoặc Interface Builder / mã (iOS). Giải pháp thay thế hiện đại là framework khai báo, nơi nhà phát triển mô tả giao diện sẽ trông như thế nào ở mỗi trạng thái và framework xử lý các cập nhật.

Jetpack Compose (Android)

Jetpack Compose là bộ công cụ hiện đại của Google để xây dựng UI gốc bằng Kotlin. Thay vì bố cục XML, các hàm có thể kết hợp Kotlin (@Composable) được sử dụng. Compose hoàn toàn khai báo: khi dữ liệu thay đổi, chỉ các phần đã thay đổi của màn hình được vẽ lại. Ví dụ về màn hình đơn giản với văn bản và nút:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI là framework khai báo của Apple được giới thiệu vào năm 2019. Nó hoạt động trên tất cả các nền tảng Apple (iOS, iPadOS, macOS, watchOS, tvOS) thông qua một API thống nhất. SwiftUI sử dụng cấu trúc View, thuộc tính @State và @Binding để quản lý dữ liệu và bộ điều chỉnh để tạo kiểu. Tương đương với ví dụ trên trong SwiftUI:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Flutter của Google sử dụng thư viện widget riêng. Mọi thứ trong Flutter đều là widget — từ phần đệm đến toàn bộ màn hình. Widget được chia thành StatelessWidget (bất biến) và StatefulWidget (có trạng thái). Các vùng chứa cơ bản là Container, Row, Column, Stack. Flutter không sử dụng thành phần gốc của nền tảng — nó vẽ mọi thứ qua Skia Engine, đảm bảo giao diện nhất quán trên cả Android và iOS.

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Thành phần UI gốc cho Android và iOS

Bất chấp sự phổ biến của các framework khai báo, việc hiểu các thành phần gốc vẫn quan trọng để hỗ trợ các dự án kế thừa và tùy chỉnh sâu.

Điều hướng

Điều hướng trong Android dựa trên Activity (màn hình hoạt động) và Fragment (phân mảnh trong một Activity). Jetpack Navigation Component đơn giản hóa chuyển tiếp giữa các màn hình thông qua đồ thị điều hướng. Trong iOS, điều hướng được thực hiện qua NavigationController — một ngăn xếp bộ điều khiển với chuyển tiếp hoạt ảnh. Tab Bar và Bottom Navigation cho phép chuyển đổi giữa các phần chính của ứng dụng. Drawer (menu bên) và Toolbar/ActionBar được sử dụng cho các hành động bổ sung. Android Navigation Component được khuyến nghị cho tất cả các dự án mới.

Danh sách

Để hiển thị lượng lớn dữ liệu, Android sử dụng RecyclerView — vùng chứa hiệu quả với khả năng tái sử dụng ViewHolder. Tương đương trong iOS là UITableView (danh sách dọc) và UICollectionView (lưới). Jetpack Compose cung cấp LazyColumn và LazyVerticalGrid, trong khi SwiftUI cung cấp List và LazyVStack/LazyHStack. Ưu điểm chính của thành phần Lazy là chỉ hiển thị các phần tử có thể nhìn thấy.

Bố cục và định vị

Hệ thống View Android cung cấp một số vùng chứa bố cục: ConstraintLayout (hệ thống ràng buộc linh hoạt), LinearLayout (sắp xếp tuyến tính), RelativeLayout (định vị tương đối), FrameLayout (xếp chồng lớp). Trong iOS, Core Auto Layout sử dụng hệ thống ràng buộc (NSLayoutConstraint) để mô tả vị trí phần tử. SwiftUI và Flutter sử dụng VStack/HStack/ZStack và Row/Column/Stack tương ứng.

Đơn vị đo lường và bố cục thích ứng

Các thành phần UI của thiết bị di động được hiển thị có tính đến mật độ điểm ảnh khác nhau. Để giao diện trông giống nhau trên tất cả các màn hình, các đơn vị độc lập với mật độ được sử dụng.

Mật độ màn hình được phân loại: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Khi chuẩn bị hình ảnh, bạn cần tạo tài nguyên cho tất cả mật độ: icon.png, icon_hdpi.png, icon_xhdpi.png, v.v. Định dạng vector (VectorDrawable trong Android, SF Symbols trong iOS) giải quyết vấn đề nhiều tài nguyên raster.

Tại IT Sectr, chúng tôi sử dụng hệ số tỷ lệ để xuất biểu tượng từ Figma: chúng tôi xuất ở 1x, 2x, 3x cho iOS và mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi cho Android. Điều này đảm bảo hiển thị sắc nét trên tất cả các thiết bị bao gồm máy tính bảng và điện thoại thông minh có thể gập.

Khái niệm UI hiện đại: Chế độ tối, Safe Area, Khả năng tiếp cận

Các thành phần UI của ứng dụng di động hiện đại phải hỗ trợ một số tiêu chuẩn, nếu không có chúng thì trải nghiệm người dùng sẽ không hoàn chỉnh.

Chế độ tối / Chế độ sáng

Chế độ tối là một tùy chọn bắt buộc trong các ứng dụng hiện đại. Material Design 3 và iOS 13+ cung cấp hỗ trợ chủ đề tối tích hợp. Điều quan trọng là không đảo ngược màu sắc mà sử dụng bảng màu riêng biệt: nền tối, văn bản sáng, độ tương phản giảm cho các yếu tố phụ. Việc chuyển đổi tự động có thể được gắn với chủ đề hệ thống của thiết bị.

Safe Area và hỗ trợ Notch / Dynamic Island

iPhone hiện đại có Notch (phần cắt cho camera trước) và Dynamic Island. Thiết bị Android cũng có phần cắt và góc bo tròn (Corner Radius). Safe Area là vùng màn hình được đảm bảo không có phần tử hệ thống (thanh trạng thái, chỉ báo trang chủ), thanh điều hướng và phần cắt. iOS tự động áp dụng Safe Area Insets; Android yêu cầu kiểm tra rõ ràng qua WindowInsets hoặc DisplayCutout.

Khả năng tiếp cận (a11y)

Khả năng tiếp cận đảm bảo ứng dụng có thể sử dụng được cho người khuyết tật. Yêu cầu chính: hỗ trợ TalkBack (Android) và VoiceOver (iOS), contentDescription chính xác cho ImageView, độ tương phản màu đủ (tối thiểu 4.5:1 cho văn bản), hỗ trợ Dynamic Type (iOS) để điều chỉnh kích thước phông chữ, điều hướng không cần thị giác và các thay thế cho cử chỉ. WCAG 2.1 là tiêu chuẩn khả năng tiếp cận quốc tế.

Toàn cầu hóa và bản địa hóa (i18n / l10n)

Quốc tế hóa (i18n) là chuẩn bị ứng dụng để hỗ trợ nhiều ngôn ngữ và định dạng khu vực. Bản địa hóa (l10n) là dịch chuỗi, ngày tháng, tiền tệ và đặc điểm văn hóa. Android sử dụng thư mục tài nguyên (values-ru, values-de), iOS sử dụng Localizable.strings và XLIFF. Flutter hỗ trợ flutter_localizations với tệp dịch ARB.

Cử chỉ và tương tác

Tương tác cảm ứng bao gồm nhiều cử chỉ: Chạm, Nhấn giữ, Vuốt, Chụm để phóng to, Kéo để làm mới, Kéo và thả. Android sử dụng GestureDetector, iOS sử dụng UIGestureRecognizer. iOS cũng hỗ trợ 3D Touch (Force Touch) và Haptic Touch với phản hồi xúc giác qua Taptic Engine.