(Вы читаете перевод ускоренного курса UX. Курс включает 30 вопросов, которые встречаются на старте карьеры: UX Crash Course: 30 Std Questions. Если вы здесь впервые, то лучше начните сначала).
Как сделать дизайн адаптивным?
Когда вы, будучи новичком, спросите опытного дизайнера о том, как сделать дизайн адаптивным, ответ может запутать вас еще больше.
Адаптивность как концепция не так уж сложна, но в реальной жизни вам придется учесть множество деталей. Эти детали находятся в движении, и вам нужно будет искать наиболее распространенные разрешения экранов, делать прототип, чтобы увидеть все в действии, решать: какие элементы оставить, а от каких отказаться, и так далее.
Но не этот ответ нам нужен.
Глупый (но правдивый) ответ:
Нужно просто сделать так, чтобы макет страницы менялся по мере того, как меняется размер экрана.
Настоящий (и тоже правдивый) ответ:
Мы проектируем в несколько стадий.
Сначала проектируйте сайт под самый маленький и паршивый телефон. Этот подход называется “mobile first”. Сайт, возможно, будет представлять собой лишь одну колонку, потому что экран телефона слишком мал, чтобы вместить что-то большее (исключение: Pinterest!).
Тут вам придется убрать много лишнего, иначе получатся до смешного длинные страницы.
Из-за этих длинных, загроможденных страниц вы начнете считать себя дерьмовым дизайнером. Слушайте этот внутренний голос. Он пытается вам помочь.
Итак, вы начнете убирать все лишнее, и продолжите до тех пор, пока не останутся только самые важные функции и контент.
И вот когда вы, наконец-то, почувствуете, что сайт выглядит хорошо на телефоне, берите этот макет и переносите его на размер экрана айпада.
Он будет выглядеть глупым и полупустым — ведь на планшете гораздо больше места. Но тут-то начинается все самое интересное.
Вот почему этот вопрос совсем не глупый:
За адаптивным дизайном стоит более продвинутый образ мышления.
Если нормальный, “фиксированный” веб-дизайн можно сравнить со стрельбой по мишени, то адаптивный дизайн — это стрельба по движущейся мишени.
Люди, знакомые с техническими аспектами работы адаптивного дизайна, обычно начинают рассказывать про процентные соотношения, особенности мультимедиа и подробности адаптивной типографики, а также — как загружать разные изображения в зависимости от разрешения. Это все, конечно, интересно и полезно, но это не то, что хочет узнать новичок.
Это все равно, что ваши родители вдруг начнут рассказывать вам, как они вас создавали.
Слишком много информации.
Вам пока не нужно знать, как реализовать адаптивный дизайн.
Вам нужно знать, как начать делать наброски адаптивного дизайна.
Адаптивные макеты взаимосвязаны.
Думайте о макетах для телефона, планшета или десктопа как об одном и том же макете.
Он меняется.
Вы не проектируете три разных макета. Вы проектируете один макет в трех “режимах”. Или в пяти! Или в десяти!
(Ну десять — это, пожалуй, уже лишнего, но вы поняли).
Все, что есть на маленьком экране, должно также быть и на больших, но некоторые объекты вам, вероятно, захочется переместить в другие места.
Спросите себя: сломается ли что-нибудь, если макет немного растянуть в ширину или, наоборот, сжать? И если в дизайне есть элементы, которые работают только при фиксированном размере экрана, он пока не является адаптивным.
При смене размера экрана в идеальном адаптивном дизайне происходят минимальные изменения, необходимые для обеспечения его работы.
Нарисуйте ваши “режимы” макета рядом. Составляют ли они последовательность?
Так же, как обезьяна эволюционировала в человекообразную обезьяну, человекообразная обезьяна — в человека, а человек — в участника реалити-шоу, ваши макеты должны быть взаимосвязаны.
Спросите себя: как будет выглядеть сайт при переходе с одного размера экрана на другой? Будет ли это выглядеть как полный хаос или как небольшие корректировки?
Если нужно масштабировать картинку, или сжать текстовый блок, или подкорректировать размер шрифта, чтобы заголовок умещался в одну строчку, — нет проблем! Это и есть адаптивное мышление.
Если ваш сайт меняется с вертикального скроллинга на горизонтальный свайпинг, это … ну … странно. И, вероятно, к вам придут разработчики с вилами и факелами.
Это дело тонкое. На создание адаптивности требуется заложить много дополнительного времени, а также важно сохранить простоту.
Когда у вас на руках есть набор макетов, которые могут плавно переходить друг в друга при смене размера окна, — можете считать, что вы сделали свой первый адаптивный дизайн.
Завтра мы ответим на вопрос: “Какой формат изображений обеспечивает лучший пользовательский опыт?”