Меню и поиск на сайте
Лучшие практики создания меню и поиска на сайте
© 2020-08-07, Guzei.com, Игорь Гузей
Попытка собрать информацию с самых популярных сайтов.
Проблема
Где и как расположены строки поиска и меню на самых популярных сайтах в зависимости от ширины экрана, а так же в соответствующих приложения.
Решение
| Поиск | Меню | Логотип | Авторизация | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Smartfone | iPad | Широкий экран | SmartPhone | iPad | Широкий экран | Smartfone | iPad | Широкий экран | ||
| Google.com | Очень большая строка вверху симметрично второй строкой под логотипом | Очень большая строка вверху | "Гамбургер" в левом верхнем углу. Меню наплывает слева. Основной текст затемняется. | 1159px. Горизонтально под строкой поиска | Целое слово в верхней строке посередине. | Целое слово в верхнем левом углу | Верхний правый угол | |||
| YouTube.com m.YouTube.com site |
Клик по "Лупе" вызывает строку. | Большая строка вверху посередине На сайте, если шире 657px |
Вместо меню нижняя фиксированная строка с четырьмя (в приложении пятью) кнопками | "Гамбургер" слева вверху и пять кнопок (которые были внизу), меню наплывает затемняя основную часть. На сайте "гамбургер" всегда, а боковые кнопки, если окно шире 809px |
Целое слово вверху слева | Верхний правый угол | ||||
| GMail | Строка вверху | "Гамбургер" вверху слева, клик - наезд меню на основной блок | Меню в левой колонке обозначено иконками и вверху слева "гамбургер", клик по которому выдвигает меню и сужает осноной блок. Наведение мыши на иконки вызывает наезд меню на основной блок. | нет | Целое слово - вверху слева | Вверху справа | ||||
| FaceBook m.FaceBook.com FaceBook.com |
Поиск вызывается кликом по "лупе" расположенной вверху справа и переходом на отдельную страницу | Строка поиска сверху | Есть "гамбургер". На Пикселе справа сверху, а Айфоне справа снизу. Меню - отдельная страница. | Нижняя панель с пятью кнопками. Клик по "гамбургеру" и остальным кнопкам - переход на отдельную страницу. | Кнопки сверху. Панель меню постоянная слева, прилипающая со сворачиванием строк, чтобы поместились все разделы по высоте. | Целое слово слева вверху | Одна буква F вверху слева. | Кнопка вверху на мобильных или фото и имя вверху справа на планшетах и десктопах | ||
| Wikipedia.org | "Лупа" вверху справа. Клик - срока. | Строка вверху | "Гамбургер" вверху слева. Клик - наезд слева. | Слово вверху слева | В меню | |||||
| Twitter.com | "Лупа" внизу. Клик - отдельное окно. | "Лупа" слева в меню. Клик - отдельное окно. | Строка вверху справа | Строка внизу | Колонка кнопок слева | Слева | Нет | Логотип вверху справа | Внизу слева или вверху слева | |
| Instagram.com | "Лупа" в нижней строке навигации. Клик - переход на отдельную страницу с примерами поиска. | Строка поиска вверху посередине | Нижняя фиксированная строка с пятью кнопками. При клике на профиль переход на страницу, где есть "гамбургер" в правом верхнем углу. Клик по нему вызываем меню сдвигая всю страницу влево. | от 640px. Нижняя панель с кнопками переходит наверх. Строка поиска. В настройках есть левое меню на экранах шире 736px. | Целое слово посередине | Целое слово слева | Иконка внизу справа или иконка вверху справа | |||
| Yahoo.com (1041) | Строка вверху | Горизонтально под поиском | Вверху справа | Слово вверху слева | ||||||
| xvideos.com | Треться строка вверху | Строка вверху | "Гамбургер" вверху слева. Клик - перекрытие. В горизонтальном режиме поиск в первую строку, клик по "гамбуреру" - строка меню под заголовком со сдвигом страницы вниз. | "Гамбургер" вверху слева. Клик - меню сдвигает страницу вниз. | Вверху слева | Вверху справа | ||||
| Amazon.com (1017) | Вторая строка сверху во всю ширину экрана | Поиск - большая строка сверху | "Гамбургер" вверху слева, клик - наезд меню на основной блок. | Целое слово вверху слева | В верхней строке справа | |||||
| m.vk.com VK.com (1007) |
Через браузер - клик по лупе. В приложении через два клика: сообщения, лупа; далее отдельная страница с выбором места поиска в диалогах или сообщениях. | Только в разделе "Сообщения" | Строка вверху посередине | В браузере - "гамбургер" внизу справа. Клик - отдельная страница. В приложении два клика: профиль, "гамбургер" - клик сдвиг влево. | В браузере - "гамбургера" нет вообще, меню в левой колонке. В "гамбургер" вверху слева - клик сдвиг вправо. | Слева скроллируется, ширина текста 149px | нет | VK вверху слева | В m.vk.com и в приложениях - нет вообще. На десктопе - вверху справа | |
| OK (1017) | Клик на "лупу" с переходом на отдельное окно | Строка вверху | В приложении панель внизу с пятью кнопками. "Гамбургер" внизу справа, клик - отдельное окно. В браузере "гамбургер" вверху слева, клик - наезд на основное поле без затемнения последнего. | Панель внизу как у версии телефона. Клик по "гамбургеру" - отдельное окно, где есть строка поиска. | В верхней панеле и слева в скроллирующейся колонке | В приложении логотипа нет. Через браузер - логотип вверху слева. | Логотип слева вверху | Логотип и слово слева вверху | Через меню | |
| Mail.ru (1028) | Вторая строка | Строка вверху | "Гамбургер" вверху слева, клик - новая страница | На верхней панеле и слева в скроллирующейся колонке | Справа вверху | В левой колонке вверху | В левой колонке вверху | |||