Горизонтальная прокрутка в мобильных приложениях


Более 90% приложений используют интерфейс, основанный на вертикальной прокрутке. Это привычно, удобно, но хочется чего-то нового, верно? К тому же, кто сказал, что горизонтальная прокрутка не может быть удобной?

Ведь у нее тоже могут быть специфические сферы применения? Итак, рассмотрим, где можно использовать горизонтальную прокрутку и вообще, что это такое. 

Как можно использовать горизонтальную прокрутку для приложений?

Прежде всего, нужно определиться, в чем разница между горизонтальной и вертикальной прокруткой. Если смотреть обобщенно, то в вертикальной прокрутке основные элементы распложены друг возле друга в горизонтальную линию, а меню располагается сверху и снизу.

При необходимости пользовать может скроллить страницу вниз, чтобы получить больше информации. Такая система была популярна на заре разработке мобильных приложений, поэтому стала стандартом и большая часть программ для прототипирования и проектирования основана именно на таком формате. 

В горизонтальной системе элементы расположены друг над другом, а скроллинг производится вбок. На первый взгляд, отличие только в скроллинге и мелких элементах, так как обе системы предоставляют примерно одинаковое пространство для работы. По факту как бы так и есть, но есть такие детали, как руководство пользователя и меню и тут как раз заключается основная загвоздка. 

Меню 

Главной проблемой горизонтального скроллинга является меню. В вертикальной системе меню расположено вверху и/или внизу страницы и часто закрепляется, чтобы при скроллинге не исчезать. В результате часть пространства просто съедается, что не является оптимальным вариантом. 

В горизонтальной системе имеет смысл установить самую простую индикацию с гамбургер-меню, так как это позволяет сэкономить место. Такой тип меню может показаться малоинформативным, но для его повышения можно использовать два различных типа: базовую навигацию или off-canvas, с доступом через отдельную иконку. Таким образом, можно добавить в меню более широкие возможности. 

Базовая компоновка

После того, как вы определились с дизайном и типом меню, перейдем к базовой компоновке. Для примера возьмем макет, состоящий из четырех страниц и off-canvas меню, основанный на системе простой сетки. В меню есть отдельное место для поискового окна и остальных шести элементов (редактирование, быстрый доступ, поделить публикацией и тд). 

Подобная прокрутка отлично подходит для электронных изданий, например журналов, где много картинок и фото, но мало текста. Читать текст в горизонтальной прокрутке не совсем удобно, а вот просматривать картинки удобнее. Даже если фид длинный и не помещается в экран, система якорей позволяет остановить скроллинг в любом месте и при необходимости увеличить и уменьшить фото. 

Вряд ли горизонтальный интерфейс быстро вытеснит более традиционный вертикальный, но у него есть свои перспективы и сфера применения, так что вполне возможно, скоро мы увидим его в действие. 

Вы заказчик и вам необходимо найти фрилансера?

«Профиланс» — это безопасный сервис для работы с фрилансерами

Вы фрилансер и вам нужны заказы?

Заполните заявку и получите доступ к заказам

Стать фрилансером

Заполните форму
и узнайте цену

Специализация
Специализация
Категория
Категория

Файлы при наличии

    Профиланс специализируется на фриланс-заказах: дизайн, маркетинг, реклама, программирование и т.д. Для студенческих заказов используйте сервис «Всё сдал!».
    • здесь больше исполнителей по студенческим заказам;
    • ниже цены;
    Все сдал!