← Vissza a katalógushoz

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

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

A skillcsomag bemutatása

mobile-app-ux

mobile-app-ux: Egyedi, reszponzív felületeket tervez és épít, amelyeken egyértelmű a következő lépés, bármilyen képernyőn.

Részletek…Összecsukás

mobile-app-ux

mobile-app-ux: Egyedi, reszponzív felületeket tervez és épít, amelyeken egyértelmű a következő lépés, bármilyen képernyőn.

A teljes skillt és a hozzá tartozó fájlokat tartalmazza (1 fájl). Az alábbi eredeti leírás rögzíti a pontos alkalmazási területét.

A skill eredeti leírása (a forrás nyelvén)

Use when designing or building mobile app screens, iOS or Android UI, touch targets, gestures, navigation, tabs, safe area, notch, keyboard, loading, empty and error states, offline, dark mode, dynamic type, font scaling, haptics or permission prompts.

Telepítsd a skillt, nézd át a forrását és a megbízhatósági beállításait, majd engedélyezd a megfelelő projektben vagy ügynöknél.

Előfeltételek

  • A számítógépedre telepített Orqestria.