close

Заказать адаптацию

+ подарок аудит Вашего сайта на адаптивность
совершенно бесплатно!

Блог команды Адаптист.ру

5 приемов разработки мобильного дизайна, которые вы раньше не видели

mobile-web-design-techniques

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

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

В этой статье вы найдете пять удивительных паттернов, взятых с сайта Style.com. Вероятнее всего, раньше вы их не видели, когда просматривали веб-страницы на своем телефоне.

1. Новый тип календаря

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

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

мобильный календарь

На Style.com был разработан календарь показа мод при помощи соединения двух каруселей. В нем можно с легкостью просматривать даты и события с использованием двойной карусели.

2. Динамический контент в всплывающем меню

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

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

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

навигационное меню     навигационное меню     навигационное меню

 

Недавняя история включает в себя страницы, а также отдельные слайды из показа моды. Style.comявляется сайтом с объемным наполнением. Пользователи имеют возможность рассмотреть свой любимый контент после просмотра сайта.

Для данного метода используют WebKit localStorage в паре системой Mobify, его назвали Pikabu. Существует большое множество библиотек, вы также можете посмотреть «отзывчивое безхолстовое» меню от Дэвида Бушеллаи и «пуши» (Pushy) от Кристофера Йи.

3. Раздвижение (увеличение) изображения в галереях

Увеличение текста при помощи пальцев, как правило, считается признаком плохо отформатированного контента, но с изображением все обстоит иначе.

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

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

pinch1    pinch2

Поскольку эта функция требует большой обрабатывающей мощности, она была включена лишь в смартфон с Retina iOS. Очень важно воспринимать производительность как элемент дизайна. Сложные функции следует включать только в телефоны, которые в состоянии поддерживать их надлежащим образом!

Для репликации (тиражирования) смотрового окна, раздвиньте изображение двумя пальцами, чтобы увеличить его функциональность, выгрузите популярную библиотеку hammer.js.

4. Огромные карусели изображения

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

Проблема № 1: Низкая производительность

Устройства не всегда достаточно мощные, чтобы можно было выстраивать много объектов в ряд.

Представьте себе фотографию размером на весь экран (или в два раза больше, если это Retina). Поскольку речь идет о карусели изображения, представьте несколько десятков или даже сотен таких фотографий, стоящих в ряд одна за другой. Сколько это будет в ширину?

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

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

В отдельных случаях это позволяет в десять раз «ужать» мобильную галерею (от 6.2Мб до 650Кб на одной странице).

Проблема № 2: Плохая навигация

Если все фотографии выстроены в один ряд, насколько быстро можно перемещаться между ними?

Мобильная галлерея

Решение проблемы заключается в создании вида сетки из карусели HTML. Это можно сделать относительно легко путем изменения источника изображения и CSS.

5. Алфавитные списки, похожие на «родные»

Алфавитный указатель – это отличный способ прокручивания длинных списков. Apple предлагает указатель, позволяющий пользователям выбрать контакты и музыку в iOS. Но перенос этого функционала на веб-дизайн с сохранением рабочих характеристик родного аналога оказался довольно проблематичным.

 

IOS список контактов          style-list.png

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

Вывод

До недавнего времени пользователи смартфонов отчетливо видели разницу между веб-страницей и родным приложением. Но устройства становятся более мощными, а «отзывчивые» и адаптивные методы — более изощренными. Таким образом, границы между родным приложением и веб-дизайном постепенно стираются.

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

 

Если ваш сайт не проходит проверку, напишите нам и мы поможем вам бесплатной консультацией

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *