Пейдж Лаубхаймер из Nielsen Norman Group написал о прилипающих шапках.
Прилипающая (постоянно отображающаяся) шапка — фиксация шапки сайта в определённом месте экрана во время прокрутки содержимого страницы. Ещё есть непостоянно отображающаяся шапка, которая скрывается при прокрутке страницы вниз и появляется при прокрутке наверх.
1. Размеры такой шапки должны быть минимально возможными, особенно на мобильных. Конечно, текст в ней должен оставаться читаемым, а области нажатия быть достаточно большими.
2. Делайте её непрозрачной и отделяйте от остального содержимого страницы (фоном или рамкой). В том числе отображающиеся в ней подменю.
3. Минимум анимации. Анимировать можно замену большой шапки на более компактную прилипающую. Она должна происходить со скоростью прокрутки страницы. Также шапка должна оставаться в определённом месте экрана, а не прилетать туда с задержкой вслед за прокруткой страницы (Stalker Menu).
4. В идеале при появлении непостоянно отображающейся шапки у пользователя должно быть ощущение, будто она появляется синхронно с содержимым страницы. При прокрутке наверх для верхней шапки можно использовать анимацию Slide In длительностью примерно 300−400 мс.
5. Подумайте, что будет в шапке? Насколько вероятно, что эти элементы потребуются во время посещения вашего сайта? Прилипающая шапка нужна не всегда.
https://ux.pub/5-sposobov-uluchsheniya-lipkoy-shapki-sticky-header-ot-nielsen-norman-group/
Post #764
5.08K