Подборка меню

UI UX дизайн
02.11.2017

Для новичка в web-e, обычно бывает сложно правильно подобрать меню.

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

Делать видео- урок на эту тему не стану, потому что особенно нечего показывать в фотошопе, а картинки удобнее смотреть в виде статьи.

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

Когда у вас мало пунктов для меню

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

Меню 1

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

Меню 2
Меню 3
Меню 4

Apple так же используют немного прозрачное меню.

Меню 5

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

Меню 6

Вот так получилось у меня, после внедрения реального контента:

Меню 7

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

Меню 8

Или подобный вариант, в котором я дерзнула с цветом. Пример взят с сайта Связной.

Меню 9

На последнем скрине видно сложное выпадающее меню.

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

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

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

Меню 10

Конечно Dribbble, когда не хочется показывать кучу второстепенных пунктов меню. Если у вас все ссылки важные, то конечно, не ваш вариант.

Меню 11

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

Меню 12

После перехода на другие страницы меню увеличивается в несколько раз. Использование такого же приема, как и Apple, cкрытие лишнего контента на презентационных страницах

Меню 13

Не забудем и про Behance, так же, простое выдержанное меню, с серьёзным выпадающим списком

Меню 14

Меню настолько огромное, что даже имеется список в Алфавитном порядке.

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

Меню 15

HD - тоже имеет сложную структуру сайта, предлагает такое решение большого количества контента:

Меню 16

Добавлю ещё пару крутых примеров, которые можно просто копировать с наглым лицом:

Меню 17
Меню 18

Конечно, добавлю Morgan Stenley, и то что человек был плохой, не значит что мы не будет хвалить его сайт!

Меню 19

И пожалуй сразу покажу, какое применение нашёл этот сайт в моей жизни, немного добавила от себя (2е меню). Если бы не добавила, то пришлось бы испортить композицию верхнего меню, совсем не хотелось.

Меню 20

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

Меню 21
Меню 22

Закончить хочется тем, что примеров качественного меню достаточно много, их всегда можно найти при желании. При замене контента меню всегда выглядит иначе. Так что! Не бойтесь копировать достойные примеры, думайте о читаемости и удобстве, не используйте шрифты меньше 15 кегля и слушайте клиента о приоритете пунктов!

Опубликовано: 2017-11-02

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку