Как улучшить дизайн выпадающего меню?

29-5-2021 10:20

Как улучшить дизайн выпадающего меню? Проверьте эти ключевые моменты знаний!

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

Но как отличить дизайн выпадающего меню от разумного? В этой статье мы начнем с того, что такое выпадающее меню, Шаг за шагом анализируя конструкцию выпадающего меню.

Что такое выпадающее меню?

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

Но когда-нибудь задумывались, какие функции и цели несут выпадающие меню?

Настроенные выпадающие меню обычно используются в качестве следующих функций:

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

Правила дизайна выпадающего меню

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

1. Не изменяйте отображаемые параметры

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

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

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

2. Чтобы пользователи могли видеть все параметры

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

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

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


△ Когда есть другие варианты, кнопка "просмотреть больше" может быстро дать пользователю понять, что существует больше вариантов, чтобы направлять пользователя на выбор.

3. Найдите правильный баланс для познания

Выпадающее меню позволяет пользователю сделать выбор, не вводя ничего.

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

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

4. Не злоупотребляйте выпадающими меню в доминирующей навигации

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


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

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


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

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


1. селектор iOS

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

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

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


2. Android

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

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


Раскрывающееся меню Case Analysis


1. Puma

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

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


2. Philip Lester

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


3. Shiva


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


4. Airbnb

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


Заключение

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


Отлично

Хорошо

Средне

Плохо

Ужасно
В статье уже есть0 Участие в комментариях

Пожалуйста, оставьте комментарий

Все комментарии

Понравилось Прочитано34 Коментариев0
Предыдущий:
UI что происходит с подсказками?Дата публикации:2021-05-29
Следуюий:
6 советов для быстрого улучшения дизайна по ...Дата публикации:2021-05-29
Рекомендуем
Популярное
ТOP 10
Новинки
Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.