Apple human interface guide

10 идей из Human Interface Design Guidelines от Apple

Заслуживающие внимания рекомендации из гайдлайнов по iOS

Последние несколько месяцев я разрабатывал приложение для 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:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iPhone Layout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация

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

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

«Назад»

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

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

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

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

Поиск

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Темная тема

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

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

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

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

Ресурсы

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

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

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

Шаблон дизайна iPhone 11

Этот файл Sketch (который вы также можете открыть в Figma) включает артборд iPhone 11 с (а) линейками для выделения общих участков экрана, (б) маской с «челкой» и закругленными углами и (в) строкой состояния, которую легкой перекрасить. Скачав его, откройте в Sketch и выберите File > Save as Template для быстрого доступа.

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

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

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

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

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

Подводя итог

Я что-то упустил? В чем-то ошибся? Напишите мне [email protected] . Я буду обновлять это руководство для повышения его точности и читабельности.

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

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

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

Источник