# Profile screens

> Profile and account screens from a Figma UI kit for iOS and Android apps: a social profile, a fitness profile, and the account rows of booking and food apps.

Who the person is and what they can change, drawn four ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. A profile that others see leads with the person; an account that only its owner sees leads with the rows.

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

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Social media app | Profile | A profile header, counts and a photo grid | https://www.appetiteui.com/screens/social/profile |
| Fitness app | Profile | Totals, achievements and account settings | https://www.appetiteui.com/screens/fitness/profile |
| Booking app | Profile | The account rows and a Log out button | https://www.appetiteui.com/docs/screens-booking |
| Food delivery app | Account | The account rows and a Log out button | https://www.appetiteui.com/docs/screens-foodie |

## Rules

- Decide who the screen is for. A public profile shows counts and work to visitors. A private account shows rows to its owner. Mixing the two puts settings in front of strangers.
- Settings are list rows. Every editable thing on a profile is a List row with a trailing chevron or switch, so the screen follows the platform’s row height on its own.
- Log out is a button, not a row. Where an account ends on Log out, it is a Button below the rows, so it never reads as one more setting.

## iOS and Material

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

| 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 |
| 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 is the difference between a profile and an account screen?

A profile is what other people see: a name, a photo, counts and work. An account screen is what only its owner sees: rows for personal information, payments, notifications and security, ending on Log out.

### Where does Log out go on an account screen?

Below the rows, as a button of its own, so it never reads as one more setting. Appetite UI’s booking Profile and food delivery Account both end that way.

## Sources

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

## Related

- Fitness app: [Fitness app profile](https://www.appetiteui.com/screens/fitness/profile)
- Social media app: [Social media app profile](https://www.appetiteui.com/screens/social/profile)
- Docs: [Avatar](https://www.appetiteui.com/docs/avatar)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android)