cadoo v3 — доска макетов

Начните здесь

Пройдите приложение по порядку, как пользователь: каждый шаг — работающий прототип с настоящими жестами на движке будущего приложения. Откройте с телефона. Цельная сборка появится по этому же адресу на этапе 3; тогда здесь будет ссылка на неё и сквозные пути A–J.

Листайте колодусвайп, возврат, штампы, фото, тихий лайк удержанием
Сохраните товар в вишлистзакладка, сообщение, шторка «Сохранить в…»
Скройте лайк от друзейменю плитки, метка, «Вернуть»
Переключитесь на «Подарок»смена содержимого под шапкой
Раскройте находкутри тапа, пауза, награда; четыре редкости
Получите значокмомент достижения
Оформите подпискупейвол, ожидание, успех
Потяните шторкикороткая, с формой, длинный список

В прототипе колоды:

Смахните карточку вправо или влево; недотяните и отпустите — вернётся.
Нажмите на правую или левую половину фото — листание; на последнем фото карточка качнётся.
Удерживайте кнопку «Нравится» — появится «Тихий лайк».
Аватар справа вверху открывает настройки прототипа: тёмная тема, тихий режим, замедление в 5 раз, «меньше движения», счётчики.
Каждая девятая карточка — находка, редкости идут по кругу: обычная, редкая, эпическая, легендарная. Смахнуть её нельзя.

Экраны: 1, состояний: 30

Каждое состояние снято в светлой и тёмной теме на 390×844 и 360×800. Раскройте экран, нажмите на снимок — откроется в полном размере. Чертёж экранов, колода, компоненты.

2. Колода 30

Обычное: фото на белом фоне, светлая тема, 390 px — Обычное: фото на белом фоне живой макет

Обычное: фото на белом фоне, тёмная тема, 390 px — Обычное: фото на белом фоне живой макет

Плохое фото: коллаж с текстом, светлая тема, 390 px — Плохое фото: коллаж с текстом живой макет

Плохое фото: коллаж с текстом, тёмная тема, 390 px — Плохое фото: коллаж с текстом живой макет

Плохое фото: тёмный снимок, светлая тема, 390 px — Плохое фото: тёмный снимок живой макет

Плохое фото: тёмный снимок, тёмная тема, 390 px — Плохое фото: тёмный снимок живой макет

Длинное название, без бренда, 30 фото, светлая тема, 390 px — Длинное название, без бренда, 30 фото живой макет

Длинное название, без бренда, 30 фото, тёмная тема, 390 px — Длинное название, без бренда, 30 фото живой макет

Шестизначная цена, название в две строки, светлая тема, 390 px — Шестизначная цена, название в две строки живой макет

Шестизначная цена, название в две строки, тёмная тема, 390 px — Шестизначная цена, название в две строки живой макет

Цена неизвестна, светлая тема, 390 px — Цена неизвестна живой макет

Цена неизвестна, тёмная тема, 390 px — Цена неизвестна живой макет

Второе фото, светлая тема, 390 px — Второе фото живой макет

Второе фото, тёмная тема, 390 px — Второе фото живой макет

Первая карточка: подсказка жестов, светлая тема, 390 px — Первая карточка: подсказка жестов живой макет

Первая карточка: подсказка жестов, тёмная тема, 390 px — Первая карточка: подсказка жестов живой макет

Подсказка жестов на белом фото (худший случай контраста), светлая тема, 390 px — Подсказка жестов на белом фото (худший случай контраста) живой макет

Подсказка жестов на белом фото (худший случай контраста), тёмная тема, 390 px — Подсказка жестов на белом фото (худший случай контраста) живой макет

Тянем вправо: полпути до порога, светлая тема, 390 px — Тянем вправо: полпути до порога живой макет

Тянем вправо: полпути до порога, тёмная тема, 390 px — Тянем вправо: полпути до порога живой макет

Тянем вправо: смещение равно порогу, светлая тема, 390 px — Тянем вправо: смещение равно порогу живой макет

Тянем вправо: смещение равно порогу, тёмная тема, 390 px — Тянем вправо: смещение равно порогу живой макет

Тянем влево: смещение равно порогу, светлая тема, 390 px — Тянем влево: смещение равно порогу живой макет

Тянем влево: смещение равно порогу, тёмная тема, 390 px — Тянем влево: смещение равно порогу живой макет

Взяли за нижнюю половину: наклон обратный, светлая тема, 390 px — Взяли за нижнюю половину: наклон обратный живой макет

Взяли за нижнюю половину: наклон обратный, тёмная тема, 390 px — Взяли за нижнюю половину: наклон обратный живой макет

Кнопка «Нравится» нажата, светлая тема, 390 px — Кнопка «Нравится» нажата живой макет

Кнопка «Нравится» нажата, тёмная тема, 390 px — Кнопка «Нравится» нажата живой макет

Долгое нажатие на «Нравится»: тихий лайк, светлая тема, 390 px — Долгое нажатие на «Нравится»: тихий лайк живой макет

Долгое нажатие на «Нравится»: тихий лайк, тёмная тема, 390 px — Долгое нажатие на «Нравится»: тихий лайк живой макет

Тихий режим включён, смещение равно порогу, светлая тема, 390 px — Тихий режим включён, смещение равно порогу живой макет

Тихий режим включён, смещение равно порогу, тёмная тема, 390 px — Тихий режим включён, смещение равно порогу живой макет

Тихий режим: пояснение по нажатию на знак, светлая тема, 390 px — Тихий режим: пояснение по нажатию на знак живой макет

Тихий режим: пояснение по нажатию на знак, тёмная тема, 390 px — Тихий режим: пояснение по нажатию на знак живой макет

Сеть пропала, карточки ещё есть, светлая тема, 390 px — Сеть пропала, карточки ещё есть живой макет

Сеть пропала, карточки ещё есть, тёмная тема, 390 px — Сеть пропала, карточки ещё есть живой макет

Сохранено в вишлист, светлая тема, 390 px — Сохранено в вишлист живой макет

Сохранено в вишлист, тёмная тема, 390 px — Сохранено в вишлист живой макет

Загрузка колоды, светлая тема, 390 px — Загрузка колоды живой макет

Загрузка колоды, тёмная тема, 390 px — Загрузка колоды живой макет

Фото ещё грузится, светлая тема, 390 px — Фото ещё грузится живой макет

Фото ещё грузится, тёмная тема, 390 px — Фото ещё грузится живой макет

Фото не загрузилось, светлая тема, 390 px — Фото не загрузилось живой макет

Фото не загрузилось, тёмная тема, 390 px — Фото не загрузилось живой макет

Карточки закончились, светлая тема, 390 px — Карточки закончились живой макет

Карточки закончились, тёмная тема, 390 px — Карточки закончились живой макет

Нет сети, светлая тема, 390 px — Нет сети живой макет

Нет сети, тёмная тема, 390 px — Нет сети живой макет

Ошибка загрузки, светлая тема, 390 px — Ошибка загрузки живой макет

Ошибка загрузки, тёмная тема, 390 px — Ошибка загрузки живой макет

Карточка-находка: обычная, светлая тема, 390 px — Карточка-находка: обычная живой макет

Карточка-находка: обычная, тёмная тема, 390 px — Карточка-находка: обычная живой макет

Карточка-находка: редкая, светлая тема, 390 px — Карточка-находка: редкая живой макет

Карточка-находка: редкая, тёмная тема, 390 px — Карточка-находка: редкая живой макет

Карточка-находка: эпическая, светлая тема, 390 px — Карточка-находка: эпическая живой макет

Карточка-находка: эпическая, тёмная тема, 390 px — Карточка-находка: эпическая живой макет

Карточка-находка: легендарная, светлая тема, 390 px — Карточка-находка: легендарная живой макет

Карточка-находка: легендарная, тёмная тема, 390 px — Карточка-находка: легендарная живой макет

Режим «Подарок»: плашка сессии, светлая тема, 390 px — Режим «Подарок»: плашка сессии живой макет

Режим «Подарок»: плашка сессии, тёмная тема, 390 px — Режим «Подарок»: плашка сессии живой макет

Движение по кадрам

Ленты сняты с прототипов настоящими касаниями (эмуляция iPhone, CDP) при замедлении в 5 раз.

Свайп вправо: штамп растёт до порога, улёт со скоростью пальца, новая карточка поднимается

Взяли за нижнюю половину: наклон обратный и при улёте не меняет знак

Удержание «Нравится»: поповер, палец доведён до пункта, тихий лайк

Находка: тянется с сопротивлением; «Позже» убирает её без решения

Направление

Исследованы четыре направления, выбрано «Хохолок» (A). Почему.

Знак, какаду, иконка приложения

Правила

Цвет

Слева светлая тема, справа тёмная. Таблица контраста, правила.

pero

kluv

night

hohol

gold

bg.page#F5F0ED → #171116

bg.surface#FFFFFF → #1F171E

bg.raised#FFFFFF → #292027

bg.sunken#ECE4E0 → #342A31

bg.accent-soft#FFEFD9 → #3D2A14

bg.inverse#2A1F26 → #F7F0F2

bg.danger-soft#FCE5E2 → #43201D

bg.success-soft#DDF3E7 → #173527

text.primary#2A1F26 → #F7F0F2

text.secondary#6E6163 → #B9ABB0

text.tertiary#8F8183 → #93858B

text.on-accent#2A1F26 → #2A1F26

text.accent#964B00 → #FFB547

text.inverse#FFFFFF → #2A1F26

text.on-danger#FFFFFF → #FFFFFF

text.inverse-accent#FFB547 → #964B00

text.danger#C22F25 → #FF8A7E

text.success#1A7A4A → #5FD39A

line.subtlergba(42,31,38,0.08) → rgba(255,240,245,0.08)

line.strongrgba(42,31,38,0.16) → rgba(255,240,245,0.16)

line.control#8F8183 → #93858B

action.primary#FF9E1B → #FF9E1B

action.primary-top#FFB547 → #FFB547

action.primary-pressed#F58A00 → #F58A00

action.neutral#ECE4E0 → #342A31

action.neutral-pressed#DDD2CD → #473A42

action.danger#D8372C → #D8372C

action.danger-pressed#A8281F → #A8281F

focus#2A1F26 → #FFFFFF

scrimrgba(27,19,25,0.48) → rgba(0,0,0,0.62)

reward.gold#F7C948 → #F7C948

reward.gold-hi#FFE7A3 → #FFE7A3

reward.gold-lo#C99A12 → #C99A12

reward.gold-text#7A5C00 → #F7C948

photo.platergba(27,19,25,0.86) → rgba(27,19,25,0.86)

photo.on-plate#FAF6F4 → #FAF6F4

photo.bar-on#FFFFFF → #FFFFFF

photo.bar-offrgba(255,255,255,0.48) → rgba(255,255,255,0.48)

photo.outlinergba(27,19,25,0.08) → rgba(255,255,255,0.08)

photo.veil#F1EAE6 → #2E242B

photo.paper#FFFFFF → #FFFFFF

photo.bar-shadowrgba(27,19,25,0.35) → rgba(27,19,25,0.35)

photo.shadergba(27,19,25,0.30) → rgba(27,19,25,0.30)

photo.dimrgba(27,19,25,0.32) → rgba(27,19,25,0.32)

find.stage#1B1319 → #1B1319

find.common-glow#4A3443 → #4A3443

find.common-mid#2A1F26 → #2A1F26

find.rare-glow#465566 → #465566

find.rare-mid#252A33 → #252A33

find.epic-glow#6B4A1E → #6B4A1E

find.epic-mid#33231F → #33231F

find.legendary-glow#5B3A72 → #5B3A72

find.legendary-mid#2E1F3A → #2E1F3A

find.on#FFFFFF → #FFFFFF

find.on-mutedrgba(250,246,244,0.78) → rgba(250,246,244,0.78)

find.label#FFE7A3 → #FFE7A3

find.label-bgrgba(255,231,163,0.14) → rgba(255,231,163,0.14)

find.label-linergba(255,231,163,0.28) → rgba(255,231,163,0.28)

find.raysrgba(255,215,130,0.10) → rgba(255,215,130,0.10)

find.rays-rosergba(255,176,224,0.16) → rgba(255,176,224,0.16)

find.rays-aquargba(150,222,255,0.16) → rgba(150,222,255,0.16)

find.rays-goldrgba(255,231,163,0.16) → rgba(255,231,163,0.16)

sheenrgba(255,255,255,0.50) → rgba(255,240,245,0.07)

glintrgba(255,255,255,0.50) → rgba(255,255,255,0.50)

knob#FFFFFF → #FFFFFF

market.on#FFFFFF → #FFFFFF

market.wb#9B2FDB → #9B2FDB

market.ozon#005BFF → #005BFF

market.yam#FFD426 → #FFD426

Типографика

Onest для интерфейса, Unbounded для шести громких мест.

display-l · 800 30px/34px · -0.02em

Вот это удача

display-m · 800 22px/26px · -0.015em

Вот это удача

title-l · 700 28px/32px · -0.02em