# Detail screens

> Detail screens from a Figma UI kit for iOS and Android apps: a stay, a restaurant menu, a dish, a workout in progress and a task, each with one main action.

One item, all of it, drawn five ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. A detail screen opens on a picture or a title and closes on the one action the item exists for.

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

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Booking app | Listing | One stay: photo, rating, host, map, amenities and a Reserve bar | https://www.appetiteui.com/docs/screens-booking |
| Food delivery app | Restaurant | A storefront photo, rating, menu tabs and dish rows with an add button | https://www.appetiteui.com/screens/food-delivery/restaurant-menu |
| Food delivery app | Dish | One dish with a size choice, extras and an Add to cart bar | https://www.appetiteui.com/screens/food-delivery/restaurant-menu |
| Fitness app | Exercise | A workout in progress with a timer, set, reps, weight and player controls | https://www.appetiteui.com/screens/fitness/workout |
| Task manager app | Task | One task: fields, description, attachments, a comment field | https://www.appetiteui.com/docs/screens-tasks |

## Rules

- The action rides along. Reserve, Add to cart, View cart: the main action sits in a bar pinned to the bottom, so it is in reach however far the screen scrolls.
- Proof before price. Rating, host and reviews come before the price bar, so the decision is made on the item, then on the number.
- Buttons on photos are overlay buttons. Back and favorite over a photo use the Overlay style of Button, which keeps its contrast on any picture.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Questions

### Where should the main action go on a detail screen?

In a bar pinned to the bottom, so it stays in reach however far the screen scrolls: Reserve on a stay, Add to cart on a dish, View cart on a menu.

### How do buttons stay readable on top of a photo?

With an overlay style that brings its own backing, which keeps its contrast on any picture. Appetite UI uses Button / Overlay for back and favorite over its storefront and stay photos.

## Sources

1. [Apple Human Interface Guidelines: Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
2. [Material Design 3: Buttons](https://m3.material.io/components/buttons/overview)

## Related

- Fitness app: [Fitness app workout screen](https://www.appetiteui.com/screens/fitness/workout)
- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Rating](https://www.appetiteui.com/docs/rating)
- Docs: [Badge](https://www.appetiteui.com/docs/badge)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)