UI/UX и компоненты в мобильной разработке: что это, какие бывают и как использовать

Дизайн-системы: Material Design и Human Interface Guidelines

Каждая платформа предлагает собственный набор правил и компонентов. Для Android это Material Design, разработанный Google в 2014 году. Material Design использует метафору физического материала — слои, тени (Elevation), анимированные переходы и адаптивные макеты. Ключевые принципы включают иерархию через возвышение (Elevation), осмысленное движение и адаптивность под разные форм-факторы. Рекомендуем изучить Material Design 3 (Material You) — последнюю версию с динамической темой и персонализированными цветами.

Apple предлагает Human Interface Guidelines (HIG) — свод правил для iOS, iPadOS, macOS, watchOS и tvOS. HIG делает акцент на чёткой типографике (San Francisco), Safe Area для учёта Notch и Dynamic Island, жестовой навигации и консистентности. В отличие от Material Design, HIG не использует «слои» и Elevation — вместо этого применяются размытие (vibrancy), тени и аккуратные разделители. Полная документация HIG регулярно обновляется с выходом новых версий iOS.

В IT Sectr мы используем обе дизайн-системы в зависимости от платформы заказчика. Для кроссплатформенных проектов на Flutter разрабатываем единую дизайн-систему, сочетающую лучшие практики Material Design и HIG. Такой подход позволяет сохранить нативный UX на каждой платформе без дублирования кода.

Декларативные UI-фреймворки: SwiftUI и Jetpack Compose

Традиционный подход к построению UI — императивная верстка через XML (Android) или Interface Builder / код (iOS). Современная альтернатива — декларативные фреймворки, где разработчик описывает, как интерфейс должен выглядеть при каждом состоянии, а фреймворк заботится об обновлениях.

Jetpack Compose (Android)

Jetpack Compose — современный тулкит от Google для построения нативного UI на Kotlin. Вместо XML-разметки используются Kotlin-функции-компонуемые (@Composable). Compose полностью декларативен: при изменении данных перерисовываются только изменившиеся части экрана. Пример простого экрана с текстом и кнопкой:

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

SwiftUI (iOS)

SwiftUI — декларативный фреймворк Apple, представленный в 2019 году. Работает на всех платформах Apple (iOS, iPadOS, macOS, watchOS, tvOS) через единый API. SwiftUI использует структуры View, свойства @State и @Binding для управления данными, а также модификаторы для настройки внешнего вида. Аналог примера выше на SwiftUI:

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

Flutter Widgets

Flutter от Google использует собственную библиотеку виджетов. Всё в Flutter — виджет: от паддинга до целого экрана. Виджеты делятся на StatelessWidget (неизменяемые) и StatefulWidget (с состоянием). Базовые контейнеры — Container, Row, Column, Stack. Flutter не использует нативные компоненты платформы — он рисует всё через Skia Engine, что обеспечивает одинаковый вид на Android и 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('Нажми меня'),
                ),
            ],
        );
    }
}

Нативные UI-компоненты Android и iOS

Несмотря на распространение декларативных фреймворков, понимание нативных компонентов остаётся важным для поддержки легаси-проектов и глубокой кастомизации.

Навигация

Навигация в Android строится на Activity (экраны-активности) и Fragment (фрагменты внутри одной Activity). Jetpack Navigation Component упрощает переходы между экранами через граф навигации. В iOS навигация реализуется через NavigationController — стек контроллеров с анимированными переходами. Tab Bar и Bottom Navigation обеспечивают переключение между основными разделами приложения. Drawer (боковое меню) и Toolbar/ActionBar используются для дополнительных действий. Android Navigation Component рекомендуется для всех новых проектов.

Списки

Для отображения больших объёмов данных Android использует RecyclerView — эффективный контейнер с переиспользованием ViewHolder. В iOS аналогом служат UITableView (вертикальные списки) и UICollectionView (сетки). Jetpack Compose предлагает LazyColumn и LazyVerticalGrid, а SwiftUI — List и LazyVStack/LazyHStack. Ключевое преимущество Lazy-компонентов — отрисовка только видимых элементов.

Макеты и расположение

Android View System предлагает несколько Layout-контейнеров: ConstraintLayout (гибкая система привязок), LinearLayout (линейное расположение), RelativeLayout (относительное позиционирование), FrameLayout (наложение слоёв). В iOS Core Auto Layout использует систему констрейнтов (NSLayoutConstraint) для описания расположения элементов. SwiftUI и Flutter используют VStack/HStack/ZStack и Row/Column/Stack соответственно.

Единицы измерения и адаптивная вёрстка

UI-компоненты мобильных устройств отображаются с учётом разной плотности пикселей. Чтобы интерфейс выглядел одинаково на всех экранах, используются независимые единицы измерения.

Плотности экрана классифицируются: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). При подготовке изображений нужно создавать ресурсы для всех плотностей: icon.png, icon_hdpi.png, icon_xhdpi.png и так далее. Векторные форматы (VectorDrawable в Android, SF Symbols в iOS) решают проблему множества растро-ресурсов.

В IT Sectr мы используем коэффициент масштабирования для экспорта иконок из Figma: экспортируем в 1x, 2x, 3x для iOS и mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi для Android. Это гарантирует чёткое отображение на всех устройствах включая планшеты и складные смартфоны.

Современные концепции UI: Dark Mode, Safe Area, Accessibility

Современные UI-компоненты мобильных приложений обязаны поддерживать ряд стандартов, без которых пользовательский опыт будет неполным.

Dark Mode / Light Mode

Dark Mode (тёмная тема) — обязательная опция в современных приложениях. Material Design 3 и iOS 13+ предоставляют встроенную поддержку тёмной темы. Важно не инвертировать цвета, а использовать отдельные цветовые палитры: тёмный фон, светлый текст, пониженный контраст для второстепенных элементов. Автоматическое переключение можно привязать к системной теме устройства.

Safe Area и учёт Notch / Dynamic Island

Современные iPhone имеют Notch (вырез под фронтальную камеру) и Dynamic Island. Android-устройства также имеют вырезы и скруглённые углы (Corner Radius). Safe Area — область экрана, гарантированно свободная от системных элементов (статус-бар, индикатор home), навигационной панели и вырезов. iOS автоматически применяет Safe Area Insets; Android требует явной проверки через WindowInsets или DisplayCutout.

Accessibility (a11y)

Accessibility обеспечивает доступность приложения для людей с ограниченными возможностями. Ключевые требования: поддержка TalkBack (Android) и VoiceOver (iOS), корректные contentDescription для ImageView, достаточный цветовой контраст (минимум 4.5:1 для текста), поддержка Dynamic Type (iOS) для масштабирования шрифтов, навигация без зрения и альтернативы жестам. WCAG 2.1 — международный стандарт доступности.

Globalization и Localization (i18n / l10n)

Интернационализация (i18n) — подготовка приложения к поддержке нескольких языков и региональных форматов. Локализация (l10n) — перевод строк, дат, валют и культурных особенностей. Android использует ресурсные каталоги (values-ru, values-de), iOS — Localizable.strings и XLIFF. Flutter поддерживает flutter_localizations с ARB-файлами переводов.

Жесты и взаимодействие

Сенсорное взаимодействие включает множество жестов: Tap (касание), Long Press (долгое нажатие), Swipe (смахивание), Pinch-to-Zoom (масштабирование), Pull-to-Refresh (обновление потягиванием), Drag-and-Drop (перетаскивание). Android использует GestureDetector, iOS — UIGestureRecognizer. В iOS также доступны 3D Touch (Force Touch) и Haptic Touch с тактильной обратной связью через Taptic Engine.