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.