Адаптивный и адаптивный дизайн

1. Адаптивный дизайн
2. Адаптивный веб-дизайн
3. Автономный мобильный дизайн
4. Выбор между адаптивным и адаптивным дизайном
5. Забрать
6. Ресурсы и где узнать больше

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

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

Автор / правообладатель: Стефани Вальтер. Условия авторского права и лицензия: CC BY-SA 3.0

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

Адаптивный дизайн

Автор / Владелец авторских прав: Muhammad Rafizeldi .. Условия авторского права и лицензия: CC BY-SA 3.0

Термин «Адаптивный дизайн» впервые был придуман веб-дизайнером и разработчиком Итаном Маркоттом в его книге « Адаптивный веб-дизайн» . Адаптивные дизайны реагируют на изменения ширины браузера, регулируя расположение элементов дизайна в соответствии с доступным пространством.

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

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

Адаптивный веб-дизайн

Адаптивный веб-дизайн был представлен в 2011 году веб-дизайнером Аароном Густафсоном в его книге « Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением». Это также известно как прогрессивное улучшение веб-сайта.

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

Некоторые сайты быстро приняли адаптивный дизайн. Amazon, USA Today, Apple и About.com настроены на оптимизацию мобильных сайтов. Посмотрите на это. Обратите внимание, что макет, отображаемый на мобильном веб-сайте с использованием адаптивного дизайна, может отличаться от версии для настольного компьютера. Однако это связано с тем, что дизайнеры выбрали другую компоновку экрана телефона, а не оставили дизайн, чтобы попытаться перестроиться.

В адаптивном дизайне нормально разработать шесть дизайнов для шести наиболее распространенных значений ширины экрана; 320, 480, 760, 960, 1200 и 1600 пикселей.

Автономный мобильный дизайн

Существует также возможность создания веб-сайта, предназначенного только для мобильных устройств (они обычно обозначаются в строке URL браузера с использованием префикса «m.»). Этот вариант когда-то был отличным подходом. Дизайнеры будут создавать сайты для мобильных устройств, настраивая элементы и макет для выделенного формата. Google поставил рейтинг поисковых систем на мобильные сайты, но сегодня такие же предпочтения отдаются адаптивным и адаптивным сайтам.

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

Выбор между адаптивным и адаптивным дизайном

Автор / правообладатель: Стефани Вальтер. Условия авторского права и лицензия: CC BY-SA 3.0

Адаптивный дизайн проще и требует меньше работы для реализации. Это дает меньше контроля над вашим дизайном на каждом размере экрана, но на данный момент это наиболее предпочтительный метод для создания новых сайтов. Это также может быть связано с большим количеством дешевых шаблонов, доступных для большинства систем управления контентом (CMS), таких как WordPress, Joomla и т. Д. - в конце концов, кто хочет изобретать велосипед?

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

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

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

Адаптивный дизайн, кажется, имеет веские основания для использования. Ну, это может; однако, имейте в виду следующее:

• Поскольку ваш веб-сайт будет «перетекать» с устройства на устройство, приспосабливаясь к размеру экрана, любая добавленная вами реклама может не уместиться в этом пространстве. Внезапно, «ярлык», предлагаемый с использованием адаптивного дизайна, может потребовать некоторого переосмысления и работы.
• Время загрузки зависит от настольных и мобильных устройств. Гибкость изображений является важным фактором здесь. Большой дизайн, который быстро появляется на большом экране дома или в офисе, занимает больше времени (и данных), чтобы появиться на вашем мобильном телефоне. Может ли небольшой предварительный просмотр быть лучше для мобильной версии?

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

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

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

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

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

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

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

Наконец, в то время как поисковые роботы лучше разбираются в сортировке и сортировке хитов, чтобы различать ваши сайты «.com» и «m .com», разумно принять статус-кво. Большинство поисковых систем по-прежнему не оценивают идентичный контент по нескольким URL-адресам одинаково. Это означает, что нужно помнить, что адаптивный дизайн может удержать вас на SEO.

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

Забрать

Автор / правообладатель: Брисбен Веб-дизайн , Условия авторского права и лицензия: Public Domain

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

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

Pros

Cons

• Однотонный и цельный = хороший UX.
• Обилие шаблонов для использования.
• SEO дружественный
• Часто проще реализовать

• Меньше контроля размера дизайна экрана.
• Элементы могут двигаться
• Реклама теряется на экране.
• Более длительное время загрузки с мобильных устройств.

Адаптивный дизайн , разработанный в 2011 году, в большей степени связан с тем, что дизайнер имеет несколько фиксированных размеров макета. Он предлагает альтернативу подходу «один размер простирается на всех».

Pros

Cons

• Позволяет дизайнерам создать лучший UX для соответствующего устройства.
• Мобильные устройства могут чувствовать среду своего пользователя.
• Дизайнеры могут оптимизировать рекламные объявления на основе пользовательских данных со смарт-устройств.

• Трудоемкое создание - большинство адаптивных проектов модернизируют традиционные сайты, чтобы сделать их более доступными.

• Планшеты и нетбуки могут иметь проблемы с конфигурацией сайта, как правило, ориентированной на смартфон или настольный компьютер.

• Борьба с SEO - у поисковых систем есть проблемы с оценкой идентичного контента на нескольких сайтах.

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

Мы могли бы лучше всего представить эти изменения как эволюцию. Чарльз Дарвин отметил, что особи выжившего вида не самые сильные и умные, а те, которые наиболее приспособлены к изменениям. У нас есть только динозавры, чтобы рассмотреть в свете этого.

Подумайте о своем продукте или услуге. Доступ к пользователям в определенных настройках? Что в их поведении вы можете использовать, чтобы держать их в курсе событий? Помните, что не только мобильные устройства становятся умнее. В наших домах и офисах у нас больше традиционных столов. Теперь широкий спектр интеллектуальных устройств распознает и реагирует на окружающую среду, от часов и обогревателей до множества устройств, которые составляют «Интернет вещей». Это возраст, который полон умных предметов. Мы должны проектировать с этим умом все больше и больше.

Ресурсы и где узнать больше

Изображение героя: Автор / Владелец авторских прав: tfinc. Условия авторского права и лицензия: CC BY-SA 3.0

Холст, C. (2012). «Адаптивные и адаптивные макеты и оптимальные метки полей формы». Smashing Magazine. Полученное из: Http: //www.smashingmagazine.com/2012/11/08/ux-desi ... [2014, 1 сентября]

Ицкович А. (2012). «Создание адаптивной системы для улучшения UX». Smashing Magazine . Полученное из: http://www.smashingmagazine.com/2012/12/creating-an-adaptive-system-to-enhance-ux/

Найт К. (2011). «Отзывчивый веб-дизайн: что это такое и как его использовать». Smashing Magazine. Полученное из: http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ Сокрушительная редакция. (2012). «Отзывчивый веб Руководство по проектированию и учебные пособия ». (NB. Это отличный ресурс для поиска лучших статей Smashing Magazine , касающихся адаптивного дизайна.) Получено из: Http: //www.smashingmagazine.com/responsive-web-des ...

Cao, J. (2015). «Адаптивный и адаптивный дизайн: какой выбор для дизайнеров?». Студия UXPin. Полученное из: http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Бин Узайр, С. (2013). «Адаптивный и адаптивный дизайн». Крутящий момент Полученное из: http://torquemag.io/responsive-design-vs-adaptive-design/

Похожие

Комментарии