Так как мобильные устройства уже обогнали по популярности настольные рабочие компьютеры, то дизайнерам сейчас нужно создавать «мобильный» дизайн. Mobile-first достаточно популярный способ, по причине того, что, несложнее расширить размер мобильного, чем снизить размер ПК.
Однако, время от времени отечественный выбор выходит из-под контроля. В большинстве случаев дизайнеры подгоняют уже существующий ПК дизайн под мобильный. И без того как кое-какие элементы не верно передают суть применения элементов, принципиально важно, дабы дизайнеры осознали, какие конкретно конкретно корректировки нужно сделать при проектировании для мелкого экрана. Вот как
Да, здравствует, Минимализм!
Минимализм популярен в веб-дизайне в течении вот уже нескольких лет, легко вследствие того что он довольно часто отличается удобством, и выглядит элегантно. Не смотря на то, что, в то время, когда дело доходит до мобильных устройств, минимализм скорее не эстетический выбор, а выбор на базе только удобства применения.
В соответствии с Nielsen Norman Group, «срезать функции на мобильном дизайне скорее необходимость». Итак, что же это значит для дизайнеров, каковые пробуют выстроить мобильный сайт на базе уже установившегося дизайна ПК?
Это указывает, покончить с тем, что не есть нужным для мобильных пользователей. К примеру, если вы переносите вебмагазин с настольного компьютера на мобильный, сохраните тот же количество отображаемых на мобильном сайте продукции; это имеет суть, по причине того, что клиенты желают взглянуть все, что вебмагазин может предложить, как и вебмагазин желает продемонстрировать все, что он реализовывает своим визитёрам.
Громадная рекламная карусель, но, возможно урезана в разумных пределах.
Запрячьте навигацию
Один из самый распространенных элементов на мобильных экранах – меню гамбургер – практически вездесущий мелкий значок с тремя горизонтальными отрезками, расположенными приятель над втором. Это еще один совершенный случай, в то время, когда меньший размер экрана мобильных устройств заставляет дизайнеров поменять окружающие элементы, каковые должны смотреться в некотором роде на настольных компьютерах.
Не обращая внимания на различные точки зрения о присутствии меню гамбургер, оно употребляется везде на мобильных экранах легко вследствие того что это лучшее ответ, которое дизайнеры нашли, дабы уменьшить масштаб навигационного меню настольных компьютеров до мобильных устройств.
Зайдите на сайт известного шеф-повара Бобби Флай, дабы взглянуть на сеть кафешек называющиеся Бобби Burger Palace. Как и ожидалось, меню навигации расположено по горизонтали в верхней части основной страницы, но в то время, когда вы переходите на мобильную версию сайта, то горизонтальное меню отсутствует. На его месте – аккуратное меню гамбургер, прямо в том же месте на экране, где размешалось громадное горизонтальное меню на ПК версии сайта.
1 Bobbys-Burger-Palace-Desktop-Screenshot
22 Bobbys-Burger-Palace-Mobile-Screenshot
Walmart кроме этого применяет меню гамбургер в дизайне при переходе с рабочего компьютера на мобильный.
На своем ПК сайте, Walmart отображает «все отделы» выпадающей навигации, которая открывает второй слой навигационного выбора и все на той же странице. На мобильном сайте, но, эта функция не вероятна из-за малого размера экрана, так что замена была создана – второй слой навигационного выбора в меню гамбургер, и он открывает все больше навигационных выборов с каждым нажатием – практически как листать страницы книги слева направо.
2 Wal2 mart-Navigation-Layers-Desktop-Screenshot
3 Walmart-Mobile-Navigation-Screenshot
Переключитесь на один столбец
В соответствии с тем, что чем несложнее, тем лишь лучше, в то время, когда дело доходит до мобильного дизайна, вы услужите своим клиентам, если вы станете не забывать, что с макетом, складывающимся из одного столбца, пользователям несложнее трудиться на меньшем экране. Громадным преимуществом макета из одного столбца пребывает в том, что вы покончите с горизонтальной прокруткой, как если бы вы имели долгий текст на странице и желали бы, дабы ваши читатели проводили пальцем по экрану слева направо, дабы прочесть то, что им необходимо.
В то время, когда вы вводите макет из одного столбца, вы оптимизируйте пользовательский опыт, побуждая пользователей вниз, дабы прочесть либо надавить на ссылку, которую они желают видеть на новой странице. Это заставляет их проводить пальцем слева направо, что тяжелее сделать, чем вниз, в особенности в случае если учесть положение пальца вашего пользователя относительно того, как он держит мобильное устройство.
На ПК версии сайта газеты New York Times имеется пара столбцов. Они несложны в применении на рабочем компьютере, в то время, когда клиент может курсор слева направо без неприятностей посредством трекпада либо мыши.
4 nyt
Само собой разумеется, мобильный сайт The New York Times «осознаёт», как необходимо изменяться на маленьких экранах, исходя из этого он является чистый и действенный дизайн из одного столбца, что повышает опыт пользователя, а читатели смогут легко прокрутить вниз громадным пальцем для получения более подробного контента.
5 nyt_mobile
О мобильных разработках
На сегодня, из-за влияния мобильных устройств на пользователей, дизайнерам сейчас нужно будет создавать дизайн для мобильных дивайсов. Это не совсем верно делать дизайн мобильного сайта наровне с сайтом для настольного компьютера и наряду с этим именовать это проектирование для мобильных устройств!
Проектирование для мобильных устройств значит практически быть внимательным к конкретным корректировкам, каковые вы должны станете делать для сайта вашего клиента при проектировании для малого экрана. Это включает в себя все, о чем мы говорили выше, от минимализма в дизайне до скрывающейся панели навигации при переходе на макет с одним столбцом.
Используя эти лучшие рекомендации в собственной практике, вы станете создавать сайты, каковые идеально подходят для мобильных устройств.
Случайные статьи:
- Топ-7 сервисов бесплатных и качественных фото
- Как решать сложные проблемы? урок, полученный от онкологов
Как не ЛОХануться при покупке ПК на АВИТО
Подборка похожих статей:
-
Правило большого пальца: проектирование дизайна для мобильных устройств
В случае если и имеется что-то, что выдержит опробование временем и не претерпит каких-либо трансформаций, так это размещение громадного пальца на…
-
Как сделать сайт действительно удобным для мобильных устройств. рекомендации платона щукина
Некое время назад Яндекс начал отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», и отдавать им…
-
7 Ошибок, которые вам следует избегать при проектировании мобильной версии сайта
21 апреля Гугл запустил метод ранжирования, по обстоятельству повышения количества просмотров мобильных сайтов пользователями. Сейчас Google будет…
-
6 Простых правил для создания дизайна мобильных веб-сайтов
Согласно расчетам ComScore к концу 2014 года приблизительно 1.75 миллиарда человек в мире будут пользоваться смартфонами. А это значит, что наиболее…