Иллюстрированное руководство по созданию дизайна приложений под iOS 16

Published in

Дизайн-кабак

22 min readDec 6, 2022

В этой статье мы рассмотрим практически всё, что вам нужно знать, чтобы разработать приложение для iPhone с учётом особенностей 16 версии iOS.

Возможно, вы никогда не проектировали приложения для iPhone и не знаете, с чего начать. Может быть, вы уже сделали дизайн для дюжины приложений, но всё равно хотите иметь один источник информации, чтобы обращаться к нему за методическими рекомендациями. Потому что разобраться в Руководстве по созданию интерфейсов взаимодействия с пользователями от Apple (Apple’s Human Interface Guidelines) ужасно трудно.

Размеры экранов iPhone

В течение первых 5–6 лет выпуска iPhone размеры экранов были вполне приемлемыми для проектирования. Достаточно было, чтобы дизайн работал на экране разрешением 320x480. Теперь всё стало сложнее. Кажется, что каждый год появляется как минимум ещё один размер экрана…

Ниже вы найдёте полный список размеров экранов iPhone (сохраните эту ссылку «Размеры экранов iPhone» в закладки или скачайте PDF-файл)

* плотность пикселей на дисплее телефона равна 2,61x

Размер фрейма. Это «размер точки» или «@1x» для соответствующего устройства. Я настоятельно рекомендую придерживаться размеров, указанных в таблице, для каждого отдельного устройства. (Здесь автор объясняет, чем отличаются точки от пикселей).
Коэффициент масштабирования при экспорте. Это то, во сколько раз нужно увеличить растровое изображение (PNG, JPG) при экспорте, чтобы по максимуму использовать преимущества более высокого разрешения некоторых устройств.

Какой размер фрейма использовать для дизайна экрана iPhone?

Выбирайте наиболее распространенный размер экрана iPhone, который использует ваша аудитория. Но если в вашем приложении есть страницы с большим объёмом данных, обязательно протестируйте их на экранах меньшего размера.

Если вы собираете аналитику текущего приложения или сайта, проанализируйте ее*. Так вы узнаете наиболее распространенные размеры экранов, которые использует ваша аудитория.
Если вы проектируете приложение для широкой аудитории, используйте наиболее распространенный размер экрана iPhone: 375x812 pt или 375x667 pt (но поскольку они одинаковой ширины, это не имеет большого значения).
Если вы разрабатываете приложение для тех, кто разбирается в технологиях или дизайне, то наиболее популярным размером экрана, скорее всего, будет новый iPhone — 390x844 pt.

*Google Analytics регистрирует эту информацию в Audience > Mobile > Devices, а затем отображает в «Primary Dimension», если выбрать параметр «Screen Resolution».

Дизайн, который хорошо работает на более узком экране (375pt), почти наверняка будет хорошо смотреться и на немного более широком экране (414pt), но не наоборот. Поэтому лучше сначала сделать дизайн для узких экранов, а затем всё перепроверить и корректировать его под большие экраны. Поскольку высота не является ограничением, не так важно, будет высота ваших артбордов равна 667 или 812 пикселям.

Сравнение точек iOS с пикселями

«Точка» («point») — это единица измерения, с помощью которой дизайнеры сравнивают размеры шрифтов и элементов интерфейса на устройствах iOS. «Пиксель» («pixel») — это крошечный квадратик света; из множества пикселей состоит экран iPhone. Чем меньше пиксели, тем более чёткое изображение будет на экране, и это замечательно. Но если просто уменьшить размер пикселей, контент на экране тоже уменьшится! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точках.

Дисплей со стандартным разрешением имеет плотность пикселей 1:1 (или @1x), где один пиксель равен одной точке (1 px = 1 pt). По мере развития технологий появились дисплеи с высоким разрешением с более высокой плотностью пикселей. Если пиксели в два раза меньше изначальной высоты/ширины, то вместо одного пикселя можно использовать квадрат из пикселей 2x2 для каждой точки, что дает коэффициент масштабирования равный 2 (или @2x).

Дисплеи с ещё более высоким разрешением имеют ещё более высокую плотность пикселей. Если пиксели составляют примерно треть изначальной высоты/ширины, вместо одного пикселя можно использовать квадрат из пикселей 3х3 для каждой точки, что дает коэффициент масштабирования равный 3 (или @3x). То есть чем более высокое разрешение у дисплея, тем изображения должны быть более высокого качества, то есть включать большее количество пикселей*.

* Примечание переводчика. Более понятным языком, как соотносить точки и пиксели, объясняет Руслан Шарипов в статье «Гайдлайн по iOS на русском. Часть 46 — Иконки и картинки: Их размер и разрешение»

Сравнение точек и пикселей. Точки всегда имеют одинаковый размер (приблизительно), но пиксели уменьшаются по мере совершенствования технологий. Более высокое разрешение означает, что растровые изображения (PNG, JPG и т.д.) следует экспортировать в большем размере.

@1x 32 pt 32 px — @1x Стандартное разрешение. Один пиксель равен одной точке (1 px = 1 pt)

@2x 32 pt 64 px — @2x Среднее разрешение. Одна точка равна 4 пикселям — сетка из пикселей 2x2

@3x 32 pt 96 px — @3x Высокое разрешение. Одна точка равна 9 пикселям — сетка из пикселей 3x3

Точка — единица измерения, которая позволяет отображать контент на экранах с высоким разрешением и при этом не уменьшать размер всех элементов. Тем не менее, иногда дизайнеры используют эти термины как взаимозаменяемые. Вы будете понимать, что именно они имеют в виду, исходя из контекста.

Структура страницы iPhone

Хотя структура iOS-приложений разная, на многих стандартных страницах элементы будут расположены следующим образом:

Строка состояния (Status bar) — 44 pt, Панель навигации (Nav bar) — 98 pt, etc, Содержимое страницы (Page content), Панель вкладок (или панель действий) (Tab bar (or Action bar)) — 48 pt (или 44 pt), Индикатор «Домой» (Home indicator) — 34 pt

Примечание: в разделе «Ресурсы» в конце статьи автор выложил шаблон iPhone в формате Figma, в котором есть направляющие. Они разделяют области страницы, указанные на картинке выше, включая область строки состояния (Status bar) и индикатор «Домой» (Home indicator). Этот шаблон поможет быстро начать работать над дизайном страниц.

Если вас интересует конкретный раздел страницы, вы можете перейти к нему по ссылкам:
— Строка состояния
— Панель навигации
— Панель вкладок
— Индикатор «Домой»

Строка состояния iOS

Строка состояния находится в верхней части каждой страницы, за исключением отображения некоторых полноэкранных изображений, видео или мультимедиа.

«ЧЁЛКА» (есть почти на всех моделях, начиная с iPhone X)
Используйте чёрный текст/иконки на светлых фонах
Высота «чёлки» = 44 pt
Используйте белый текст/иконки на тёмных фонах

У iPhone 14 Pro и 14 Pro Max строка состояния более высокая. В ней область камеры и сенсора полностью состоит из пикселей экрана. Она называется «Динамический остров», поскольку он может менять форму.

ДИНАМИЧЕСКИЙ ОСТРОВ (14 Pro, 14 Pro Max)
Используйте чёрный текст/иконки на светлых фонах
Высота строки состояния = 59 pt
Используйте белый текст/иконки на тёмных фонах

В любом случае, строка состояния содержит индикаторы времени, сигнала сети, Wi-Fi и уровень заряда батареи. Текст и иконки могут быть как чёрного, так и белого цветов.

Фон строки состояния может быть любого цвета — или даже быть прозрачным. Чтобы найти варианты цветов, которые хорошо контрастируют с белым, используйте Accessible Color Generator.

*Строка состояния может быть прозрачной. Лучше всего на фоне изображения выделяется белый текст*

Если в качестве фона для строки состояния вы используете тёмные изображения, вероятно, лучше использовать белый текст.

Или, если вы хотите сделать строку состояния в минималистичном стиле на фоне различных изображениях, используйте размытие фона.

*Эффект «матового стекла» легко читается и не перегружает интерфейс дополнительными цветами*

Строка состояния в стиле «матового стекла» не добавляет в интерфейс лишних цветов, границ или элементов, которые будут отвлекать внимание от основного контента. Она просто размывает цвета, которые находятся под ней, и делает текст хорошо читаемым.

В примере выше светло-серый цвет фона страницы — цвет матового стекла «по умолчанию», то есть текст поверх него должен быть чёрным, а не белым.

«Чёлка» и закруглённые углы на границе строки состояния появились, только начиная с iPhone X. В более ранних моделях iPhone (и всех iPad) строка состояния выглядит более короткой и компактной.

РАННЯЯ ВЕРСИЯ СТРОКИ СОСТОЯНИЯ (iPhone 8 и старше, все iPad). Её высота равна 20 pt

Панель навигации iOS

Навигационная панель включает навигацию (сюрприз!), заголовок страницы, основные действия страницы (или элементы управления страницей) и — часто — поиск.

Вы можете подумать, что панель навигации iOS состоит из трех «строк».

В моем шаблоне iPhone UI Figma Template я добавил направляющие, которые обозначают области расположения этих строк.

Строка состояния высотой 44pt
Первая строка высотой 44pt
Вторая строка высотой 54pt
Третья строка высотой 48pt

Эти измерения не всегда точные, и значения в стандартных iOS-приложениях несколько отличаются, но эти цифры помогут вам начать работу над дизайном.

Итак, приложение для iPhone будет отображать одну, две или три строки, в зависимости от (а) потребностей страницы и (б) состояния скролла.

Используйте одну строку, если вам нужно просто компактно разместить некоторые действия страницы (даже заголовок страницы отображать необязательно).

Единственная строка панели навигации включает элементы управления страницей

Однако, если место позволяет, структура страницы приложения iOS по умолчанию содержит две строки: одну для элементов управления страницей и вторую — для большого заголовка страницы.

Первая строка включает элементы управления страницей, вторая строка содержит заголовок

Но если вам нужно показать функцию поиска, то вам понадобится третья строка (даже если первая строка будет пустой!).

Первая строка включает элементы управления страницей, вторая строка содержит заголовок, третья строка отображает поиск

На скриншотах выше показано состояние интерфейса перед началом прокрутки. Как только пользователь начинает скроллить, iOS демонстрирует интересное поведение.

До начала прокрутки: полужирный (bold) заголовок размером 34 pt во второй строке с выравниванием по левому краю. Навигационная панель бесшовно отделена от остальной части страницы

В момент прокрутки: заголовок уменьшается до размера 17 pt, его начертание меняется на нормальное (regular), и он перемещается на первую строку с выравниванием по центру. Навигационная панель отделена от страницы с помощью цветного фона и линии

Если необходимо, чтобы строка поиска всегда была перед глазами пользователя, она просто перемещается вверх из третьей строки во вторую при прокрутке.

Если она менее важна, она полностью исчезает и будет видна только тогда, когда пользователь находится в самом верху страницы.

Если строки навигационной панели iOS исчезают при прокрутке, они снова появляются, когда пользователь прокручивает страницу обратно вверх.

Обратите внимание, что анимация переходов между состояниями плавная. Это маленькая, но характерная черта стиля iOS.

Панель вкладок iOS

В iOS разделы приложения верхнего уровня находятся в нижней части в виде вкладок.

Текущее местоположение пользователя в приложении обозначается иконкой с заливкой в цвет темы приложения. Размер подписи — 10 pt, шрифт текста — SF Pro

Давайте отметим несколько особенностей стиля:

Активная иконка обозначается заливкой в цвет темы приложения
Подписи разделов написаны шрифтом SF Pro размером 10–11 pt. Шрифт SF Pro используется по умолчанию
Фон может быть слегка полупрозрачным и иметь размытие — эффект «матового стекла», как и в случае с дизайном панели навигации

И несколько замечаний относительно состояний панели вкладок и её кнопок:

Вкладки «запоминают» то место на странице, на котором остановился пользователь. Если вы перейдёте в определенное место на странице на одной вкладке, переключитесь на другую вкладку, а затем снова вернётесь на первую вкладку, вы окажетесь в том месте, где остановились на этой вкладке, а не на её «главном экране»
Если вы нажмёте на активную вкладку, вы вернётесь на «главный экран» этой вкладки
Панель вкладок всегда видна в приложении, за исключением случаев:
- когда появляется клавиатура
- когда открыто модальное окно (при выполнении важных задач пользователь должен сосредоточиться на текущей задаче, а не переходить к другим частям приложения)

*Разделы приложения, которые не поместились на панели вкладок*

На панели вкладок должно быть от двух до пяти вкладок. Если вам нужно отобразить более пяти вкладок, пятой должна быть иконка «Больше» («More»), которая при нажатии показывает другие разделы приложения на экране выбора.

Индикатор «Домой» iOS

Все новые модели iPhone (X и более поздние версии) имеют индикатор «Домой» (Home indicator) — тонкую закруглённую полоску, которая всегда находится перед глазами пользователя и расположена в нижней части экрана. Она никогда не пропадает, за исключением тех случаев, когда пользователь уже находится на главном экране.

*Чёрный индикатор «Домой» на светлом фоне*

Индикатор «Домой» чёрный на всех светлых экранах, но может быть белым на тёмном фоне.

*Белый индикатор «Домой» на чёрном фоне*

Если вы потяните его пальцем вверх на некоторое расстояние, вы сможете перемещаться между приложениями и возвращаться на главный экран:

Пальцем потяните индикатор слегка вверх: вы попадёте на экран многозадачности для переключения между приложениями
Потяните индикатор пальцем далеко вверх: вы попадёте на главный экран

Как правило, у индикатора «Домой» есть собственная «рамка» высотой 34 pt, на которой больше не отображаются другие фиксированные элементы.

Базовая линия клавиатуры находится на 76 pt выше нижней части экрана, что даёт достаточно места для удобного использования индикатора «Домой»

Но прокручиваемые списки могут занимать область индикатора «Домой», когда пользователь скроллит их. Он даже может выбрать элемент из списка, который находится в непосредственной близости от индикатора и даже коснуться индикатора пальцем. Но индикатор «Домой» реагирует только на действие «свайп вверх».

Навигация в iOS-приложениях

Разделы приложения верхнего уровня

Навигацию между главными областями приложения мы рассматривали в главе Панель вкладок.

Действие «Назад»

В iOS вы можете перемещаться назад четырьмя различными способами, в зависимости от контекста.

Два первых способа обычно применяют к одним и тем же экранам.

В большинстве случаев вы можете вернуться назад, если выполните (1) действие в левом верхнем углу или (2) проведёте пальцем вправо от левого края.

Подробнее о том, как закрывать модальные окна, см. в разделе «Модальные окна» ниже.

Поиск в iOS

Для поиска в iOS-приложениях есть 3 основные точки входа:

Строка поиска на панели навигации
Иконка поиска на панели навигации
Иконка поиска на панели вкладок

Если поиск имеет важное значение, то на панели навигации отображается полная строка поиска. Её также можно спрятать по умолчанию, чтобы она появлялась при прокрутке. Поиск можно сделать элементом управления в формате иконки (но он будет менее заметным) или даже одним из разделов на панели вкладок

Однако независимо от того, где находится точка входа в поиск, он выглядит плюс-минус одинаково:

Курсор для ввода текста отображается в строке поиска. Кнопка «Отмена» («Cancel») находится справа от строки поиска. Фильтры в виде сегментированной кнопки. Недавние результаты поиска, самые популярные запросы или предположительные результаты поиска могут быть показаны перед появлением результатов запроса. Клавиатура появляется при нажатии на строку поиска

При желании можно показать популярные или недавние поисковые запросы под строкой поиска.

Модальные окна iOS

Некоторые задачи пользователь может выполнить на одном экране, или на нескольких экранах, которые будут последовательно сменять друг друга. Дизайнеры делают это для того, чтобы человек в процессе выполнения задачи не выпадал из контекста и успешно её завершил.

Теперь для этого есть идеальный элемент интерфейса: модальное окно («Modal sheet»).

Модальное окно — обычная страница, которая (а) появляется снизу вверх, закрывая почти всю предыдущую страницу, но (б) оставляет предыдущую страницу видимой, но утопленной в фоновом режиме.

Пользователь может закрыть модальные окна:

Нажатием на кнопку «Закрыть» — иконка, которая находится вверху (на изображении выше это кнопка «Отмена» в правом верхнем углу)
Если проведёт пальцем вниз по самому модальному окну

UI-элементы и элементы управления

Списки в iOS (или «Табличные представления»)

Помните: «90% мобильного дизайна — это дизайн списков». Если вы хотите стать хорошим дизайнером приложений для iPhone, изучите, как правильно проектировать списки (или, как они говорят, «Табличные представления») в Apple.

Каждый раз, когда вы создаёте список на iPhone, задайте себе три вопроса:

Какой текст я хочу отобразить?
Нужна ли мне иконка/изображение?
Что будет находиться в правой половине строке списка?

Давайте рассмотрим каждый из них по очереди.

Какой текст вы хотите отобразить в каждой строке списка? Вы можете выбрать:

Только основной текст (шрифт regular, размер — 17 pt)
Основной текст (шрифт regular, размер — 17 pt) с дополнительным (вторичным) текстом (шрифт regular, размер — 15 pt)
Индивидуальная структура расположения текста — например, основной текст (шрифт regular, размер — 17 pt), дополнительный (вторичный) текст (шрифт regular, размер — 15 pt, но СВЕТЛЕЕ) и третичный, наименее важный текст (шрифт regular, размер — 15 pt, но СВЕТЛЕЕ).

Самая простая строка высотой 44 pt отображает текст, набранный шрифтом SF Pro размером 17 pt
В строке высотой 57 pt добавлен дополнительный «подзаголовок», написанный шрифтом SF Pro размером 12 pt, более светлый
Индивидуально настроенная строка отображает различные составляющие текста в разных стилях

При желании слева от текста можно отобразить иконку или изображение.

*В строке можно опционально добавить иконку или изображение*

Есть несколько вариантов оформления правой стороны элемента списка:

Шеврон, указывающий направо. По умолчанию он даёт пользователям понять, что они попадут на другой экран
Сочетание текста и шеврона означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет показано в строке рядом с шевроном
Галочка. Позволяет пользователю выбрать один из элементов списка в этой группе (Примечание: НЕ многовариантный выбор, как в случае выпадающих списков в вебе)
Переключатель. Позволяет пользователю включить или выключить свойство, на которое ссылается элемент списка
Текстовые кнопки. Используйте системный цвет для ссылки на другую страницу. Выбирайте красный текст для обозначения «разрушительного действия» — отключения, удаления и т.д.

Шеврон справа обозначает то, что ссылка ведёт на другой экран. Если вы перейдёте на другой экран, то сможете вернуться обратно.
Шеврон с текстом показывает, что на следующем экране вы сможете изменить значение, которое будет показано в строке рядом с шевроном
Галочка позволяет пользователю выбрать один (и только один) пункт из списка
Переключатели помогают пользователям включать или выключать свойство, на которое ссылается элемент списка
Используйте цветной текст для действий, который написаны в строке. Красный текст применяют для обозначения «разрушительного действия» — отключения, удаления и т.д.

Существует ещё больше парадигм iOS, что можно делать со списками, которые мы не будем рассматривать в рамках этой статьи. Но этот обзор включает наиболее распространенные способы использования списков. Для получения дополнительной информации ознакомьтесь с элементами управления вводом.

Кнопки iOS

Когда речь идёт о кнопках, мы представляем цветные прямоугольники с текстом, расположенным по центру. Приложения для iPhone, безусловно, используют такие типы кнопок. Но если вы из мира веб-дизайна, вы удивитесь, узнав, что многие кнопки в iOS — это либо (a) иконки или (b) цветной текст, расположенные на: (a) панели навигации (в верхней части экрана) или (b) панели действий (в нижней части экрана).

Некоторые элементы управления страницей появляются на панели навигации. Другие — на панели действий

Тем не менее в iOS есть кнопки и на странице.

Кнопки в виде текста или иконок. iOS отдаёт предпочтение «кнопкам» в виде цветного текста или иконок. Прямоугольные кнопки. Важные кнопки иногда проектируют в виде прямоугольника, особенно в составе карточек

Поскольку элементы управления страницей находятся в фиксированных меню (на панели навигации или панели действий), многие кнопки на странице относятся только к определенной части страницы и, следовательно, находятся на карточках.

Элементы управления вводом на iOS

Элементы управления вводом в iOS-приложениях почти все стилизованы под элементы списка.

Текстовые поля iOS

Поле ввода текста выглядит как элементы списка с подсказкой, которая исчезает при вводе текста.

Текстовое поле с подсказкой, которая исчезает, когда пользователь начинает печатать текст

Переключатели в iOS

Переключатели отображаются внутри элемента списка, который содержит название слева и переключатель двоичного выбора справа.

Цвет фона переключателя в состоянии «ON» всегда зелёный. Цвет фона переключателя в состоянии «OFF» всегда серый.

Выбор даты и/или времени в iOS

Даты и время выделяют с помощью специальных светло-серых плашек. При нажатии одну из них вы увидите, как на месте даты (или времени) появится элемент управления.

Нажмите здесь…. и появится средство выбора даты

С помощью этих элементов управления можно выбирать (a) только время, (b) только дату, (с) и время, и дату, или (d) какое-либо другое значение. Кроме того, можно использовать макет в стиле «спиннер» (не показан на рисунке).

Раскрывающиеся меню

Новым элементом управления в iOS является раскрывающееся меню, которое показывает некоторые дополнительные опции/действия без необходимости переходить на другой экран. Оно похоже на выпадающие списки в веб-браузерах.

Нажмите здесь…. и появится раскрывающееся меню

Экраны выбора iOS

Раскрывающееся меню (см. выше) полезно, если вам нужно отобразить короткий список вариантов, но для чего-то более сложного попробуйте использовать шаблон экрана выбора.

Идея заключается в том, что у вас есть нечто, похожее на элемент списка, но на самом деле оно ведёт на другую страницу, где вы выбираете значение.

Нажмите здесь…. и появится экран выбора

Составляющие:
(1) один элемент списка с названием, значением и шевроном ведет к (2) странице со множеством вариантов в списке, один из которых можно выбрать. Выбор будет отображаться галочкой.

После того, как пользователь сделает выбор, он может вернуться назад с помощью свайпа или нажатием на кнопку в левом верхнем углу.

Типографика в iOS-приложениях

Для получения дополнительной информации о типографике iOS (и, в частности, о размерах шрифтов), читайте другую статью здесь.

У iOS есть отличительная парадигма для стиля текста. Когда многие дизайн-системы используют размер или верхний регистр, iOS применяет вес или цвет. Ниже вы найдёте краткий обзор стилей текста iOS:

Текст заголовка

Заголовки страниц в приложениях для iPhone пишутся двумя способами.

Заголовок до начала прокрутки — 34 pt полужирный (bold) #000. После начала прокрутки — 17 pt средний (medium) #000

Когда пользователь еще не прокрутил страницу (или прокрутил, но затем вернулся обратно), то параметры заголовка следующие:

Размер: 34 pt
Начертание шрифта: полужирный (bold)
Цвет: #000
Цвет тёмной темы: #FFF
Выравнивание: по левому краю

Когда пользователь прокручивает страницу вниз:

Размер: 17 pt
Начертание шрифта: средний (medium)
Цвет: #000
Цвет тёмной темы: #FFF
Выравнивание: по центру

Текст по умолчанию

Стиль «по умолчанию» для текста в приложениях на iPhone следующий:

Размер: 17 pt
Начертание шрифта: normal
Цвет: #000
Цвет тёмной темы: #FFF

Основной текст — 17 pt нормальный (regular) #000

Если внести небольшие изменения в этот базовый стиль, интерфейс приложения будет выглядеть ещё лучше.

Имя отправителя e-mail-а: стиль по умолчанию, но начертание — средний шрифт (medium). Кнопка действия: стиль по умолчанию, но цвет соответствует контексту. Подсказка в строке поиска: стиль по умолчанию, цвет #3С3С43 с непрозрачностью 60%

Например, если для обычных элементов списка используют стиль текста по умолчанию, то в приложении «Почта» имена отправителей писем выделяют полужирным шрифтом (bold), так как это помогает сделать его более заметным по сравнению с другими элементами темы письма и предварительного просмотра.

Аналогично, в текстовых кнопках используется стиль по умолчанию, но с разными цветами.

Текст подсказки в строке поиска — текст по умолчанию, но светло-серого цвета.

Дополнительный (вторичный) текст

В iOS-приложениях для вспомогательного «дополнительного» текста есть стандартный стиль.

Размер: 15 pt
Начертание шрифта: normal
Цвет: #3C3C43 при 60% непрозрачности
Цвет тёмной темы: #EBEBF5 при непрозрачности 60%

Дополнительный текст — 15 pt, нормальный (regular) #3C3C43 с непрозрачностью 60%

Третичный текст и подписи

Для любых поясняющих подписей используют текст ещё меньшего размера и более лёгкого начертания, чем для вторичного текста.

Размер: 12 pt
Начертание шрифта: normal
Цвет: #C3C43 при непрозрачности 60%
Цвет тёмной темы: #EBEBF5 при непрозрачности 60%

Третичный текст — 12 pt, regular #3C3C43 с непрозрачностью 60%

Также обратите внимание, что иногда этот третичный размер используется для отображения вторичного текста, т.е. есть только размер 17 pt и размер 12 pt, а между ними нет текста размером 15 pt.

Третичный текст — 12 pt, regular #3C3C43 с непрозрачностью 60%

Минимальный размер текста

В любой дизайн-системе вы избежите многих проблем, если просто определите минимальный размер шрифта. В приложениях для iPhone это названия на панели действий:

Размер: 10 pt
Вес шрифта: normal
Цвет: #999 (когда элемент не выбран)
Цвет тёмной темы: #757575 (когда элемент не выбран)

Самый мелкий текст — 10 pt, medium #3C3C43 с непрозрачностью 60%

Иконка приложения iOS

Если вы разрабатываете иконку приложения с таким расчетом, чтобы она появлялась во всех возможных местах на всех возможных iPhone и iPad, в итоге вам придётся создать почти дюжину вариантов одной и той же иконки.

Однако, если вы похожи на меня, вы захотите убедиться, что учтены наиболее распространенные (или более новые) размеры дисплеев устройств. В конце концов, разве вся суть этого @3x масштаба не в том, что отдельные пиксели слишком малы, чтобы их видеть?

Пошаговый туториал дизайна иконки iOS-приложения 80/20 от автора:

Создайте квадратную иконку, которая хорошо смотрится в размере 60x60px (убедитесь, что она хорошо выглядит в маске с помощью Apple суперэллипс).
Увеличьте её до @2x (120x120px) и при желании подкорректируйте, чтобы она была pixel perfect
Увеличьте её до @3x (180x180px) и при желании подкорректируйте, чтобы она она была pixel perfect
Увеличьте её до 1024x1024px

Экспортируйте все 4 размера в формате PNG. Готово.

Форма иконки iOS суперэллипс (или «Squircle»)

Несмотря на то, что мы экспортируем иконки в форме квадратов, в Apple есть собственная методика вырезания углов, которая называется суперэллипс.

Закругленный прямоугольник — используется только в iOS 6 и в более ранних версиях.
Суперэллипс — форма всех иконок приложений iOS, начиная с 2013 года.
Фактическая разница практически незаметна. Ну же, Apple…

Суперэллипс — или Squircle — выглядит очень похоже на обычный округлый прямоугольник. Невооруженным глазом разница практически незаметна. Apple объясняет это следующим образом: (а) суперэллипс более мягко переходит от прямой части к изогнутой, что в итоге приводит к более органичной форме, и (б) он лучше соответствует углам аппаратных устройств Apple.

Это имеет значение только в том случае, если ваша иконка имеет границу. В этом случае граница должна иметь форму суперэллипса, а не быть закругленным прямоугольником.

Как сделать Apple-иконку в форме суперэллипса в Figma

Создайте квадрат: выберите Rectangle («Прямоугольник») или нажмите на клавишу «r».
Измените радиус угла на длину одного размера, умноженную на 0,222
Откройте меню «Independent Corners» (справа от настройки радиуса угла)
Откройте меню «Corner Smoothing» (иконка «…») и установите для него индикатор «iOS» на 61%.

Как сделать Apple-иконку в форме суперэллипса в Sketch

Создайте квадрат с помощью меню «Insert» или нажмите клавишу «R».
Измените радиус угла на длину одного размера, умноженную на 0,222
Измените «Radius (Round Corners)» на «Radius (Smooth Corners)»

Другие правила iOS

Есть еще несколько вещей, о которых вы должны знать, если разрабатываете приложение для iPhone. Я просто перечислю их здесь:

Размер области нажатия в iOS

Всё, на что пользователь может нажать — каждая кнопка, каждый ползунок, каждый элемент управления вводом — должно иметь размер не менее 44x44 pt.

Единственное исключение, когда нарушение этого требования действительно оправдано, — текстовые ссылки. В тексте абзаца каждая строка текста, скорее всего, будет немного короче, чем 44 pt. Это означает, что (а) размер области касания ссылок будет менее 44 pt и (б) если в двух последовательных строках текста ссылки находятся в одном и том же месте, пользователям будет сложно точно нажать на них. Хотя этого не всегда можно избежать, знайте, что нужно стараться минимизировать такие случаи.

Область касания строки поиска равна 44 pt, область касания сегментированной кнопки равна 44 pt, область касания предполагаемых результатов поиска равна 41 pt

Даже компания Apple нестрого придерживается рекомендаций, которые касаются областей нажатия, хотя я не советую их нарушать

Руководство по дизайну тёмной темы iOS

В iOS поддержка тёмной темы осуществляется на уровне ОС, в которой фон приложений, как правило, — тёмный, а текст — светлый, вместо светлого фона и тёмного текста.

Светлая тема. Тёмный текст на фонах светлых оттенков. Более тёмные фоны придают глубину интерфейсу.

Чёрный текст, светло-серый текст, яркий, насыщенный синий, белый фон создаёт ощущение того, что он находится «над» серым фоном

Тёмная тема. Цвет текста инвертирован. Цвета фонов темнеют, но более тёмные фоны всё еще создают эффект глубины. Акцентные цвета слегка обесцвечены и/или становятся немного светлее

Белый текст, тёмно-серый текст, немного обесцвеченный синий, тёмно-серый фон создаёт ощущение того, что он находится «над» чёрным фоном

iOS автоматически перейдёт на темную тему, если вы используете нативные элементы управления и цвета. Тем не менее вы должны понимать общие принципы тёмной темы для любого интерфейса, который создаёте. Несколько простых рекомендаций:

Цвета текста инвертируются. Чёрный текст становится белым, тёмно-серый текст становится светло-серым, а просто серый остается практически таким же. Если вы посмотрите на стили типографики, о которых мы говорили выше, то заметите, что iOS отбрасывает несколько дополнительных оттенков и упрощает цвета текста для тёмной темы. Если вы не понимаете, нужно ли сделать серый цвет темнее или светлее, выбирайте вариант, в котором текст хорошо контрастирует с фоном.
Цвета фона смещаются. В отличие от текста, где тёмные цвета становятся светлее, цвета фона просто смещаются в более тёмную сторону. Если цвет фона был светлее в светлой теме, он всё ещё будет светлее в тёмной теме. Почему? Потому что свет падает с неба. Если вы осознаете это, вы поймёте, что мы полагаемся на цвет фона для демонстрации глубины интерфейса (в отличие от текста). И поэтому он работает совершенно по-другому.
Акцентные цвета выделяются на тёмном фоне. Любые акцентные цвета, которые вы ранее использовали на светлых фонах, теперь должны также выделяться на тёмных фонах. Поскольку яркость белого цвета равна 100%, а черного — 0%, это означает, что вы будете уменьшать яркость ярких цветов (и, согласно моей теории цветовой настройки, повышать их насыщенность).

Светлая тема. Акцентные цвета, как правило, более насыщенные и/или более тёмные (для хорошего уровня контраста по отношению к белому цвету).

Тёмная тема. Акцентные цвета, как правило, менее насыщенные и/или более яркие (для хорошего уровня контраста по отношению к чёрному цвету)

Цвета взяты из iOS System Colors

Ресурсы

Я создал несколько ресурсов для удобства, ссылки на которые и описания к ним вы найдёте ниже.

1. Таблица размеров экранов iPhone

Пиксели, точки, дюймы. Это краткое руководство, которое содержит размеры и разрешения экранов всех версий iPhone.
СКАЧАТЬ БЕСПЛАТНО

2. Шаблон дизайна iPhone

Этот Figma-файл (который вы также можете экспортировать в SVG-формате и открыть в Sketch или XD) включает все модели iPhone 12, 13 и 14 (включая версии Mini, Pro, Plus и Pro Max) с (а) направляющими для разделения экрана на области, (б) маской с вырезом и закругленными углами и (в) легко перекрашиваемой строкой состояния.
БЕСПЛАТНЫЙ FIGMA-ФАЙЛ

Дополнительные ресурсы для разработки приложений для iPhone

Apple «Human Interface Guidelines» для iOS. В оригинальных стандартах Apple, как известно, трудно разобраться. Сначала вам придётся изучить их абстрактные принципы. Вы будете постоянно сталкиваться с их нестандартной терминологией (почему списки называются «Таблицами» («Tables») и находятся в разделе «Представления» («Views»)? Разве они не должно быть в разделе «Элементы управления»? Нет, но, видимо, обычный текст является «элементом управления» — просто загляните в раздел «Названия» («Labels»). В любом случае, как только вы измените свой образ мышления, руководство Apple обретёт для вас иной смысл. И если вы проектируете приложение для iPhone, вам все равно придётся его прочитать. Лучше всего к нему привыкнуть.

iOS vs. Android App UI Design: The Complete Guide. Настанет момент, когда вам предстоит сделать Android-версию вашего iOS-приложения. Лучше всего начать думать о некоторых различиях в дизайне уже сейчас. Кто знает, возможно, в итоге вы позаимствуете несколько отличных идей из принципов дизайна Android. Эта статья на самом деле охватывает несколько парадигм дизайна iOS, до которых я ещё не добрался. Её стоит прочитать!

The iOS Font Size Guidelines. Одна из самых неожиданных сторон хорошего дизайна интерфейса — развитие интуитивного понимания того, какой размер шрифта следует использовать. Чтобы помочь в этом, я написал самое полное в мире руководство по размерам шрифтов. Одна часть посвящена приложениям для iOS, вам, вероятно, стоит прочитать и ее.

Ivo Mynttinen’s iOS Design Guidelines. Самое полное руководство по созданию приложений для iPhone, написанное понятным языком. Помимо этой статьи.

Перевод статьи “The iOS 16 Design Guidelines: An Illustrated Guide” из блога LearnUI.

Дочитали и показалось, что информации мало? :-) В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement – подписывайтесь!