Отзывчивый веб-дизайн - что должно произойти, когда мобильное устройство повернуто?

В настоящее время стандартное поведение для просмотра веб-страниц на мобильном устройстве заключается в следующем:

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

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

При повороте с портретной на альбомную, если вы:

  • a) Повторно определите ширину устройства и сопоставьте содержимое в соответствии с новыми измерениями (тем самым сохраняя те же размеры шрифта /изображений, что и при просмотре портрета).

  • b) Сохраняйте те же размеры и при вращении просто приведите содержимое в соответствие с окном (таким образом, масштабируя содержимое, чтобы сделать его более читаемым для зрителей, если текст ориентации на портрет слишком маленький).

mockup

скачать источник bmml - Wireframes созданный с помощью макетов Balsamiq

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

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

64 голоса | спросил JonW 2 PM00000020000003031 2012, 14:30:30

8 ответов


21

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

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

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

tl; dr - не изменять содержимое после загрузки страницы .

ответил Jimmy Breck-McKye 20 ThuEurope/Moscow2012-12-20T18:51:46+04:00Europe/Moscow12bEurope/MoscowThu, 20 Dec 2012 18:51:46 +0400 2012, 18:51:46
23

Лично я сторонник сайтов со смесью этих двух.

  • Шрифты должны иметь одинаковый размер как в пейзаже, так и в портретном. Он должен просто распределяться по-разному в зависимости от текущей ширины экрана. Как вы также показали в макете для A.

Я чувствую, что также масштабирование текста похоже на отказ от представления о том, что « -ok, мы знаем, что текст очень мал в портретном режиме, но если вы переворачиваете телефон, его должно быть легко читать! ». Если это ваша позиция, то размер текста в портретном режиме! Единственное реальное преимущество в том, что в портретном режиме меньше текста, так это то, что пользователь может видеть больше страницы одновременно. Но это также может быть достигнуто путем тщательного анализа аспектов раскрываемости при проектировании.

  • Изображения могут быть и должны быть масштабируемыми, хотя, как описано в опции B.

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

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

ответил AndroidHustle 2 PM00000030000000231 2012, 15:14:02
16

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

Вместо этого мне нравятся страницы (или приложения), которые отображают больше в ландшафте, чем в портретном. На веб-странице, которая может быть изображением, связанными ссылками или даже «коробкой с фактами». В собственном приложении есть лучший контроль, и вы можете предоставить больше параметров, таких как калькулятор Windows Phone 7.

Калькулятор Windows Phone 7 в портретном представлении Калькулятор Windows Phone 7 в ландшафтном представлении

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

ответил 4rchit3ct 2 PM000000100000000331 2012, 22:46:03
14

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

введите описание изображения здесь>> </p>

<p> Далее представлен проект <strong> расширенный </strong>, который добавляет элемент, который может или не может быть навигацией, к существующему экрану в вертикальной ориентации. Исходный экран остается нетронутым, а горизонтальное перемещение устройства приводит к появлению расширенного элемента. </p>

<p> <img src = UX DESIGN FOR MOBILE Проектирование для устройства Ориентация: от портрета к ландшафту

ответил 4rchit3ct 19 WedEurope/Moscow2012-12-19T23:21:13+04:00Europe/Moscow12bEurope/MoscowWed, 19 Dec 2012 23:21:13 +0400 2012, 23:21:13
2

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

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

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

Но все зависит от содержимого.

ответил obelia 19 WedEurope/Moscow2012-12-19T23:45:55+04:00Europe/Moscow12bEurope/MoscowWed, 19 Dec 2012 23:45:55 +0400 2012, 23:45:55
1

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

ответил Max E 21 FriEurope/Moscow2012-12-21T01:01:18+04:00Europe/Moscow12bEurope/MoscowFri, 21 Dec 2012 01:01:18 +0400 2012, 01:01:18
1

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

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

ответил PhonicUK 20 ThuEurope/Moscow2012-12-20T18:28:06+04:00Europe/Moscow12bEurope/MoscowThu, 20 Dec 2012 18:28:06 +0400 2012, 18:28:06
0

Итак, это январь 2017. Это был хороший вопрос в 2012 году, но я чувствую, что наш опыт изменил наше мнение. Движение реагирования в основном предпочитает следовать правилу

  

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

путем реорганизации макета при изменении ориентации. Это, похоже, стало принятой и ожидаемой практикой.

OTOH, выступая в качестве «старого парня» 50 лет с естественным снижением зрения, я нахожу отсутствие ущемления на некоторых веб-сайтах болью, и у меня есть некоторое сочувствие к принятому ответу с 2012 года, который предлагает сохранить макет такой же, но только увеличение размера шрифта.

В любом случае, мое собственное мышление - другие согласны с тем, что мир перешел, и этот вопрос нуждается в новом ответе?

ответил Vanquished Wombat 8 Jpm1000000pmSun, 08 Jan 2017 20:37:09 +030017 2017, 20:37:09

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132