UI/UX und Komponenten in der mobilen Entwicklung: Was sie sind, welche Arten es gibt und wie man sie verwendet

Designsysteme: Material Design und Human Interface Guidelines

Jede Plattform bietet ihren eigenen Satz von Regeln und Komponenten. Für Android ist dies Material Design, das 2014 von Google entwickelt wurde. Material Design verwendet die Metapher des physischen Materials — Schichten, Schatten (Elevation), animierte Übergänge und adaptive Layouts. Zu den wichtigsten Prinzipien gehören Hierarchie durch Erhöhung, sinnvolle Bewegung und Anpassungsfähigkeit an verschiedene Formfaktoren. Wir empfehlen, Material Design 3 (Material You) zu erkunden — die neueste Version mit dynamischem Design und personalisierten Farben.

Apple bietet die Human Interface Guidelines (HIG) — eine Reihe von Regeln für iOS, iPadOS, macOS, watchOS und tvOS. HIG legt Wert auf klare Typografie (San Francisco), Safe Area zur Berücksichtigung von Notch und Dynamic Island, gestenbasierte Navigation und Konsistenz. Im Gegensatz zu Material Design verwendet HIG keine „Schichten" und Elevation — stattdessen werden Unschärfe (Vibrancy), Schatten und dezente Trennlinien verwendet. Die vollständige HIG-Dokumentation wird regelmäßig mit neuen iOS-Versionen aktualisiert.

Bei IT Sectr verwenden wir je nach Plattform des Kunden beide Designsysteme. Für plattformübergreifende Flutter-Projekte entwickeln wir ein einheitliches Designsystem, das die besten Praktiken von Material Design und HIG kombiniert. Dieser Ansatz bewahrt eine native UX auf jeder Plattform ohne Code-Duplizierung.

Deklarative UI-Frameworks: SwiftUI und Jetpack Compose

Der traditionelle Ansatz zum Aufbau von UI ist imperatives Layout über XML (Android) oder Interface Builder / Code (iOS). Die moderne Alternative sind deklarative Frameworks, bei denen der Entwickler beschreibt, wie die Oberfläche in jedem Zustand aussehen soll, und das Framework sich um Aktualisierungen kümmert.

Jetpack Compose (Android)

Jetpack Compose ist ein modernes Toolkit von Google zum Erstellen nativer UI in Kotlin. Anstelle von XML-Layouts werden Kotlin-Composable-Funktionen (@Composable) verwendet. Compose ist vollständig deklarativ: Wenn sich Daten ändern, werden nur die geänderten Teile des Bildschirms neu gezeichnet. Beispiel für einen einfachen Bildschirm mit Text und einem Button:

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

SwiftUI (iOS)

SwiftUI ist Apples deklaratives Framework, das 2019 vorgestellt wurde. Es funktioniert auf allen Apple-Plattformen (iOS, iPadOS, macOS, watchOS, tvOS) über eine einheitliche API. SwiftUI verwendet View-Strukturen, @State- und @Binding-Eigenschaften für die Datenverwaltung und Modifikatoren für die Gestaltung. Das Äquivalent des obigen Beispiels in SwiftUI:

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

Flutter Widgets

Flutter von Google verwendet seine eigene Widget-Bibliothek. In Flutter ist alles ein Widget — vom Padding bis zum gesamten Bildschirm. Widgets werden in StatelessWidget (unveränderlich) und StatefulWidget (mit Zustand) unterteilt. Grundlegende Container sind Container, Row, Column, Stack. Flutter verwendet keine nativen Plattformkomponenten — es zeichnet alles über die Skia Engine, was ein einheitliches Erscheinungsbild auf Android und iOS gewährleistet.

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('Нажми меня'),
                ),
            ],
        );
    }
}

Native UI-Komponenten für Android und iOS

Trotz der Verbreitung deklarativer Frameworks bleibt das Verständnis nativer Komponenten für die Unterstützung von Legacy-Projekten und tiefgehende Anpassungen wichtig.

Navigation

Die Navigation in Android basiert auf Activity (Bildschirmaktivitäten) und Fragment (Fragmente innerhalb einer Activity). Die Jetpack Navigation Component vereinfacht Übergänge zwischen Bildschirmen über einen Navigationsgraphen. In iOS wird die Navigation über NavigationController implementiert — einen Stapel von Controllern mit animierten Übergängen. Tab Bar und Bottom Navigation ermöglichen das Umschalten zwischen den Hauptbereichen der App. Drawer (seitliches Menü) und Toolbar/ActionBar werden für zusätzliche Aktionen verwendet. Android Navigation Component wird für alle neuen Projekte empfohlen.

Listen

Zur Anzeige großer Datenmengen verwendet Android RecyclerView — einen effizienten Container mit ViewHolder-Wiederverwendung. Die iOS-Äquivalente sind UITableView (vertikale Listen) und UICollectionView (Raster). Jetpack Compose bietet LazyColumn und LazyVerticalGrid, während SwiftUI List und LazyVStack/LazyHStack bereitstellt. Der Hauptvorteil von Lazy-Komponenten ist das Rendern nur sichtbarer Elemente.

Layouts und Positionierung

Das Android View System bietet mehrere Layout-Container: ConstraintLayout (flexibles Constraints-System), LinearLayout (lineare Anordnung), RelativeLayout (relative Positionierung), FrameLayout (Schichtenstapelung). In iOS verwendet Core Auto Layout ein System von Constraints (NSLayoutConstraint) zur Beschreibung der Elementpositionierung. SwiftUI und Flutter verwenden VStack/HStack/ZStack bzw. Row/Column/Stack.

Maßeinheiten und responsives Layout

UI-Komponenten mobiler Geräte werden unter Berücksichtigung unterschiedlicher Pixeldichten angezeigt. Damit die Oberfläche auf allen Bildschirmen gleich aussieht, werden dichteunabhängige Einheiten verwendet.

Bildschirmdichten werden klassifiziert: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Bei der Vorbereitung von Bildern müssen Sie Ressourcen für alle Dichten erstellen: icon.png, icon_hdpi.png, icon_xhdpi.png und so weiter. Vektorformate (VectorDrawable in Android, SF Symbols in iOS) lösen das Problem mehrerer Rasterressourcen.

Bei IT Sectr verwenden wir einen Skalierungsfaktor zum Exportieren von Symbolen aus Figma: Wir exportieren in 1x, 2x, 3x für iOS und mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi für Android. Dies gewährleistet eine scharfe Darstellung auf allen Geräten einschließlich Tablets und faltbaren Smartphones.

Moderne UI-Konzepte: Dark Mode, Safe Area, Barrierefreiheit

Moderne UI-Komponenten mobiler Apps müssen eine Reihe von Standards unterstützen, ohne die die Benutzererfahrung unvollständig wäre.

Dark Mode / Light Mode

Dark Mode ist eine obligatorische Option in modernen Anwendungen. Material Design 3 und iOS 13+ bieten integrierte Unterstützung für dunkle Designs. Es ist wichtig, Farben nicht zu invertieren, sondern separate Farbpaletten zu verwenden: dunkler Hintergrund, heller Text, reduzierter Kontrast für sekundäre Elemente. Das automatische Umschalten kann an das Systemdesign des Geräts gebunden werden.

Safe Area und Notch / Dynamic Island Unterstützung

Moderne iPhones haben einen Notch (Ausschnitt für die Frontkamera) und Dynamic Island. Android-Geräte haben ebenfalls Ausschnitte und abgerundete Ecken (Corner Radius). Safe Area ist der Bildschirmbereich, der garantiert frei von Systemelementen (Statusleiste, Home-Indikator), Navigationsleiste und Ausschnitten ist. iOS wendet Safe Area Insets automatisch an; Android erfordert eine explizite Überprüfung über WindowInsets oder DisplayCutout.

Barrierefreiheit (a11y)

Barrierefreiheit stellt die Nutzbarkeit der App für Menschen mit Behinderungen sicher. Wichtige Anforderungen: TalkBack (Android) und VoiceOver (iOS) Unterstützung, korrekte contentDescription für ImageView, ausreichender Farbkontrast (mindestens 4.5:1 für Text), Dynamic Type (iOS) Unterstützung für Schriftskalierung, navigation ohne Sehkraft und Alternativen zu Gesten. WCAG 2.1 ist der internationale Barrierefreiheitsstandard.

Globalisierung und Lokalisierung (i18n / l10n)

Internationalisierung (i18n) ist die Vorbereitung der App auf die Unterstützung mehrerer Sprachen und regionaler Formate. Lokalisierung (l10n) ist die Übersetzung von Zeichenfolgen, Daten, Währungen und kulturellen Besonderheiten. Android verwendet Ressourcenverzeichnisse (values-ru, values-de), iOS verwendet Localizable.strings und XLIFF. Flutter unterstützt flutter_localizations mit ARB-Übersetzungsdateien.

Gesten und Interaktion

Touch-Interaktion umfasst viele Gesten: Tap (tippen), Long Press (langes Drücken), Swipe (wischen), Pinch-to-Zoom (zoomen), Pull-to-Refresh (ziehen zum Aktualisieren), Drag-and-Drop (ziehen und ablegen). Android verwendet GestureDetector, iOS verwendet UIGestureRecognizer. iOS unterstützt auch 3D Touch (Force Touch) und Haptic Touch mit haptischem Feedback über die Taptic Engine.