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


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

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

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

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

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

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

Меню 

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

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

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

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

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

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

Реальные отзывы заказчиков о работе с «Профиланс»

star star star star star
оценок: 1893
среднее 4,9 из 5
Работы выполнена качественно и даже раньше ср...
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Очередной заказ выполнен быстро и качественно...
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очень быстро выполнено задание, все замечания...
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРО...
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Какой великолепный сайт, благодарна этому са...
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно...
Инна
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно выполнила перевод немецкого языка, быстро и на самую лучшую оценку "5", сразу чувствуется, что знает этот предмет на отлично! Я безмерно счастлива, у меня нет теперь долгов к этой сессии, благодарю Мария Вы супер! С наступающим Новым годом Мария, всех благ, счастья, любви, и все, то, что сами себе желаете!
Инна
Андрей - опытный и исполнительный специалист,...
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок...
Василий
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок. Заданием было выставить правильный тайминг готовых субтитров и добавить озвучку перевода документального фильма. Помимо самого задания были устранены шумы, получившиеся при записи озвучки, а также оперативно была исправлена ошибка в озвучке: фрагмент с оговоркой благополучно вырезан и заменен на присланный правильный.
Василий
Работа сделана быстро, единственное хотелось...
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Очень быстро и качественно. До работы были за...
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены н...
Валентина
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены несколько итоговых вариантов. Очень рада сотрудничеству!!! Обращайтесь
Валентина

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

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

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

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

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

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

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

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

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