Для новичка в web-e, обычно бывает сложно правильно подобрать меню.
Здесь главное набить руку, потом будет получаться само собой. Чтобы упростить этот процесс я подготовила для вас подборку. Меню на все случаи жизни.
Делать видео- урок на эту тему не стану, потому что особенно нечего показывать в фотошопе, а картинки удобнее смотреть в виде статьи.
Радует, что в меню уходит время на концепт, а не на реализацию, потому что никаких сложных форм нет. Все элементарные элементы.
Когда у вас мало пунктов для меню
Фон у меню можно сделать прозрачным при том условии, что пунктов мало и прозрачность будет не сильной. При увеличении надписей, сильно ухудшится читаемость меню.
Покажу ещё пару примеров, для простого меню, с небольшим количеством пунктов. Ч-б это классика.
Apple так же используют немного прозрачное меню.
Удобное решение со вторым меню, которое появляется не на всех экранах, а только по мере необходимости. Все те же 1-пиксельные иконки. Решение практически на все случаи жизни, если вам , конечно, не лень рисовать иконки.
Вот так получилось у меня, после внедрения реального контента:
Ну а если все-таки лень, то есть вот такой крутой вариант, который я сама уже не раз использовала на своих сайтах, приведу примеры из своих работ.
Или подобный вариант, в котором я дерзнула с цветом. Пример взят с сайта Связной.
На последнем скрине видно сложное выпадающее меню.
Я сразу хочу сказать, что являюсь сторонником горизонтального меню, но "выпадашки" с горизонтальным расположением пунктов не приемлю.
Я не только на других, но и на себе не раз проверяла скорость прочтения пунктов при горизонтальном размещении. И это в 3 раза медленнее. При большом количестве пунктов важно, чтобы пользователь скользил глазами по экраны сверху вниз, тогда найти нужный пункт будет на много проще. Когда у вас такое сложное и многоярусное меню, сложно не использовать цвет в фоне. Потмоу что все сливается и какие-то важные вещи уходят на второй план. Так же использование иконок оказалось не лучшим вариантом из-за большого количества пунктов. Фото всегда понятнее и быстрее воспринимается.
Так же хороший пример с меньшей нагрузкой, но большим выпадающим списком, хотя он не очень жизненный, если заменить слово "Меню" на "Каталог" будет на много понятнее. Или если добавить пару пунктов, которые будут раскрываться как показано, но при этом иметь понятное название. Например "корпусная мебель / мягкая мебель / стулья". Слово "Меню" само по себе не несет никакого ответа на вопрос "что я увижу, когда нажму сюда?".
Конечно Dribbble, когда не хочется показывать кучу второстепенных пунктов меню. Если у вас все ссылки важные, то конечно, не ваш вариант.
Казалось бы совсем просто на первый взгляд, но стоит нажать на кнопку:
После перехода на другие страницы меню увеличивается в несколько раз. Использование такого же приема, как и Apple, cкрытие лишнего контента на презентационных страницах
Не забудем и про Behance, так же, простое выдержанное меню, с серьёзным выпадающим списком
Меню настолько огромное, что даже имеется список в Алфавитном порядке.
Очевидно, что главным здесь является поиск. Старайтесь не пренебрегать такой важной вещью тоже. Часто поиск не продумывают или делают совсем незаметным, это серьёзный недочет.
HD - тоже имеет сложную структуру сайта, предлагает такое решение большого количества контента:
Добавлю ещё пару крутых примеров, которые можно просто копировать с наглым лицом:
Конечно, добавлю Morgan Stenley, и то что человек был плохой, не значит что мы не будет хвалить его сайт!
И пожалуй сразу покажу, какое применение нашёл этот сайт в моей жизни, немного добавила от себя (2е меню). Если бы не добавила, то пришлось бы испортить композицию верхнего меню, совсем не хотелось.
Всегда круто выглядит меню без фона, но с этим определенно есть трудности, потому что фон должен либо появляться при скролле, либо весь сайт быть определенного цвета или тона.
Закончить хочется тем, что примеров качественного меню достаточно много, их всегда можно найти при желании. При замене контента меню всегда выглядит иначе. Так что! Не бойтесь копировать достойные примеры, думайте о читаемости и удобстве, не используйте шрифты меньше 15 кегля и слушайте клиента о приоритете пунктов!
Оценить
