# Dashboard screens

> Mobile dashboard screens from a Figma UI kit for iOS and Android apps: finance, fitness, food delivery, booking, social and tasks, in light and dark.

The first screen after sign in, drawn six ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Each one leads with the number or the list its app is opened for and keeps every other block under it.

Page: https://www.appetiteui.com/screens/patterns/dashboard.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Finance app | Dashboard | Total balance, four quick actions and the latest transactions | https://www.appetiteui.com/screens/finance/dashboard |
| Fitness app | Dashboard | The day: a week strip, activity rings, heart rate, sleep and the next workout | https://www.appetiteui.com/screens/fitness/dashboard |
| Food delivery app | Home | A Delivery and Pickup switch, the address, a search field, cuisines, a promo card and nearby restaurants | https://www.appetiteui.com/screens/food-delivery/home |
| Booking app | Explore | A capsule search, Stays and Experiences tabs and two rows of stay cards | https://www.appetiteui.com/docs/screens-booking |
| Social media app | Home | Stories and the feed, titled For you | https://www.appetiteui.com/screens/social/feed |
| Task manager app | My work | The personal queue: a week summary, a Today, Upcoming and Done switch, task rows | https://www.appetiteui.com/screens/tasks/my-work |

## Rules

- One thing leads. A balance, a day of activity, a queue of tasks: the screen opens on the one figure or list the app is opened for, set larger than anything else on it.
- Actions sit next to what they act on. Quick actions stand directly under the figure they change, so the commonest task is one tap from the first screen.
- The tab bar is the way out. Every dashboard carries the Navigation component, the app’s top level sections, and nothing else at the bottom of the screen.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Screen side padding | 16 pt | 16 dp | `platform/screen-padding` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Navigation | iOS / Tab Bar, floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 × 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## Questions

### What should a mobile app dashboard show first?

The one number or list the app is opened for: a balance in a finance app, the day’s activity in a fitness app, the queue in a task manager. Everything else sits under it, and the commonest actions sit right below that figure.

### Which components does a dashboard screen need?

A tab bar for the app’s top level sections, a header that carries the main figure, quick actions for the commonest tasks and a list or cards of recent items. In Appetite UI those are Navigation, Quick Action Button, Section Header and List or Card, all bound to the kit’s tokens.

## Sources

1. [Apple Human Interface Guidelines: Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
2. [Material Design 3: Navigation bar](https://m3.material.io/components/navigation-bar/overview)

## Related

- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- Social media app: [Social media app feed](https://www.appetiteui.com/screens/social/feed)
- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Task manager app: [Task manager app home](https://www.appetiteui.com/screens/tasks/my-work)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)