Как выглядят приложения на айфоне

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

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

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

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

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

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

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

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

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

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

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

10 лайфхаков разработки дизайна нативных мобильных приложений

Разработка дизайна мобильных приложений быстро заняла центральное место среди основных требований к скиллам современного UI-дизайнера. На Google Play и среди пользователей IOS, больше всего ценится нативность в UX и UI решениях. Если мобильное приложение разработано с использованием гайдлайнов, то App Store гораздо легче пропускает его в работу, а пользователи радуются, увидев что-то знакомое и давно любимое. Все это значит, что дизайнеру необходимо ориентироваться в общих требованиях и не забывать отслеживать обновления, которые выходят с завидной периодичностью. Только в этом случае он сможет сохранять профессионализм и оставаться востребованным на рынке труда.

Особенно сложной задачей может стать дизайн мобильных приложений для IOS, так как существует перечень строгих правил, которых необходимо придерживаться, если задачей является сохранение нативного поведения и UI. Максимально тяжело приходится новичкам и пользователям Android, ведь IOS-юзабилити кардинально отличается от привычного поведения приложений на их девайсах.

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

Скелет экрана приложения

Скелет экрана приложения состоит из Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. Далее мы описали все эти части.

Status bar

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

Какое бы не было устройство, высота статус бара всегда составляет 20 pt. Исключением является только iPnone X, где размер строки состояния составляет 44 pt, за счет наличия «челочки».

P.S.: Совершенно не обязательно отрисовывать status bar самостоятельно. Можно обратиться к готовым GUI, которые есть в свободном доступе. Существует официальная версия от разработчиков IOS.

Navigation bar

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

Высота панели без status bar в любом устройстве (кроме iPnone X) составляет 44 pt. В IOS-версиях выше 10, панель навигации можно, при необходимости, расширить. То есть добавить дополнительную область, высотой в 52 pt, с большим заголовком строки. Не стоит забывать об отступах — в IOS они должны быть кратны восьми.

В основной части навигационной панели необходимо задавать отступ в 8 pt, а в дополнительной части с заголовком — 16 pt.

Tabbar

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

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

Высота таббара — 49 pt во всех моделях iPhone. Иконка может быть с подписью или без, но в любом случае, контент центрируется. Размер иконки — 24 pt. Нужно учитывать, что область для клика составляет 44 pt — размещать другие иконки в области клика не рекомендуется. Чтобы понять, как размещать иконки в таббаре, нужно определить их количество, разбить ширину экрана на число иконок/табов. Затем каждую иконку центрировать по ширине и высоте области таба, независимо от того, будет ли текст под иконкой.

Modals, Popovers and Alerts

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

Существуют такие виды всплывающих окон:

1) Action Sheet.

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

2) Alerts

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

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

3) Edit Menu.

Позволяет пользователю осуществить такие действия, как «Скопировать», «Вырезать», «Вставить», когда элемент выделен. Появляется, если кликнуть на выделенный объект.

4) Popover.

Такие всплывающие окна полезны, когда одно действие позволяет выбрать несколько пунктов. Например, чтобы ответить на вопрос: «В каких дизайнерских программах вы работаете?», — скорее всего, потребуется поставить не одну галочку.

Search bar

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

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

Picker

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

Шрифты и их параметры

В случае, когда перед специалистом стоит задача: «Создать нативный дизайн приложения под IOS», — у него не будет необходимости в выборе шрифта. Разработчики платформы уже позаботились об этом — прописали в гайдлайнах, что необходимо использовать их собственный шрифт «San Francisco».

Он представлен в двух начертаниях: «SF UI Display» и «SF UI Text. Display». Первый, в основном, используется для стандартных элементов интерфейса, а «Text» — для заголовков и основного текста. Основной текст принято делать с небольшой разрядкой.

Размеры шрифтов для основных элементов интерфейса

Элемент	Размер (pt)	Начертание	Тип шрифта
Large Nav Bar Title	34	Bold	Text
Nav Bar Title	17	Semibold	Text
Nav Bar Button	17	Regular	Text
Search Bar	17	Regular	Text
Tab Bar Button	10	Regular	Text
Action Sheets	20	Regular / Semibold	Display

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

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

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

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

Onboarding — знакомство с приложением и первое впечатление пользователя о вашей работе

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

Onboarding может стать как учебным пособием по работе с приложением, так и просто демонстрацией преимуществ.

Варианты использования Onboarding

Приветствие

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

Информирование

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

Обучение

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

Персонализация

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

И еще несколько советов по созданию onboarding

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

Основы работы с цветом, программные сложности реализации некоторых цветовых решений

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

Советы по использованию цветов при разработке IOS-приложения

Задействуйте выделяющиеся цвета, чтобы показать, что элемент кликабельный.
Ваши лучшие друзья — комплиментарные цвета.
Используйте ограниченное количество цветов, в идеале, два-три основных, один из которых будет отвечать за кнопки и активные элементы приложения.
Не вводите пользователя в заблуждение, используя цвет, который традиционно приравнивается к какому-то действию. Красный, зеленый, синий и нейтральные оттенки нужно использовать с умом. Например, не заливайте зеленым кнопку «Удалить», а красным — «Продолжить», ведь все знают, что красный — деструктивное действие, зеленый — позитивное, а серый подразумевает неактивность.
Если у компании, для которой разрабатывается приложение, есть лого и/или гайдлайн, стоит использовать имеющиеся данные, чтобы не нарушить связь с брендом.
Градиенты в основных элементах приложения сильно усложняют работу программиста. Если стоит задача использовать градиент, постарайтесь сделать его максимально простым и не использовать необычные повороты — их очень сложно реализовать программно.

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

Кнопки — важный и один из наиболее сложных компонентов мобильных приложений. IOS вмещает большое количество видов кнопок, но их можно разделить на несколько категорий.

Системные кнопки

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

Несколько советов по созданию системных кнопок

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

Segmented Controls

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

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

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

Call to Action (CTA)

Call to Action — кнопки призыва к действию. Они, зачастую занимают всю ширину экрана и могут содержать не только текст, но и иконки.

Особенности CTA

Кнопку первой важности лучше залить полностью, а второстепенной — задать обводку без заливки.
Если кнопка неактивна до того момента, пока пользователь не выполнит действие (например, заполнит форму), ей можно задать нейтральный серый оттенок, цвет текста тоже не должен слишком выделяться.
Кнопки можно размещать как в середине контента, если это не основное действие экрана, так и закреплять по нижнему краю. Зачастую, так делаем во всплывающем экране или на внутренних экранах приложения.
Иконки в кнопках CTA имеют стандартный размер — 24 х 24 pt.
Кнопкам Call to Action желательно задавать размер не меньше 44 pt.

Иллюстрация, как wow-эффект, и области ее использования

Иллюстрации в мобильных приложениях давно в тренде. С каждым годом к ним предъявляются все более жесткие требования: больше уникальности, дружелюбия, интеграций с брендом. Дизайнеру/иллюстратору уже недостаточно черпать вдохновение в векторных человечках на фотостоках — нужно ориентироваться на тренды в стилистике и представлении информации. Ниже мы перечислили несколько трендов в иллюстрации в 2019-2020 годах.

Яркие цвета и простые формы

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

Причудливые и абстрактные

Сейчас все больше и больше иллюстраторов смешивают изображения, текстуры, формы и линии для создания забавных абстрактных дизайнов. Если правильно выдержать баланс, это будет выглядеть восхитительно. Не бойтесь экспериментировать! Вдохновляйтесь такими гигантами, как Google, Facebook, Slack, Asana.

Область использования иллюстраций в мобильных приложениях чрезвычайно широка

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

Иконки — инструмент, которым можно задать стиль

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

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

Организация рабочего пространства в основных редакторах для разработки приложений

В наше время, когда дизайнер рисует мобильное приложение в среде Photoshop , UI-щики хватаются за голову с криками: «Каааак? Зачем?». Не удивительно, ведь этот редактор давно никто не использует при разработке мобильных приложений.

На смену привычному фотошопу пришли векторные редакторы Figma, Sketch, XD и другие.

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

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

Для того, чтобы упростить работу с большим количеством макетов и одинаковыми элементами, разработчики Figma подарили своим пользователям компоненты . Если какой-то элемент, например, кнопку, сделать компонентом, то все ее копии копии будут повторять поведение своего родителя. Это очень удобный и быстрый способ разом откорректировать все кнопки, изменив лишь родителя. С другой стороны, если вы задали для копии компонента какой-то текст, то при редактировании компонента, копия ребенка изменится, а текст в ней — нет.

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

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

Но дизайнеры на этом не остановились. В среде Фигмы можно создать отдельную страницу с компонентами и сделать таким образом UI Kit, который автоматизирует работу.

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

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

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

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

P.S.: По ссылке доступна бесплатная версия UI Kit, которую разработали и успешно внедряют в проекты дизайнеры Artjoker. Все компоненты в ней грамотно настроены и являются «резиновыми»

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

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

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

Navigation bar. Появляется вверху приложения и прикреплен к status bar. В зависимости от того, на какой странице мы находимся, навигационная панель будет меняться. Важно размещать на страницах первого уровня иерархии заголовок страницы, чтобы всегда было понятно где мы находимся. На внутренних страницах, помимо заголовка, необходимо добавить стрелку назад, чтобы вернуться на предыдущий экран. Стрелку можно даже подписать, чтобы шаг был еще более очевиден. На этой панели также принято размещать иконки для перемещения на другие внутренние страницы. Например, на главной странице профиля мы можем добавить в navigation bar иконку settings, чтобы был быстрый доступ к странице настроек.
Tab bar. В отличии от Android-приложений, IOS никогда не прячет свою навигацию в скрытое меню. В нижний таббар выносятся основные страницы приложения — желательно, чтобы их было не больше пяти. О характеристиках самой панели и иконок мы рассказывали ранее. В нижнюю навигационную панель вполне можно добавить и кастомные элементы — выделить иконку «+», взяв ее в круг, который будет выходить за рамки панели (смотрите картинку ниже). Но прежде, чем сделать такой вариант, обсудите с вашим разработчиком, насколько это будет затратно по времени. Если все-таки нужно добавить больше пяти иконок, еще раз подумайте, можно ли поместить элемент где-то в навигационной панели. В крайнем случае, предложите скролл иконок (но это не очень хороший кейс).
Segmented controls — очень важный элемент навигации, который позволяет разделить один экран на несколько. При переходе на любой из сегментов, пользователь остается в рамках главной страницы. Чаще всего, эту панель размещают ниже всех элементов навигационной панели и названия экрана (если такое есть), но бывает, что segment controls размещают в контексте какого-то контента.

Иконка приложения: как нельзя и как можно делать

Значок приложения — это уникальное изображение, добавляемое для каждого мобильного app. Пользователи впервые увидят приложение в App Store и Google Play. На данном этапе пользователь решает — хочет ли он узнать больше о сервисе. Если нет, он прокручивает дальше. Хороший значок вызывает интерес, обеспечивает уверенность, убеждает пользователя, что приложение может быть полезно. В то же время, плохая иконка сбивает с толку и ставит под сомнение пользу/качество сервиса. Когда человек его устанавливает, цель значка меняется — это нужно учитывать. Теперь он помогает в поиске приложения на главном экране, среди других значков. Но что делает значок «хорошим»?

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

Вот несколько советов от дизайнеров Artjoker, о том, как сделать ваш значок сервиса понятным и привлекательным

Старайтесь рисовать значок по сетке или, хотя бы, не выходить за края сетки.
Если вы разрабатываете нативный дизайн приложения для именитой компании, лого которой всем известен, стоит разместить фирменный знак, если он есть, в качестве значка продукта (примеры: Behance, Facebook, Twitter и т.д.). Если лого компании не предусматривает короткой версии, не нужно размещать весь полный объем. Лучше придумайте простой и понятный знак, передающий суть приложения, или композицию в фирменном стиле.
Иконки для IOS по гайдлайнам не предусматривают использование теней, как в Material Design для Android. Тут нужно полностью ориентироваться на стиль flat.
Размеры иконки приложения для передачи разработчикам должны составлять 1024х1024 pt.

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

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

Поделись своей эмоцией после прочтения статьи

Отлично!

Хорошо!

Любопытно..

Не очень

О чем это?

Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!

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

Как выглядят приложения на iPhone X

В закладки

Как выглядят приложения на iPhone X

Разработчики уже получили специальный API и инструкции по созданию приложений для iPhone X. Некоторые из программистов стараются интересно обыграть «островок».

Кому-то горб не понравился, и разработчик стилизовал программу под стиль Galaxy S8.

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

А вот так выглядит приложение, не адаптированное под новый экран iPhone X.

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

(Проголосуйте первым за статью!)
�� Хочешь ещё? Читай больше в Telegram
�� Ищешь ответ на вопрос? Приходи на Форум

Разработчики уже готовятся.

Артём Баусов

Главный по новостям, кликбейту и опечаткам. Люблю электротехнику и занимаюсь огненной магией. По всем вопросам пишите в Telegram: @TemaBausov

4 фишки iPhone X, которые давно есть в Android смартфонах

10 лучших осенних обоев для iPhone

�� Читайте также . Всё по теме

Вышел потрясающий трейлер фильма «Майор Гром: Игра». Релиз в мае

Microsoft проведет презентацию 21 марта, на которой представит новые Surface и улучшения для Windows 11

Apple придется объяснить Еврокомиссии, почему она заблокировала учетную запись Epic Games в App Store

В США арестован бывший инженер Google, который обвиняется в краже технологий искусственного интеллекта для китайских компаний

Nikon объявила о покупке производителя топовых кинокамер RED

�� К году дракона готовы. Как Москва встречает 4721 китайский Новый год

6 критических недостатков Apple Vision Pro спустя неделю тестирования. Это не стоит 400 тысяч рублей

Собрал 8 игр для айфона, в которых графика как на PlayStation. Вот во что можно залипнуть надолго

�� Комментарии 61

CIA_agent 16 сентября 2017

кретинизм полный с этим горбом, почему нельзя было сделать по-человечески, как это сделал Samsung? iphone держится только из-за ios, если бы у samsung была ios, все бы уже давным давно забыли что такое apple и iphone.

Артём Баусов 16 сентября 2017
@CIA_agent , но у Samsung нет iOS)
Vladim 16 сентября 2017
@Артём Баусов , и это очень повезло пользователям Самсунг, ни кто не указывает что надо делать
Lannister 16 сентября 2017

@Vladim , так разницы никакой почти нет между осями, стабильность одинаковая, скорость работы так же, приложения на iOS более красивые, ну кому как, красота не всегда значит удобство, тот же телеграм на ведре для меня практичней и удобней чем на iOS, ютуб тоже стал ios-подобный, свайпить мне было удобней чем снизу клацать. Почти все приложения есть и там и там, разве что нет для меня acestream на iOS, но зато есть на mac os.Так что я хз какая между осями разница.

Vladim 16 сентября 2017
@Lannister , но про приложения это вы загнули, андроида и iOS это как винда и мак.
Lannister 16 сентября 2017

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

Vladim 16 сентября 2017
@Lannister , причём здесь иконки, ))) iOS закрытая ось, все решает Эппл, вот в чем различие.
Seva2006 16 сентября 2017

@CIA_agent , если бы у бабушки был х. то она была бы дедушкой… а вот сони сама упустила свою возможность быть на иос, почему они выбрали Андройд до сих пор не понимаю

lohmatij 16 сентября 2017
@Seva2006 , а можно поподробнее?
VsG 16 сентября 2017
@Seva2006 , вы с макОСью напутали)
anji70 16 сентября 2017
@Seva2006 , А что они должны были выбрать, Windows XP?
VsG 16 сентября 2017

@CIA_agent , Сложно забыть про ЭПЛ, пользуясь АЙОСом. А значит и про айфоны вспоминали бы время от времени

NBoyRu 16 сентября 2017

@CIA_agent , если бы у samsung была ios, они бы накатали на неё гадкий ТачВиз, и всё бы вернулось на круги свои))…

WannaBeYou 16 сентября 2017
@NBoyRu , тачвиз – лучшее что есть. Это признают даже упоротые фаны чистого дроида.
serusschip 17 сентября 2017
@WannaBeYou , уточню – лучшее, что есть у самсунг 😉
WannaBeYou 17 сентября 2017
@serusschip , нет, вообще.
iFilin 16 сентября 2017

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

CIA_agent 16 сентября 2017
@iFilin , грустно что замечательную ОС губят такими идиотскими дизайн-решениями (я про гроб)
iFilin 16 сентября 2017
@CIA_agent , сложно что либо сказать про этот горб, пока нет на руках iPhone X. Поживем-увидим.
CIA_agent 17 сентября 2017

@iFilin , ну я уже посмотрел в симуляторе в xcode (я девелопер) как это все выглядит – если коротко, то ужасно.

tamtam 16 сентября 2017

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

control 16 сентября 2017

@CIA_agent , вот именно, что на Самсунге нет iOS, так что через полтора месяца меняю свой s8 на Х. Тот же самый дизайн + айось = лучший телефон.

pupzem 16 сентября 2017

@control , что именно самое неприемлемое для вас оказалось на самсунге? может, просто времени мало прошло? вопрос без подкола, просто интересно, так как сам год назад перешел на самсунг с айфона, и не вижу каких-то ощутимых отличий или недостатков, правда, привыкнуть по настоящему к андроиду заняло пару месяцев а может и подольше)

control 16 сентября 2017

@pupzem , честно говоря, экосистемы не хватает: синхронизация фото между устройствами, передача файлов на другие айфоны, Эппл тиви и прочее. Большой косяк Самсунга – дисплей выгорел-таки под клавиатурой, я очень сильно разочарован. В остальном телефон тоже нравится, хороший, красивый, камера отличная, но вот не моё в итоге.

Divisor 16 сентября 2017

@CIA_agent , Эппл все делает не “по-человечески”, а по-инопланетному, поэтому они и лидеры рынка смартфонов итд.)

bRiP4 16 сентября 2017

@CIA_agent , Потому что тогда iPhone будет как все телефоны с экраном от края до края. Раньше iPhone узнавали по кнопке Home с TouchID. Сейчас будут по островку.

Roma_K 16 сентября 2017

@bRiP4 , ну а что тогда скромничать..можно и в центр тогда этот горб передвинуть..узнаваемость будет стопроцентная…извините за грубость но…в гробу я видал такую узнаваемость

Slayter 16 сентября 2017

@CIA_agent , если бы они это сделали, то самсунг подал бы на них в суд за копирование дизайна. Если вы не знаете, дизайн без рамок – это патент как бы…
Но все равно мне этот горб противен. Он ужасен.

Veni Vidi Vici 16 сентября 2017

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

Amir 16 сентября 2017

@Veni Vidi Vici , а для чего нужен безрамочный экран? ;). Правильно, чтобы влезало больше контента. Наверху освободили место от статусной строки (уехала к ушам), а внизу “запрещенное” место для интерактивных элементов. Информацию туда выводить можно. Кнопки – нельзя.

Артём Суровцев 16 сентября 2017

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

mrfebr 16 сентября 2017
@Артём Суровцев , и всегда в черном цвете
I-van-ich 16 сентября 2017
@Артём Суровцев , не края, а “уши”. Или Вы это и имели ввиду?
butaka 16 сентября 2017
@Артём Суровцев , а в горизонтальном режиме?
I-van-ich 16 сентября 2017
@butaka , можно в “уши” засунуть элементы управления.
tamtam 16 сентября 2017

@Артём Суровцев , вы предлагаете путь Самсунг, сделать так как все ждут. Apple так никогда не делает.

zaitsevde 16 сентября 2017

Если все программы начнут адаптировать под Х, то что будет с владельцами 7 и 8.
Зная способности наших “рукастых” программеров, то становится страшно!

sshtmm 16 сентября 2017

@zaitsevde , а есть возможность ещё более нелепый вопрос задать? действительно, как же они смогут, ведь нет разницы между 4-8 айфонами, айпадами разными, ну вот никогда не адаптировали, как же справятся

Unexposed 16 сентября 2017

В Питере – пить, на iPhones.ru – ныть. В Apple извернулись и сделали мегакрутой и мегаузнаваемый девайс. Да даже если я просто карандашом на бумаге нарисую за 5 сек такую форму дисплея – все увидят в моих каракулях iPhone, а не очередной китайско-корейскую парашу для любителей говна с алишки. В общем ссу в рот всем, кто обзывает этот божественное дизайнерское решение горбом и считает что без него было бы ЛУДШЕ и вообще “аппле уже не торт”, потому что если до сих пор не поняли, что от вашего нытья и детских обзывков ничего не изменится и всем по сараю на ваше мнение, то есть шанс что уринотерапия поможет.

Vladim 16 сентября 2017
@Unexposed , ты явно из Питера )
ilja007 16 сентября 2017
@Unexposed , и ты явно пидop
I-van-ich 16 сентября 2017

@Unexposed , от Ваших восторгов (или нытья?) тоже ничего не изменится. А теперь закройте экран телевизора или монитора аналогичным по пропорциям островком. Удобно будет? И, кстати, не совсем честной получается диагональ экрана в 5,8″, так-как от экрана кусок отняли, вроде по измерениям диагонали 5,8″, а по площади меньше экранов с такой же диагональю.
..
И да, ссыте себе.

WannaBeYou 16 сентября 2017

@I-van-ich , на площадь влияет при аналогичной диагонали не только островки, но и соотношение сторон. Максимальная площадь при равной диагонали у соотношения 1:1 (квадрат).

I-van-ich 16 сентября 2017

@WannaBeYou , это да, но экран, всё же, с прямыми сторонами и экран с “островком” – разные вещи при прочих равных.

Valdemar.ST 16 сентября 2017
@Unexposed , Тим Кук в глаз попал (с)
acidr 16 сентября 2017

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

sshtmm 16 сентября 2017

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

Y G 16 сентября 2017

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

Fernor 16 сентября 2017

@Y G , На вкус и цвет товарищей нет,я когда впервые увидел его тоже пребывал в непонятном состоянии,но всё же после презентации я понял,что обязательно должен подержать его в руках,ведь это необходимо. Как когда-то это было с моим первым iphone 3gs.
З.ы Если не зайдёт,то всегда есть 8)

shpuntov 16 сентября 2017

@Y G , на мой взгляд, не совсем правильно сравнение с горбом на телевизоре. Если сделать горб на экране от iPhone 6-8 или обычном телевизоре с соотношением 16/9, то да, стремно. Но что сделала Apple? Они грубо говоря взяли экран от iPhone 6-8 и, не меняя ширины, сделали большую прибавку в высоте. Получилось соотношение сторон почти 20/9. И добавили горб. Ну и сделали в 1,5 раза чётче. Ну и OLED. Но это не суть. Суть в том, что на этом экране помешается гораздо больше контента по высоте, даже за вычетом «опасных» зон с горбом и симметрично с другой стороны. То есть, даже если вписать прямоугольник в экран iPhone X, то он будет гораздо больше по высоте, и такой же по ширине, по сравнению с экраном IPhone 6-8. Сравнивать экран Х с plus версией некорректно, так как у plus больше программная ширина (414 против 375). Плюсовая версия с горбом ещё увидит свет.

bRiP4 16 сентября 2017

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

Fernor 16 сентября 2017
@bRiP4 , Да запретили,вроде даже было письмо опубликованное на Айфонс.
AlexeyG 16 сентября 2017

Я любил apple за 3gs, я орал от удовольствия купив себе 5s, у меня был неприятный осадок после покупки 7, но Х, Х это трандец. Мне пол года заливали какая круть отказ от 3.5мм и кнопки home. Сейчас оказалось что псевдо кнопка была чудом на три дня. Сегодня мне вливают что кусок пластика на экране это норма, что разблокировка по отпечатку – устарела.
Сорян, но почти год хожу паралельно 7 и S7. За год не нашел ни одного плюса айфона перед самсой, а очень хотелось. Андроид оказался в разы удобнее в ежедневии – мне не нужны переходники, мне не нужен айтюнс чтоб слить/залить контент на телефон там где нет интернета, у меня полноценный нфц и море других плюшек. Сложность андроида? Да ну, отрубление какихто функционалов в андроиде сделано в разы логичнее и не спрятано в жопе.
Увы, ни сам апарат, ни ось не имеют ничего общего с тем что было. Больше кайфа от 5s когда держу в руках, чем от 7ки.
Островок, отсуствие тачайди, неполноценный функционал и бл*ть опять сраный айтюнс – нет спасибо, в этом году я 1000% не обновлюсь, посмотрим что будет в след. году, но думаю что останусь с 7 и s7 еще как минимум 2 года.

beks 16 сентября 2017

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

Дизайн приложений для iOS: полный иллюстрированный гайд

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

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

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

На сегодняшний день существует полный список соответствия модели iPhone и размера экрана.

Модель

Размер фрейма

Масштабирование при экспорте

14 Pro Max

430 x 932

14 Plus, 13 Pro Max, 12 Pro Max

428 x 926

11 Pro Max, XS Max

414 x 896

11, XR

414 x 896

8+, 7+, 6+, 6S+

414 x 736

14 Pro

393 x 852

14, 13, 13 Pro, 12, 12 Pro

390 x 844

13 Mini, 12 Mini, 11 Pro, X, XS

375 x 812

SE (gen 3), SE (gen 2), 7, 6, 6s

375 x 667

5, 5s, 5c, SE

320 x 568

4, 4s

320 x 480

1, 2, 3

320 x 480

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

Размер фрейма. Это «размер точки» или «@1x» для данного устройства. Настоятельно рекомендуется разрабатывать фреймы такого размера для данного устройства. (Здесь объясняется соотношение точек и пикселей)

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

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

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

Если вы фиксируете данные из аналитики по вашему приложению или веб-сайту, проверяйте эту информацию* на наиболее распространенных размерах экранах телефона.
Если вы разрабатываете приложение для широкой аудитории, используйте общий наиболее популярный размер экрана iPhone: 375×812 pt или 375×667 pt (но поскольку они имеют одинаковую ширину, это не имеет большого значения).
Если вы разрабатываете приложение для аудитории, разбирающейся в технологиях или дизайне, то наиболее популярным размером экрана iPhone, скорее всего, будет более новый 390×844 pt.

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

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

Точки iOS в сравнении с пикселями при дизайне мобильного приложения

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

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

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

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

Строка состояния (Status bar) iOS

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

iPhone 14 Pro и 14 Pro Max содержат более высокую строку состояния, в которой область камеры и сенсора полностью окружена пикселями экрана. Это называется Dynamic Island (динамический остров), поскольку этот элемент может незначительно меняться.

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

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

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

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

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

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

Только начиная с 10-го поколения iPhone (iPhone X и новее) смартфоны iPhone имеют дизайн с выемкой и закругленные углы по краям. Более старые модели iPhone (и все iPad) имеют более короткую и компактную строку состояния.

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

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

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

высота строки состояния: 44 точки
высота первой строки: 44 точки
высота второго ряда: 54 точки
высота третьего ряда: 48 точек

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

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

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

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

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

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

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

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

Панель вкладок (Tab Bar) iOS

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

Отметим несколько моментов, связанных со стилистикой:

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

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

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

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

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

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

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

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

короткое перемещение вверх: переход к диспетчеру задач;
более размашистое движение вверх: переход на домашний экран.

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

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

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

Навигация назад

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

Способы навигации назад

Контекст, в котором он работает

Нажмите кнопку «Назад» в левом верхнем углу экрана

Любой экран, на котором отображается действие «Назад»

Проведите пальцем вправо от левого края экрана

Любой экран, на котором отображается действие «Назад»

Нажмите кнопку «Отмена» или «Готово» в верхней части экрана

Модальные представления

Проведите пальцем вниз по содержимому экрана

Модальные или полноэкранные (например, фотографии, другие медиафайлы) виды

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

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

Поиск в iOS

В приложениях для телефона существует три основные точки входа в поиск:

строка поиска в навигационной панели;
иконка поиска в навигационной панели;
иконка поиска на панели вкладок.

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

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

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

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

Теперь в новых версиях iOS для этого есть идеальный элемент пользовательского интерфейса: модальные окна.

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

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

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

Элементы пользовательского интерфейса и элементы управления

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

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

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

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

Только основной текст (17pt обычным шрифтом)
Первичный текст (17pt обычным шрифтом) с вторичным текстом (15pt обычным шрифтом)
Кастомный макет – например, первичный текст (17pt обычным шрифтом), вторичный текст (15pt обычным шрифтом, но светлее) и третичный текст (15 обычным шрифтом, но светлее).

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

Оформление правой части элемента списка:

Шеврон (направленный вправо). Практически по умолчанию он дает пользователям понять, что они переходят на другой экран
Текст и шеврон. Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет показано здесь
Чекбокс. Позволяет пользователю выбрать один из элементов списка в этой группе (Примечание: не множественный выбор, как веб-списки с чекбоксами)
Переключатель. Позволяет пользователю включить или выключить свойство, к которому относится данный элемент списка.
Текстовые кнопки. Используют системный цвет для ссылки на другую страницу или сценарий. Для обозначения критических действий, например, отключение или удаление чего-либо используйте красный цвет текста.

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

Кнопки в iOS

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

Однако в iOS есть и кнопки на странице.

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

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

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

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

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

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

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

Кнопки выбора даты и/или времени в iOS

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

Нажмите ее, и на месте кнопки появится элемент управления выбором даты (или времени).

Эти элементы управления могут выбирать (a) только время, (b) только дату, (c) и время, и дату, или (d) какое-либо другое пользовательское значение.

Выпадающие меню

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

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

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

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

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

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

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

Тип Элемента

Стиль

Заголовок страницы (без прокрутки)

34pt bold #000

Заголовок страницы (прокрученный)

17pt medium #000

Текст абзаца,

17pt regular #000

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

15pt regular #3C3C43 при 60% непрозрачности

Третичный текст,

13pt regular #3C3C43 при 60% непрозрачности

Кнопки

17pt normal, различные цвета

Надписи на панели действий

10pt regular #8A8A8E

Стилизация текста заголовков в приложениях для iPhone

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

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

Размер: 34pt
Начертание шрифта: полужирное
Цвет: #000
Цвет темного режима: #FFF
Выравнивание: слева

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

Размер: 17pt
насыщенность шрифта: средняя
Цвет: #000
Цвет темного режима: #FFF
Выравнивание: по центру

Стилизация текста по умолчанию в приложениях для iPhone

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

Размер: 17pt
насыщенность шрифта: нормальная
Цвет: #000
Цвет темного режима: #FFF

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

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

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

А текст подсказки в поле поиска – это текст по умолчанию, но более светлого серого цвета.

Стилизация вторичного текста в приложениях для iPhone

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

размер: 15pt
насыщенность шрифта: нормальная
цвет: #3c3c43 при 60% непрозрачности
цвет в темном режиме: #EBEBF5 при 60% непрозрачности

Стилизация третичного текста и надписей в приложениях для iPhone

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

размер: 12pt
насыщенность шрифта: нормальный
цвет: #c3c43 при 60% непрозрачности
цвет темного режима: #EBEBF5 при 60% непрозрачности

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

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

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

размер: 10pt
насыщенность шрифта: нормальный
цвет: #999 (если не выбрано)
цвет темного режима: #757575 (если не выбран)

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

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

Существуют несколько примеров создания иконок для приложения под iOS, и вот один из них по принципу 80/20:

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

Форма иконки iOS Superellipse (AKA Squircle)

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

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

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

Как создать суперэллипс/круг значка Apple в Figma

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

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

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

Размер цели нажатия в iOS

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

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

Как выглядят приложения на айфоне