ДИЗАЙН В СРЕДЕ
8 800 500 30 94
9:00-19:00 по МСК
ДИЗАЙН / 31 марта

Как создавать дизайн приложений для iOS 13: полный гид с картинками

Возможно, вы еще не проектировали приложения для iPhone и не знаете, с чего начать. А может, вы уже опытный диджитал-дизайнер и хотите прокачать скиллы и удостовериться, что все делаете правильно. Наше руководство подойдет в обоих случаях.
Размеры экранов
В первые пять-шесть лет существования iPhone все было просто. Работаете с размером экрана 320×240? Вы на коне. Сейчас многообразие дисплеев смартфонов ужасает — три новых размера за три года!

► Размер артборда. Это «размер точки» или «@1x» размер данного устройства. Лучше проектировать артборды такого размера.

► Масштаб эскпорта. В зависимости от него делайте растровое изображение в PNG и JPG-форматах больше при экспорте, чтобы максимально использовать разрешение самых детализированных экранов.
Как выбрать размер артборда?
Используйте для своей аудитории наиболее распространенный размер экрана iPhone. Если в интерфейсе приложения будет показываться много данных, протестируйте его на экранах поменьше.

► Если вы проектируете приложение для широкой аудитории, используйте размер экрана iPhone — 375×667 точек.
► Если вы проектируете приложение для тех, кто разбирается в технологиях или дизайне, самым популярным размером экрана iPhone, скорее всего, будет 375×812 точек.

Дизайн, который хорошо смотрится на более узком экране (375 точек), почти наверняка будет хорошо работать на экране с шириной 414 точек, но не наоборот. Поэтому проектируйте дизайн для меньшей ширины экрана, а затем масштабируйте. Высота, будь она 667 или 812 точек, не так важна.
Точки и пиксели в iOS
«Точка» (point) — это показатель, по которому дизайнеры могут сравнивать размеры шрифтов и элементов интерфейса на iOS-устройствах. «Пиксель» (pixel) — крошечный квадрат света, из которых состоит экран iPhone. Меньшие пиксели означают более четкое изображение, и это здорово. Но если вы просто уменьшите пиксели, все на экране тоже уменьшится! Поэтому дизайнеры измеряют размер элементов на экране в точках. Если пиксели в два раза меньше изначальной высоты или ширины, вы можете использовать квадрат 2×2 пикселя для каждой точки (это называется масштаб @2x). А если пиксели составляют примерно треть изначальной высоты или ширины, вы можете использовать квадрат 3×3 пикселя для каждой точки.
Измерение в точках позволяет корректно масштабировать изображение на экранах с высоким разрешением. При этом дизайнеры часто путают точки и пиксели — ориентируйтесь на контекст, чтобы понять, о чем речь.
iPhone Layout
Layout в приложениях может отличаться, но, как правило, он соответствует примеру ниже.
Строка состояния
Строка состояния отображается постоянно. Исключения могут быть, если в приложении воспроизводится видео или показывается картинка в полноэкранном режиме.
Строка состояния содержит данные о времени, уровне сигнала, Wi-Fi и заряда.

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

Строка состояния в стиле «матовое стекло» не добавляет цветов или ненужных элементов, отвлекающих от основного интерфейса — любые цвета под ней просто размываются. Светло-серый цвет для такого фона идет по умолчанию, на нем хорошо смотрятся черные элементы.
Мы рассмотрели строки состояния приложений на iPhone X и более поздних моделей с вырезом под фронтальные камеры. У старых устройств этот элемент отличается.
Панель навигации
В панели навигации отображаются инструменты навигации (неожиданно) и действий, заголовок страницы и, например, поиск. Она может включать и три строки.

► Высота строки состояния: 44 точки
► Высота первой строки: 44 точки
► Высота второй строки: 54 точки
► Высота четвертой строки: 48 точек

Высота элементов может отличаться, но от варианта выше можно отталкиваться.

Таким образом, приложение на iPhone будет показывать одну, две или три строки. Зависит от того, что выполняется на странице и как далеко вниз зашел пользователь.
Одну строку можно использовать для необходимых действий, причем отказаться можно даже от заголовка.
Если вы не экономите пространство, можете использовать модель с двумя строками: на одной будут кнопки действий, а на другой заголовок страницы.
Для функции поиска понадобится третья строка.
На скриншотах выше показано поведение элементов навигации до скролла. Когда пользователь мотает страницу вниз, оно меняется.

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

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

Несколько основных моментов:
► Выбранная иконка обозначается цветом заливки темы приложения.
► В подписях кнопок используется шрифт SF с кеглем 10 или 11 точек.
► Фон может быть полупрозрачным или размытым.
И несколько замечаний о поведении панели вкладок:
► Вкладки запоминают свое состояние. Если вы переключитесь на новую вкладку и перейдете обратно, то продолжите с того, на чем остановились.
► Если вы нажмете на активную вкладку, вернетесь к началу соответствующей страницы.
► Панель вкладок исчезает, когда активна клавиатура или появляется модальное окно.

В панели умещаются от двух до пяти кнопок вкладок. Если вам нужно больше, используйте вкладку More.
Индикатор «Домой»
Индикатор «Домой» — дополнительный элемент интерфейса новых iPhone, который находится в самом низу и отображается всегда, когда вы находитесь не на главном экране.
Удерживая индикатор, вы можете перемещаться между приложениями или возвращаться к экрану «Домой». Движение слегка вверх — диспетчер задач, более размашистое движение вверх — главный экран.

Обычно индикатор содержится в фиксированной рамке высотой 34 точки. Других элементов в ней нет.
При этом при прокручивании списков индикатор не исчезает — вы можете его игнорировать. Он отреагирует только на свайп вверх.
Навигация
Перемещение назад
Перемещаться назад можно четырьмя способами.
Поиск
В iOS-приложениях есть три основных способа открытия поиска:
► строка поиска в панели навигации;
► иконка поиска в панели навигации;
► иконка поиска в панели вкладок.

Механизм самого поиска в любом случае остается одинаковым.

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

В iOS 13 для этого появился элемент интерфейса под названием modal sheet.

Modal sheet — это страница, появляющаяся снизу и закрывающая собой большую часть интерфейса. При этом он остается видимым на фоне.

Закрывается элемент по выполнении скрипта, при нажатии кнопки «Отмена» или свайпом сверху вниз.
Элементы интерфейса и управления
Списки (табличные представления)
90% мобильного дизайна — это списки. Всякий раз, когда вы создаете список для iOS-приложения, задайте себе три вопроса.
► Какой текст я хочу показать?
► Нужно ли добавить иконку слева?
►Что должно быть у правого края строк списка?

Рассмотрим каждый из них по очереди. Для размещения текста в списках существует три основные модели.
► Основной текст 17-м кеглем.
► Основной текст 17-м кеглем и вторичный 15-м (можно сделать последний светлее).
► Кастомная модель — например, основной текст 17-м кеглем, вторичный 15-м и третичный 15-м и более светлого цвета.
Слева от текста можно расположить иконки для пунктов списка.

А вот что размещают в правой части пунктов списка.
► Стрелка вправо. Подходит для перехода к другому экрану.
► Текст и стрелка вправо. Подходит для перехода к другому экрану, чтобы выбрать другое значение настройки (оно и указывается в тексте).
► Галочка. Позволяет пользователю выбрать один из элементов списка в этой группе.
► Переключатель. Подходит для включения и отключения опции.
► Текстовые кнопки. Красный или синий цвет можно применять для критических действий (например, удаления файлов) или перехода к другому сценарию.

Это самые распространенные механизмы, которые применяют в списках. На деле их гораздо больше.
Кнопки
Кнопки — это не всегда цветные прямоугольники с центрированным текстом (хотя и они тоже). Многие из них в iOS выглядят как иконки или цветные надписи, расположенные в панели навигации сверху или панели действий снизу.
И еще больше кнопок в iOS.

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

Экраны выбора — это страницы, которые открываются при нажатии на пункт предыдущего списка. В них содержатся свои списки с выбором вариантов.

Переход к экрану выбора можно предугадать: они появляются при нажатии на пункт списка с выбранным значением. Назад можно вернуться с помощью кнопки в верхнем левом углу или боковым свайпом от левого края экрана.
ПОЛЕЗНЫЕ МАТЕРИАЛЫ
20 фильмов, которые стоит посмотреть дизайнерам и иллюстраторам
Изучили десяток списков лучших художественных и документальных фильмов для дизайнеров и отобрали 20, которые эксперты советуют чаще остальных.
Как оценить свой дизайн: чек-лист из 12 пунктов
Универсальных рецептов успеха в дизайне нет, но вы можете упростить себе задачу. Проверьте ваш дизайн по чек-листу — задавайте себе эти 12 вопросов на каждом этапе воплощения идеи
Как создавать идеальные плоские иконки: 10 главных правил
Несколько базовых советов, которые помогут создавать наборы иконок в стиле flat design.