Taking notes from iOS Design Guidelines

I should’ve written my thought about this website, but ended up making some notes, which can be regarded as a cheat sheet.🤓

The iOS Design Guidelines — Ivo Mynttinen / User Interface Designer

Table View

．Plain

It makes sense when presenting a big data set that could be sorted in some way (e.g., alphabetically descending)

．Grouped

Each group can have a header (best used to describe the context for the group) as well as a footer (good for help text, etc.).

．Default

．With Subtitle

It’s useful for further explanations or short descriptions.

．With Value

It allows you to display a specific value that is related to the row title.

．Large Cells

Due to the increased padding, the table doesn’t look as busy.

Modals, Popovers and Alerts

．Activity View

It’s used to perform specific tasks. These tasks can be default system tasks such as share content via the available options, or they can be completely custom actions.

．Actions

It can force the user of an app to confirm an action or cancel it.

*When there is enough space available (e.g., on iPad screens), action sheets visually transform into popovers. A button to close the view is not required anymore because tapping a target anywhere outside the popover will close it automatically.

．Alerts

It always contains a title text, which should not be longer than one line and one (for pure informational alerts, e.g., „OK“) or two (for alerts that require a decision, e.g., „Send“ and „Cancel“) buttons.

*Also, you can add a message text, if needed, as well as up to two text input fields, one of which can be a masked input field, which is appropriate for sensitive information like passwords or PINs.

．Edit Menu

．Popover

It’s useful when a specific action requires multiple user inputs before proceeding.

*A popover is a powerful temporary view that can contain various objects such as its own navigation bar, table views, maps or web views.

Modals

There are three different modal styles available:

1. Full screen: covers the entire screen.
2. Page sheet: In portrait mode, the modal covers the underlaying content only partially. In landscape mode, the page sheet modal acts just like a full screen modal.
3. Form sheet: In portrait mode, the modal appears in the center of the screen. The position of the modal adjusts automatically when a keyboard needs to be displayed. In landscape mode, the page sheet modal acts just like a full screen modal.