Используете меню-гамбургер? Попробуйте ссылки-сосиски!
При разработке навигации по средним и большим размерам в мобильном Интернете в течение некоторого времени по умолчанию использовались меню гамбургер. Это не обязательно плохо, но для некоторых вариантов использования существует более простая альтернатива.
Прежде чем мы углубимся в мельчайшие подробности (и простую демонстрацию) концепции колбасных изделий, давайте кратко рассмотрим плюсы и минусы меню гамбургеров.
Гамбургер Меню
Концепция гамбургерного меню ни в коем случае не ужасна , на самом деле она решает множество проблем с визуальной точки зрения. К сожалению, это не значит, что он существует без досадных недостатков.
Плюсы
- Минимизирует количество визуального пространства, которое требуется меню
- Довольно обычное явление сейчас, когда значительная часть пользователей понимает его функциональность.
- Облегчает жизнь дизайнеров, убирая все лишнее в мобильном представлении 😛
Минусы
- Требуется дополнительное тестирование, чтобы убедиться, что меню будет хорошо работать с программами чтения с экрана.
- Может быть слишком сложным с наличием дочерних выпадающих элементов, текста справки и т.д.
- Добавляет раздувание к проектам, которым может потребоваться дополнительный JavaScript для отображения этих меню (меню CSS только для гамбургеров позволяет избежать этой проблемы)
- Добавляет дополнительную точку взаимодействия с пользователем (нажмите, чтобы открыть, затем перейдите к просмотру доступных параметров)
Как вы можете видеть, плохие моменты , перечисленные выше. Я вижу их скорее как незначительные выбоины на пути UX для ваших конечных пользователей. Большая часть примеров меню гамбургеров в дикой природе прекрасно работает и должна оставаться такой, как есть.
Ссылки-сосиски
Я должен начать с упоминания, что эта концепция далеко не нова. Есть много сайтов, которые уже реализуют этот тип меню в той или иной форме. Суть этого поста не в том, чтобы поразить вас каким-то новым, никогда не задумывавшимся дизайном навигации. Я просто пытаюсь привлечь внимание к другой доступной концепции меню.
Достаточно болтовни, давайте взглянем на ссылки сосиски в действии:
Вышеупомянутый CodePen добавляет большое количество визуального дизайна, поэтому давайте взглянем на минимум HTML и CSS, необходимый для выполнения этого меню:
/* Sausage Links Nav Container */
.sausage-links {
position: relative;
}
/* The left and right "faded" pseudo elements */
.sausage-links:before, .sausage-links:after {
content: '';
height: calc(100% - 2em);
pointer-events: none;
position: absolute;
top: 1em;
width: 10px;
z-index: 2;
}
.sausage-links:before {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, white 100%);
right: 0;
}
.sausage-links:after {
background: linear-gradient(to left, rgba(255,255,255,0) 0%, white 100%);
left: 0;
}
/* Basic flexbox to prevent items from breaking lines */
.sausage-links ul {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.sausage-links ul li {
white-space: nowrap;
}
.sausage-links ul li a, .sausage-links ul li a:visited {
display: inline-block;
}
Довольно просто, а?
Плюсы
- Требуется минимальное количество CSS
- Screen reader / keyboard-only safe
- Не требуется JavaScript
- Нет необходимости в скрытых
radioинпутах для переключения родительских контейнеров и т.д. - Пользователи могут видеть первые несколько доступных вариантов без какого-либо взаимодействия
Минусы
- Может не выглядеть наиболее привлекательным для определенных проектов (в некоторых случаях уродливая полоса прокрутки)
- Лучше подходит для небольших и средних списков меню по сравнению с массивными картами сайта
- Без надлежащего затухания / обрезания визуальных сигналов пользователи могут не понимать, что они могут прокручивать
Так, я должен использовать меню гамбургера или ссылки сосиски?
Это действительно зависит от вашего проекта или общего мобильного дизайна (я знаю, такой полезный ответ). Я уверен, что есть даже несколько случаев, когда было бы целесообразно иметь ссылки-сосиски вместо гамбургеров на основе переключателей. Возможности меню могут быть бесконечными!
Вот и все. Я надеюсь, что вдохновил вас попробовать ссылки-сосиски в ближайшем будущем или, по крайней мере, заставил вас задуматься о дизайне мобильной навигации!
... кто-нибудь еще действительно голоден?
