Так как мобильные устройства уже обогнали по популярности настольные рабочие компьютеры, то дизайнерам теперь необходимо создавать «мобильный» дизайн. 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
О мобильных технологиях
На сегодняшний день, из-за влияния мобильных устройств на пользователей, дизайнерам теперь придется создавать дизайн для мобильных дивайсов. Это не совсем правильно делать дизайн мобильного сайта наряду с сайтом для настольного компьютера и при этом называть это проектирование для мобильных устройств!
Проектирование для мобильных устройств значит фактически быть внимательным к конкретным корректировкам, которые вы должны будете делать для сайта вашего клиента при проектировании для малого экрана. Это включает в себя все, о чем мы говорили выше, от минимализма в дизайне до прячущейся панели навигации при переходе на макет с одним столбцом.
Применяя эти лучшие советы в своей практике, вы будете создавать сайты, которые идеально подходят для мобильных устройств.
