UI/UX i komponenty w rozwoju mobilnym: czym są, rodzaje i jak używać

Systemy projektowe: Material Design i Human Interface Guidelines

Każda platforma oferuje własny zestaw reguł i komponentów. Dla Androida jest to Material Design, opracowany przez Google w 2014 roku. Material Design wykorzystuje metaforę fizycznego materiału — warstwy, cienie (Elevation), animowane przejścia i adaptacyjne układy. Kluczowe zasady obejmują hierarchię poprzez wyniesienie, znaczący ruch i dostosowywalność do różnych czynników kształtu. Zalecamy zapoznanie się z Material Design 3 (Material You) — najnowszą wersją z dynamicznym motywem i spersonalizowanymi kolorami.

Apple oferuje Human Interface Guidelines (HIG) — zestaw reguł dla iOS, iPadOS, macOS, watchOS i tvOS. HIG kładzie nacisk na czystą typografię (San Francisco), Safe Area uwzględniającą Notch i Dynamic Island, nawigację opartą na gestach i spójność. W przeciwieństwie do Material Design, HIG nie używa „warstw" i Elevation — zamiast tego stosuje rozmycie (vibrancy), cienie i subtelne separatory. Pełna dokumentacja HIG jest regularnie aktualizowana wraz z nowymi wersjami iOS.

W IT Sectr używamy obu systemów projektowych w zależności od platformy klienta. Dla wieloplatformowych projektów Flutter opracowujemy ujednolicony system projektowy łączący najlepsze praktyki Material Design i HIG. Takie podejście pozwala zachować natywne UX na każdej platformie bez powielania kodu.

Deklaratywne frameworki UI: SwiftUI i Jetpack Compose

Tradycyjne podejście do budowania UI to imperatywny układ poprzez XML (Android) lub Interface Builder / kod (iOS). Nowoczesną alternatywą są frameworki deklaratywne, gdzie programista opisuje, jak interfejs powinien wyglądać w każdym stanie, a framework zajmuje się aktualizacjami.

Jetpack Compose (Android)

Jetpack Compose to nowoczesny zestaw narzędzi od Google do budowania natywnego UI w Kotlinie. Zamiast układów XML używane są funkcie komponowalne Kotlina (@Composable). Compose jest w pełni deklaratywny: gdy dane się zmieniają, przerysowywane są tylko zmienione części ekranu. Przykład prostego ekranu z tekstem i przyciskiem:

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

SwiftUI (iOS)

SwiftUI to deklaratywny framework Apple wprowadzony w 2019 roku. Działa na wszystkich platformach Apple (iOS, iPadOS, macOS, watchOS, tvOS) poprzez ujednolicone API. SwiftUI używa struktur View, właściwości @State i @Binding do zarządzania danymi oraz modyfikatorów do stylizacji. Odpowiednik powyższego przykładu w SwiftUI:

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

Flutter Widgets

Flutter od Google używa własnej biblioteki widgetów. Wszystko we Flutterze jest widgetem — od paddingu po cały ekran. Widgety dzielą się na StatelessWidget (niezmienne) i StatefulWidget (ze stanem). Podstawowe kontenery to Container, Row, Column, Stack. Flutter nie używa natywnych komponentów platformy — rysuje wszystko przez Skia Engine, co zapewnia spójny wygląd na Androidzie i 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('Нажми меня'),
                ),
            ],
        );
    }
}

Natywne komponenty UI dla Androida i iOS

Pomimo rozpowszechnienia frameworków deklaratywnych, zrozumienie natywnych komponentów pozostaje ważne dla obsługi starszych projektów i głębokiej personalizacji.

Nawigacja

Nawigacja w Androidzie opiera się na Activity (ekrany aktywności) i Fragment (fragmenty wewnątrz jednej Activity). Jetpack Navigation Component upraszcza przejścia między ekranami poprzez graf nawigacji. W iOS nawigacja jest implementowana przez NavigationController — stos kontrolerów z animowanymi przejściami. Tab Bar i Bottom Navigation umożliwiają przełączanie między głównymi sekcjami aplikacji. Drawer (boczne menu) i Toolbar/ActionBar są używane do dodatkowych działań. Android Navigation Component jest zalecany dla wszystkich nowych projektów.

Listy

Do wyświetlania dużych ilości danych Android używa RecyclerView — wydajnego kontenera z ponownym wykorzystaniem ViewHolder. Odpowiednikami w iOS są UITableView (listy pionowe) i UICollectionView (siatki). Jetpack Compose oferuje LazyColumn i LazyVerticalGrid, a SwiftUI — List i LazyVStack/LazyHStack. Kluczową zaletą komponentów Lazy jest renderowanie tylko widocznych elementów.

Układy i pozycjonowanie

Android View System oferuje kilka kontenerów układu: ConstraintLayout (elastyczny system więzów), LinearLayout (układ liniowy), RelativeLayout (pozycjonowanie względne), FrameLayout (nakładanie warstw). W iOS, Core Auto Layout używa systemu więzów (NSLayoutConstraint) do opisu pozycjonowania elementów. SwiftUI i Flutter używają odpowiednio VStack/HStack/ZStack i Row/Column/Stack.

Jednostki miary i responsywny układ

Komponenty UI urządzeń mobilnych są wyświetlane z uwzględnieniem różnych gęstości pikseli. Aby interfejs wyglądał tak samo na wszystkich ekranach, używa się jednostek niezależnych od gęstości.

Gęstości ekranu są klasyfikowane: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Przy przygotowywaniu obrazów należy tworzyć zasoby dla wszystkich gęstości: icon.png, icon_hdpi.png, icon_xhdpi.png i tak dalej. Formaty wektorowe (VectorDrawable w Androidzie, SF Symbols w iOS) rozwiązują problem wielu zasobów rastrowych.

W IT Sectr używamy współczynnika skalowania do eksportu ikon z Figmy: eksportujemy w 1x, 2x, 3x dla iOS i mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi dla Androida. Gwarantuje to ostre wyświetlanie na wszystkich urządzeniach, w tym tabletach i składanych smartfonach.

Nowoczesne koncepcje UI: Tryb ciemny, Safe Area, Dostępność

Nowoczesne komponenty UI aplikacji mobilnych muszą wspierać szereg standardów, bez których doświadczenie użytkownika byłoby niekompletne.

Tryb ciemny / Tryb jasny

Tryb ciemny to obowiązkowa opcja w nowoczesnych aplikacjach. Material Design 3 i iOS 13+ zapewniają wbudowane wsparcie dla ciemnego motywu. Ważne jest, aby nie odwracać kolorów, ale używać oddzielnych palet kolorów: ciemne tło, jasny tekst, obniżony kontrast dla elementów drugorzędnych. Automatyczne przełączanie można powiązać z motywem systemowym urządzenia.

Safe Area i obsługa Notch / Dynamic Island

Nowoczesne iPhone'y mają Notch (wycięcie na przedni aparat) i Dynamic Island. Urządzenia Android również mają wycięcia i zaokrąglone rogi (Corner Radius). Safe Area to obszar ekranu gwarantowany wolny od elementów systemowych (pasek stanu, wskaźnik home), paska nawigacji i wycięć. iOS automatycznie stosuje Safe Area Insets; Android wymaga jawnego sprawdzenia przez WindowInsets lub DisplayCutout.

Dostępność (a11y)

Dostępność zapewnia użyteczność aplikacji dla osób z niepełnosprawnościami. Kluczowe wymagania: wsparcie TalkBack (Android) i VoiceOver (iOS), poprawne contentDescription dla ImageView, wystarczający kontrast kolorów (minimum 4.5:1 dla tekstu), wsparcie Dynamic Type (iOS) dla skalowania czcionek, nawigacja bez wzroku i alternatywy dla gestów. WCAG 2.1 to międzynarodowy standard dostępności.

Globalizacja i lokalizacja (i18n / l10n)

Internacjonalizacja (i18n) to przygotowanie aplikacji do obsługi wielu języków i formatów regionalnych. Lokalizacja (l10n) to tłumaczenie ciągów znaków, dat, walut i cech kulturowych. Android używa katalogów zasobów (values-ru, values-de), iOS używa Localizable.strings i XLIFF. Flutter obsługuje flutter_localizations z plikami tłumaczeń ARB.

Gesty i interakcja

Interakcja dotykowa obejmuje wiele gestów: Dotknięcie, Długie naciśnięcie, Przesunięcie, Ściskanie do zoomu, Pociągnięcie do odświeżenia, Przeciągnij i upuść. Android używa GestureDetector, iOS używa UIGestureRecognizer. iOS obsługuje również 3D Touch (Force Touch) i Haptic Touch z dotykowym sprzężeniem zwrotnym przez Taptic Engine.