Третьего дня, сдавай дизайны мобильного приложения. «А вы помните, что есть статус бар и чёлка?» — осведомилась менеджер подрядчика. «Юная леди, я с 2006 и разрешения 1024x768 помню, что есть бары операционных систем, окно браузера и бары ввода адреса и управления в нем» — вежливо проинформировал я.
Любой дизайн проект должен быть продан дважды: первый раз заказчику, второй раз потенциальному заказчику на портфолийном сайте. Если повезёт с пиарщиком, то трижды: ещё и в истории успеха, фестивале, или премии. А все, что продается должно выглядеть "вкусно".
Так выглядит стандартная подача дизайна на портфолийном сайте. Одна из последних работ агентство Aic — MTS Shop.
![](https://habrastorage.org/getpro/habr/upload_files/388/ec6/4c2/388ec64c2d91a405f9c890c38a3195aa.png)
А так, тот же сайт в жизни.
![](https://habrastorage.org/getpro/habr/upload_files/f68/2d9/365/f682d9365b030b16cb14fd834ddac93a.jpeg)
Как сильно сократилось количество акцентов на реальном устройстве. А вот сколько отъедает интерфейс ОС и браузера от стандартного разрешения 1440.
![](https://habrastorage.org/getpro/habr/upload_files/039/fc1/f45/039fc1f45c950d582f15c116d188a7a2.jpeg)
Для лендинг пейджей это не критично, минимальных знаний адаптивной / fluent вёрстки достаточно для приемлемого результата. А вот в больших проектах с объёмной навигацией, или экшн барами (например, музыкальные сервисы) приходится работать не только с ограничениями по ширине, прорабатывая элементы для разных медиазапросов, но и с ограничениями по высоте. Иногда это затрагивает проектирование только отдельных блоков на страницах, а иногда всей информационной архитектуры ввиду решений связанных навигацией.
Проблема хайов является частью проектирования адаптивных интерфейсов, что обозначено даже в документации Material Design. Поэтому относительно web дизайна как для Desktop, так и для Mobile устройств стоит ориентироваться на тот же принцип, что используется для адаптации интерфейсов под разные ширины. А именно — поддержка минимального значения для самых распространенных устройств.
![](https://habrastorage.org/getpro/habr/upload_files/8a1/dfe/1c1/8a1dfe1c137d6b52934d2a5bb7bce186.png)
Так стандарт MD 1 определял Desktop устройства начиная с 1280. А MD 2 — с 1240. Такая корректировка случилась в угоду того, что MD распространился и на веб, где 40 пикселей отданы на встроенный в браузер скролл.
![](https://habrastorage.org/getpro/habr/upload_files/e9b/993/57f/e9b99357f93cd6696ba4974259d75f01.png)
![](https://habrastorage.org/getpro/habr/upload_files/f66/537/776/f66537776186d561e7f7ed369e373ce3.png)
Платформа Tilda.cc по умолчанию в своих медиазапросах использует 1200 как отправную точку для Desktop устройства. Это можно посмотреть в их css файлах, а также в интерфейсе Zeroblock.
![](https://habrastorage.org/getpro/habr/upload_files/2db/494/7b4/2db4947b4885d182ad2f6b4dacbb92ac.png)
Этот параметр Breakpoint или медиа запроса в ~ 1200 обусловлен физическими ограничениями массово распространенных устройств. Что, собственно и поможет нам определиться с ограничениями по высоте. Смотрим статистику разрешений.
![](https://habrastorage.org/getpro/habr/upload_files/fb0/761/d60/fb0761d604d81e25b5b7e623ad62ad97.jpeg)
Минимальные значения по высотам, ровно как и по ширинам это 1366x768 — 16% и 1280x720 — 6%. Соответственно, если интерфейс будет спроектирован с учетом минимальных параметров, то он охватит (т.е. впишется) и все остальные / большие разрешения.
1366x768 второе по популярности разрешение после FullHD можно смело ориентироваться на него, при том что это разрешение windows/linux платформ. 1280x720 не рак распространено но по своим размерам близко к купертиновским 1280x800 (дефолтное разрешение 13” macbookpro начиная с 2013 года). И если решим учесть и этот сегмент, то можем брать рабочую область маков, несмотря на то что она выше на 80px интерфейс OSХ занимает больше пространства, из за наличия нижнего Дока.
![](https://habrastorage.org/getpro/habr/upload_files/6de/008/bf0/6de008bf0ede4bfc48d9ce1182768351.png)
Еще раз обозначу, что при проектирование интерфейсов учитываются минимальные размеры, но массовые пользовательские сценарии. Конечно, и док можно уменьшить или автоматически скрывать, и бары вынести вбок или открывать окна FullScreen, и замусорить браузер сотней баров плагинов, все это невозможно учесть, поэтому проектируем под самый частые сценарии использования — то что выдается среднестатистическому пользователю «по умолчанию».
![](https://habrastorage.org/getpro/habr/upload_files/888/777/897/888777897ef9e6262e4393ef98ab380c.jpeg)
Пример не типовой обвязки.
Так для разрешения 1366x768 с Edge и Chome на бору рабочая высота страницы составит 657px. Разные браузеры и их версии отъедят разное значение по высоте, дополнительно можно учесть один бар, например fav вкладок, тогда рабочую область по высоте можно выбирать в диапазоне от 550 до 657.
![](https://habrastorage.org/getpro/habr/upload_files/e50/db9/cca/e50db9cca624c4e09ca93f33db46d1a2.jpeg)
![](https://habrastorage.org/getpro/habr/upload_files/eea/94f/3eb/eea94f3eb5f0ebe184b500d7a4fb8b65.jpeg)
16% это не мало, когда речь идет о массовых продуктах. Например банковских сайтах. Так сайт ВТБ при медиазапросе больше 1265 будет на таких устройствах иметь полезную высоту знакомства с контентом в 520 px.
![](https://habrastorage.org/getpro/habr/upload_files/1a0/98d/36a/1a098d36a71e65e164c0a2c4b320abd4.jpeg)
Львиную долю отъедает зафиксированное меню. А сам блок предложений не вмещает ни перечень предложений (список слева) ни сами предложения (видно только одно из трех).
А так выглядит кошмар маркетолога, когда СТА не помещается на Cover и получается оторванной от предложения/оффера.
![](https://habrastorage.org/getpro/habr/upload_files/b13/aca/866/b13aca86618e4143745923cd3c5be282.jpeg)
В данном ключе стоит похвалить продакт-овнеров и дизайнеров Альфы и Сбера, ведь на тех же устройствах их сайты лишены подобных недостатков (а у сбера даже калькулятор поместился полностью)
![](https://habrastorage.org/getpro/habr/upload_files/e05/7d7/e22/e057d7e221b5c52b852dab81534c335d.jpeg)
![](https://habrastorage.org/getpro/habr/upload_files/043/932/259/043932259313174b6cf295850537dc8c.jpeg)
Выбрать фиксированное меню или нет, расположить навигацию сбоку или пустить авторизационные элементы сайдбарами, как при этом организовать информационную архитектуру, подачу и количество элементов на главной, если они возьмут на себя функции навигации? — все это вопросы связанные с ограничениями реальности по высоте. Если вы думаете, что проблемы возникают только на маленьких разрешениях. То вот наглядный пример на актуальной в 2023 линейке макбуков на m2 где разрешение много больше.
![](https://habrastorage.org/getpro/habr/upload_files/fb6/ce2/09a/fb6ce209a90168f0e75972ba700d1814.png)
Навигация / меню вынесена в сайдбар и занимает всего 98 пикселей по высоте. Разумеется, на 1366 она пропадает вовсе.
Среда, инструментарий и образование
Ошибкам с хаями способствует набор обстоятельств:
отсутствие грамотных пресетов для создания фреймов для работы и предпросмотра в инструментах проектирования
поголовное приукрашивание работ на портфолийных сайтах
чрезмерно хорошая техника у творцов (да, на большом мониторе работать удобно, но проверять на мелких уже лениво)
отсутствие компетенций/техники у принимающей дизайны стороны
Последний пункт иногда приводит к феерическим решениям. Оставлю эту картинку здесь и замечу, что пресет иконок у Гугла в Material Design появился много раньше ребрендинга.
![](https://habrastorage.org/getpro/habr/upload_files/bc3/fc1/e7b/bc3fc1e7ba9389b4baa157d1509fe418.png)