Download pdf - Polonium design doc

Transcript
Page 1: Polonium design doc

Обычный вид1400px

Адаптив400px

1

3

2

42

1

4

7

7

2

2

7

6

5

В адаптиве теги перемещаем в самый низ карточки.

1

2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.

3 Центруем элементы страницы в монолитную выдачу информации.

4 Навигацию по каталогу опускам в низ страницы над тапками.

5 Скриншоты в адаптиве выводятся без изображения устройств.

6 Превращаем блок в тачевую листалку карточек. (управление жестами, например, свайп). Чередуем скриншоты с описанием.

7 Избавляемся от фотографий в конверсейшне и отзывах. Оставляем имена, должности, контактные данные.

В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных

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

Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —

пропорционально уменьшаются изображения.

Не забываем про тап области в мобильных устройствах. Тап область не менее 44

пикселей по ширине и высоте объекта.

Page 2: Polonium design doc

Обычный вид1400px

Адаптив400px

1

3

2

4

4

4

4

4

4

5

5

В адаптиве теги перемещаем в самый низ карточки.

1

2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.

3 Кнопку покупки приложения опускаем вниз карточки.

4 Изображения в адаптиве игнорируют все свойства позиционирования и располагаются по центру сверху вниз занимая всю ширину экрана.

5 Избавляемся от фотографий в комментариях. Оставляем имена, должности, контактные данные - если есть.

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

В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных

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

Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —

пропорционально уменьшаются изображения.

Не забываем про тап области в мобильных устройствах. Тап область не менее 44

пикселей по ширине и высоте объекта.


Recommended