Как называется руководство для разработчиков ios

Как называется руководство для разработчиков ios

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

San Francisco (SF). San Francisco — это семейство без засечек, которое включает в себя SF Pro, SF Pro Rounded, SF Mono, SF Compact и SF Compact Rounded. SF Pro — системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS. Системные шрифты разработаны с учетом визуальной четкости пользовательских интерфейсов платформы, они разборчивы и нейтральн.

New York (NY). New York — это шрифт с засечками, который имеет уникальный тон, разработанный для дополнения шрифтов SF. NY работает одинаково хорошо как в контексте графического отображения (при больших размерах), так и в контексте чтения (при размерах текста).

Вы можете скачать шрифты Сан-Франциско и Нью-Йорка здесь .

Поскольку SF Pro и NY совместимы, существует множество способов использовать типографский контраст и разнообразие в интерфейсе iOS, сохраняя при этом единообразный внешний вид. Например, использование шрифтов может помочь вам создать более сильные визуальные иерархии или выделить смысловые различия в контенте.

Разработанные Apple шрифты поддерживают широкий диапазон размеров, стилей и языков, поэтому вы можете создать приятное впечатление от чтения во всем приложении. Когда вы используете стили текста с системными шрифтами, получаете поддержку динамического типа и больших размеров для настроек специальных возможностей, которые позволяют людям выбирать подходящий для них размер текста. Таблицы динамических размеров шрифтов можно загрузить в Sketch, Photoshop и Adobe XD Apple Design Resources для iOS.

Система имеет API, которое упрощают использование шрифтов SF и NY; для руководства разработчика, см withDesign метод и структуру SystemDesign из UIFontDescriptor .

SF Pro и SF Compact

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

Поддержка SF Pro и SF Compact:

• Более ста языков с использованием латинского, греческого и кириллического алфавита
• Девять настроек толщины — от сверхлегкого до черного — как вертикальные так и в курсивyst
• Два оптических размера — текст и дисплей
• Переменный межбуквенный интервал, который автоматически корректируется в зависимости от размера текста
• Маленькие прописные, дробные, маленькие и большие цифры

SF Pro Rounded и SF Compact Rounded

Округлый вариант системных шрифтов может помочь согласовать стиль текста с появлением мягких и закругленных элементов пользовательского интерфейса или применить альтернативный типографский стиль.

SF Pro Rounded и SF Compact Rounded поддерживают:

Более ста языков с использованием латинского, греческого и кириллического алфавита

SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы имеют одинаковую ширину. Используется моноширинный шрифт, когда необходимо выровнять столбцы текста, например, в среде кодирования. Xcode и Swift Playgrounds по умолчанию используют SF Mono.

ПРИМЕЧАНИЕ

SF Pro использует функцию табличной подкладки OpenType для поддержки отображения моноширинных чисел и валют.

SF Mono поддерживает:

Более ста языков с использованием латинского, греческого и кириллического алфавита

New York — это классический шрифт с засечками, который вы можете использовать в интерфейсе или для традиционного чтения.

Более ста языков с использованием латинского, греческого и кириллического алфавита

Выбор шрифтов для улучшения вашего приложения

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

Сделайте акцент на важной информации. Используйте толщину, размер и цвет шрифта, чтобы выделить наиболее важную информацию в вашем приложении.

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

Используйте правильный вариант шрифта в макетах интерфейса. Когда вы используете San Francisco для текста в стандартных элементах управления, таких как кнопки и метки, iOS автоматически применяет наиболее подходящий вариант на основе размера точки и текущих настроек доступности. В макетах интерфейса используйте следующие размеры текста, чтобы выбрать правильный размер и при необходимости отрегулировать расстояние между буквами.

Для SF используйте Текст для текста, который меньше 20 точек; используйте Дисплей для текста размером 20 или больше.

ПРИМЕЧАНИЕ

iOS использует San Francisco в качестве системного шрифта для букв латинского, греческого и кириллического алфавита, а также множество других шрифтов для других сценариев.

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

Убедитесь, что пользовательские шрифты разборчивы. Пользовательские шрифты поддерживаются в iOS, оданко их сложно прочитать, особенно если они имеют стилистические атрибуты, которые затрудняют различение букв при отображении в небольших размерах. Если ваше приложение не нуждается в особом шрифте,например, для целей брендинга или для создания захватывающего игрового процесса, лучше придерживаться системных шрифтов. Попробуйте использовать собственный шрифт только для отображения текста; если вы используете его для чтения или интерфейса текста, убедитесь, что он читается даже при небольших размерах.

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

Кратко о главном

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

Зачастую при первом погружении в эту систему у начинающих (и не только) разработчиков возникают серьезные проблемы с пониманием того, как функционирует Apple Developer Center (будем называть его «девцентр» для простоты). В результате, мне в процессе профессиональной деятельности не раз приходилось наблюдать на новых местах работы огромные свалки из профилей и сертификатов в девцентре, в результате чего приходилось приступать к «разбору завалов».

При этом, в сети довольно не такой большой выбор материалов на эту тему. Конечно, в официальной документации Apple все хорошо структурировано и очень подробно описано, но зачастую просто не хватает времени на изучение такого количества материала. Как правило, хочется быстро понять, что именно и в каком порядке нужно сделать для корректной работы приложения на этапах разработки, тестирования и при публикации его в магазин App Store. В русском же сообществе подобных материалов, собранных в одном месте и в удобном доступе, я не видел вовсе, поэтому и решил написать эту статью. Для всех интересующихся — добро пожаловать под кат.

Что мы будем разбирать?

Мы разберем процесс управления вашим приложением в Apple Developer Center от его создания до публикации в магазине App Store. Мы будем говорить только о базовых вещах, таких, как разработка, тестирование и публикация, а также обсудим APNs (Push Notifications).

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

Что нам понадобится?

Собственно, для работы нам нужно следующее:

• Рабочий Mac, либо PC с виртуальной машиной и установленной на ней Mac OS.
• Действующий Apple ID. Его всегда можно бесплатно зарегистрировать на официальном сайте компании Apple.
• На вашем Apple ID (либо у одной из компаний, которая добавила ваш Apple ID в свою команду) должна быть активирована так называемая Apple Developer Program — оплачиваемая раз в год «подписка», дающая вам доступ к Apple Developer Center и возможность публиковать ваши приложения в App Store. На текущий момент стоимость в пересчете на год невелика и составляет в районе $99 за год пользования.
• И, конечно же, навыки разработки под iOS.

Ориентировка по разделам

В девцентре для полноценной работы с вашими приложениями нам понадобятся только два пункта:

• Certificates, Identifiers & Profiles. Раздел обеспечивает управление всей системой сертификации ваших приложений. Работу именно с этим разделом мы и будем разбирать в данной статье.
• iTunes Connect. Дает доступ к внутреннему и внешнему тестированию через TestFlight, а также к управлению публикацией ваших приложений в App Store.

Терминология

Давайте подробно разберем понятия, лежащие в основе функционирования девцентра Apple.

Сертификаты (Certificates)

Этот раздел дает доступ к управлению сертификатами, которыми обладает ваша учетная запись Apple ID. Каждый из этапов, которые вы будете проходить, будь то разработка, тестирование или публикация, включая все значимые составляющие экосистемы Apple вроде Push Notifications, требует обязательного наличия актуального (действующего, Active) сертификата. Говоря проще, ваше приложение не сможет даже чихнуть, не имея на то разрешения из Apple Developer Center. Чуть подробнее о подразделах:

• Pending. Запрошенные вами сертификаты, находящиеся в процессе обработки от Apple. Для дев (Development) и прод (Production) сертификатов конкретно в моем случае этот подраздел чаще всего пустует.
• Development. Дев-сертификаты, обеспечивающие возможность отладки вашего приложения на конкретных девайсах (одном либо нескольких) через Xcode, а также создание дев-сборок «в отладочном режиме». Более подробно поговорим о них чуть ниже.
• Production. Прод-сертификаты, обеспечивающие работоспособность приложения при тестировании в TestFlight и при публикации в магазине App Store.

Сертификаты типа «Development»

В первую очередь, нужно знать, что девелоперский сертификат всегда привязывается к одной конкретной машине. Поэтому для отладки на вашем Mac вам понадобится доступ к этому сертификату. Тут есть варианты. Например, если, вы устроились на работу iOS-программистом, и в ваши задачи входит отладка на устройствах (как правило, так и есть), то есть два пути решения (какой из них выбирать — зависит от вас и условий работы в вашей компании):

• Создать отдельный дев-сертификат конкретно для вашего Mac, скачать и установить его. Плюс понадобится сгенерировать и установить на свой Mac девелоперский профиль на основе этого сертификата, но об этом позже.
• Либо экспортировать с машины, на которую заведен сертификат, файл *.p12/*.pfx (это можно сделать в связке ключей Apple). Такой файл защищается паролем при экспорте, и, зная этот пароль, информацию о сертификате можно будет импортировать на любом другом Mac. В этом случае отпадает необходимость создавать для каждого Mac отдельные Development-сертификаты и отдельные Development-профили. Небольшая оговорка: профиль хоть и должен быть сгенерирован для той машины, на которую выпущен экспортируемый сертификат, но в этот профиль понадобится добавить UDID вашего устройства прежде, чем выдавать профиль вам для установки, иначе ничего работать не будет.

Наличие дев-сертификата означает, что, скачав его и установив двойным кликом в Связку Ключей (Apple Keychain), вы сможете запускать ваше приложение напрямую через Xcode в режиме отладки на устройстве, подключив это устройство проводом к вашему Mac. Перечень разрешенных конкретных устройств Apple нужно будет обязательно указать при генерации девелоперского профиля, но об этом позже. Также, вы сможете собрать и экспортировать сборку с дев-профилем, но стоит учесть, что в этом случае ваше приложение не будет иметь доступа к продакшн-возможностям (APNs будет только в режиме sandbox, например).

Сертификаты типа «Production»

Для начала на всякий случай поясню, что сборкой iOS-приложения называют *.ipa-файл, архив, выпускаемый с соблюдением правил сертификации Apple через команду Project — Archive в Xcode.

Теперь о сертификации. Прод-сертификаты обеспечивают функционирование различных подсистем приложения в «боевых» условиях, то есть в магазине App Store, а также на устройствах, где выполняется внутреннее и внешнее тестирование приложения через TestFlight. Здесь, по аналогии с Development-сертификацией, есть тип App Store & Ad Hoc Production, а также тип APNs Production, использующийся веб-сервером для рассылки push-уведомлений. Если вы планируете выпустить приложение, поддерживающее работу с пушами, то вам понадобятся оба сертификата, как App Store & Ad Hoc (на основе которого вы сделаете сборку и отправите приложение в iTunes Connect), так и APNs Production (его вы отдадите серверу, а тот воспользуется им для получения прав на рассылку пушей). В довесок к уже упомянутым подсистемам есть еще несколько других, обеспечивающих доступ к Wallet, Apple Watch и так далее, но их обзор выходит за рамки данной статьи.

Очень часто возникает вопрос о том, в чем же разница между App Store и тем самым Ad Hoc. Ранее они были представлены разными сертификатами, с некоторого времени Apple объединила их в единое целое, за что им большое спасибо. Чуть подробнее об этих разновидностях:

• Выпуск сборок типа App Store. Обеспечивает возможность тестировать приложение в TestFlight, как в режиме внутреннего, так и в режиме внешнего тестирования. Также дает возможность опубликовать приложение в App Store.
• Выпуск сборок типа Ad Hoc. Термин «Ad Hoc» можно перевести как «специальный», «для конкретной цели». Такой тип сертификации обеспечивает возможность запускать ваше приложение (включая все нужные подсистемы типа APNs) в боевых условиях, но только на конкретных девайсах, и без участия Xcode в процессе запуска. Другими словами, Ad Hoc необходим, если вы захотите поставить ваше приложение на стороннее устройство, не имея к нему прямого доступа (то есть не подсоединяя его проводом к вашему Mac, так как в этом случае вам бы хватило Development-сертификата), но при этом и не выкладывая приложение в iTunes Connect. Такой сертификат используется при создании специального Ad Hoc-профиля, о котором пойдет речь чуть позже.

Intermediate Certificates

Некоторое время назад Apple внесла изменения в логику работы девцентра и своей системы сертификации, после чего на большинстве компьютеров пропала возможность делать сборки приложений, несмотря на наличие активных дев- и прод-сертификатов и актуальных профилей. Причина этого была в том, что Apple добавила дополнительное требование, чтобы на вашем Mac в связке ключей был установлен специальный сертификат под названием «Worldwide Developer Relations Certificate Authority». Он устанавливается автоматически с новыми версиями Xcode, но те, у кого Xcode уже был установлен ранее, просто должны были установить этот сертификат вручную, скачав его по прямой ссылке из секции Intermediate Certificates в девцентре Apple, после чего проблемы со сборками исчезали. Больше никакой смысловой нагрузки этот сертификат не несет.

Идентификаторы (Identifiers)

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

В буквальном переводе «App ID» означает «идентификатор приложения», что полностью отражает его суть. Любое ваше приложение, которое вы хотите отлаживать на устройстве Apple, тестировать через TestFlight и/или публиковать в магазин App Store, должно обладать собственным уникальным именем, по которому его можно однозначно идентифицировать среди тысяч других приложений. При добавлении нового App ID вам будет предложено ввести несколько элементов:

• App ID Description. Имя вашего приложения. К примеру, если ваше приложение называется Mail Printer, то прямо так его и записываем в это текстовое поле.
• App ID Prefix. Префикс вашего приложения, он выдается вам автоматически и будет общим для конкретной команды Apple Team, где подключена и активна Apple Developer Program.
• App ID Suffix. Здесь нам понадобится выбрать Explicit App ID, чтобы указать бандл (bundle) приложения. Это идентификатор, обычно имеющий вид com.mycompany.myappname, где mycompany — имя вашей компании или вашего домена. Например, com.homecompany.MailPrinter. Обращаю ваше внимание, что точно такой же бандл должен быть выставлен в настройках таргета (Target) вашего приложения в Xcode (секция настроек General, поле Bundle Identifier).
• App Services. Здесь вам нужно отметить те сервисы, которые вы планируете использовать в вашем приложении. По умолчанию там отмечены только Game Center и In-App Purchase, их использование обязательно, удалить их нельзя. Остальные сервисы подключайте по мере необходимости.

Устройства (Devices)

В этом разделе размещено управление всеми устройствами Apple, которые вы можете использовать в рамках вашей Apple Developer Program. Есть ограничение, максимум 100 зарегистрированных девайсов одного типа (iPhone, iPad и так далее) на одну учетную запись в год, обычно этого более чем достаточно. При необходимости отладки на устройстве или выпуска Ad Hoc-сборки просто добавляйте сюда UDID нужных вам девайсов и используйте их при генерации профилей.

Профили (Provisioning Profiles)

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

• Активного сертификата определенного типа (раздел Certificates). С помощью сертификата профиль подтверждает, что ваше приложение имеет право на выполнение определенной группы действий.
• App ID (раздел Identities). Определяет конкретное приложение, для которого выпускается профиль.
• В некоторых случаях, еще нужен список зарегистрированных устройств (раздел Devices). Определяет перечень устройств, на которые разрешено устанавливать вашу сборку. Используется только с некоторыми типами профилей.

Профили типа «Development»

Это профиль для разработки, то есть его основное назначение — отладка вашего приложения на конкретных устройствах через Xcode с прямым подключением устройства проводом к вашему Mac. Дев-профили представлены двумя видами:

• iOS App Development. Требует указания перечня разрешенных устройств из раздела Devices.
  Используется для отладки iOS-приложений.
• tvOS App Development. Аналогично, только используется для tvOS-приложений.

Профили типа «Distribution»

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

• App Store. Используется для тестирования (как внутреннего, так и внешнего) в TestFlight, а также для выпуска приложения в App Store.
• tvOS App Store. Аналогично предыдущему, только для tvOS.
• Ad Hoc. Требует указания перечня разрешенных устройств из раздела Devices.
  Используется, если вы хотите выпустить сборку, которую можно будет поставить в режиме «Production», но только на некоторых устройствах. Реальная ситуация, когда это может понадобится, например, следующая. Вы разрабатываете приложение, а в процессе работы заказчик попросил у вас «дать ему пощупать приложение» на своем Apple-устройстве. В iTunes Connect для активации внешнего тестирования вы еще выходить не готовы, но просьбу заказчика нужно выполнять — вот тут как раз и пригодится Ad Hoc-профиль, сгенерированный на базе прод-сертификата App Store & Ad Hoc Production Certificate. Важный момент: в моем случае часто возникали проблемы при экспорте сборок подобным способом, если в Xcode не был также установлен и Development-сертификат. Ошибки были разного рода, от невозможности подписать сборку до абсурдного «App ID is not available», хотя это фактически не так (замена на другой бандл ничего не давала). Поэтому, по моему предположению, для удачного экспорта Ad Hoc-сборок необходимо, чтобы, помимо Ad Hoc-профиля, был также установлен и дев-сертификат с соответствующим профилем.
• tvOS Ad Hoc. Аналогично предыдущему, только для tvOS.

Вкратце об iTunes Connect

Этот сервис предоставляет вам возможность управлять внутренним и внешним тестированием в TestFlight, а также выкладывать приложение в App Store. Рассмотрение этого процесса выходит за рамки данной статьи, упомяну лишь тот факт, что для корректной работы этому сервису необходимы сборки, созданные на базе профиля типа Distribution — App Store (для iOS либо tvOS). Другие типы профилей здесь не поддерживаются.

Резюмируем

По сути, при получении доступа к девцентру с активной Apple Developer Program ваш алгоритм действий должен сводиться к следующему:

1. Определиться, с каких конкретно машин будет производиться прямая отладка на устройствах через Xcode. Определить среди них основную машину (это может быть Mac разработчика, с которого чаще всего планируется производить отладку). Сгенерировать для основного Mac сертификаты группы Development, скачать и установить их. По необходимости, экспортировать информацию об этих сертификатах в файлы *.p12/*.pfx, которые потом можно будет разослать на другие целевые машины, где также планируется проводить отладку приложений.
2. Узнать, с какой машины планируется собирать сборки для тестирования и/или публикации в App Store. Сгенерировать для нее сертификат группы Distribution. Повторить процедуру с экспортом из предыдущего пункта, если требуется поддержка нескольких машин.
3. Проконтролировать наличие нужного идентификатора приложения в разделе App IDs и соответствие указанного там бандла значению поля Bundle Identifier в проекте в Xcode, при наличии несовпадения — устранить его либо в девцентре, либо в Xcode (где именно это править — зависит от вашей конкретной ситуации).
4. Убрать (Revoke/Delete) все сертификаты, а затем и профили, которые обладают пометкой Expired (истекший сертификат) или Invalid (некорректный профиль). Также отмечу, что, в отличие от сертификатов, профили можно редактировать. То есть, сгенерировав новые сертификаты, вместо удаления старых профилей вы можете просто отредактировать их, указав им новые сертификаты в качестве подписи.
5. Если профилей нет, либо не хватает нужных, то сгенерировать необходимые профили.
6. Скачать и установить нужные для вашей машины сертификаты и профили на свой компьютер. Установка производится двойным кликом на файле. Сертификаты будут установлены в Связку Ключей (Apple Keychain), профили — в Xcode.
7. Указать в настройках проекта Xcode нужные вам сертификаты в секции Build Settings — Code Signing Identity — Development/Distribution, а также указать необходимый Provisioning Profile.

• Произвести запуск в режиме отладки (Project — Run) через Xcode на разрешенном устройстве, используя дев-профиль.
• Создать сборку (Project — Archive с выбранным целевым устройством Generic iOS Device) на базе продакшн-профиля Ad Hoc для установки на конкретные устройства (такую сборку можно будет выслать, например, по электронной почте заказчику, чтобы он установил ее на свое разрешенное устройство).
• Создать сборку аналогично предыдущему пункту, но на базе продакшн-профиля App Store. Это будет сборка для внутреннего и/или внешнего тестирования, а также для выкладки в App Store, которую можно использовать в iTunes Connect.

• ios
• ios development
• ios разработка
• ios programming
• ios sdk
• xcode
• apple
• apple store
• app store
• app store program development
• apple developer program
• apple developer center
• apple development
• objective-c

• Разработка под iOS
• Objective C
• Xcode

Справочник iOS дизайна (HIG на русском)

Хотите стать дизайнером? Следите за моими заметками! Помимо этого справочника по дизайну для iOS, у меня на сайте доступен справочник по дизайну для Apple Watch (на русском). Сейчас я пишу обучающие статьи для начинающих дизайнеров. Чтобы всегда первым получать информацию о новых статьях, подписывайтесь на меня в twitter и facebook.

Вступление

Если вы когда-либо сталкивались с созданием интерфейса для приложения, вы определенно знаете что это не самая легкая задача. Чтобы помочь разработчикам и дизайнерам делать более качественные и дружественные интерфейсы, компания Apple выпустила и обновляет руководство по созданию интерфейсов (iOS Human Interface Guidlines (HIG)). HIG не представлен на русском языке, и это сразу отсекает тех кто не владеет английским языком на достаточном уровне.

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

HIG на русском

Этот справочник является упрощенной версией Human Interface Guidelines с комментариями и дополнениями. За основу был взят HIG от Apple и свод правил немецкого дизайнера Иво Минттинена . Здесь вы найдете основные рекомендации по созданию дружественных и интуитивно понятных пользователям интерфейсов для iOS устройств (iPhone, iPad).

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

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

Характеристики экранов

Устройство	Retina	Портрет	Альбом
iPhone 7+ 6+, 6S+, 7+	Retina HD	1080 x 1920	1920 x1080
iPhone 7 6, 6S, 7	Retina	750 x 1334	1334 x 750
iPhone 5 5, 5S, 5C	Retina	640 x 1136	1136 x 640
iPhone 4 4, 4S	Retina	640 x 960	960 x 640
iPhone 1, 2 и 3 поколение	No	320 x 480	480 x 320
iPad Air / Retina iPad 1 и 2 поколение / 3rd & 4th	No	1536 x 2048	2048 x 1536
iPad Pro	No	2048 x 2732	2732 x 2048
iPad Mini 2 и 3 поколение	Retina	1536 x 2048	2048 x 1536
iPad Mini, 1 и 2 поколение	No	768 x 1024	1024 x 768

Разница между поинтами и пикселями

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

Поинты в свою очередь являются независимыми от разрешения элементами. В зависимости от плотности пикселей, поинт может содержать несколько пикселей (например 1 поинт содержит 2х2 пикселей на стандартном retina экране).

Когда вы создаете дизайн для различных размеров экранов, вы должны думать в поинтах, а рисовать в пикселях. То есть вы все еще должны экспортировать элементы дизайна в 3 различных размерах (@1x – для устройств младше iPhone 4; в два раза больше @2x – для iPhone 4, 4s, 5, 5s, 6; в три раза больше @3x – для iPhone 6 Plus), независимо от того в каком разрешении вы создаете дизайн своего приложения.

Устройство	Экспорт	PPI	Размер экрана
iPhone 7+ 6+, 6S+, 7+	@3x	401	5.5
iPhone 7 6, 6S, 7	@2x	326	4.7″
iPhone 5 5, 5S, 5C	@2x	326	4.0″
iPhone 4 4, 4S	@2x	326	3.5″
iPhone 1, 2 и 3 поколение	@1x	163	3.5″
iPad Air / Retina iPad 1 и 2 поколение / 3rd & 4th	@2x	264	9.7″
iPad Pro	@2x	264	12.9″
iPad Mini 2 и 3 поколение	@2x	326	7.9″
iPad Mini 1 поколение	@1x	163	7.9″
iPad 1 и 2 поколение	@1x	132	9.7″

Обработанные пиксели и физические пиксели равны на всех iOS устройствах кроме iPhone 6 Plus. Здесь экран имеет меньшее разрешение пикселей нежели оно должно быть при реальном @3x разрешении. Поэтому размер обработанного контента автоматически уменьшается до 87% реального размера (с 2208 х 1242 пикселей до 1920 х 1080 пикселей).

Иконки приложений

Можно выделить следующие типы иконок в iOS: иконка приложения, иконка для магазина приложений AppStore, иконка для Spotlight, иконка для настроек. Размеры этих иконок изображены в таблице ниже.

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

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

Еще один важный аспект который следует учитывать – прозрачность. Имейте ввиду что прозрачность не поддерживается для иконок приложения вообще. Поэтому все прозрачные участки будут заполнены черным цветом.

Если ваша иконка имеет белый фон, то серая 1px обводка будет применена к ней чтобы сделать её более выделяющейся. Это будет сделано только для иконок которые будут находиться в разделе «Настройки» устройства (если ваше приложение представлено там).

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

Шрифты

В данный момент, системным шрифтом является San Francisco Font. Этот шрифт стал основным начиная с iOS 9. До этого, системным шрифтом был Helvetica Neue. В дополнение к основному системному шрифту, доступно достаточно много других стандартных шрифтов , а также есть возможность подключить любой сторонний шрифт. Использовать шрифты всегда необходимо с умом и не забывать о лицензиях (особенно если используете сторонние шрифты).

Цветовые схемы

Начиная с iOS 7 яркие цвета стали лицом iOS (кому-то это нравится, кто-то это ненавидит). Вы можете использовать любые цвета для создания своих дизайнов. Лично я советую не увлекаться использованием большого количества пестрых цветов, потому как это может сбивать пользователя. Оптимально будет использовать 1-2 два основных цвета и 1-2 вспомогательных (не учитывая черный/белый для текста и заголовков).

Стандартная Apple палитра выглядит следующим образом:

Если вам нравятся цвета которые использует Google в своих дизайнах, то советую ознакомиться с неплохой подборкой советов по дизайну в стиле Google на Behance. Во второй части есть очень подробная таблица всех используемых цветов Google. Часть 1,Часть 2.

Icons (Пиктограммы)

Пиктограммы (иконки) это очень важная составляющая дизайна любого приложения. Она может гармонично дополнить текст, иногда даже заменить его (с этим нужно осторожно, пиктограмма должна быть понятна пользователям). Зачастую пиктограммы используются в Tab Bar (панель навигации, располагается внизу экрана) и Nav Bar (панель навигации, располагается вверху экрана). Этим их использование не ограничено, вы можете использовать их там где считаете необходимым.

Пиктограммы используемые в Tab Bar всегда имеют два состояния: Стандартное состояние (в стиле обводки, с шириной обводки в 1 или 1.5 поинта) и Активное состояние (с заливкой цветом).

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

Часто используемые элементы

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

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

Status bar (Системная панель)

Системная панель (Status Bar) содержит в себе основную системную информацию, такую как доступность связи, текущий оператор связи, статус подключения к Wi-Fi/3g/LTE, текущее время, статус Bluetooth, будильник, заряд батареи. Данный элемент есть на большинстве основных современных операционных систем для мобильных устройств (iOS, Android, Windows Phone).

Статус бар визуально соединен с панелью навигации (Navigation Bar) и использует его фоновую заливку (начиная с iOS7). Для соответствия визуальному стилю вашего приложения и гарантирования читаемости, «внутренности» системной панели представлены в двух стилях оформления: темном и светлом. Размер статус бара составляет 20 поинтов (т.е. 20 пикселей для iPhone младше 4 версии; 20х2=40 пикселей для @2x Retina дисплеев iPhone 4, 4S, 5, 5S, 6; 20х3=60 пикселей для @3x Retina HD дисплея iPhone 6 Plus).

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

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

Navigation bar (Панель навигации)

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

Следует уточнить, что панель навигации все же присутствует не всегда. В некоторых приложениях она может отсутствовать на определенных экранах (Pinterest), а в других эта панель может прятаться при скролле (прокрутке) вниз и снова появляться при скролле вверх (Instagram, Facebook). Это делается для того что бы дать больше места для контента и акцентировать внимание пользователя именно на контенте.

Элементы панели навигации всегда должны располагаться в определенных местах:

• Кнопка назад должна всегда находиться у левого края экрана.
• Заголовок текущего экрана должен всегда размещаться по центру.
• Кнопки дополнительных действий всегда должны находиться у правого края экрана. Если возможно, всегда лучше использовать лишь одну кнопку действия справа. Это сделает экран более простым для понимания пользователя и позволит предотвратить случайные нажатия и не попадания по кнопкам.

Toolbar (Панель инструментов)

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

Также как и в панели навигации, фон панели инструментов может быть изменен (по умолчанию – небольшая прозрачность и размытый фоновый контент).

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

Search bar (Панель поиска)

Панель поиска доступна в двух разных стилях по умолчанию: стандартном и упрощенном. Обе версии отличаются лишь внешним видом и имеют одинаковую функциональность:

• Пока текст не был введен в поле поиска, там будет находится заданный по умолчанию текст (Поиск, Search).
• Как только пользователь начинает вводить поисковый запрос, текст «Поиск» или «Search» исчезает, а кнопка очистки введенного текста появляется у правого края.

Иногда панель поиска содержит подсказку – короткое предложение которое описывает возможности поиска. Например: «Введите название книги, автора или часть текста для поиска».

Tab bar (Панель вкладок

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

Панель вкладок может содержать только определенное количество вкладок. Если вкладок больше чем может быть отображено на панели вкладок, то последняя вкладка заменяется на вкладку «Еще» которая будет вести к списку спрятанных вкладок с возможностью изменения порядка отображаемых вкладок. Например, в приложении “Музыка”:

Максимальное количество отображаемых вкладок на iPhone – пять. На iPad их количество может достигать семи.

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

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

Table view (Таблица)

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

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

Простая Таблица

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

Группированная Таблица

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

Для обеих видов таблицы доступно несколько стилей:

Стандартный

Таблица содержит изображение (или не содержит) расположенное слева и заголовок строки.

С подзаголовком

Этот стиль позволяет использовать маленький подзаголовок под заголовком строки. Обычно подзаголовок используют для краткого описания или объяснения.

С значением

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

Уведомления, всплывающие, модальные окна

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

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

Activity view

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

Actions (Действия)

Данный тип используется для выполнения определенного действия со списка возможных действий или для подтверждения/отказа совершенного пользователем действия

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

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

Alerts (Предупреждения)

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

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

Вы можете добавить какое-либо текстовое сообщение если необходимо. Также есть возможность добавить поле ввода (до двух) одно из которых может быть шифрованным (для пароля или PIN кода, например).

Edit menu (Меню редактирования)

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

Popover (Всплывающие окна)

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

Данный вид всплывающего окна появляется под связанным обьектом (который вызывает это окно) с стрелкой указывающей на этот объект. Фон этого окна использует легкую прозрачность и размытый контент под этим окном.

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

Modals (Модальные окна)

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

Обычно модальные окна предоставляют:

• Заголовок с описанием действия.
• Кнопку для закрытия модального окна или выполнения любых других действий.
• Кнопку для сохранения или подтверждения любой введенной информации.
• Различные элементы для ввода информации пользователем.

Доступно три разных стиля модального окна:

• Полноэкранный: занимает весь экран.
• Страничное модальное окно (Page Sheet): в портретной ориентации, модальное окно покрывает частично контент который лежит под ним и оставляет видимой небольшую часть контента (при этом используя полупрозрачную черную заливку поверх нижележащего контента). В альбомной ориентации, данный стиль модального окна выглядит и функционирует как полноэкранное модальное окно.
• Форма (Form Sheet): в портретной ориентации, модальное окно появляется в центре экрана , оставляя видимым окружающий контент с применением черной полупрозрачной заливки на него. Расположение данного стиля окна изменяется автоматически когда появляется клавиатура. В альбомной ориентации, данный стиль окна функционирует как полноэкранное модальное окно.

На изображении выше показаны 2 вида модальных окон: полноэкранное модальное окно и страничное модальное окно.

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

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

Рекомендации по созданию модальных окон:

• Создавайте модальные окна простыми, короткими и понятными.
• Всегда предоставляйте понятный и безопасный способ покинуть модальное окно.
• Если решение задачи требует иерархию модальных окон, убедитесь, что пользователь понимает, что произойдет после нажатия кнопки “Готово” на любом из уровней иерархии.
• Не показывайте модальные окна поверх всплывающих окон (Popovers).
• Следуйте общему стилю приложения при создании модальных окон.
• Старайтесь показывать заголовок модального окна, чтобы пользователь понимал где он находиться и что сейчас делает.
• Используйте подходящую анимацию для появления и скрытия модального окна.
• Если вы используете различные виды анимации и переходов для модальных окон в приложении, делайте это таким образом, чтобы это имело смысл для пользователя.

Controls (Управляющие элементы)

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

Кнопки

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

Кнопки имеют огромное количество настроек внешнего вида которые позволяют изменять и настраивать вам практически все: стиль текста, тени, иконки и т.п.

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

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

Picker (Пикер, контрол выбора)

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

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

Segment control

Сегментный контрол состоит как минимум из двух частей (сегментов) которые могут быть использованы например для создания вкладок категоризации контента или фильтрации контента.

Каждый сегмент может содержать текст или изображение (иконку), но никогда оба этих элемента одновременно. Также не рекомендуется смешивать вкладки с иконками с текстовыми вкладками без иконок. Ширина сегмента изменяется автоматически в зависимости от количества сегментов.

Slider (Слайдер, ползунок)

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

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

Stepper (Степпер)

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

Визуально, степпер очень хорошо настраиваем:

• Вы можете использовать собственные иконки для кнопок.
• Вы можете изменять цвет обводки, фон и т.п.
• Также вы можете использовать любое изображение в качестве фона или разделителя.

Switcher (Переключатель, включатель.выключатель)

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

Keyboard (Клавиатура)

Доступны различные варианты клавиатур. Стандартные клавиатуры не могут быть изменены. Но разработчики и дизайнеры имеют возможность создавать и использовать собственные клавиатуры.

3D Touch

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

Peek and Pop

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

• Появляется, когда пользователь нажимает на элемент, поддерживающий Peek, и исчезает, когда палец пользователя уменьшает силу нажатия на экран.
• Открывает более детальное отображение элемента ( называется pop ), когда пользователь нажимает сильнее на Peek.
• Позволяет пользователю быстрые действия с элементом при свайпе вверх на экране peek (при условии, что данная функция заложена программистом).

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

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

Критически важно использовать Peek и Pop органично в своём приложении. Если вы поддерживаете Peek и Pop в некоторых местах, а в некоторых не поддерживаете, пользователь может решить, что ваше приложение работает с ошибками или у него сломалось устройство.

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

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

Не используйте peek и меню редактирования (edit menu) для одного элемента. Оба действия вызываются схожим принципом (долгое, сильное нажатие на текст), это может вызвать у пользователя недоумение.

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

Предоставляйте возможность быстрых действий для peek. Внутри peek, пользователь может свайпнуть вверх (провести не отрывая пальца снизу вверх), чтобы увидеть доступные действия, относящиеся к этому элементу. Например, быстрые действия внутри приложения Почта включают в себя “Ответить всем”, “Переслать” и “Переместить сообщение”. Быстрые действия для peek не обязательны. Добавляйте их, только если в этом есть необходимость, и они будут полезны пользователю.

Быстрые действия с домашнего экрана

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

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

Быстрые действия должны предоставлять доступ только к основным и наиболее полезным функциям приложения. Например, карты позволяют пользователю искать по близлежащим местам или построить путь домой, не открывая предварительно приложение карт. Каждое приложение должно иметь как минимум одно быстрое действие. Максимум можно добавить 4 быстрых действия.

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

Не используйте быстрые действия как способ уведомления пользователя. Пользователи iOS ожидают получать уведомления из приложений другими способами (более детально читайте на сайте Apple в разделе Notifications).

Используйте простой и понятный заголовок для действия, а также подходящую по смыслу иконку. Заголовок должен четко указывать на результат, который получит пользователь по нажатию на быстрое действие. Например: “Проложить Путь Домой”, “Создать Новый Контакт”, “Новое Сообщение”. Вы можете использовать дополнительный подзаголовок (не обязательно). Не добавляйте название вашего приложения либо другую бесполезную информацию в заголовок и подзаголовок. Также стоит помнить, что люди могут использовать ваше приложения на различных языках, поэтому стоит заблаговременно позаботиться о локализации.

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

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

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

Полезные ресурсы

Основные

iOS Human Interface Guidelines Руководство по созданию пользовательских интерфейсов от Apple

iOS Шрифты Здесь можно посмотреть стандартные iOS шрифты и проверить как будет выглядеть любой текст с применением этих шрифтов.

Прототипирование

Principle В данный момент, наилучший инструмент (на мой взгляд) для создания анимированных прототипов. Обладает очень широкими функциональными возможностями и очень низким входным барьером. Единственный минус – доступен только на Mac

Origami Фреймвёрк для Quartz composer от Facebook (Отличный, но может быть сложным для начинающих + Доступен только на Mac)

Pixate Прекрасный мощный инструмент для создания анимированных прототипов. Я перешел на него с Origami и не пожалел. Origami более функционален, но и прототипы делаются гораздо дольше. Я пользовался Pixate вплоть до выхода Principle. Pixate был недавно приобретен компанией Google и стал бесплатным. Это всё еще прекрасный инструмент у которого хорошее будущее

InVision Инструмент в котором я делал свои первые прототипы, очень легкий в использовании, но достаточно ограниченый

Marvel Инструмент на любителя. Почему-то у меня не пошел

UXPin Достаточно хороший и удобный инструмент

Исходники для Photoshop и Sketch

iOS 9 GUI для iPhone (PSD) Легендарный набор исходников для Photoshop от ребят из студии TeehanLax, которая теперь является частью Facebook

iOS 9 GUI для iPhone (Sketch) Не менее легендарный набор для Sketch от TeehanLax (теперь Facebook)

iOS 9 GUI для iPhone (Sketch) Набор Sketch исходников для iPhone от дизайнера Meng To

iOS 9 GUI для iPad (Sketch) Набор Sketch исходников для iPad от дизайнера Meng To

Галереи паттернов (Скриншотов экранов из приложений)

Моя галерея на Pinterest Большая и качественная галерея c разбивкой мобильных интерфейсов (и не только) по категориям. Постоянно обновляется

Mobile Patterns Крупная галерея паттернов. Периодически обновляется

Pttrns Хорошая галерея паттернов. Обновляется достаточно часто.

Полезные вещи

UIStencils Ребята продают прекрасные инструменты для UI дизайнеров (Mobile, Web). От скетчбуков до металических трафаретов. Очень советую

DotGrid Продают хорошие альбомы и скетчбуки

Rotring Если механический карандаш, то только Rotring. Металические, очень хорошего качества и с самым оптимальным весом

Полные иллюстрированные гайдлайны по дизайну под iOS 15

В статье я расскажу все, что нужно знать, чтобы начать создавать iOS-приложение, соответствующее стандартам iOS 16 Возможно, вы никогда не проектировали приложение для iPhone и не знаете, с чего начать. Возможно, вы уже спроектировали с десяток приложений, но ищите лучшие примеры. Руководство Apple «Human Interface Guidelines» просто ужасно. В любом случае, эта статья для вас. В ней я расскажу все, что нужно знать, чтобы создавать iOS-приложение, соответствующее стандартам iOS 15.

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

В течение 5 или 6 лет после выпуска первого iPhone размеры экрана были вполне управляемыми. Если ваш дизайн работал на экране с разрешением 320×480, вы были великолепны. Теперь это дикий запад. Только за последние 3 года добавилось 3 новых размера экрана! Вот полный список размеров экранов iPhone (добавьте эту ссылку в закладки; или скачайте PDF-файл ниже).

Устройство	Размер артборда	Масштаб экспорта
13 Pro Max, 12 Pro Max	428 x 926	@3x
13, 13 Pro, 12, 12 Pro	390 x 844	@3x
13 Mini, 12 Mini	375 x 812	@3x
11 Pro Max, XS Max	414 x 896	@3x
11 Pro, X, XS	375 x 812	@3x
11, XR	414 x 896	@2x
8+, 7+, 6+, 6S+	414 x 736	@3x*
SE (gen 2), 7, 6, 6s	375 x 667	@2x
5, 5s, 5c, SE	320 x 568	@2x
4, 4s	320 x 480	@2x
1, 2, 3	320 x 480	@1x

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

Артборд какого размера мне следует использовать для дизайна iPhone?

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

• Если вы записываете аналитику в своем текущем приложении или веб-сайте, отметьте их * для наиболее распространенных размеров экрана вашей аудитории
• Если вы проектируете приложение для широкой аудитории, используйте общий самый популярный размер экрана iPhone: 375x667pt
• Если вы проектируете приложение для тех, кто разбирается в технологиях или дизайне, самым популярным размером экрана iPhone, скорее всего, будет новейший 375x812pt.

* Google Analytics записывает это в Audience > Mobile > Devices, затем перейдите на ярлык «Primary Dimension» и установите для него «Screen Resolution».

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

iOS Точки vs. Пиксели

«Точка» (point) – это показатель, по которому дизайнеры могут сравнивать размеры шрифтов и элементов интерфейса на iOS девайсах. «Пиксель» (pixel) – это крошечный квадрат света, из которых состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение, и это здорово. Но если вы просто уменьшите свои пиксели, все на экране тоже уменьшится! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точках. Если пиксели в два раза меньше изначальной высоты / ширины, мы можем просто использовать квадрат 2×2 пикселя для каждой точки (это называется масштаб @ 2x). А если пиксели составляют примерно треть изначальной высоты / ширины, мы можем использовать квадрат 3х3 пикселя для каждой точки.

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

iPhone Layout

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

Примечание: в разделе загрузок в конце статьи у меня есть шаблон iPhone для Figma, у которого есть линейки, разделяющие эти области страницы, а также строка состояния и индикатор «Домой». Это позволяет очень быстро заполнять этот фреймворк страницы.

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

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

Строка состояния содержит индикаторы времени, сигнала, Wi-Fi и батареи, и может быть написана (текст и иконки) черным или белым цветом.

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

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

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

Подобная строка состояния в стиле «матовое стекло» не добавляет никаких дополнительных цветов, границ или ненужных элементов, привлекающих внимание к интерфейсу – она ​​просто размывает любые цвета под ней, делая текст более читабельным.

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

Только начиная с iPhone X появилась «челка» и закругленные углы на границе. Старые iPhone (и все iPad) имеют более короткую и компактную строку состояния.

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

В навигационной панели приложение отображается навигация (сюрприз!), заголовок страницы, основные действия страницы и (часто) поиск.

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

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

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

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

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

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

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

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

На скриншотах выше показано только pre—scrolled поведение. Как только пользователь начинает скроллить, iOS начинает вести себя следующим образом.

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

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

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

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

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

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

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

• Выбранная иконка обозначается цветом заливки темы приложения.
• Фон может быть слегка полупрозрачным и размытым – эффект «матового стекла», в стиле навигационной панели
• Метки имеют текст 10-11pt в SF, шрифт по умолчанию

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

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

Всего должно быть 2-5 вкладок. Если вам нужно отобразить больше 5 вкладок, пятой иконкой должно быть «More», чтобы показать другие пункты назначения на экране выбора при нажатии.

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

Все новые iPhone (X и более поздние версии) имеют индикатор «Домой» (home indicator) – тонкую закругленную полоску, всегда присутствующую внизу экрана. За исключением тех случаев, когда вы уже на главном экране.

Он черный на всех светлых экранах, но может быть белым на темных экранах.

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

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

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

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

Навигация

Основные пункты назначений приложений

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

«Назад»

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

Метод навигации «Назад»	Контекст, в котором используется
Тап по действию «Назад» в верхней левой части экрана	Любой экран, на котором присутствует действие «Назад»
Свайп вправо от левого края экрана	Любой экран, на котором присутствует действие «Назад»
Тап по действию «Отмена» или «Готово» вверху экрана	Модальные окна
Свайп вниз на контент экрана	Модальное или полноэкранное представление (например, фото или другие медиа)

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

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

Посмотрите раздел модальные окна ниже, чтобы узнать больше о том, как их закрыть.

Поиск

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

1. Панель поиска в навигационной панели
2. Иконка поиска на навигационной панели
3. Иконка поиска на панели вкладок

Однако, независимо от того, где находится точка входа в поиск, процесс поиска выглядит довольно схожим:

При желании вы можете показать популярные или недавние поисковые запросы под окном поиска. В своем курсе Learn UX Design я расскажу о лучших примерах поиска, которые касаются разработки интуитивно понятных и простых в использовании приложений

Модальные окна (Modal Sheets)

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

Теперь в iOS 15 для этого у нас есть идеальный элемент интерфейса – Modal sheet.

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

Modal sheet можно закрыть:

• Нажатием на действие «Закрыть» вверху («Отмена» в верхнем правом углу)
• Свайпом вниз по самой модальной карточке

Элементы интерфейса и элементы управления

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

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

Всякий раз, когда вы создаете список на iPhone, вам нужно задать себе три вопроса:

1. Какой текст я хочу отобразить?
2. Хочу ли я добавить иконку / изображение?
3. Что расположено в правой половине клетки?

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

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

1. Только основной текст (17pt обычный)
2. Основной текст (17pt обычный) со вторичным текстом (15pt обычный)
3. Кастомный макет – например, основной текст (17pt обычный), вторичный текст (15pt обычный, НО СВЕТЛЕЕ) и третичный текст (15pt обычный, НО СВЕТЛЕЕ)

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

Наконец, есть несколько вариантов для правой части элемента списка:

• (Указывающий направо) шеврон. Почти по умолчанию он позволяет пользователям понять, что при нажатии они перейдут на другой экран
• Текст и шеврон. Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет здесь показано
• Галочка. Позволяет пользователю выбирать один из элементов списка в этой группе (Примечание: не множественный выбор, как веб-списки с флажками)
• Переключатель. Позволяет пользователю включать или отключать свойство, на которое ссылается элемент списка.
• Текстовые кнопки. Используйте системный цвет для ссылки на другую страницу или сценарий. Используйте красный текст для обозначения «разрушительного действия» – выключения или удаления чего-либо и т. д.

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

Кнопки

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

Тем не менее, iOS также имеет кнопки на странице.

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

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

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

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

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

Переключатели (Switches)

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

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

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

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

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

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

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

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

Типографика

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

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

Элемент	Стиль
Заголовок страниц (unscrolled)	34pt полужирный #000
Заголовок страницы (scrolled)	17pt средний #030303
Простой текст, Заголовки элементов списка, Ссылки	17pt нормальный #000
Вторичный текст	15pt нормальный #8A8A8E
Третичный текст, Подписи	13pt нормальный #8D8D93
Кнопки, Элементы ввода текста	17pt нормальный, разные цвета
Метки панели действий	10pt обычный #8A8A8E

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

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

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

• Размер: 34pt
• Вес шрифта: полужирный
• Цвет: #000
• Цвет темной темы: #FFF
• Выравнивание: по левому краю

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

• Размер: 17pt
• Вес шрифта: средний
• Цвет: #030303
• Цвет темной темы: #FFF
• Выравнивание: по центру

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

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

• Размер: 17pt
• Вес шрифта: нормальный
• Цвет: #000
• Цвет темной темы: #FFF

Вы можете многого добиться, сделав небольшие изменения в этом базовом стиле.

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

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

И текст подсказки для поля поиска – это текст по умолчанию, но светло-серый.

Вторичный текст

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

• Размер: 15pt
• Вес шрифта: нормальный
• Цвет: #8A8A8E
• Цвет темной темы: #8D8D93

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

Любые пояснительные «подписи» делаются еще меньше и легче, чем вторичный текст.

• Размер: 13pt
• Вес шрифта: нормальный
• Цвет: #6D6D72
• Цвет темной темы: #8D8D93

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

Просто определив минимальный размер текста вы сможете избежать головной боли с любой дизайн-системой. Для iOS-приложений это метки на панели действий с размером 10pt:

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

Иконки приложений

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

Вы можете сделать это следующим образом.

(Если вы используете Sketch, вы можете сделать это довольно просто с помощью их шаблона – File > New from Template > iOS App Icon)

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

Вот план дизайна иконки iOS-приложения 80/20 от Эрика:

1. Создайте квадратную иконку, которая будет хорошо смотреться с разрешением 60x60px (и убедитесь, что она хорошо выглядит в маске с помощью Apple superelljpse *)
2. Увеличьте ее до @ 2x (120x120px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
3. Увеличьте ее до @ 3x (180x180px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
4. Увеличьте ее до 1024x1024px
5. Экспортируйте все 4 размера в формате PNG. Готово ?

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

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

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

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

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

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

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

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

Другие особенности iOS

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

Размер цели нажатия (Tap Target Size)

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

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

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

Темная тема

Начиная с iOS 13 появилась поддержка темной темы на уровне ОС. Приложения имеют (как правило) темный фон и светлый текст вместо светлого фона и темного текста.

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

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

Создание темной темы интерфейса – это отдельная тема, заслуживающая отдельного руководства, и это одна из тех вещей, которые я более подробно рассмотрю в своем курсе Learn UI Design.

Ресурсы

Я создал несколько ресурсов. Ссылки и описания ниже

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

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

Шаблон iPhone 13

Этот файл Figma (который вы также можете экспортировать в формате SVG и открыть в Sketch или XD) включает все модели iPhone 13 и iPhone 12 (включая Mini, Pro и Pro Max) с (а) линейками для выделения общих частей экрана, (б) маска с выемкой и закругленными углами и (в) легко перекрашиваемая строка состояния.

Дополнительные ресурсы

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

iOS vs. Android App UI Design: Полное руководство. Хорошо, допустим, вы решите, что в какой-то момент будете делать версию своего приложения для Android. Лучше всего начать думать о некоторых конструктивных различиях уже сейчас. Кто знает, в конечном итоге возможно вы позаимствуете ряд идей из принципов дизайна Android.

Рекомендации по размерам шрифта iOS. Одна из самых неожиданных частей в разработке интерфейса – это интуитивное понимание того, какой размер шрифта использовать. Итак, чтобы помочь с этим, я написал самое полное в мире руководство по размерам шрифтов.

iOS дизайн рекомендации от Ivo Mynttinen. Самое полное руководство, которое я смог найти, по созданию приложений для iPhone, написанное понятным языком (помимо этой статьи ?).

Подводя итог

Я что-то упустил? В чем-то ошибся? Напишите мне erik@learnui.design. Я буду обновлять это руководство для повышения его точности и читабельности.

Последнее примечание ?

Вас также могут заинтересовать:

• Learn UI Design, мой полноформатный онлайн-видео курс по дизайну пользовательского интерфейса
• The Design Newsletter, информационная рассылка, на которую уже подписалось более 50 000 человек. Она содержит оригинальные статьи о дизайне, нацеленные на предоставление вам тактических советов по улучшению ваших UX / UI навыков.