создаем и улучшаем системы продаж в интернете

Основы адаптивного дизайна для мобильных (часть 1)

Чтобы понять как дизайнить для смартфона, давайте разберемся как люди его используют и в каких ситуациях

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

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

Третий вариант: держат в обоих руках. неудобные области критичны только если держат вертикально.

 

Размер области касания примерно 44х44 пикселя (для макета 320).

Смартфон могут использовать в разных ситуация и контекстах, которые также могут определять то как юзер держит телефон.

Сценарий 1 —  Юзер зашел в магазин электроники и ищет инфу про товары. В руках сумка, держит одной рукой.

Сценарий 2 —  Юзер зашел в магазин электроники и ищет инфу про товары. Подключениене GPRS/3G (с ограниченым количеством мб в день). На спине рюкзак, руки свободны, может держать в обеих руках. Если товар корый он рассматривает — малогабаритный, вполне может взять в одну руку товар, в другую тел, и гуглить по серийному номеру, модели или чему-то другому указанному на этикетке…

Сценарий 3 —  Юзер ожидая заказ в кафешке, решил немного  посерфить. Подключение Wi-Fi.

 

Как выстраивать контент на смартфоне

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

 

Инструменты для упаковки контента

Боковые слайдеры

Боковые слайдеры идеально подходят для типичных блоков с однотипным контентом. Примеры: галерея картинок, новстная лента, каталог товаров, и т.д.

Самый простой слайдер картинок можно увидеть на artsandculture.google.com

А это, пример с того же сайта, но с подключением воображения 🙂

Пример однотипного контейнера с боковым скролом (artsandculture.google.com)

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

Также пример бокового слайдера можно встретить прямо в ленте поисковой выдачи Google

Крутость бокового скролла распространяется не только на крупные блоки,  вполне себе удобно скроллить теги при поиске картинок в Google

Впрочем, табы также прекрасно скролятся.

Если вы переживаете что целевая аудитория по каким-то причинам может не догадаться о механике работы табов, тогда можно поставить стрелочки, как это сделали на http://getmdl.io

Ну и конечно, все это можно использовать в класических слайдерах товара.

 

Отдельно стоит отметить акционные слайдеры, которые размещают на главной странице 99% сайтов.

Что будет, если такой слайдер просто уменшить? Будет примерно так…

Сможете прочесть что там написано? Я — нет.

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

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

 

Раскрываюшиеся блоки

Контент на любом сайте можно условно разделить на несколько категорий.

— основной, то без чего сайт существовать не будет

— сопроводительный, всякие переменные типа цены, условий доставки, скидок, спецпредложений

— второстепенный, ознакомительный, который нужен не всем

— одноразовый-информационный, т.е. тот который нужно один раз увидеть, а дальше он просто занимает место.

Так вот, контент последних двух категорий можно и нужно скрыватьв разного рода раскрывающиеся блоки. Тут можно применить правило Парето: 80% людей нужно 20% информации, а 20% людей, достаточно просто клиенуть, чтобы получить оставшиеся 80%

Вот так это работает на сайте New Balance

А так это делает Google

 

“Места нет, но вы держитесь!” или самое важное правило мобильного дизайна

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

Заботливый дизайнер всегда ставит пользователя и контент на первое место, а ЧСВ заказчика на второе.

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

По этой же причине следует осторожно работать с вложенностью блоков и количеством отступов.
В примере выше, у надписи “Do we cover your area?” пространство слева и справа отбирают тройные отступы.

Гораздо лучше, когда контент идет без рамок, и с одним отступом.
Это позволяет эффективно использовать пространство.

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

About Author

Саша Сергеев

CEO & Founder at Sense Production, e-commerce agency