Гайдлайн по iOS на русском. Часть 68 — Контролы: Кнопки
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Система предлагает широкий спектр стилей для кнопок с возможностью их кастомизации с разными состояниями, поддержкой доступности и изменением внешнего вида. Кроме того, существует несколько системных типов кнопок, таких как кнопки-переключатели (кнопка-тогл), всплывающие (попап кнопка) и раскрывающиеся (выдвижная кнопка) что-то, которые имеют свои юзкейсы.
Системные кнопки
У системы есть 4 стиля кнопок, каждый из которых доступен в 3 размерах. У каждого стиля разный уровень акцента, что поможет дизайнеру задать иерархию действий в приложении.
Можно настроить системную кнопку по стилю и размеру как угодно. По умолчанию системная кнопка использует радиус угла и цвет оттенка приложения. При необходимости можно изменить эти атрибуты.
Контент кнопки должен помогать людям мгновенно понять, что делает кнопка. Вы можете использовать иконку, текст или и то, и другое, чтобы сообщить о назначении кнопки. Если иконка имеет смысл, то рассмотрите возможность использования SF symbols. Короткий текст в кнопке должен описывать, что делает кнопка. Первая буква должна быть заглавной в тексте и начинаться с глагола, чтобы передать действие кнопки — например, кнопка, которая позволяет людям добавлять товары в корзину, может быть с текстом “Добавить в корзину”.
Добавьте подзаголовок, если он содержит полезные сведения. Помимо текста, у кнопки может быть подзаголовок. Поскольку в подзаголовке используется меньший размер текста, чем в заголовке, он хорошо работает для передачи вторичной информации, связанной с действием кнопки. Например, можно добавить подзаголовок указав кол-во товаров под текстом кнопки “Добавить в корзину”, чтобы подробнее объяснить, что делает кнопка.
Можете учитывать и, соответственно, настроить кнопку для отображения индикатора активности, когда нужно показать обратную связь после действия, которое не выполняется мгновенно. Отображение индикатора активности внутри кнопки может сэкономить место в интерфейсе, при этом четко сообщая причину задержки. Если это поможет прояснить происходящее, можете настроить кнопку так, чтобы рядом с индикатором активности отображался другой текст. Например, надпись “Оформить заказ” может измениться на “Оформляется…”, пока виден индикатор активности. Когда юзер нажмет на кнопку, то система покажет индикатор активности с нужным вам текстом.
Используйте кнопку типа “Filled” для наиболее приоритетного действия. Стиль “filled” является наиболее заметным, поэтому помогает юзеру быстро определиться с действием, которое он хочет совершить. В то же время не злоупотребляйте большим кол-вом таких кнопок на экране. Много кнопок может увеличить когнитивную нагрузку, потому что люди должны будт тратить время на сравнение нескольких опций, прежде чем сделать выбор.
Используйте стиль, а не размер, чтобы визуально выделить приоритетный выбор из множества вариантов. Когда используете кнопки одинакового размера для предложения 2 или более действий, вы сообщаете юзеру, что эти варианты образуют согласованный набор. Если хотите выделить предпочтительный или наиболее вероятный вариант в наборе, используйте более заметный стиль кнопок для этого варианта и менее заметный стиль для остальных.
Системная кнопка также может иметь роль, которая определяет семантическое значение кнопки в приложении. Кнопка может выполнять одну из следующих ролей:
- Обычная (Normal), без особого смысла**.**
- Основная/Главная (Primary). Кнопка является по умолчанию, то есть кнопкой, которую люди скорее всего выберут.
- Отмена (Cancel). Кнопка отменяет текущее действие.
- Деструктивная/Опасная (Destructive). Кнопка выполняет действие, которое может привести к удалению данных.
Роль кнопки может оказывать дополнительное влияние на внешний вид. Например, система использует полужирный текст для текста Primary кнопки, в то время как деструктивная кнопка имеет красный цвет.
Назначай Primary роль кнопке, которую люди, скорее всего, выберут. Primary кнопка должна реагировать на клавишу Return, чтобы можно было быстро подтвердить выбор. Когда кнопка находится во временном вью — например на листе, в режиме редактирования или открылось какое-то предупреждение, — назначая кнопке Primary роль значит, что юзер может закрыть его, когда нажмет клавишу Return. Это удобно.
Не назначай Primary роль кнопке, которая выполняет деструктивное действие, даже если это действие является наиболее вероятным выбором. Из-за визуальной заметности люди иногда выбирают Primary кнопку, не прочитав сначала текст. Чтобы люди не теряли данные, назначай Primary роль на кнопки без деструктивных действий.
Кнопки-переключатели (кнопка-тогл)
Кнопка-переключатель — это тип системной кнопки, которая переключается между двумя состояниями: включение и выключение или отображение и скрытие. Чтобы различать эти состояния, у кнопки-переключателя два визуальных стиля. Например, у приложения Календарь 2 состояния (с заливкой и без) для кнопки-переключатель, которая показывает и скрывает события дня на экране (или можно сказать на вью) месяца.
📌 От автора: Далее я буду называть этот тип кнопки: кнопка-тогл.
📌 Кнопка-тогл аналогична по функции свитчеру, но вы можете использовать кнопку-тогл и вне списка или таблицы, и вам не нужно указывать текст (свитчеру нужен текст всегда), объясняющий ее назначение.
Используйте кнопку-тогл, чтобы дать юзерам возможность управлять состоянием контента или вью. Помимо сценария для изменения состояния чего-либо, люди ожидают, что кнопка-тогл будет указывать (как индикация) на то, что сейчас выбрано. Если же вам нужно использовать контрол для каких-то действий, помимо управлением состояния, то используйте системную кнопку или другой тип кнопок, например всплывающую или раскрывающуюся кнопку.
Избегай цвета, как единственный визуальный прием для передачи состояния кнопки-тогла. По умолчанию кнопка-тогл использует цвет приложения, чтобы показать, что оно включено, и другой цвет (например серый), чтобы показать, что оно выключено. Если вы кастомизируете кнопку-тогл, то убедитесь, что все юзеры смогут воспринимать визуальные отличия в состояниях кнопки. Например, в дополнение к использованию высококонтрастных цветов можно добавить изменение формы заливки или изменить контент кнопки (иконку и т.д).
Всплывающие кнопки (попап кноки)
Всплывающая кнопка — тип системной кнопки, которая отображает выпадающее меню с опциями. После того, как люди выберут элемент из меню, меню закроется, и кнопка сможет обновить контент вью.
Используйте попап кнопку, чтобы показать плоский список взаимоисключающих опций или состояний. Попап кнопка помогает людям сделать выбор, который влияет на контент или внешний вид вьюшки. Если же вам нужно дать юзеру список действий с возможностью выбирать несколько элементов или просто отобразить подменю, то используйте выдвижную кнопку.
Показывай полезный выбор по умолчанию. Попап кнопка всегда должна отображать текущий выбор, но если люди еще не сделали выбор, то она отображает указанный вами элемент по умолчанию. Поэтому когда возможно, выберите по умолчанию элемент, который, скорее всего, понадобится большинству людей. Например, в той же музыке можно делать выбор у сортировки по умолчанию в алфавитном порядке. Если же это интернет-магазин, то можно по умолчанию у попап кнопки “Сортировка” выставить опцию “Популярное” и т.д.
Если нужно сэкономить пространство, то рассмотри возможность использования попап кнопки, или когда не нужно постоянно отображать все параметры. Можно подумать, что сегмент контрол также имеет набор опций, он обычно требует больше места, чем попап кнопка.
Раскрывающиеся кнопки (Выдвижные кнопки)
Раскрывающаяся кнопка — тип системной кнопки, которая может отображать меню из каких-либо элементов или действий, непосредственно связанных с назначением кнопки. После того, как люди выберут пункт в меню, меню закроется, и ваше приложение выполнит выбранное действие. Люди также могут закрыть меню, не выбирая опции, нажав в любом другом месте на экране. В отличие от попап кнопки, выдвижная кнопка всегда отображает один и тот же контент, независимо от выбранного юзером пункта меню.
📌 Вы также можете дать людям открыть выдвижное меню, выполнив определенный жест на кнопке. Например, в iOS 14 и более поздних версиях Safari реагирует на жест касания и удержания на кнопке Вкладки, отображая меню действий, связанных с вкладками, таких как Новая вкладка и Закрытие всех вкладок.
Используйте выдвижную кнопку, чтобы показать элементы, непосредственно связанные с действием кнопки. Меню позволяет помочь людям понять назначение кнопки или кастомизировать поведение вью, не требуя дополнительных кнопок в интерфейсе. Например:
- Кнопка “Добавить” может отображать меню, позволяющее юзерам выбрать элемент, который они хотят добавить.
- Кнопка сортировки может иметь меню, позволяющее юзерам выбирать атрибут для сортировки.
- Кнопка “Назад” может позволить людям выбирать место для повторного посещения вместо открытия каждого отдельного предыдущего экрана по иерархии.
Избегайте размещения всех действий вью в одной выдвижной кнопке. Основные действия вью должны быть легко доступны, поэтому вы не должны скрывать их в под выдвижную кнопку. Добавление большого количества действий в выдвижную кнопку делает ее менее полезной и означает, что людям приходится нажимать по крайней мере дважды, чтобы что-то сделать.
Рассмотрите возможность размещения выдвижной кнопки “Больше” (в приложениях часто отобржается как 3 точки: вертикальные/горизонтальные) для отображения элементов, которым не требуется занимать видное место в интерфейсе. Кнопка “Больше” дает возможность расположить в меню ряд элементов, если для них ограничено пространство в интерфейсе, но из-за ее слабой видимости она может быть плохо заметна. Хотя люди обычно понимают, что кнопка “Больше” предлагает дополнительные функции, связанные с текущим контекстом, символ многоточия не помогает им заранее угадать ее контент. Чтобы создать заметную кнопку, подумайте о размере и ее доступности, чтобы найти визуальный баланс, который будет работать в приложении.
Показывайте людям какой пункт в меню является деструктивным, и проси юзера подтвердить выбор. В меню используется красный текст для выделения действий, которые потенциально деструктивны. Когда люди выбирают деструктивное действие, система отображает лист со списком действий (iOS) или всплывающее окно (iPadOS), в котором юзеры могут подтвердить свой выбор или отменить действие. Поскольку лист действий отображается в другом месте меню и требует намеренных осознанных действий, он может помочь людям избежать потери данных по ошибке.
Используйте разделители для визуальной группировки связанных элементов в меню раскрывающейся кнопки. Создание визуальных группировок может помочь людям быстрее сканировать меню. Например, кнопка “Больше” в приложении “Файлы” использует разделители, чтобы помочь пользователям отличать действия, влияющие на содержимое, от элементов, связанных с видом и сортировкой. Использование более трех групп в меню может затруднить сканирование.
Внедри иконку в пункт меню, когда это имеет значение. Если вам нужно уточнить значение элемента, вы можете отобразить иконку или картинку после его названия. Использование какого-то символа SF для этой цели может помочь вам обеспечить понятный опыт, гарантируя при этом, что символ остается консистентным визуально с текстом в любом масштабе.
Делай краткое название меню, если оно имеет смысл. В общем, контент внутри выдвижной кнопки в сочетании с понятными пунктами меню обеспечивает весь необходимый контекст.
Рассмотрите возможность использования подменю, если это упростит понимание и использование главного меню. Подменю — это пункт меню, который открывает свое собственное меню, когда люди выбирают его. После того, как люди выбирают пункт в подменю, подменю закрывается, а главное меню остается открытым. Группировка тесно связанных элементов в подменю может сократить главное меню и упростить сканирование, хотя для доступа к элементам требуется дополнительное взаимодействие. Если вам нужно использовать подменю, обязательно дайте ему название или иконку, который четко идентифицирует его элементы, чтобы людям не приходилось открывать его, чтобы узнать, что в нем содержится.
Кнопки Закрытия
Кнопка “Закрыть” закрывает родительское вью. Кнопки закрытия отображаются в верхнем углу листа или во вью в коллекции.
Внутри вью укажите либо кнопку “Закрыть”, либо кнопку “Готово” — не указывайте и то, и другое. Кнопки “Закрыть” и “Готово” закрывают вьюшку, но поскольку они не являются противоположными действиями, показ сразу двух кнопок путает юзера. Как правило, используйте кнопку “готово”, когда пользователи могут вносить изменения в вью — в этом случае вы также можете добавить кнопку “отмена”, чтобы пользователи могли явно отменить свои действия при закрытии вьюшки. Кнопка “закрыть” не говорит о том, что она явно сохранит или удалит изменения, поэтому она хорошо работает во вью, которое люди не могут редактировать данные, или во вью, которое люди могут просто закрыть из набора ранее открытых вьюшек.
Располагайте кнопку закрытия только в том случае, если вью не содержит пары противоположных действий, которые также закрывают ее. Например, на листе, содержащем противоположные действия, такие как “отмена” и “готово”, добавление кнопки “закрыть” сбивает с толку, поскольку неясно, как это влияет на содержимое вью.
Общие типы кнопок
Люди мгновенно узнают несколько определенных типов кнопок, потому что эти кнопки ведут себя одинаково (консистентно) во всей системе. Например, кнопка “Информация” всегда отображает сведения, связанные с текущим контекстом или вьюшкой.
Если вы делаете кнопку, которая выглядит как “общая”, то есть люди уже могут знать ее, то убедитесь, что она ведет себя так, как они ожидают. Например, если вы создадите кнопку, использующую иконку (+), то люди ожидают, что она позволит им добавить элемент в текущую вьюшку (экран). Аналогично, использование символа (i) в кнопке идентифицирует ее как информационную кнопку.
В строке списка или таблицы используйте кнопку “Информация (i)” только для отображения дополнительной информации о содержимом строки. Кнопка “Информация”, называемая ”кнопкой раскрытия деталей”, когда она появляется в строке списка, не позволяет перемещаться по иерархии в таблице или внутрь. Если вам нужно разрешить пользователям открывать дочерние вьюшки по тапу на элемент списка или строки таблицы, то используйте вспомогательный элемент управления индикатором раскрытия (иконку стрелки вправо).
