Исчерпывающая карта экранов из предыдущего урока не привязана к конкретному форм-фактору устройства, хотя может выглядеть отлично на телефоне или устройстве подобного размера. В тоже время приложения для Android должны быть адаптированы к различным типам устройств, от 3" телефонов до 10" планшетов и 42" телевизоров. В этом уроке мы рассмотрим причины и техники объединения нескольких экранов из исчерпывающей карты.
Примечание: Проектирование приложений для телевизоров требует также внимания к другим факторам, включая методы взаимодействия пользователя(отсутствие сенсорного экрана), читаемость текста на больших расстояниях и другое. Поэтому обсуждение этого выходит за рамки курса, дополнительную информацию о проектировке для ТВ вы можете найдите по следующим ссылкам:Google TV документация и соответствующие design patternы.
Объединение экранов при помощи многопанельных разметок.
3 и 4 дюймовые экраны обычно подходят только для показа одной вертикальной панели с содержимым в момент времени, будь то список элементов или детальная информация об элементе. Поэтому на таких устройствах экраны обычно соотносятся с уровнями информационной иерархии как один-к-одному(категории-список объектов-детали объекта).
Большие экраны, как например экраны планшетов или телевизоров с, другой стороны имеют больше доступного экранного пространства и способны отображать несколько панелей с содержимым. В альбомном режиме, панели обычно упорядочиваются слева направо в порядке увеличения детализации. Пользователи особенно привыкли к нескольким панелям на больших экранах за годы работы с настольными приложениями и работой с веб-сайтами на настольном ПК. Большинство настольных приложений и вебсайтов предлагают левую навигационную панель или использование двупанельного режима главный/подчиненный.
В дополнение к решению этих пользовательских ожиданий необходимо обычно предоставлять несколько панелей с информацией на планшетах для избежания появления свободного пространства или неудобных элементов взаимодействия с пользователем, например кнопок размером 10 x 0.5-дюйма.
Следующие рисунки демонстрируют некоторые проблемы, которые могут появиться при перемещении пользовательского интерфейса на большие разметки и способы устранения этих проблем с многопанельными разметками:
Рисунок 1. Однопанельные разметки на больших экранах приводят в альбомном режиме к трате свободного пространства и чрезмерным длинам строк.
Рисунок 2.Многопанельные разметки в альбомном режиме приносят лучший визуальный баланс, больше полезности и лучшую читабельность.
Примечание реализации: После принятия решения о размере экрана, который будет разделять одно- и многопанельные разметки вы можете предоставить различные разметки, содержащие одну или несколько панелей для устройств в различных категориях размеров экрана(типа large/xlarge) или различных категориях ширины экранов (например sw600dp).
Примечание реализации: В то время, как один экран реализуется как подкласс Activity, отдельные панели с содержанием могут быть представлены как подклассы Fragment .Это увеличит повторное использование кода между различными форм-факторами и между экранами, разделяющими общее содержимое.
Проектирование для нескольких планшетных ориентаций.
Хотя мы еще не начали организацию элементов пользовательского интерфейса на наших экранах, это хорошее время для принятия решения о том, как ваши многопанельные экраны будут приспосабливаться к различным ориентациям экрана устройства. Многопанельные разметки в альбомном режиме могут работать хорошо из-за большего количества доступного горизонтального пространства. В тоже время, в портретной ориентации ваше горизонтальное пространство более ограничено, так что вам может понадобиться отдельная разметка для этой ориентации.
Ниже представлены несколько общих стратегий для создания портретных разметок планшетов.
Растягивание является самой простой стратегией для растягивания ширины каждой панели для лучшего представления в портретной ориентации. Панели могут быть фиксированной ширины или занимать определенный процент доступной ширины экрана.
Развернуть/свернуть является вариантом стратегии растягивания, работает это как свертывание содержимого левой панели в портретном режиме. Это отлично работает с главной/подчиненной панелями где левая(главная) панель содержит легко сворачиваемый список элементов. Примером может быть приложения чата в реальном времени. В альбомном режиме, левый список может содержать фото, имена и онлайн-статусы пользователей чата. В портретном, горизонтальное пространство может быть свернуто пряча имена пользователей и показывая только фото и иконки онлайн статуса. Опционально можно предоставить элемент управления для развертывания, позволяющий пользователю увеличивать или уменьшать ширину левой панели
Показать/спрятать. В этом сценарии, левая панель полностью прячется в портретном режиме. Тем не менее, для обеспечения функционального соответствия вашего экрана в портретном и альбомном режиме левая панель должна быть доступна при помощи элемента управления на экране(например кнопки). Обычно это использование кнопки Вверх на Action Bar (смотрите pattern docs ) для отображения левой панели.
Стек. Последняя стратегия-это вертикальный стек из ваших обычно горизонтально расположенных панелей, для применения в портретном режиме. Она работает отлично когда ваши панели не просто списки, основанные на тексте, или когда множество блоков с содержимым запускаются вдоль основной панели с содержимым. Будьте внимательны, чтобы избежать появления ошибки с пустым пространством, как описано в начале урока.
Объединение экранов на карте экранов.
Теперь когда мы способны сгруппировать отдельные экраны вместе предоставляя многопанельные разметки на устройствах с большими экранами, давайте применим эту технику к нашей избыточной карте экранов из предыдущего урока чтобы получить лучшее представление о иерархии нашего приложения на таких устройствах:
Рисунок 3.Обновленная карта экранов нашего приложения для планшетов.
Комментариев нет:
Отправить комментарий