что такое альбомная ориентация экрана
🚦 Android — любое приложение в альбомном режиме — drive2, instagram и.тд.
Привет всем! Как и обещал в своем Б/Ж — ссылка на запись.
Поведаю вам интересную информацию. Может кто-то конечно уже пользуется данным способом, но я его нашел недавно. Поехали:
Многие из вас уже сталкивались с тем, что многие приложения из Google Pley запускаются исключительно для работы в вертикальном режиме экрана — drive2, instagram, blabla car, Boom, Юла, Юлмарт, CCliner и Apple Music — я перечислил те приложения которыми пользуюсь именно Я, ваш список может быть больше.
Например ваш планшет или смартфон, инсталлирован в торпедо автомобиля или держится на каком-то крепеже в машине, в горизонтальном положении то возникает трудность полистать любимый драйв2 или какое-то другое приложение — во время ожидания и т.д. (речь не идет о использовании этих приложений на ходу).
• Заходим в Google Play и скачиваем приложение Set Orientation — play.google.com/store/app…e.eyesfree.setorientation — оно бесплатное.
• Запускаем его и видим варианты настройки — вкл/выкл, альбомная/альбомная всегда и т.д. — думаю разберетесь, сложного ничего нет. И жмем ОК — все, готово, пробуем запускать свои любимые приложения.
•Все гениальное просто — только не с приложением Apple Music(
Приложение переворачивается, работает, но в определенный момент оно вылетает так как начинает усиленно сопротивляться с таким разрешением)
Происходит это в тот момент когда вы тапаете по нижней части экрана — панель с названием трека которая при нажатии должна развернуться в режим плеера.
Начнем:
•Скачали приложение Apple Music (или оно уже есть у вас) — play.google.com/store/app…d=com.apple.android.music
• Как создать аккаунт и зарегистрировать объяснять не буду — этой инфы полно в интернете.
• Открыли приложение, вошли в раздел «Медиатека» ил «Для вас», кликаете на трек или альбом и перед вами появляется вот это (см. фото).
• Для того, чтобы воспроизвести всю папку нажимаете «Воспр.» и музыка звучит или кликнув по выбранному треку, но внизу экрана опять же эта злополучная иконка трека которая зависает( и кликнув по нижней части экрана, чтобы перейти в режим плеера — приложение зависнет.
• Лечится это так — кликаете на «Воспр» или «трек» 3 раза и вы увидите как иконка в три этапа уменьшится и появится в левом нижнем углу) — теперь можно открывать и закрывать режим плеера и кликать на треки в этой папке — все будет нормально. Повторить процедуру нужно будет в новой открытой папке.
Книжная и альбомная ориентация в мобильных интерфейсах
12 Ноя 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
Как правило встроенный акселерометр используется лишь для изменения ориентации экрана вашего мобильного устройства. Однако это лишь часть используемых возможностей.
И тем не менее разработка приложениях для различной ориентации требует вдумчивого проектирования. Эта функция должна быть уместна и максимально понятная пользователю.
Большинство приложений на данный момент использует или будет использовать различную ориентацию. В этой статье будут освещены основные понятия необходимые для работы с разной ориентацией.
Использование ориентации для вызова второго экрана
Приложение от YouTube наглядно демонстрирует эту функцию. В портретном режиме у пользователя есть много возможностей по управлению видео и учетными записями. В альбомном же режиме удобно управлять воспроизведением и смотреть видео. После окончания просмотра приложение изменяет ориентацию на портретную что вынуждает пользователя перейти к поиску новых видео.
YouTube в разных режимах.
Но не всегда изменение ориентации работает так продуманно. В CardMunch (визитки в LinkedIn) пользователи могут конвертировать фото визитки в контакт в адресной книге. В альбомном режиме полностью меняется интерфейс представления карт.
В альбомном режиме нет никаких подсказок и ограничено управление. Невозможно, к примеру, добавить новые карточки или же изменить существующие. В итоге, эта карусель вызывает лишь раздражение и недоумение.
CardMunch. Отсутствие визуальных подсказок в альбомной ориентации.
Модели поведения интерфейсов
В помощь UX-специалистам я разделил модели поведения интерфейса на 4 типа.
Текучий
Интерфейс меняется в зависимости от размеров экрана.
В Skype иконки меняю свое положение в зависимости от ориентации.
Pocket’s: одинаковая сетка, разная ширина.
Расширяющий
В этой модели интерфейс не только подстраивается по размер экрана, но и добавляет или убирает новые элементы. К примеру в IMDb для IPad в альбомном режиме используется широкая область для просмотра фильмографии. В портретной же ориентации этот список доступен только после нажатия дополнительной кнопки.
Обеспечение функциональности в любой ориентации дает пользователю комфорт. И вместе с тем позволяет пользоваться приложением при любой ориентации не принуждая держать устройство определенным образом.
Дополняющий
При использовании этой модели изменение ориентации вызывает альтернативный экран. К примеру, финансовое приложение. В вертикальной ориентации информация отображается таблицей, а в горизонтальной графиком.
Основной и дополнительный интерфейс в финансовом приложении.
Непрерывный
Изменение ориентации позволяет получить доступ к дополнительному интерфейсу. При этом функциональность предыдущего интерфейса сохраняется в новом. Например, приложение-пульт от ТВ. В альбомной ориентации открывается список каналов с сохранением функциональности по настройке, записи и просмотру каналов.
Программа передач в Smart Remote.
Определение ориентации по умолчанию
Above & Beyond интерактивное приложение-книга для Айпада о жизни и творчестве карикатуриста John Kascht. Насладиться карикатурами мы можем как в портретном так и в альбомном варианте. Однако горизонтальный режим показывает больше значимых и функциональных элементов. Вертикальная ориентация является дефолтной в Айпаде и перенос функциональных элементов в горизонтальную может сбить пользователей с толку.
Отсутствие управляющих элементов в вертикальной ориентации.
И в тоже время на планшетах Android, Windows 8, Playbook BlackBerry, ориентация по умолчанию — альбомная. Поэтому всегда стоит помнить о ориентации по умолчанию на том или ином устройстве.
Контекст использования
Используя различную экранную ориентацию можно значительно облегчить пользователю работу с кулинарной книгой. В портретной ориентации пользователь ищет рецепт. В альбомной ориентации начинается процесс готовки. В альбомной ориентации открывается удобный интерфейс с большими кнопками, отключается затемнение экрана, камера начинает воспринимать управляющие жесты (это поможет избежать прикосновения к экрану грязными пальцами).
Поваренная книга Бетти Крокер отличный пример правильного использования ориентации.
Визуальные подсказки о режимах ориентации
Дополнительная функциональность или экран могут быть непонятны. Если не дать пользователю подсказку, то та или иная функциональность может быть упущена. Например, классический калькулятор Айфона при смене ориентации может меняться на инженерный.
Визуальные подсказки могут значительно облегчить понимание интерфейса. Смотрим примеры.
Заголовок приложения
Положение заголовка может дать подсказку о дополнительной функциональности при смене ориентации.
Иконка
Есть много универсальных значков, например универсальный значок Share или кнопка Action у Apple. Поэтому предлагаю использовать специальную иконку для указания возможности смены ориентации. Его можно скачать пользоваться бесплатно.
Иконка появляется в любое время и используется как переключатель. Пользователю нет необходимости переворачивать экран, но иконка будет напоминать о возможности дополнительной функциональности.
Изменение кнопки в заголовке окна.
Иконка может работать и как индикатор ориентации.
Примечание: Идея не проверена и минусом такого решения является загромождение интерфейса. И в тоже время идея поможет расширить применение режимов ориентации и расширить их применение.
Шторка
Идея проста и заключается в показе некоего элемента при сдвиге которого будет показываться альтернативный экран.
Заключение
Проектирование интерфейсов с использованием ориентации не ново. К примеру, в альбомном режиме смартфоны открывают большую клавиатуру, а а почта перейдет на Master–detail интерфейс. Но такое проектирование в первую очередь идет как дополнение к основному интерфейсу. А пользователи, которые используют дефолтную ориентации часто и не догадываются о таких возможностях. Добавив простые подсказки дизайнеры интерфейсов могут сделать свои продукты еще понятнее и удобней.
Проектирование интерфейсов для мобильных устройств: книжная и альбомная ориентации
Встроенный в ваш смартфон или планшет акселерометер, как правило используется для переключения между портретным и альбомным режимами. Эта функция предоставляет широкие возможности для более удобного использования устройства.
Тем не менее, разработка приложения для различных режимов ориентации приносит некоторые проблемы и требует более внимательного отношения. Применение этой функции должно быть понятным пользователю. А мы как разработчики должны понимать контекст использования этой возможности.
Почти все мобильные и планшетные приложения используют или будут использовать функцию ориентации. В данной статье рассматриваются некоторые основные понятия, которые дизайнеры и разработчики могут использовать чтобы правильно спланировать переключение между режимами.
Использование устройства ориентации для активации дополнительного экрана
Мобильное приложение YouTube является хорошим примером применения функции ориентации. Портретный режим предлагает многофункциональный интерфейс для открытия видео и просмотра учетной записи пользователя. Альбомный режим обеспечивает комфортный просмотр и управление воспроизведением. Когда видео заканчивается дисплей автоматически переходит из альбомного обратно в книжную ориентацию, что заставляет пользователя быстро наклонить устройство для просмотра и поиска новых видеороликов.
Однако использование ориентации для активации дополнительного экрана может и наоборот сбить пользователя с толку. Например в CardMunch (бизнес-карты пользователя LinkedIn) где пользователи могут преобразовывать изображения визитки, сделаные с помощью камеры смартфона в контакты в адресной книге. Вращающийся CardMunch в альбомном режиме полностью изменяет интерфейс для обзора всех сохраненных карт.
YouTube мобильный интерфейс в портретном и альбомном режимах.
Этот интерфейс не имеет никаких визуальных подсказок о своей ориентации и имеет ограниченные функции управления. Вы не можете добавить или изменить визитные карточки, в результате чего эта карусель несколько раздражает и смущает, особенно если вы запустили приложение в альбомном режиме.
CardMunch на LinkedIn отсутствуют визуальные подсказки о его дополнительном экране.
Модели для конструирования ориентации
Чтобы помочь UX-специалистам я выделил четыре основные модели для конструирования ориентации.
Жидкость
Этот интерфейс просто приспосабливается к размерам экрана.
В мобильном интерфейсе Skype иконки меняют положение при переходе из книжной ориентации в альбомную.
Pocket’s мобильный интерфейс, тот же макет только разная ширина.
Расширенный
Этот интерфейс не только подстраивается под размер экрана, но и добавляет или вычитает расположение компонентов в соответствии с выбранным режимом ориентации. Наприемер IMDb для IPad использует широкий экран в ландшафтном режиме, чтобы иметь возможность просматривать фильмографию слева. Этот список также доступен и в портретном режиме, но только после нажатия соответствующей кнопки в правой части экрана.
IMDb для IPad.
Обеспечение визуальных элементов и функциональности в любом положении в конечном итоге дает удобство для пользователя. Тем не менее, не насаждая пользователю держать устройство определенным образом дает особое преимущество, особенно если необходимая функциональность не появляется в ориентации по умолчанию.
Дополнительный
В этой модели изменение ориентации вызывает вспомогательный экран с соответствующей дополнительной информацией. Примером может служить финансовое приложение, которое отображает данные в портретном режиме по умолчанию, а при изменении ориентации показывает визуальный график.
Пример основного и дополнительного окна приложения о финансах.
Непрерывный
Как и YouTube, непрерывный дизайн позволяет пользователю получить доступ к дополнительному интерфейсу путем простого вращения устройства. В качестве примера можно использовать смартфон в качестве пульта дистанционного управления для смарт-ТВ. В режиме альбомной ориентации устройство откроет полный путеводитель по программам, сохраняя при этом функциональность для изменения настроек каналов, просмотра и записи будущих программ.
Smart Remote и программа передач.
Ориентация по умолчанию
Above & Beyond это интерактивная книга для IPad о жизни и творчестве американского художника-карикатуриста John Kascht. Прекрасное искусство в этой книге отображается как в портретном так и альбомном режиме. Тем не менее, горизонтальный режим показывает важные интерактивные элементы, которые не отображаются в портретном, такие как возврат в главное меню. Портеретная ориентация, является ориентацией по умолчанию в IPad, поэтому перенос подобной функциональности в альбомный режим могут только запутать пользователей.
В портретном режиме отсутствуют элементы управления.
В отличии от устройств на Android, Windows 8, Playbook BlackBerry, где по умолчанию ориентация альбомная. Поэтому стоит помнить, что ориентация по умолчанию должна использоватся вашими пользователями по назначению.
Понимание контекста
При разработке приложений для смарт-устройств давайте рассмотрим контекст и обстоятельства, при которых это приложение будет использоваться, в частности при разработке режима ориентации. Например: интерактивные поваренные книги стали очень популярны. Производители оборудования и аксессуаров создают множество устройств для облегчения использования IPad на кухне, в том числе моющийся стилус для использования при приготовлении пищи.
Мы можем использовать ориентацию для создания более удобного интерфейса для пользователя. В портретной ориентации пользователи могут пролистывать список ингридиентов в рецептах для конкретного блюда. При переключении в альбомный режим интерфейс изменится на пошаговую инструкцию с большими кнопками. Этот дружественный к повару интерфейс предотвратит автоматическое затемнение экрана, а также позволит переключать страницы взмахом руки перед камерой, чтобы избежать прикосновению к экрану грязными руками во время приготовления пищи.
Поваренная книга Бетти Крокер для IPad является примером понятного интерфейса.
Визуальные подсказки о режимах ориентации
Дополнительный экран или дополнительная функциональность зависящая от ориентации не всегда может быть понятной и логичной. Без визуальных подсказок в определенной ориентации, пользователь может пропустить дополнительную функциональность. Классическим примером может служить встроенный в iPhone обычный калькулятор, который как многие не знают может меняться на инженерный.
Визуальные подсказки при ориентации в целом могут значительно упростить и сделать работу пользователя более интуитивно понятной. Ниже приведены несколько примеров того как можно использовать подсказки при режимах ориентации.
Title Bar
Указание загаловка в начале приложения тонкая подсказка пользователю. Этот метод особенно важен при использовании ориентации на дополнительном экране, и служит надежным напоминанием о дополнительном функционале.
Примечание: Данный метод не обеспечит 100% эффективности в понимании пользователем функционала режима ориентирования, более надежным методом можно считать применение графических указателей или Coach Marks.
Значок ориентации
Многие универсальные значки, такие как универсальный значок Share или кнопка Action у Apple зарекомендовали себя с хорошей стороны, поэтому я предлагаю стандартный значок для ориентации. Вы можете скачать его и использовать бесплатно.
Иконка может появиться в любое время и использоватся как переключатель между ориентациями дисплея. От пользователя не требуется поворачивать экран для просмотра дополнительной информации, но иконка будет подталкивать пользователя к использованию ориентации для просмотра дополнительного экрана. В конечном счете значок будет служить напоминанием о дополнительной функциональности.
Ниже приведены примеры использования этого значка ориентации:
Переключите кнопку в заголовке окна.
При условии что этот значок станет стандартом, то он сможет послужить хорошим индикатором ориентации.
Ориентация переключения в углу экрана.
Примечание: Значек ориентации не является проверенной идеей, и большим его минусом является излишнее наполнение интерфейса. Однако на мой взгляд идея проста и эффективна и позволит разработчикам лучше использовать режим ориентации и расширить его применение.
Занавеска
Иллюстрация работы Занавески.
Идея заключается в том, чтобы показать некий выдвигающийся элемент, который будет закрывать или открывать дополнительный экран как занавеска. Которую пользователи смогут свободно открывать и закрывать.
Разбираемся с ориентацией экрана
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Ориентация экрана не идентична ориентации устройства. Даже если устройство не способно определить своё положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для сохранения или адаптации интерфейса веб-приложения.
Управление ориентацией экрана доступно в CSS и JavaScript. Например, использование медиавыражений позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).
Для определения положения экрана и его блокировки можно воспользоваться JavaScript Screen orientation API.
Настройка раскладки содержимого по ориентации экрана
Допустим вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиавыражений.
Пример. Имеется HTML страница:
Теперь разберёмся с поведением страницы в различных случаях ориентации.