Human interface guidelines: Themes — macOS — Human Interface Guidelines

10 идей из Human Interface Design Guidelines от Apple / Блог компании SkillFactory / Хабр

Последние несколько месяцев я разрабатывал приложение для IOS и постоянно обращался к Human Interface Design Guidelines от Apple. Я считаю это руководство обязательным для прочтения любым начинающим или нынешним дизайнером UI/UX.

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

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

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

1. Протестируйте цветовую гамму вашего приложения в различных условиях освещения

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

Прекрасный пример – это

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

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

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

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

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

2. Максимально откладывайте авторизацию

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

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

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

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

3. Соблюдайте режим отображения, который люди выбрали в настройках

«Если вы предлагаете специальный режим внешнего вида приложения, вы добавляете людям работы, потому что им придется настроить несколько параметров. Хуже того, они могут подумать, что ваше приложение сломано, потому что оно не реагирует на их системный выбор внешнего вида».
— Руководство по работе с темной темой от Apple

4. Показывайте контент как можно скорее

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

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

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

5. Пользуйтесь системными цветами для текста, заливками, символами и разделителями

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

«Не используйте системные значения цветов с зафиксированным кодом в вашем приложении. Представленные значения цветов предназначены для справки в процессе проектирования вашего приложения. Фактические значения цвета могут меняться от выпуска к выпуску, основываясь на различных переменных окружающей среды. Всегда используйте API для применения системных цветов; руководство для разработчиков см. в UIColor».
— Рекомендации по цвету Apple

«SF Symbols предоставляет набор из более чем 1500 единообразных, хорошо настраиваемых символов, которые вы можете использовать в вашем приложении. Символы SF, разработанные Apple, легко интегрируются с системным шрифтом San Francisco, поэтому символы автоматически обеспечивают визуальное выравнивание по вертикали с текстом для всех весов и размеров. Вы можете использовать SF-символы в приложениях под управлением iOS 13 и более поздних версий, WatchOS 6 и более поздних версий и tvOS 13 и более поздних версий».
— Символы Apple SF

Если вы хотите узнать, как можно использовать SF-символы, вот видео.

6. Используйте знакомые, понятные слова и фразы

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

«Стремитесь к неформальному, дружескому тону. Неформальный и доступный стиль напоминает то, как вы разговариваете за обедом. Иногда используйте сокращения, и местоимения „вы“ и „ваше“, обращайтесь непосредственно к пользователю».
— Руководство по терминологии от Apple

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

7. Предусматривайте потребность в помощи

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

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

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

8. При необходимости помогайте людям избежать потери информации

«Независимо от того, используют ли люди жест отмены или кнопку, чтобы закрыть экран, если действие может привести к потере пользовательского контента, представьте план действий, который объяснит ситуацию и даст людям способы ее решения».
— Руководство по общим принципам от Apple

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

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

9. Используйте стандартные жесты в большинстве случаев

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

10. Не включайте чувствительную, личную или конфиденциальную информацию в уведомление

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

Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:

Полезное

Apple Human Interface Guidelines От идеи к приложению

Продолжаю знакомить вас с прекрасным Human Interface Guidelines. Сегодня глава ’From concept to product’ о том как придумать и спроектировать приложение.

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

Ниже алгоритм создания описания от Apple.

1. Перечислите все функции которые могут потребоваться пользователям

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

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

2. Опишите аудиторию вашего приложения

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

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

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

И никаких, популярных в русском UX-сообществе, персонажей. Одно предложение, три фразы.

3. Выберите нужный аудитории функционал

Оставьте 2-3 функции. Превосходные iOS приложения всегда концентрируются на чем-то одном.

В нашем примере, остаются три функции:
— создание списков;
— купоны на списки;
— получение рецептов.

Краткое описание приложения: «Список покупок для экономных людей которые любят готовить».

Изумительно, что начиная с идеи «Список покупок», меняя аудиторию может получиться Омни фокус или Купи батон.

 

4. Используйте краткое описание в проектировании и разработке

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

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

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

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

Прототипируйте и разрабатывайте итерационно

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

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

Самый простой путь создать эффективный прототип — Xcode storyboard. Storyboard это схема всех экранов приложения с переходами между ними. Создайте базовое приложение, наполните реалистичным контентом, залейте на устройство и тестируйте. Придется привлечь разработчика.

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

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

Если вам все же нравятся бумажные прототипы воспользуйтесь POP. Сфотографируйте зарисовки на iPhone и выделите кнопки. Получится прототип на смартфоне с рабочей навигацией.

И напоследок по теме: как сделать нужное пользователям приложение в айСоветах и видео о процессе проектирования в SoftFacade.

Справочник по дизайну приложений для iPhone и iPad (iOS)

Всем кто решит заниматься дизайном iOS приложений, в первую очередь, следует ознакомиться с Apple HIG (Apple HIG на русском – в заметке)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Peek:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UIKit User Interface Catalog Элементы iOS интерфейса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Apple Human Interface Guidelines — Оповещения

«Разрешите кнопке» Домой » отменить оповещения. Нажатие кнопки Home при появлении предупреждения приводит к выходу из приложения. Это также должно произвести тот же эффект, что и нажатие кнопки отмены-то есть предупреждение будет отклонено без выполнения каких-либо действий. Если в вашем предупреждении нет кнопки отмены, подумайте о реализации действия отмены в коде, которое выполняется при нажатии кнопки Домой.»

Как это влияет на поведение кнопки «Домой»?

Даже встроенные приложения этого не делают.

https://developer.apple.com/ios/ человеческий интерфейс-guidelines/ui-views/alerts/

optional func applicationWillResignActive(_ application: UIApplication)
optional func applicationDidEnterBackground(_ application: UIApplication)
optional func applicationWillTerminate(_ application: UIApplication)