Scott
Дизайн мобильного меню помогает человеку понять, где он находится, перейти в нужный раздел и вернуться к своей задаче. Для этого недостаточно расположить красивые иконки: нужно определить уровни навигации, названия разделов и поведение после перехода.
Разберём основные варианты меню и соберём сквозной пример приложения задач: найти задачу в списке «Мои», открыть подробности, посмотреть календарь и вернуться к исходному списку. Этот маршрут показывает, какие разделы должны оставаться доступными и какое состояние стоит сохранять.
Часть 1. Важность дизайна меню для мобильной навигации
Меню задаёт ориентиры внутри приложения. Удобство его работы можно проверить на конкретной задаче: понял ли человек названия, нашёл ли нужный раздел и сохранил ли контекст при возвращении.
1.1 Меню устанавливают иерархию
Мобильное меню помогает представить основную структуру приложения. В приложении задач разделы «Задачи», «Календарь», «Команда» и «Профиль» находятся на одном уровне. Карточка отдельной задачи относится к разделу «Задачи», а «Мои» и «Все» могут быть фильтрами списка. Если смешать эти уровни в одной панели, назначение пунктов станет менее понятным.
1.2 Выделяет важную информацию
Главные разделы должны быть заметны там, где человек регулярно между ними переключается. Названия выбирайте по содержимому, а не по внутренней структуре команды. Иконка помогает распознаванию, но подпись «Календарь» надёжнее объясняет назначение, чем один условный значок. Текущий раздел выделяйте последовательно на связанных экранах.
1.3 Обеспечивает комфортную работу
Возврат должен учитывать уже выполненную работу. В нашем примере после просмотра задачи человек возвращается к фильтру «Мои» и прежней позиции списка. Переход в другой основной раздел и кнопка «Назад» решают разные задачи: первый меняет область приложения, вторая возвращает по текущему маршруту.
Часть 2. Типы дизайна навигации по мобильному меню
Один экран может сочетать несколько решений: постоянную панель разделов, скрытые дополнительные пункты и отдельную кнопку создания. Выбирайте их по структуре и частоте переходов, затем проверяйте на целевом устройстве.
2.1 Нижняя панель навигации
Нижняя панель оставляет основные разделы видимыми и показывает активный пункт. Она подходит для небольшого набора равноправных разделов, между которыми человек переключается регулярно. В рекомендациях Android по навигации для такой панели указаны три–пять направлений одного уровня; это ориентир конкретной платформы, а не требование к любому меню.
Проверьте длинные русские подписи, увеличение текста и удобство касания. Не уменьшайте надписи до нечитаемого размера, чтобы вместить ещё один пункт. Если список основных направлений не помещается, пересмотрите группировку и приоритеты.
2.2 Меню разделов на стартовом экране и вертикальная панель
Сетка разделов на стартовом экране полезна как обзор большого набора возможностей. Её ограничение — необходимость возвращаться к этому обзору, если переходы между разделами не предусмотрены в других местах. Порядок и группировка должны помогать найти задачу; яркость плитки сама по себе не определяет её место в структуре.
Вертикальная панель — другой способ показать те же направления. На следующем изображении представлены развёрнутое и компактное вертикальные меню. Такой рисунок помогает сравнить объём подписей и роль иконок, но на узком телефоне нужно отдельно решить, где панель открывается и как закрывается.
2.3 Выдвижное меню
Выдвижная панель скрывает список разделов до открытия и освобождает место для содержимого. Обратная сторона — дополнительное действие перед выбором пункта, а закрытая панель не показывает доступные направления. Проверьте, смогут ли новые пользователи найти в ней нужный раздел.
Спроектируйте открытое и закрытое состояния, активный пункт, способ закрытия и возврат фокуса к кнопке открытия. Если панель перекрывает содержимое как модальное окно, взаимодействие с фоном и клавиатурой должно соответствовать этому режиму. На иллюстрации ниже видна кнопка боковой панели на экране поездки; открытое состояние следует подготовить отдельно.
2.4 Нижняя панель с выделенным центральным действием
Вариант, который иногда называют Rudder, выделяет центральную круглую кнопку среди соседних пунктов. Сначала определите, что она делает. «Создать задачу» запускает действие и не является ещё одним разделом. Не показывайте её выбранной так же, как «Задачи» или «Календарь», и не заставляйте нажатие незаметно менять смысл навигационной панели.
2.5 Гамбургер-иконка и открываемое ею меню
Три горизонтальные линии — это кнопка открытия меню, а не отдельная архитектура навигации. Она может открывать боковую панель или другой список. Поэтому «гамбургер» и выдвижное меню не являются взаимоисключающими вариантами: один описывает кнопку, другой — появляющуюся область.
Дайте кнопке доступное имя «Открыть меню», обозначьте раскрытое состояние и проверьте, понятно ли её назначение целевой аудитории. На следующем экране уведомлений кнопка находится слева вверху. Одного закрытого экрана недостаточно для передачи поведения: нужны список пунктов, активный раздел и переход после выбора.
Как выбрать вариант для своей задачи
| Условие | Что попробовать | Что проверить |
|---|---|---|
| Частые переходы между несколькими равноправными разделами | Нижнюю панель с подписями | Понятен ли текущий раздел и помещаются ли названия |
| На старте нужен обзор многих возможностей | Сгруппированный каталог или сетку разделов | Как перейти в другой раздел после открытия содержимого |
| Дополнительные направления редко нужны в основной задаче | Раскрываемое меню | Обнаружимость кнопки, понятность групп и закрытие |
| Нужно часто создавать новый объект | Отдельную кнопку действия рядом с навигацией | Отличается ли действие от выбора раздела |
Часть 3. Как спроектировать мобильное меню в Pixso
В Pixso можно нарисовать варианты меню, собрать повторяющиеся элементы в компоненты и связать экраны в прототип. Начните с одной проверяемой задачи, чтобы обсуждение не свелось к сравнению цветов и иконок.
Что вы можете сделать с Pixso?
- Создать каркасы основных разделов и отделить навигацию от действий внутри экрана.
- Связать экраны переходами для проверки входа в раздел, открытия объекта и возврата.
- Использовать автоматическую компоновку для отступов и размеров; затем отдельно проверить длинные подписи и разные ширины экрана.
- Совместно просматривать макет и оставлять комментарии у конкретного пункта меню или перехода.
- Изучить доступные материалы сообщества как отправную точку и адаптировать выбранный ресурс под свою структуру и условия использования.
Ниже — подборка элементов интерфейса: поиск, выпадающие списки и уведомления. Эти элементы помогают детализировать содержимое разделов; основную навигацию между ними нужно спроектировать отдельно.
Проверяем маршрут в приложении задач
- Список. Создайте экран «Задачи» с фильтром «Мои», карточкой «Проверить макет» и нижними пунктами «Задачи», «Календарь», «Команда», «Профиль».
- Подробности. Откройте выбранную задачу. Заголовок объясняет содержимое, а возврат ведёт к тому же списку. Если нижняя панель остаётся видимой, активным остаётся раздел «Задачи».
- Другой раздел. Перейдите в «Календарь» и выделите именно его. На этом экране человек видит срок задачи в контексте дат.
- Возвращение. Нажмите «Задачи». Покажите сохранённый фильтр «Мои» и прежнее место списка. В прототипе это можно представить отдельным подготовленным кадром.
- Создание. Отдельная кнопка «Создать задачу» открывает форму. Продумайте возврат при отмене и при несохранённых данных, не смешивая его с переключением разделов.
Добавьте пустой раздел и длинное название задачи, чтобы проверить подписи и компоновку. Если для отдельной роли раздел недоступен, решите, должен ли пункт скрываться или объяснять ограничение. Сам по себе макет не определяет права доступа — это отдельное правило продукта.
Что проверить перед передачей мобильного меню в разработку
Дайте участнику цель: «Найдите свою задачу “Проверить макет”, посмотрите её срок в календаре и вернитесь к списку». Не называйте нужные кнопки заранее. Отметьте, какой пункт он выбирает, где теряет контекст и как понимает активный раздел.
Передайте вместе с макетом названия и порядок разделов, правила активного состояния, поведение возврата, сохранение фильтров, обработку несохранённого ввода и требования к фокусу. Укажите различия для узкого и широкого экрана. Это поможет разработчикам воспроизвести задуманный маршрут целиком.
