Плитка цілі
Шість плиток на головній - увесь механізм наведення для початківця в MVP. Рішення 2 сказане вголос: шість цілей зараз, діалог-квіз - після запуску. Найбільш «продуктовий» компонент системи: він не малює дані, він ставить питання.
Розмітка звідси - та сама, що на index.html. Знак у кружку ставить uivChrome(), як і в крамниці.
.goaltiles - 2 колонки, 3 від 620, 6 від 960. Три стани однієї сітки, і жоден із них не «плитки в ряд, скільки влізе»: шість цілей мусять читатись як закритий набір.gph - 52, фон --bg-sunken, знак 26 у акцентному кольорі. Єдиний акцент у плитці--elevation-1 у --elevation-2. Плюс кружок теплішає.goalcta - кнопка M і підказка 14. Кнопка не L: головна дія екрана - це шість плиток вище, а квіз - вихід для того, хто не може обрати жоднуАудиторія тут - вторинна, і це видно з розміру. Тренер знає, що йому треба, і йде в каталог; плитки для того, кого каталог лякає. Тому вони великі, їх шість, і кожна називає результат, а не категорію товару.
Перепис ходить на 360, 390, 720 і 1280. Точок перелому в цього файлу дві - 620 і 960, - і з чотирьох ширин жодна не стоїть біля них. Кроки 7.70 і 7.75 обидва на цьому спіймались; тут заміряно по власних ширинах, по одній з кожного боку кожної межі.
| Ширина | Сітка | Плитка |
|---|---|---|
| 360 | 2 колонки | 158 x 116 |
| 559 · 560 | 2 колонки | 258 x 116 |
| 619 | 2 колонки | 288 x 116 |
| 620 | 3 колонки | 188 x 116 |
| 719 · 720 · 759 · 760 · 859 · 860 | 3 колонки | 221 -> 268 x 116 |
| 959 | 3 колонки | 301 x 116 |
| 960 | 6 колонок | 145 x 116 |
| 1280 | 6 колонок | 162 x 116 |
Обидві межі спрацьовують рівно на своєму пікселі - ні на 619, ні на 959 сітка не малює суміш вузького й широкого правила. Це не дрібниця: 7.64 знайшов саме таку суміш на 620 у картки товару, де картка виходила 286x498 замість 286x553. Тут - чисто.
Що з цього видно
Висота плитки - 116 на кожній ширині від 360 до 1280. Плитка росте тільки вшир: 158, 258, 288, потім 188, 301, потім 145. На 619 вона 288 на 116, майже 2.5:1 - найдовший її вигляд у продукті, і саме на планшеті в портреті. Ніде не сказано, що так задумано.Контрол на index.html | Що малює фокус |
|---|---|
.gtile, 6 штук | браузерне синє 1px auto rgb(0, 95, 204) |
.goalcta .btn--outline, поруч | системне: 3px помаранчевого через box-shadow |
Заміряно натисканням Tab, а не .focus() зі скрипта - :focus-visible справді збігся на обох. Тобто на одному екрані, за сорок пікселів одне від одного, два контроли обводяться по-різному, і другий - не системою.
Механізм знайдено на 7.82. Кільце в системі оголошують 24 правила, і посилання в них потрапляють поіменним списком у link-row.css - тринадцять селекторів, перелічених рукою. Компонент, який не носить фінішу кнопки й не потрапив до того списку, лишається з браузерним кільцем за замовчуванням. .gtile і .blogcard - саме такі.
Не змінено: це питання власника
Замінити браузерне кільце на системне - зміна видима, і вона стосується щонайменше п'яти компонентів (.gtile, .blogcard, .relbox, .brandbox, .certthumb). Питання поставлене з заміром, а не з відчуттям.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | біла плитка, край-волосина, --elevation-1 | лежить на сторінці, а не на ній стоїть |
| наведення | край в акцент, вгору 2px, тінь важчає, кружок теплішає | той самий підйом, що в картки товару: це те, що можна відкрити |
| фокус | браузерне кільце | розібрано вище, питання відкрите |
| обрана ціль | немає | плитка веде на сторінку цілі й не лишає сліду. Для повернення назад це втрачений контекст |
| 620 · 960 | 2 -> 3 -> 6 колонок | шість плиток мусять читатись як набір: 6 в один ряд або 3 у два |
Правило
Ціль називають результатом, а не товаром. «Набір маси», а не «гейнери»: людина знає, чого хоче досягти, і не знає, як це називається на полиці. Це вся суть механізму наведення.Антиправило
Не додавай сьому плитку. Шість - рішення, а не місткість ряду: на 960 вони стають одним рядом, і сьома ламає і сітку, і обіцянку «ось усі цілі». Нова ціль замінює стару, а не дописується..gtile--row - та сама плитка цілі, розгорнута в рядок: значок меншає до 34, текст стає ліворуч, і плитка перестає бути кнопкою-квадратом. Вона потрібна там, де цілі стоять списком у вузькій колонці, а не сіткою на всю ширину.
Сторінка звіряє себе з файлом: 6 власних класів і 3 стани.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col і --bp-shell-wide. Що саме міняється: плитки цілей ідуть 2 -> 3 -> 6 колонок. Було 620 і 960, друге поза реєстром. Чому не auto-fit: плиток рівно шість, а шість має рівно три збалансовані розкладки - 2, 3 і 6, свої дільники. Заповнення не можна про це попередити: за будь-якої підлоги, що дає шістку вгорі, дорогою туди з'являться 4+2 і 5+1. Зміряно перед складанням: на 860 шість плиток виходять 128 x 116.4 і нічого не обрізають - та сама висота, що на 960 при ширині 144.7.Робота: ВІДПОВІДЬ. Рухається: рамка, transform і тінь плитки; фон підпису. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Прочитані з goal-tile.css: 12 семантичних ролей і 16 примітивів.
| Семантичні ролі (12) | Примітиви (16) |
|---|---|
--bg-action-hover --bg-page --bg-sunken --elevation-1 --elevation-2 --line-action --line-hair --line-strong --text-action --text-body --text-muted --text-secondary | --dur-fast --ease-standard --fs-12 --fs-14 --fw-bold --lh-airy --radius-16 --radius-8 --radius-circle --size-20 --size-26 --size-34 --space-12 --space-16 --space-2 --space-8 |
Повз шкалу три числа: 1px краю, 52px кружка й дві точки перелому. 52 - один із восьми розмірів плитки з відкритого питання A6; тут це кружок, а не кадр товару, тож у ту сім'ю він не входить.
Цей файл не змінювався: у ньому нема чого виправляти. Вирішувач по всіх 13 селекторах дає дві позиції, і обидві не дефекти - структурний border-color, побитий колірним блоком (це і є поділ етапу 08), і правило @620, яке на 1280 програє правилу @960. Друге ледь не стало хибною знахідкою і замість цього стало рядком у розділі «не відкривати».
Три проходи по 40 екранах: нульовий прохід 0, різниця 0.
Чого бракує
- Стан «ця ціль обрана» - плитка нікуди не запам'ятовується, і повернувшись, людина починає спочатку
- Квіз - кнопка «Пройти підбір» веде на
wireframes/quiz.html, у кольорі того екрана немає (рішення 2: квіз після запуску) - Своє кільце фокуса - разом із
.blogcard,.relbox,.brandbox,.certthumb - Пропорція 288 x 116 на 619 - найдовший вигляд плитки, і ніде не сказано, що так задумано
- Знаки в кружках - емодзі в розмітці, які
uivChrome()замінює на набір. Що станеться з сьомою ціллю, для якої знака в наборі немає, не сказано
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.