Различия в дизайне мобильной и настольной версий веб-сайта

Введение

Сегодня мы подразумеваем под понятием «смартфон» устройство с сенсорным экраном. Первым подобным устройством, получившим широкое признание и популярность, стал iPhone. Его представили в 2007 году. И именно появление смартфонов с сенсорными экранами и качественным доступом к интернету вызвало техническую революцию — как в области мобильных приложений, так и в веб-дизайне.

И смартфоны, и мобильные версии сайтов существовали до появления iPhone. Но маленькие экраны смартфонов, медленный и дорогой мобильный интернет, а также большое количество различных мобильных браузеров приводили к тому, что у большинства сайтов в начале 2000-х не было мобильной версии.

Отдельно существовали специальные сайты, разработанные именно под мобильные устройства. Они назывались мобильными сайтами, мобильными интернет-порталами или WAP-сайтами (это не опечатка, именно «WAP-сайты» — от названия протокола соединения WAP, то есть Wireless Application Protocol). Их дизайн был намеренно упрощённым, лишенным сложных композиционных решений или иллюстраций, чтобы сайт отображался максимально корректно в любом мобильном браузере.

Выглядели они так:

Появление iPhone, а позже и смартфонов на базе операционной системы Android привело к тому, что постепенно позиция мобильных веб-сайтов менялось от маргинальной (то есть такой, которая важна для малой части пользователей) до безусловно важной. Этому способствовал и рост числа мобильных пользователей (сегодня более 50% посетителей веб-сайтов просматривают их на смартфонах) и определенные решения крупных компаний, таких как Google, которые прямо заявляют о важности мобильной версии.

При этом мобильные веб-сайты по композиции, механике взаимодействия и особенностям восприятия сильно отличаются от версий веб-сайтов для компьютеров.

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

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

Ключевые различия мобильной и компьютерной версий

Размер

Конечно, одно из самых очевидных различий — это существенное отличие размера экранов у компьютеров и смартфонов.

Смартфоны — это мобильные устройства.То есть информацию на них можно просматривать где угодно: в общественном транспорте, в комнате, на улице, в такси, во время путешествия поездом или в самолете. Компьютеры же (даже ноутбуки) используют в основном для работы, сидя или стоя за столом.

Различаются и физические размеры экранов смартфонов и компьютеров, и их разрешение. Например, уменьшенная модель iPhone 12 имеет диагональ 5,4 дюйма (2340x1080 пикселей), а базовая версия — 6,1 дюйма (2532 x 1170 пикселей).

Ноутбук MacBook Pro имеет диагональ 13,3 дюйма и поддерживает разрешение до 2560х1600 пикселей.

Соответственно, по умолчанию объем содержания, которое может разместиться в пределах экране смартфона, существенно меньше, а следовательно, количество элементов на экране также уменьшается.

Пропорция

В дополнение к размерам экрана, отличается и базовая пропорция.

Например, у экранов компьютеров и ноутбуков Apple базовое соотношение сторон уже много лет одинаковое — это пропорция 16:10.

Но у новых смартфонов iPhone 12 базовое соотношение сторон — 19,5:9.

Пропорция формата всегда влияет и на пропорцию композиции, которая размещается в этом формате.

Базовая ориентация экрана

Ориентация экранов компьютеров — горизонтальная. А у смартфонов базовой является вертикальная ориентация.

Следует отметить, что в компьютерной версии сайта нет такого понятия, как «альтернативная ориентация», а в мобильной версии — есть. Однако несмотря на то, что обычно пользователи просматривают сайты в вертикальной версии, для просмотра видео они поворачивают смартфон на бок.

Различия в дизайн-композиции

Описанные различия существенно влияют на композиционные особенности сайтов.

Количество элементов на экране — из-за меньшей площади экранов смартфонов на них, как правило, помещается гораздо меньше объектов.

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

Длину строк — стандартная текстовая строка на компьютере обычно в три-четыре раза длиннее.

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

Возможности взаимодействия

У смартфонов и компьютеров принципиально разные средства ввода информации. На компьютерах вы работаете с мышкой (реже — с тачпадом или планшетом), а на смартфонах — с сенсорным экраном.

В компьютерной версии сайта появляется состояние наведения курсора мыши и возможность использования клавиш клавиатуры для некоторых функций сайта. На смартфоне эти возможности отсутствуют.

Зато в смартфонах есть управление жестами. Чаще всего на сайтах используется жест, который называют смахиванием или «свайпом» (от английского swipe). Он может выполнять те же функции, что кнопки «назад» или «вперед» в галереях, и пользователь ожидает, что смахивание пальцем переведет его к следующему изображению (или предыдущему).

Скорость соединения и стоимость трафика

Несмотря на то, что скорость мобильного интернета каждый год увеличивается, а на горизонте уже маячит внедрение стандарта 5G, все же следует отметить, что по умолчанию мобильный интернет более медленный, чем интернет в стационарных компьютерах и в сетях Wi-Fi. Поэтому размеры растровых изображений в мобильных версиях сайтов (особенно при создании адаптивной версии сайта) уменьшают.

Навигация

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

Вот ключевые различия:

Меню в компьютерной версии сайта, как правило, по умолчанию отображается, а в мобильной версии — скрыто за иконкой, которую еще часто на жаргоне называют «бургером».

В мобильной версии не существует состояния наведения, а следовательно, и выпадающих меню вы здесь не встретите.

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

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

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

В заключение

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

В современных условиях это фактически разные дизайны для разных устройств. Но какая из версий сайта является главной, а какая вторичной? И с какой версии нужно начинать разработку дизайна сайта?

Попробуем выяснить это в следующем материале.

·
525
·
goodsuper 5
Наступна стаття
Стратегии разработки веб-сайта: «сначала мобильные» и «сначала компьютеры»
0
Головна