Гайдлайн по iOS на русском. Часть 70 — Контролы: Контекстные меню

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

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

Контекстные меню похожи на Peek и Pop, но с двумя ключевыми отличиями:

• Контекстные меню доступны на всех устройствах под управлением iOS 13 и более поздних версий; Peek и Pop доступны только на устройствах, поддерживающих 3D Touch.
• Контекстные меню отображаются со списком команд, а для просмотра команд “Peek” и “Pop” требуется провести пальцем вверх.

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

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

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

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

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

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

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

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

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

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