Бейдж знижки
Маленька плашка з розміром знижки. Живе поруч зі старою ціною і не існує без неї. Вісім імен на вісьмох поверхнях, одна плашка.
--lh-flat плюс padding, і нічого більше: рядок, який не має ростиРозмітка з продукту, не переписана. Змінюється лише кегль - 10 на картці, 12 всюди інде, - бо картка щільна, а блок покупки ні. Решта однакова, і до цього кроку однаковим був тільки колір.
.pcut · 22.lcut · 2.hd-cut · 4.cut · 2.tcut · 2.mcut · 3.ci-cut · 2.li-cut · 3На PDP у режимі коуча той самий слот каже «гурт»: ця ціна - оптовий тариф, і від неї нічого не відрізали. Тому плашка знімає червоне і сідає на втоплений фон. Форма несе «тут є факт про ціну», колір несе - який саме факт.
.wtag, редакція рядка коуч-сесії: 0 входжень у кольорі, бо тих екранів у кольорі ще немає. Вона єдина з рамкою, і це говорить рядок: .wtag стоїть у кінці клієнтського рядка, а не всередині цінового блоку, і поруч немає закресленої цифри, яка сказала б «ця група про ціну». Край - це те, що дає їй прочитатися плашкою там.Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.
| Вісь | Значення | Правило вибору |
|---|---|---|
| Розмір | 10 на картках · 12 всюди інде | Розмір визначає щільність поверхні, не важливість знижки. Належить поверхні, як і в ціни. |
| Роль | знижка · тариф .ttier | Червона плашка = скільки зрізали. Нейтральна = який тариф. Тариф це не знижка, і фарбувати його червоним означало б обіцяти вигоду, якої немає. |
| Гарнітура | Mono для −15% · Inter для «гурт» | Обличчя йде за тим, що написано в плашці, а не за тим, яка це плашка. Відсоток це цифра про гроші, і DESIGN-artifacts.md:77 дає таким моноширинний. «Гурт» це слово. |
Тільки поруч зі старою ціною. Знижка без закресленої ціни - це число без бази порівняння, тобто обіцянка, яку нічим не перевірити. Принцип 1: спершу зняти сумнів.
Правило
Завжди в парі зі старою ціною. Пара «було - мінус скільки» перевіряється очима за секунду. І плашка ніколи не бере колір дії: помаранчевий на ціні вже сказав, яка ціна жива.Антиправило
Не роби з неї банер. Великий відсоток на пів картки - це терміновість, а принцип 4 забороняє терміновість. Гучне повідомлення про вигоду це Банер, і воно не всередині картки.Станів немає: плашка нічого не робить у відповідь на палець. .ttier - це не стан, а інший факт у тому самому слоті, і показаний він вище окремим блоком.
Сторінка звіряє себе з файлом: 10 власних класів і 0 станів оголошено в discount.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.
Прочитані з discount.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (4) | Примітиви (12) |
|---|---|
--bg-discount --bg-sunken --text-danger --text-secondary | --font-body --font-mono --fs-10 --fs-12 --fw-bold --fw-black --fw-semibold --lh-flat --radius-4 --space-2 --space-4 --space-8 |
Мінус - це − (U+2212), а не дефіс: він однакової ширини з цифрою і сидить на її висоті. Так написано в усіх 40 плашках продукту, заміряно.
Якорі: .pcut .lcut .hd-cut .cut .tcut .mcut .ci-cut .li-cut .ttier .wtag
Заміряно в браузері на 390 і 1280: 40 плашок на 39 кольорових екранах. .pcut 22 на 13 екранах · .hd-cut 4 · .li-cut 3 · .mcut 3 · .lcut / .cut / .tcut / .ci-cut по 2. .ttier 2, .wtag 0.
Чого бракує
- Немає правила порогу - система не знає, з якого відсотка знижку взагалі варто показувати
- Вісім імен на одну плашку. Перейменування - Крок 6, бо ці ж імена носить заморожений сірий шар;
.cutстоїть у голові тієї черги разом з.newі.old - Дві форми тарифної плашки -
.ttierна втопленому фоні і.wtagз рамкою. Зводити їх в одну означає вирішувати за двома входженнями; чекає, поки коуч-флоу отримає кольоровий шар
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.