← Belső rendszer fejlesztők adatlapja

Skill · 1.0.0 verzió

Mobilalkalmazás felhasználói élménye

Platformszokások, érintés, hálózati körülmények és világos visszajelzés köré formál teljes mobilos utakat.

mobile-app-ux

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha asztali jellegű képernyő telefonon nehézkes.

Miben segít neked?

  • A célplatformhoz igazítja az elrendezést, navigációt és vezérlőket.
  • Lefedi a betöltést, üres, hibás és kapcsolat nélküli állapotot.
  • Összehangolja a billentyűzetet, jogosultságokat és akadálymentes visszajelzést.

Például ezt kérheted

Tervezd újra az időpontfoglalást egykezes használatra gyenge hálózattal, műveleteket nem takaró billentyűzettel. Kis telefonon válassz időpontot, veszítsd el a hálózatot, majd próbáld újra. Maradjon meg a választás, az el nem küldött kérés ne látszódjon visszaigazoltnak.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Mobile App UX

Platform conventions

  • Follow iOS Human Interface Guidelines and Material Design on Android, through the repo's UI kit and existing components. Do not mix styles on one screen.
  • Android system back and the iOS edge swipe must work as expected; block them only to confirm discarding unsaved work.
  • Bottom tabs for 3–5 top-level destinations, stack navigation for drill-down, modals for focused tasks with a clear close. Keep each tab's state when switching.
  • Prefer native pickers, date inputs, share sheets and alerts.

Touch and layout

  • Touch targets at least 44x44 pt (iOS) or 48x48 dp (Android), with spacing. Enlarge the hit area rather than the visual if needed.
  • Primary actions within thumb reach; destructive actions separated and confirmed or undoable.
  • Respect safe areas: notch, Dynamic Island, home indicator, status bar, Android cutouts and gesture bar. Use the framework's safe-area utilities, never hardcoded insets.
  • Check small phones, large phones and tablets if supported.

States

  • Every data screen handles loading (skeleton, or spinner after a short delay), empty (explain and offer the next action), error (human message plus retry) and partial data.
  • Pull to refresh on lists that change; paginate long lists.
  • Optimistic updates only with rollback and a visible error on failure.

Offline and network

  • Assume slow or missing connectivity: show cached data with a stale hint, queue or disable writes, retry with backoff.
  • Never lose user input: keep drafts across errors, backgrounding and restarts.

Keyboard and input

  • The keyboard must not cover the focused input or the submit button (KeyboardAvoidingView, adjustResize, scroll into view).
  • Set keyboard type, autofill content type, autocapitalize and return key action per field; dismiss on tap outside or scroll.

Appearance and accessibility

  • Dark mode through semantic color tokens; check contrast in both themes and images or icons that assume a white background.
  • Dynamic Type and font scaling: layouts grow without clipping or overlap. Never disable scaling; test the largest sizes.
  • Screen reader labels on icon buttons (accessibilityLabel, Semantics, contentDescription) and a logical reading order.
  • Respect the reduce motion setting.

Feedback

  • Visible pressed state within 100 ms of every tap.
  • Haptics sparingly, with system haptic types: significant confirmations and errors, never every tap or scroll.

Permissions

  • Ask in context, when the feature needs it, after a short explanation. Never request everything on first launch.
  • Handle denied and limited states with a path to Settings; the app must still work without optional permissions.

Before you finish

  • Touch targets meet 44 pt / 48 dp; safe areas respected on notched devices.
  • Loading, empty, error and offline states exist for changed screens.
  • The keyboard hides no inputs or actions.
  • Dark mode and the largest font scale checked.
  • Permissions requested in context, with a denied path.
  • Back navigation correct on both platforms.

Csomagban lévő fájlok 1

  • SKILL.md