Java, UX, HTML, CSS, WEB-design

Дизайн для ориентации устройства: от книжной к альбомной

[ad_1]

  • Ави Ицкович

  • 0 Комментарии

Дизайн для ориентации устройства: от книжной к альбомной

  • 9 минут чтения

  • UX-дизайн, юзабилити, UX, шаблоны проектирования, веб-дизайн

Краткое резюме ↬

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

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

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

Дальнейшее чтение на SmashingMag:

  • Отзывчивый веб-дизайн: что это такое и как его использовать
  • Точки останова и будущее веб-сайтов
  • Создание лучшего отзывчивого веб-сайта
  • Как создать мобильный сайт

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

Еще после прыжка! Продолжить чтение ниже ↓

Использование ориентации устройства для дополнительного дисплея

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

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


Мобильный интерфейс YouTube в портретном и ландшафтном режимах.

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


В CardMunch от LinkedIn отсутствуют визуальные подсказки о вторичном интерфейсе.

Категории дизайна ориентации

Чтобы помочь UX-профессионалам и разработчикам, я выделил четыре основных шаблона дизайна ориентации устройства.

Жидкость

Этот интерфейс просто подстраивается под размер новой ориентации.


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


Мобильный интерфейс Pocket: тот же макет, другая ширина.

Расширенный

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


IMDb для iPad.

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

Дополнительный

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


Пример дополняющего интерфейса дизайна

Непрерывный

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


Умный пульт и программа передач.

Учитывая ориентацию по умолчанию

Above & Beyond — интерактивная электронная книга для iPad о жизни и творчестве американского художника-карикатуриста Джона Кашта. Красивое искусство в этой книге отображается как в портретном, так и в ландшафтном режимах. Однако в горизонтальном режиме отображаются важные интерактивные элементы, которые не отображаются в портретном режиме, например способ возврата в главное меню. Портрет — это ориентация iPad по умолчанию, поэтому включение этого типа дополнительной интерактивности только в ландшафтный режим может запутать многих пользователей.


Страница из «Выше и дальше». Интерактивные элементы не отображаются в портретном режиме по умолчанию.

В то время как портретный режим показывает подробный взгляд на искусство, а интерактивная электронная книга в начале дает некоторые инструкции, решение может заключаться в том, чтобы позволить пользователям касаться экрана, чтобы открыть меню. Ориентация по умолчанию для большинства смартфонов и для iPad — портретная. Однако альбомная ориентация используется по умолчанию для Android, планшетов с Windows 8 и BlackBerry Playbook. Чтобы избежать путаницы, помните, что основная ориентация вашего приложения всегда должна обслуживать режим и функции устройства по умолчанию, а не наоборот.

Понимание контекста

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

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


Поваренная книга Бетти Крокер для iPad — пример удобного для повара интерфейса.

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

Визуальные подсказки об ориентации

Вспомогательный экран или дополнительные функции, зависящие от ориентации, иногда могут быть нелогичными. Без каких-либо визуальных подсказок в определенной ориентации пользователь может вообще пропустить добавленную функциональность. Классическим примером этого является встроенный в iPhone калькулятор, как указано в сообщении Салона «Как превратить калькулятор iPhone в научный калькулятор» — функция, о которой многие пользователи не знают.

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

Заголовок

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

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

Переключить переключатель

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

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

Ниже приведены иллюстрации использования этого переключателя:


Кнопка переключения в строке заголовка.

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


Переключение ориентации в угловом треугольнике.

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

Чертежник

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


Иллюстрация управления ящиком.

Вывод

Проектирование для ориентации устройства не ново. Например, при повороте в ландшафтный режим смартфоны открывают большую виртуальную клавиатуру, а приложения электронной почты на планшетах переключаются на интерфейс «основной-подробности». Тем не менее, дизайн ориентации устройства широко рассматривается как второстепенный по отношению к основному интерфейсу, потому что его часто упускают из виду пользователи, которые придерживаются ориентации по умолчанию, главным образом потому, что они не знают о ее доступности. Добавляя в интерфейс простые визуальные подсказки, UX-специалисты могут использовать ориентацию устройства для улучшения своих продуктов и, в конечном счете, для обеспечения более привлекательного и удобного взаимодействия с пользователем.

(ал) (иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Дизайн для ориентации устройства: от книжной к альбомной

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Дизайн для ориентации устройства: от книжной к альбомной

Название: Дизайн для ориентации устройства: от книжной к альбомной . Краткое описание: [ad_1] ⭐ Ави Ицк . Дата публикации: 16.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»