UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Горизонтальная прокрутка в дизайне мобильных приложений
Редакція
Редакція

Опубліковано • Оновлено

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

#ux

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

Фундаментальное UI/UX исследование

Пролог

Меня всегда напрягало, что все приложения используют принцип интерфейса, который основан на вертикальной прокрутке. Бьюсь об заклад, первые три приложения, которые вы открываете каждый день, используют этот принцип. Поэтому я задал себе вопрос, как бы работал принцип с горизонтальной прокруткой. Я провел некоторые фундаментальные UI / UX исследования и придумал некоторые довольно изящные решения. Конечно, эта система не настолько совершенна, как вертикальная, но это только начало. И в этом суть фундаментальных исследований. Фундаментальное UI / UX исследование – это, на мой взгляд, чрезвычайно ценная вещь, которую мы, как дизайнерское сообщество, можем делать. И, к сожалению, это делается редко, поэтому я должен побудить вас сделать это самостоятельно. Просто напишите тему, которая вас интересует, и подумайте, что можно было бы изменить. Или может быть вы придумаете лучшее решение для моей проблемы. Вот несколько примеров, где необходимо провести исследования: тени; гамбургер-меню; что происходит после выравнивания?; онлайн-реклама; автомобильные интерфейсы; фиды; интерфейсы для детей; какова простейшая форма пользовательского интерфейса; аудио интерфейсы; интерфейсы виртуальной и дополненной реальности; градиенты; редизайн рабочего стола; комментирование; пользовательский интерфейс и алгоритмы; и многое другое! Но теперь давайте начнем с горизонтальной прокрутки.

Горизонтальная прокрутка

Задавая правильный вопрос

Мой вопрос: Как можно было бы использовать систему горизонтальной прокрутки для приложений? Я хотел сделать что-то новое и углубиться в наши принципы дизайна, поэтому я выбираю этот вопрос. Во-первых, мне пришлось найти разницу между этими двумя системами. Поэтому я сделал несколько эскизов, чтобы проиллюстрировать это. [caption id="attachment_36662" align="aligncenter" width="600"] Примитивное сравнение двух систем[/caption] В вертикальной системе страницы упорядочиваются друг над другом, и пользователь прокручивает страницу вниз, чтобы увидеть больше контента. Меню расположены сверху и снизу. Я думаю, что эта система так широко распространена, потому что с самого начала мобильных приложений вертикальная система была стандартом. Большинство дизайн-программ для проектирования и прототипирования основано на вертикальных артбордах. В обеих системах у вас есть примерно одинаковое пространство для работы. Поэтому, просто исходя из этого, кто-то может подумать, что они одинаковы. Но дьявол кроется в деталях, и эти детали – это меню и руководство пользователя.

Отвечая на вопрос

[caption id="attachment_36663" align="aligncenter" width="600"] Сколько пространства занимают меню[/caption] Поэтому первая и самая большая проблема, с которой я столкнулся – это меню. Я всегда думал, что они съедают огромное пространство, и, как вы можете видеть вертикальная система слева, не очень умно использует пространство. В верхней части находится панель навигации, а внизу – классическая tap панель. Иногда эти меню пропадают, когда пользователь начинает прокручивать страницу, но это не самый изящный способ, и он используется очень редко. Поэтому мне пришлось заняться этой первой проблемой. Я решил эту проблему, предоставив пользователю только простую индикацию, то есть больше страниц для открытия и гамбургер-меню. Это решение использует меньше места, но не предоставляет никакой информации о том, что вы можете делать с этими меню. Чтобы избавиться от этой проблемы, меню изменится после того, как пользователи начнут прокручивать страницу вверх или вниз, и появится меню навигации с подписями. [caption id="attachment_36664" align="aligncenter" width="600"] Два типа меню в моей концепции горизонтальной прокрутки[/caption] Слева вы увидите открытое меню навигации. Оно исчезнет, как только пользователь совершит переключение между двумя экранами. Это меню может отображать гораздо больше информации, такой как информация о приложении, уведомления или иконки. Справа находится off-canvas меню, доступ к которому обеспечивается нажатием иконки в левом нижнем углу. Он может содержать такие функции, как поиск, контакты или просто дополнительное меню.

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

После проведения всех исследований и выполнения эскизов настало время для базовой компоновки. Этот пример состоит из четырех страниц (одна из них – страница настроек) и off-canvas меню. Он основан на системе простой сетки. В off-canvas меню есть место для окна поиска и шести других элементов, таких как: поделиться публикацией, редактирование или быстрый доступ к различным функциям. В приведенном ниже видео показаны элементы в действии. Извините за топорную анимацию, но мне пришлось делать это с After Effects, так как никакое программное обеспечение для прототипирования не поддерживает такую систему.

Анимация базовой компоновки

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

Пример

Журнал

Это пример журнала. Он разделен на разделы, которые пользователь прокручивает на главной странице. Я попробовал его с предварительным просмотром устройства и думаю, что он ощущается очень естественно. Содержание всегда в фокусе, и оно представлено очень динамично. Когда пользователь прокручивает поданный материал, почти все меню исчезают, что еще больше улучшает пользовательский опыт. Пример горизонтальной прокрутки Основной материал журнала Особенно полноэкранные картинки выглядят потрясающе, и это немного похоже на формат stories на Medium. Якоря, которые останавливают прокрутку в начале каждого раздела, помогут перемещаться по длинному фиду. В целом, я могу сказать, что подобная прокрутка по фиду, очень привлекательна и является хорошим примером горизонтальной прокрутки. Горизонтальная прокрутка контента Medium Чтение страницы С другой стороны, очень сложно читать в горизонтальном интерфейсе, и такой формат кажется не очень органичным. Плюс этого формата в том, что можно легко разделить текст по абзацам. Решением могла бы быть смесь горизонтальной системы страниц и вертикальной прокрутки статей.

Журнал на практике

Заключение

Надеюсь, я продемонстрировал вам новый способ восприятия дизайна мобильных приложений и вдохновил вас на проведение собственных фундаментальных UI / UX исследований. Во время создания этой системы горизонтальной прокрутки я много узнал об основах дизайна. Я доволен результатом, но я думаю, что в этой области должно быть проведено гораздо больше исследований. Особенно живой прототип сможет помочь понять, будет ли эта концепция принята пользователем. Рост популярности Snapchat показывает мне, что новые подходы к пользовательскому интерфейсу стоят того, и пользователи стремятся изучить новые способы создания приложений. Эта концепция отражает мое мнение о дизайне, и я бы с радостью прочел и обсудил ваши отзывы в комментариях. Спасибо за внимание!


Перевод статьи Fabian Frey

Найновіші коментарі (0)