Upload
arthur-arsyonov
View
90
Download
1
Embed Size (px)
Citation preview
Обычный вид1400px
Адаптив400px
1
3
2
42
1
4
7
7
2
2
7
6
5
В адаптиве теги перемещаем в самый низ карточки.
1
2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.
3 Центруем элементы страницы в монолитную выдачу информации.
4 Навигацию по каталогу опускам в низ страницы над тапками.
5 Скриншоты в адаптиве выводятся без изображения устройств.
6 Превращаем блок в тачевую листалку карточек. (управление жестами, например, свайп). Чередуем скриншоты с описанием.
7 Избавляемся от фотографий в конверсейшне и отзывах. Оставляем имена, должности, контактные данные.
В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных
адаптивов понимаем разницу между интерфейсными и контентными ссылками.
Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —
пропорционально уменьшаются изображения.
Не забываем про тап области в мобильных устройствах. Тап область не менее 44
пикселей по ширине и высоте объекта.
Обычный вид1400px
Адаптив400px
1
3
2
4
4
4
4
4
4
5
5
В адаптиве теги перемещаем в самый низ карточки.
1
2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.
3 Кнопку покупки приложения опускаем вниз карточки.
4 Изображения в адаптиве игнорируют все свойства позиционирования и располагаются по центру сверху вниз занимая всю ширину экрана.
5 Избавляемся от фотографий в комментариях. Оставляем имена, должности, контактные данные - если есть.
Страница процесса может выглядеть намного проще нарисованной нами. Допустим «упорядоченный» графический хаос на странице. Изоабражения можно расставлять так-же как в адаптиве: одну под другой, при этом желательно чтобы изображение занимало всю эффективную область экрана (если ширина изображения позволяет это сделать). Если нет — можно расположить по центру эффективной области
В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных
адаптивов понимаем разницу между интерфейсными и контентными ссылками.
Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —
пропорционально уменьшаются изображения.
Не забываем про тап области в мобильных устройствах. Тап область не менее 44
пикселей по ширине и высоте объекта.