Личный блог Дмитрия Подлужного: о работе и около нее

Про выбор размеров при проектировании адаптивных решений

Проектирование, 8 октября 2014

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

Начал я с четырех размерных рядов: смартфон, два размера под планшеты, большой десктоп.

tz-ap-20141006-v-0-2-10

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

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

Важные для адаптивного проектирование аспекты

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

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

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

Памятка для «маньяков» желающих сделать все размеры

Мне кажется лучше всего ориентироваться на идеологию фрейворка Foundation, который предлагает использовать относительные размерные единицы (EM). Использование точек (PX) легко может вводить в заблуждение, особенно сейчас, когда полно экранов с высоким разрешением. И даже здесь, когда я пишу о пикселах, я подразумеваю, что размер может быть отмасштабирован.

Размер экрана(исходя из того, что мы правильно обрабатываем viewports для ретина экранов):

  • меньше 640 px (small)
  • 641 — 1024 px (medium)
  • 1025 — 1440 px (large)
  • 1441 — 1920 px (xlarge)
  • больше 1921 px (xxlarge)

Ориентация экрана:

  • горизонтальная (landscape)
  • вертикальная (portrait)

Особенности устройства:

  • тачскрин (touch)
  • нет тачскрина (no touch)

Еще можно учитывать:

  • отключенный JS
  • печать страницы (@media print)
Подлужный Дмитрий Арнольдович

Об авторе

Дмитрий Подлужный – UX Leader в ADV/web-engineering co. (ранее UX Leader, Art director, PM в студии Spacebox) и консультант по UX в свободное время.