Mobile Oberflächenkomponenten

Mobile UI & Component Systems

Build cohesive mobile screens from a clear visual hierarchy, semantic tokens and reusable components that hold up with real content across screen sizes and themes.

1. Visual hierarchy and real content

• Establish a clear three-level hierarchy on every screen: primary focal point (key metric, content or primary CTA), secondary supporting context, and tertiary metadata.
• Design with realistic, representative content—including long localized strings, multi-line titles, missing avatars, zero values and large numbers—never idealized one-word placeholders.
• Keep card and list row density balanced: group related fields cleanly, limit each row to 3–4 data points, and use consistent spacing, alignment and typography tokens from the shared design system.

2. Safe areas, viewports and adaptive layout

• Respect OS safe areas on every screen: top status bar, notch / Dynamic Island, Android camera cutouts, bottom home indicator and gesture bar, and keyboard insets.
• Pin sticky bottom action bars above the safe-area inset and above the software keyboard when inputs are focused, with a subtle divider or elevation so scrolling content does not bleed into the action bar.
• Define how screens adapt from compact phones (320–375pt wide) to large phones, landscape orientation and tablets/foldables (reflowing single-column lists into master-detail or responsive grids where appropriate).

3. Reusable component states and dark mode

• Specify every reusable mobile component (buttons, list items, inputs, chips, banners, sheets, dialogs) across its interactive and data states: default, pressed, focused, disabled, loading, error and selected.
• Use semantic color and surface tokens so light mode, dark mode and elevated surfaces (modals, sheets, sticky bars) maintain clear separation and legibility without hardcoded hex values.

Before you finish

• Visual hierarchy highlights the primary task and holds up with long, realistic content.
• Safe areas, sticky bars, keyboard insets and compact-to-large screen widths are specified.
• Components reuse shared design tokens and define all interactive states in light and dark mode.