Требования к PSD макетам для отзывчивого дизайна

lolmaus edited this page Nov 14, 2013 · 1 revision

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

Сначала проектирование интерфейса, потом оформление

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

Это можно делать на бумаге, но гораздо удобнее это делать при помощи специализированных приложений или онлайн сервисов. Один из таких сервисов — http://uxpin.com . Он платный, но докинуть $15 к стоимости дизайна, которая нередко начинается с $1000, — не проблема.

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

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

Общие требования к структуре страниц

  • Ширина контейнера страницы должна быть резиновой (разрешается зафиксировать максимальный размер).
  • Нельзя использовать жесткую модульную сетку, например, 12 колонок с фиксированной шириной колонки и отступа. Вместо этого для каждого куска страницы, в котором элементы должны быть выравнены по сетке, должна использоваться своя сетка с относительными размерами колонки и отсутпа. Например, «три колонки, ширина колонки и отступа соотносятся как 10 к 2. Количество столбцов в сетке может (и должно) меняться при изменении ширины экрана. Простейший пример можно посмотреть тут: http://sassbin.com/gist/5670191/
  • На одной странице и на одной ширине экрана может использоваться несколько разных сеток (например: три, четыре и пять столбцов).
  • Рекомендуется ограничивать длину строки текста, так как при чтении слишком длинных строк взгляд все время теряет строку, когда возвращается в начало строки. Часто можно встретить утвреждение, что оптимальной является длина порядка 40—75 знаков, однако многие сайты ограничивают длину строки значением 120 знаков и даже более.
  • Как правило, отзывчивые сайты имеют гораздо более свободную компоновку, в ней больше «воздуха» — пустого пространства между элементами. Это облегчает восприятие информации. Такие сайты не перегружены, как многие сайты старого типа. Они не стремятся вывалить всё сразу. В отзывчивых сайтах контент и функционал распределны по вертикали. Нет смысла пытаться впихнуть всё на «первый экран», даже домохозяйки умеют пользоваться прокруткой. Кроме того, отзывчивые сайты не стенсяются разносить контент и функционал по отдельным страницам, они не пытаются напихать как можно больше всего в одну кучу. Поэтому...
  • Забудьте о боковых панельках с рекламными баннерами, акциями, прогнозами погоды и прочей чушью. На первом и единственном месте должен быть контент. Черпайте вдохновение на http://mediaqueri.es/ , в этом каталоге представлено много прекрасных отзывчивых сайтов. Обращайте внимание на структуру внутренних страниц, а не только титульную!

Сравните, как выглядят на мобильнике типичный западный и типичный российский сайты:

западный сайт российский сайт

Какие преобразования структурных элементов допустимы

  • Блоки и отдельные элементы в блоках могут появляться и исчезать.
  • Блоки и отдельные элементы в блоках могут менять оформление (цвета, фоны, размеры отступов, наличие пиктограмм).
  • Блоки и отдельные элементы в блоках могут превращаться из блочных в строчные и обратно;
  • Размер шрифта основного текста меняться не должен, так как устройства всех размеров имеют более или менее одинаковое виртуальное разрешение (например, у iPhone 5 оно составляет 320×568).
  • Допускается изменение размера шрифта крупных заголовков в тексте.
  • Возможности по изменению порядка следования элементов в верстке сильно ограничены, лучше избегать этого.

Важно очень строго вписываться в требования. При любых сомнениях следует обсудить варианты с верстальщиком.

Пример преобразования

В рамках этих требований позволяет делать достаточно сложные преобразования.

Например, меню навигации может иметь следующую иерархию элементов:

--- Контейнер блока меню ------------------
|                                         |
|  --- Заголовок меню ------------------  |
|  | «Навигация»                       |  |
|  ------------------------------------|  |
|                                         |
|  --- Контейнер списка пунктов меню ---  |
|  |                                   |  |
|  |  --- Пункт меню ---------------|  |  |
|  |  | «Главная»                   |  |  |
|  |  ------------------------------|  |  |
|  |                                   |  |
|  |  --- Пункт меню ---------------|  |  |
|  |  | «Услуги»                    |  |  |
|  |  -------------------------------  |  |
|  |                                   |  |
|  |  --- Пункт меню ---------------|  |  |
|  |  | «Товары»                    |  |  |
|  |  -------------------------------  |  |
|  |                                   |  |
|  |  --- Пункт меню ---------------|  |  |
|  |  | «Контакты»                  |  |  |
|  |  -------------------------------  |  |
|  |                                   |  |
|  -------------------------------------  |
|                                         |
-------------------------------------------

Для широких экранов используется следующее оформление:

  • заголовок меню скрыт;
  • пункты меню выстроены в одну строку и выравненные по центру или по ширине;
  • какое-либо оформление отсутствует.

Для узких экранов используется следующее оформление:

  • контейнер меню имеет фон и рамку со скругленными краями;
  • заголовок меню виден;
  • контейнер списка пунктов со всеми пункатми — невидим;
  • при наведении курсора на заголовок (или прикосновении к нему), контейнер пунктов появляется ниже, при этом пункты меню являются блочными элементами.

Пример можно посмотреть тут: http://avenuemedia.github.io/avenuemedia.ru-middleman/

Breakpoints — значения ширины окна, на которых происходят адаптивные преобразования

«Виртуальные» разрешения экранов различных устройств можно посмотртеть тут.

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

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

Пример: 400px, 600px, 800px, 1000px, 1200px, 1400px...

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

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.