Доработка приложения
“Консультант-Плюс”
Описание процесса редизайна приложения “Консультант-Плюс” под ОС Android. Включает базовый разбор поискового кейса и дальнейшего просмотра статей.
Сложность восприятия текущей версии поиска связана с необходимостью совмещения поисковой выдачи с хайлайтом и навигации по оглавлению конкретного текста одновременно.
Для того, чтобы разобраться в том, как реализовать этот функционал, я решил посмотреть механику поиска с начала возможного кейса, а также навигацию по документу вне поискового контекста.
В текущей версии приложения навигация дублируется в сайдбаре и аппбаре в виде табов, что не совсем оправданно. Таким образом, пользователь не может видеть и иметь доступ к основным вкладкам приложения сразу. Моим решением стала нижняя навигация. Она позволит быстро переключаться между основными вкладками (Журнал, т.б. Историю переместил бы в сайдбар, как менее значительную). В качестве акцента выбрал фирменный сиреневый оттенок.
Основной экран приложения
Функционал расширенного поиска оторван от основного кейса, в нынешнем виде отыскать его в сайдбаре достаточно затруднительно, поэтому перенес его прямо в строку поиска.
Иконку меню решил видоизменить, комбинированное лого с гамбургером уже не актуально, для понимания функционала контрола одиночного логотипа будет достаточно. Эти изменения позволили растянуть поисковый инпут на всю ширину аппбара и гармонизировать интерфейс.
Сейчас в приложении есть 2 основных поисковых кейса: полнотекстовый поиск с главного экрана и поиск в конкретном документе. Они дублируют функционал друг друга, но визуально немного отличны, плюс поиск по документу реализован скорее как IOS поисковый паттерн. Я решил упростить эту схему, сделав механику поиска однообразной, и привести к требованиям платформы.
При активизации поисковой строки система выдает предикацию из недавних поисковых запросов, а при подверждении ввода запроса, перебрасывает на новый экран. Осуществлять этот переход оптимальнее сразу при активизации инпута по тапу.
Экран с активной строкой поиска
При этом поисковая строка анимированно немного расширяется и уходит оранжевый бэк - пользователь сразу понимает, что инпут активен.
Следующий экран - поисковая выдача, его в плане механики и вижуала почти не трогал.
Результаты поиска
Проектировать экраны просмотра документа начал с первого экрана - открытия документа из списка вне поиска.
В аппбаре помещается слишком мало текстовой информации, и морфинг, который появляется при скролле и выдает больше символов в названии не спасает ситуацию - просмотреть название документа полностью все равно нельзя, а в оглавлении наименование не отображено.
Аппбар расширил до пропорции 16:9, из панели действий убрал наименование текущего экрана, вынес из меню наиболее значимые компоненты, которыми пользуются чаще всего: закладки и размер шрифта. К наименованию ниже добавил иконку типа документа. По умолчанию такая пропорция аппбара вмещает 3 строки текста; не поместившиеся строки скрыты ниже - по тапу / скроллу области аппбара, он раскрывается на полную высоту контента. На наличие скрытых строк указывает градиент видимой строки. При скролле вверх, аппбар уменьшается по высоте, название адаптивно уменьшается и в усеченном виде появляется в аппбаре в двух строках (в первой название, во второй - наименование части документа, в которой находится пользователь, при скролле она актуализируется).
Экран просмотра документа. Начальная позиция
Еще одним решением стало добавление прогресс-бара внизу страницы - он сразу позволяет оценить местонахождение в документе. Доступ к оглавлению организовал в виде fab'а. Быстрая навигация по документу - одно из наиболее конкретных целевых действий. Поэтому решил несколько акцентировать на нем внимание. При скролле вниз, кнопка исчезает, появляется снова при обратном скролле, такое поведение позволит избежать помех при чтении.
Механика аппбара при скролле вверх / вниз
По нажатию на FAB, появляется модульный нижний лист. В нем отражено полное наименование документа, дубль некоторых основных контролов управления из аппбара, прогресс чтения с указанием конкретного места в документе (передвигая ползунок, можно перемещаться по главам документа, не заходя в основное содержание).
Быстрый доступ к информации о текущем документе, оглавлению и прогрессу чтения
При свайпе вверх / тапу на кнопку Оглавление, нижний лист раскроется на весь экран, полностью отобразится оглавление от текущего момента и далее, с возможностью перемещения в начало. Свернуть панель можно, нажав на стрелку в левом верхнем углу либо по свайпу вниз.
Вариант навигации по документу в режиме поиска
Для создания макетов в качестве эксперимента попробовал Adobe XD в связке с Zeplin. Проектируемое разрешение — mdpi.
