Примечание редактора: Добро пожаловать в Smashing Magazine UX Design Q& А. Вот как мы работаем: вы присылаете нам свои вопросы о веб-дизайне и UX дизайне, а мы выбираем лучшие из них и раз в месяц публикуем ответы. На ваши вопросы отвечает Кристиан Хольст, наш постоянный автор и основатель Baymard Institute. Ранее (до 2009 года) Кристиан принимал участие в разработке слуховых аппаратов и сервиса пользования кредитными картами, а также проводил частные консультации.
Адаптивный дизайн Vs.Отзывчивый дизайн
Вопрос:
“В каких видах сайтов/проектов лучше использовать адаптивные макеты (с фиксированными точками разрыва)? В каких видах сайтов лучше использовать отзывчивые макеты (с гибкими рамками) ”?
Теоретически, отзывчивые макеты всегда лучше, чем адаптивные, но в некоторых случаях адаптивная схема является более практичным решением.
Адаптивный подход даст вам больше контроля над дизайном, так как количество пикселей, с которым придётся работать, будет ограничено. Отзывчивый макет предполагает изменение количества пикселей в зависимости от размеров дисплея. Безусловно, различия на разных дисплеях/экранах будут минимальны, но это влечёт за собой некоторые трудности. Вы не всегда можете предугадать, как будет выглядеть ваш дизайн на том или ином устройстве. Это и является основным недостатком отзывчивых макетов. Но, это и его преимущество в то же время. Допуская некоторую неопределенность на поверхностном уровне, вы получаете уверенность в уровнях более фундаментальных. Конечно, вы не можете предсказать как каждый пиксель поведёт себя на экране 943 × 684, но будете уверены, что работать он будет, и расположение всех основных структур будет прежним.
Адаптивный дизайн также имеет свои преимущества, поскольку он, как правило, является более практичным решением. Его гораздо дешевле реализовать и проще тестировать. Адаптивный макет может рассматриваться как более дешёвый собрат отзывчивого макета. Поэтому он будет особенно удобным выходом в случае, если бюджет проекта сильно ограничен. Это актуально, если вы работаете с уже существующим сайтом, переписать который полностью не всегда представляется возможным. В таких случаях, адаптивный макет может быть самым хорошим решением для начала работы. За эту идею ратует Дэн Седерхолм в одной из своих статей.
Изображение с сайта Trent Walton.
Один из аргументов, который часто приводится в пользу адаптивных макетов, по сравнению с отзывчивыми макетами является большая простота вёрстки. Вы можете контролировать длину линий, не допускать лишних пробелов в заголовках. По этому поводу Трент Уолтон поделился некоторыми интересными мыслями.
В сущности, изменяя размеры шрифта (что совсем не сложно), вы можете быть уверены, что читаемость текста останется на прежнем уровне, а длина строки в вашем макете останется 50-75 символов в строке. Для того, чтобы текст заголовка не выбивался из общей картины, вы можете воспользоваться плагином FitText, он позволяет избежать появления лишних пробелов.
Отметим, что существует множество определений терминов “отзывчивый дизайн” и “адаптивный дизайн”. Джеффри Зельдман пишет о том, что если описывать отзывчивый дизайн с точки зрения технологического подхода, то не удастся передать всю гибкость подобного макета, поэтому определение должно быть более расширенным. Кроме того, Аарон Густавсон определяет адаптивный дизайн как “создание интерфейсов, которые адаптируются к возможностям пользователя (с точки зрения как формы, так и выполняемой функции). При этом применяется гибкий макет на основе сетки. В итоге, суммировав многочисленные определения и упростив их, можно сказать, что отзывчивый макет отличается гибкой сеткой, а адаптивный строится на основе фиксированной сетки.
Согласованность дизайна пользовательского интерфейса и конкретных мобильных устройств
“На что более важно обратить внимание при разработке программного продукта, ориентированного на различные устройства (например, Netlix и Pandora):на соответствие пользовательского интерфейса данной конкретной марке, или же на его универсальность для различных устройств (для Iphone, Android, Xbox)?”
Существует всего три важных фактора, которые необходимо учитывать: цели вашего бизнеса, то, насколько пользователи знакомы с вашим программным продуктом и то, насколько функциональность вашего продукта совместима с различными платформами.
- Ваши цели: возможно, как и многие компании, вы стремитесь завоевать доверие пользователей к своему бренду, повысить его популярность. Но стоит помнить, что пользователи, чаще всего, лучше знакомы с функциональностью конкретного мобильного устройства, чем с каким-либо приложением или программой. Якоб Нильсен часто повторяет: “Пользователи проводят большую часть времени на одних и тех же сайтах”. Но, так как мы сейчас говорим не о веб-сайтах, измените слово “сайт” на слово “приложение”, данный принцип всё равно останется справедливым.
- Знакомы ли пользователи с продуктом: сколько в среднем часов в день пользователи тратят на ваш сервис? Как долго они уже используют его? Каких пользователей больше: постоянных или случайных? К примеру, вам известно, что большинство ваших пользователей — постоянные, и проводят в вашем сервисе достаточно много времени уже в течение года. В этом случае имеет смысл сохранять свой уникальный пользовательский интерфейс вне зависимости от того, для какого устройства вы адаптируете саму программу (приложение). Ведь пользователи потратили долгое время на то, чтобы изучить все функции интерфейса и привыкнуть к нему. Если же, напротив, у вас мало пользователей, у которых уже сложилась некая когнитивная и эмоциональная связь с ваши …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров