Трекер выходит на большой экран

Trackr - это пример приложения для управления задачами. Хотя Trackr в основном используется для изучения общих шаблонов пользовательского интерфейса с точки зрения поддержки доступности, он также является одним из примеров, в которых мы демонстрируем современные передовые методы разработки Android. Недавно мы адаптировали приложение для больших экранов, поэтому давайте посмотрим, как применение материального дизайна и адаптивных шаблонов сделало работу пользователя более изысканной и интуитивно понятной на устройствах с большим экраном.

Навигация

До: на экране "Задачи" можно было получить доступ к архиву и настройкам из меню на нижней панели приложения. На больших экранах элемент управления меню представляет собой крошечную сенсорную мишень в неудобном месте, а нижняя панель приложения чрезмерно растянута.

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

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

Двухпанельные макеты

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

После: и на экране Задачи, и на экране Архив отображается пользовательский интерфейс со списком / подробностями с использованием SlidingPaneLayout. Мы писали о том, как это сделать, в предыдущей статье об изменениях, которые мы внесли в приложение Google I / O, так что проверьте это, если вас интересуют технические подробности.

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

Изменить задачу и новую задачу

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

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

Первоначально мы пытались отобразить этот пользовательский интерфейс на панели сведений, заменив элемент «Сведения о задаче». Хотя это было просто, мы быстро обнаружили, что нас не устраивает такой подход по нескольким причинам:

  • Нет смысла создавать новую задачу - функцию, которая теперь доступна повсеместно на панели навигации. Мы могли бы выделить новую задачу в отдельный пункт назначения и дать ей другое поведение, но это не казалось хорошим решением.
  • Изменить задачу очень похоже на подробности задачи, только с полями в редактируемом состоянии. В двухпанельном макете, когда мы заменяем деталь задачи на задачу редактирования на панели подробностей, почти ничего не происходит - просто не хватает визуального акцента там, где это должно быть. Напротив, DialogFragment привлекает пользователя и помещает фокус вперед и в центр.
  • Мы не хотим уходить от редактирования задачи (или новой задачи) до тех пор, пока пользователь не сохранит свои изменения или мы не подтвердим, что изменения можно отменить. Это легко перехватить, когда единственным выходом было использование кнопки возврата, но с новым дизайном приложения у нас есть дополнительные случаи, о которых нужно беспокоиться: пользователь может нажать что-то на панели навигации или выбрать другую задачу в списке. панель. Временное отключение всех этих элементов было бы обременительным. С DialogFragment все они скрываются за диалогом, и пользователь не может с ними взаимодействовать, а это именно то, что мы хотим.

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

I̶n̶ ̶p̶r̶o̶g̶r̶e̶s̶s̶ Завершено

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

Надеемся, вам понравился новый улучшенный трекер! Посмотрите код на github.com/android/trackr.