Ios значок: System Icons — Icons and Images — iOS — Human Interface Guidelines

Вместе с 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 дизайнерами компании Викторией Шишкиной, Ксенией Валякиной и Анастасией Овсянниковой

Как добавить символ Apple () в текст на iPhone и iPad [инструкция]

На презентации 9 сентября многих поклонников «яблочной» продукции ждала большая неожиданность – вместо «iWatch» были показаны часы Apple Watch. Как мы выяснили, в Купертино решили отказаться от легендарной буквы в названии, заменив ее на название бренда –  Pay,  Watch. На Mac добавить фирменный знак американской корпорации не составляет труда, но как быть с iPhone и iPad?

На Mac есть специальный шорткат для вставки в тексты логотипа Apple – Option + Shift + K. Однако значок Apple так же легко можно добавлять и на iOS-устройствах. Для этого достаточно лишь создать соответствующее клавиатурное сокращение.

Как добавить знак Apple () в текст на iPhone и iPad:

Шаг 1: Откройте стандартную почту Mail на Mac.

Шаг 2: Создайте новое письмо и вставьте в текст значок яблока (). Для этого пригодится шорткат Option + Shift + K. Отправьте письмо на свой ящик.

Шаг 3: На iPhone или iPad откройте почту и найдите письмо с «» (если под рукой нет Mac, можно просто открыть этот пост на iPhone).

Шаг 4: Скопируйте значок Apple в буфер обмена.

Шаг 5: Откройте приложение Настройки на iPhone или iPad и зайдите в меню «Основные» > «Клавиатура» > «Сокращения».

Шаг 6: Нажмите «Новое сокращение» и вставьте значок из буфера обмена. Осталось только задать набор букв, который будет автоматически заменяться на символ Apple (например, «aapl»).

Теперь можно легко вставлять значок в текст, используя клавиатурное сокращение «aapl». Следует помнить, однако, что символ Apple будет отображаться только на «яблочных» устройствах – iPhone, iPad, Mac.

Как вставить символ  в тексте на iOS

Девятого сентября Apple сделала небольшой ребрендинг в названиях своих новых продуктов. Часы, презентацию которых уже все давно заждались, назвали не iWatch, как предполагалось ранее, а просто Watch (Apple Watch), избавившись от буквы «i» перед словом. Та же участь постигла и iPay, где место первой буквы занял логотип компании с надкушенным яблоком. Вполне вероятно, это вскоре затронет и оставшиеся продукты компании, а поэтому, дабы не отставать от тренда и писать название продуктов корпорации из Купертино правильно, посмотрим, каким образом это можно сделать прежде всего на OS X и iOS.

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

Для тех же, кто присоединился к нам не так давно, поясню: чтобы вставить логотип с яблоком, достаточно нажать комбинацию из трех кнопок Option+Shift+K. Таким образом в тексте появится искомое изображение. Сочетание работает в английской раскладке клавиатуры, поэтому обращайте на это внимание.

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

Способ 1

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

1) Открываем приложение Mail на OS X и пишем себе самому письмо, в тело которого вставим символ с логотипом Apple.
2) Отправляем письмо из Mail.app на OS X и при получении открываем на iOS.

3) Далее, как вы уже, наверное, догадались, копируем из тела письма присланный нами символ.
4) Переходим в Настройки – Основные – Клавиатура – Новое сокращение…
5) В открывшемся меню, в поле «Фраза» вставляем скопированный из почты символ, а для поля «Сокращение» вводим любые символы, которые будут вам удобны. Я добавил «1apl».

6) Нажмите «Сохранить» в правом верхнем углу экрана.

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

Способ 2

Этот способ гораздо проще, нежели первый. Однако главным условием для него является наличие у вас компьютера с операционной системой OS X и настроенной учетной записью с вашим Apple ID. К сожалению, повторить на iOS 8 Beta3 и OS X Yosemite DP3 не удалось, но я точно помню, что на актуальных версиях ОС это работало.

1) Заходим в Системные настройки – Клавиатура – Текст.
2) Здесь мы уже видим несколько стандартных сокращений, поэтому все, что нам требуется, это добавить новое. Нажмите на значок «+» в нижней левой части экрана.
3) В поле «Заменить» впишите комбинацию, которая будет вам удобна. Для меня это «1apl».
4) В поле «Заменить на» нажмите сочетание клавиш Option+Shift+K, чтобы вставить символ с яблоком.
5) Закройте настройки и подождите немного для синхронизации их с вашей учетной записью на iOS. Через некоторое время вы заметите, что при наборе заданной на OS X комбинации, на iOS происходит точно такая же замена вашего сокращения на значок.

Обратите внимание, что на ОС Windows в стандартных шрифтах этот значок не отображается, поэтому вы не сможете его увидеть. Хотя, если у вас Windows, думаю, вы и не захотите использовать этот значок в переписке. Или нет? Делитесь мнением в комментариях!

MacBug программирование под OS X, iOS Xcode Apple, Apple, Xcode developer

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

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

Все размеры указаны в пикселях.

В качестве:	iPhone 6 Plus (@3x)	iPhone 6 и iPhone 5 (@2x)	iPhone 4s (@2x)	iPad и iPad mini (@2x)	iPad 2 and iPad mini (@1x)
Иконка приложения (AppIcon требуется для всех приложений)	180 x 180	120 x 120	120 x 120	152 x 152	76 x 76
Изображение иконки для App Store (требуется для всех приложений)	1024 x 1024	1024 x 1024	1024 x 1024	1024 x 1024	1024 x 1024
Загрузочный файл или изображение (требуется для всех приложений)	Используйте загрузочный файл	Для iPhone 6 исп. загр. файл, для iPhone 5, 640 x 1136	640 x 960	1536 x 2048 (портретная) 2048 x 1536 (горизонтальная)	768 x 1024 (портретная) 1024 x 768 (горизонтальная)
Иконка результата Spotlight поиска (рекомендуется)	120 x 120	80 x 80	80 x 80	80 x 80	40 x 40
Иконка для меню установок (рекомендуется)	87 x 87	58 x 58	58 x 58	58 x 58	29 x 29
Иконки для Toolbar и Navigation bar (необязательно)	Около 66 x 66	Около 44 x 44	Около 44 x 44	Около 44 x 44	Около 22 х 22
Tab bar (необязательно)	Около 75 x 75 (максимум: 144 x 96)	Около 50 x 50 (максимум: 96 x 64)	Около 50 x 50 (максимум: 96 x 64)	Около 50 x 50 (максимум: 96 x 64)	Около 25 x 25 (максимум: 48 x 32)
Иконки обертки для приложения Газетного киоска	По крайней мере, 1024 пикселей по длинного края	По крайней мере, 1024 пикселей по длинного края	По крайней мере, 1024 пикселей по длинного края	По крайней мере, 1024 пикселей по длинного края	По крайней мере, 512 пикселей по длинного края
Web clip иконка (рекомендуется для веб-приложений и веб-сайтов	180 x 180	120 x 120	120 x 120	152 x 152	76 x 76

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

Стандартная глубина бит для иконок и изображений составляет 24 бита, то есть 8 бит для красного, зеленого и синего плюс 8-бит для альфа канала, что в общей сложности составляет 32 бита (PNG32).

  Значок приложения

— Значки и изображения — iOS — Руководство по интерфейсу пользователя

App Icon

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

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

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

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

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

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

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

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

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

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

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

Атрибуты Иконки Приложения

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

Размеры значков приложений

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

Устройство или контекст	Размер иконы
iPhone	180px × 180px (60pt × 60pt @ 3x)
	120px × 120px (60pt × 60pt @ 2x)
iPad Pro	167 пикселей × 167 пикселей (83.5pt × 83,5pt @ 2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @ 2x)
App Store	1024px × 1024px (1024pt × 1024pt @ 1x)

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

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

Spotlight, настройки и значки уведомлений

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

Устройство	Размер значка Spotlight
iPhone	120px × 120px (40pt × 40pt @ 3x)
	80px × 80px (40pt × 40pt @ 2x)
iPad Pro, iPad, iPad mini	80px × 80px (40pt × 40pt @ 2x)

Устройство	Размер значка настроек
iPhone	87px × 87px (29pt × 29pt @ 3x)
	58px × 58px (29pt × 29pt @ 2x)
iPad Pro, iPad, iPad mini	58px × 58px (29pt × 29pt @ 2x)

Устройство	Размер значка уведомления
iPhone	60px × 60px (20pt × 20pt @ 3x)
	40px × 40px (20pt × 20pt @ 2x)
iPad Pro, iPad, iPad mini	40px × 40px (20pt × 20pt @ 2x)

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

СОВЕТ Если ваше приложение создает пользовательские документы, вам не нужно создавать значки документов, потому что iOS использует значок приложения для автоматического создания значков документов.

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

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

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

Руководство разработчика см. В методе setAlternateIconName приложения UIA.

,

иконок Ios — 43 бесплатных векторных иконок

Представляем Коллекции

Коллекции

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

Добавить значки

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

Вид списка

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

Создать коллекцию

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

Активная коллекция

Это ваша активная коллекция.Коллекция может содержать до 256 значков, если вы являетесь зарегистрированным пользователем, или 50, если вы не зарегистрированы.

Варианты сбора

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

SVG Загрузить

Перетащите SVG-файлы в активную коллекцию, чтобы загрузить свои собственные значки.Для бесплатных пользователей существует ограничение в 3 иконки на коллекцию.

Полноэкранный режим

Недостаточно места? Теперь вы можете просматривать свои коллекции в полноэкранном режиме, чтобы вам было проще.

Удалить

Вы закончили с этой коллекцией? Удалите его и создайте новый здесь.

Наслаждайтесь!

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

Благодарим Вас за использование Flaticon, мы надеемся, что вам понравится наш сервис

× Закрыть

,

Системные значки — значки и изображения — iOS — Руководство по интерфейсу пользователя

Системные значки (iOS 12 и более ранние версии)

В iOS 13 или более поздней версии предпочитайте использовать символы SF для представления задач и типов контента в вашем приложении. Если ваше приложение работает в iOS 12 или более ранней версии, следуйте приведенным ниже инструкциям.

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

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

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

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

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

Значки панели навигации и панели инструментов

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

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

Icon	Наименование	Значение	API
	Акция (Поделиться)	Показывает модальное представление, содержащее расширения общего доступа, расширения действий и задачи, такие как Копировать, Избранное или Найти, которые полезны в текущем контексте.	экшн
	Добавить	Создает новый предмет.	добавить
	Закладки	Показывает закладки для конкретного приложения.	закладок
	Камера	Снимает фото или видео или показывает библиотеку фотографий.	камера
Отмена	Отмена	Закрывает текущий вид или завершает режим редактирования без сохранения изменений.	отменить
	Составить	Открывает новый вид в режиме редактирования.	сочинять
Готово	Готово	Сохраняет состояние и закрывает текущий вид или выходит из режима редактирования.	сделано
Редактировать	Редактировать	Вход в режим редактирования в текущем контексте.	редактировать
	Fast Forward	Перемотка вперед при воспроизведении мультимедиа или слайдах.	fastForward
	Организовать	Перемещает элемент в новое место назначения, например в папку.	организовать
	Пауза	Приостановка воспроизведения мультимедиа или слайдов.Всегда сохраняйте текущее местоположение во время паузы, чтобы возобновить воспроизведение позже.	пауза
	Играть	Начинает или возобновляет воспроизведение мультимедиа или слайдов.	играть
Повтор	Повтор	Возвращает последнее действие, которое было отменено.	повторить
	Обновить	Обновляет содержимое. Используйте этот значок экономно, так как ваше приложение должно обновлять контент автоматически, когда это возможно.	обновить
	Ответить	Отправляет или направляет элемент другому лицу или месту.	ответ
	Перемотка	Перемещение назад при воспроизведении мультимедиа или слайдах.	перемотка
Сохранить	Сохранить	Сохраняет текущее состояние.	сохранить
	Поиск	Отображает поле поиска.	поиск
	Стоп	Останавливает воспроизведение мультимедиа или слайды.	остановка
	Мусор	Удаляет текущий или выбранный элемент.	мусор
Отменить	Отменить	Отменяет последнее действие.	отменить

Значки панели вкладок

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

Home Screen Quick Action Иконки

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

,

популярных иконок для iOS

Популярные иконки iOS

Общие действия

Добавить закладку

+ Коллекция

Закладка

+ Коллекция

Закладка

+ Коллекция

Соединить

+ Коллекция

Удалить

Закладка

+ Коллекция

+ Коллекция

+ Коллекция

Скачать из облака

+ Коллекция

Редактировать

+ Коллекция

Избранное

+ Коллекция

Нет синхронизации

+ Коллекция

00

+ Коллекция

+ Коллекция Обновить

+ Коллекция

Удалить Закладка

+ Коллекция

Перезагрузка

+ Коллекция

Поиск

+ Коллекция

Поделиться

+ Коллекция

Поделиться 3 9000 000

Поделиться 3 9000 600000 Syn chronize

+ Collection

Trash

+ Collection

Trash Can

+ Collection

Undelete

+ Collection

Загрузить в Cloud

+ Collection

Documents и Folder

+ Коллекция

Файл

+ Коллекция

Папка

+ Коллекция

Папка

+ Коллекция

Файл изображения

+ Коллекция

9016

Открытая папка

Открытая папка

+ Коллекция

Настройки

Головоломка

+ Коллекция

Сервисы

+ Коллекция

Настройки

+ Коллекция

Поддержка

+ Коллекция

bo

Социальные медиа Коллекция 90 006

Dribbble

+ Коллекция

Facebook

+ Коллекция

Facebook Старая

+ Коллекция

Google Plus

+ Коллекция

Instagram

+ Коллекция

+ Коллекция

Коллекция

LinkedIn

+ Коллекция

MySpace

+ Коллекция

Myspace 3

+ Коллекция

Myspace App

+ Коллекция

Pinterest

000000 Коллекция

StumbleUpon

+ Коллекция

трут

+ Коллекция

Tumblr

+ Коллекция

Tumblr

+ Коллекция

Twitter

+ Коллекция

Статус

Отмена

90 005 + Коллекция

Проверено

+ Collection

Часы

+ Коллекция

Замок

+ Коллекция

Замок

+ Коллекция

Tick Box

+ Коллекция

Недоступен

+ Коллекция

Сайт Разделы

О

+ Коллекция

Коробка

+ Коллекция

Портфель

+ Коллекция

Контакты

+ Коллекция

Внешняя ссылка

,

No related posts.