Что такое гайдлайны и для чего они нужны
2026-02-21 19:39 Diff
https://skillbox.ru/media/design/guidelines/

#статьи

  • 6 апр 2022
  • 0

Что такое гайдлайны и для чего они нужны

Рассказываем про гайдлайны Android и iOS и сравниваем их ключевые рекомендации.

Иллюстрация: Оля Ежак для Skillbox Media

UX/UI- и веб-дизайнер. Делает сложные вещи простыми и пишет об этом.

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

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

Рассказываем про:

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

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

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

Гайдлайны описывают не только принципы UX. Большое внимание в них уделено и UI ― они содержат рекомендации по шрифтам, цветам, вёрстке, анимации. Ведь приложения должны быть не только удобными, но и красивыми ― качественный софт обеспечивает популярность операционной системы.

Собственные инструкции есть у Samsung для Galaxy Edge и у Microsoft для Windows Phone. Мы остановимся на двух главных гайдлайнах для самых популярных операционных систем: Google Material Design System, которым пользуются дизайнеры при разработке приложений для Android, и Apple Human Interface Guidelines для разработчиков под iOS.

Гайдлайн появился в 2014 году, одновременно с выходом ОС Android 5.0. В его основу лёг популярный тогда плоский дизайн, в котором все основные элементы отрисовывались схематичными иконками, в противовес натуралистичному скевоморфному дизайну предыдущих лет. Для создания глубины в Material Design добавили тени, которые показывали, какой элемент главный, а какой ― второстепенный.

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

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

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

О том, что такое скевоморфизм и плоский дизайн, читайте в этой статье.

Human Interface появился в 2013 году, с выходом iOS 7. В основе дизайна по гайдлайну от Apple ― воздушность, лаконичность и отзывчивость к действиям пользователя.

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

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

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

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

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

Material DesignHuman InterfaceЕдиницы измеренияDip (dp), условная единицаPoint (pt), 1/72 дюймаРазмер экрана360×640 dpСтандарта нет, но рекомендовано ориентироваться на самый маленький размер экрана ― 320×568 ptИспользование тенейОсновной компонент для пространственной навигацииПрименяются очень редкоМинимальный размер области для нажатия48×48 dp44×44 ptОсновная навигационная панельСверхуСнизуДополнительная навигационная панельСнизу или «гамбургер»Кнопка «Ещё» (More) внизу или элементы в теле страницыУведомления в приложенииУведомления ― не требуют действий.

Диалоговые окна ― блокируют экран и требуют действия.

Баннеры ― не блокируют экран, но требуют действия

Всплывающие окна с необходимостью ответного действияПереход назадКнопкаСвайп слева направоМеханика управленияКнопкамиЖестами

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

В Android присутствует встроенная панель навигации, которая называется Android Navigation Bar. На ней содержатся кнопки «Назад», «Домой» и «Обзор».

Navigation Bar ― тёмная и светлая темы
Изображение: Material Design

Навигация включает в себя следующие элементы:

  • Заголовок страницы: его рекомендуется выравнивать по центру, а слева можно разместить меню-гамбургер или стрелку «Назад».
  • Меню-гамбургер: важный элемент навигации по сложным приложениям, который принципиально отличает логику взаимодействия приложений на Android от логики взаимодействия с iOS.
  • Меню вкладок: помогает переключаться между однотипными страницами.
  • Контекстные меню: относятся к элементу или целой странице.
  • Поиск: его рекомендуется зафиксировать в верхней части страницы.
Здесь присутствует несколько типов навигации ― меню-гамбургер, поиск, контекстное меню
Изображение: Material Design

В iOS нет стандартного навигационного меню, аналогичного Android Navigation Bar. Поэтому нижняя часть приложения может совпадать с кромкой телефона.

Навигация включает в себя следующие элементы:

  • Заголовок страницы: рекомендуется смещать к левому краю, рядом может быть расположена кнопка «Назад».
  • Панель с основными пунктами меню: рекомендуется располагать в нижней части, она содержит 2–5 вкладок с рекомендованным размером текста в 10 pt. Если все пункты меню не помещаются в нижней панели, то их можно прятать в кнопке «Ещё» (More), тап по которой будет открывать дополнительное окно с пунктами.
  • Дополнительное меню: даёт доступ к дополнительным функциям, которые относятся к определённому пункту меню.
  • Поиск: гайдлайн рекомендует его держать вверху страницы или прятать, показывая по свайпу.

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

Заголовок находится сверху и смещён к левому краю, внизу ― панель вкладок.
Изображение: Apple Human Interface

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

Для отмены действия используется кнопка «Назад» в верхнем меню или «Домой» на панели Android Navigation Bar.

Кнопка «Назад» в верхней части экрана
Изображение: Material Design

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

Кнопка действия ― отправки письма ― расположена в правом верхнем углу
Изображение: Apple Human Interface

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

Гайдлайн рекомендует прикреплять поиск к верхней панели навигации.

  • Тап по строке поиска разворачивает историю поиска. Лупа меняется на стрелку «назад», с помощью которой можно свернуть панель.
  • Справа от строки поиска находится значок голосового ввода. Он меняется на крестик, который стирает текст, если начат текстовый ввод.
Механика работы строки поиска
Изображение: Material Design

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

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

  • Сворачивается поиск кнопкой «Отмена» в правой части строки.
  • Очистка поиска происходит при нажатии на крестик, который появляется в правой части строки в момент начала набора текста.
Строки поиска с кнопками очистки поля и отмены поиска
Изображение: Apple Human Interface

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

Контекстное меню, относящееся ко всей странице
Изображение: Material Design

Внешний вид контекстного меню регламентирован:

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

Альтернативный способ вызова меню ― тап по кнопке или объекту.

Появление контекстного меню по тапу
Изображение: Material Design

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

Контекстное меню, открывающееся по долгому тапу
Изображение: Apple Human Interface
  • Контекстное меню в iOS открывается по долгому нажатию на элемент и предлагает несколько предопределённых вариантов действий с выбранным пунктом.
  • Если какие-то действия недоступны, они просто не отображаются.

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

Читайте советы по проектированию удобных систем от Джефа Раскина, дизайнера интерфейсов Apple, в этом материале.

  • Основную панель вкладок рекомендовано располагать в верхней части экрана.
  • Навигация между вкладками должна осуществляться при помощи табов.
  • Для переключения между табами нужно использовать механику горизонтальных свайпов.
Смена вкладок
Изображение: Material Design

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

Механизм открытия дочерней вкладки поверх материнской
Изображение: Material Design
  • Панель вкладок в Human Interface рекомендовано расположить в нижней части экрана.
  • Она должна быть полупрозрачной и иметь фоновый цвет.
  • При появлении клавиатуры панель скрывается.
  • Не рекомендовано использовать между вкладками горизонтальный скролл: если не все нужные вкладки умещаются в одной панели, можно их спрятать в кнопку «Ещё» (More) в правой части и открывать в отдельном меню.
Панель вкладок
Изображение: Apple Human Interface

Появление дочерней страницы происходит поверх материнской с эффектом Slide In ― она выезжает из правой части экрана влево, а возвращение на материнский экран ― по свайпу вправо с эффектом Slide Out, скольжения справа налево.

В системе для иконок используются два размера: 48×48 dp для домашнего экрана и Play Market, а также 24×24 dp ― размер для папок и системных разделов. Уменьшение иконок происходит автоматически.

  • Иконка приложения должна быть 32-битной, в формате PNG с прозрачным фоном.
  • Размер иконки ― 48×48 dp: это соответствует размеру 48×48 рх для экранов с разрешением 160 dpi и 192×192 для разрешения 640 dpi. Гайдлайн рекомендует просматривать и редактировать иконку в размере 192×192 рх.
  • Иконка должна быть квадратной с прямыми углами и без подложек: в системе иконки имеют скруглённые углы и отбрасывают тени, но оба этих эффекта создаются системой автоматически.
  • Обязательное требование к иконке ― внутренние поля в 1 dp, которые нужно закладывать при проектировании.
Разница между иконками для минимального и максимального разрешений экрана
Изображение: Material Design

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

  • 1024×1024 px в магазине приложений App Store;
  • 180×180 px на рабочем столе;
  • 120×120 px в результатах поиска приложения в Spotlight;
  • 87×87 px в настройках;
  • 114×114 px в уведомлениях.

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

Читайте историю Сьюзен Кэр ― автора первых иконок для Apple в нашей статье.

Требования к иконкам:

  • иконка должна иметь непрозрачный фон и быть сохранена в формате PNG без надписей, наложений и рамок;
  • форма ― квадрат; иконки имеют скруглённые углы, но система генерирует их автоматически;
  • система использует однопиксельные поля вокруг иконки, но рисовать их не нужно ― они также создаются автоматически.
Разница между минимальным отображаемым размером иконки в оповещениях и максимальным на рабочем столе
Изображение: Apple Human Interface

Системный шрифт в Android ― Roboto. Альтернативный ему шрифт ― Noto, он предназначен для тех языков в приложениях Chrome и Android, которые не поддерживают основной шрифт. Google не ограничивает разработчика в использовании шрифта, предлагая собственные рекомендации по выбору гарнитур для заголовков и подписей.

Шрифты Roboto и Noto
Изображение: Material Design

Системный шрифт в iOS ― гротеск San Francisco, его дополняет шрифт с засечками New York. Оба шрифта поддерживают более ста языков и имеют довольно большой набор начертаний, поэтому гайдлайн рекомендует использовать в дизайне системные шрифты.

Шрифты San Francisco и New York
Изображение: Apple Human Interface

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

Apple Human Interface Guidelines даёт довольно широкие возможности для творчества ― чаще всего он не регламентирует, а просто рекомендует соблюдать некоторые правила. Так что при разработке можно взять за основу Google Material Design System и проследить, чтобы основные навигационные элементы не противоречили логике взаимодействия пользователя с iOS. И лучше не использовать специфических элементов, привычных пользователям только одной из платформ.

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

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