Запитання
Питання покупця і відповідь магазину, одне під одним. Дві репліки в одному списку, і весь компонент - це спосіб показати, що голоси різні, не роблячи з цього чат.
Розмітка звідси - та сама, що на product.html, разом із заголовком секції над нею.
Питання
.qaitem - волосина згори і 16 повітря. Не картка: список питань це список, а не колода карток, і найтонше, що є в системі, тут доречніше за межу.qq - 16/700, --text-primary. Найтемніше чорнило системи, бо це те, що шукають очима, коли гортають.qans - 14, поверхня, скошений правий кут і помаранчева грань 2px зліваРобота 4, довіра. Початківець боїться помилитись із дозуванням і побічними; питання інших покупців - це те саме сумнівання вголос, а відповідь магазину - те, чого немає в таблиці складу. Принцип 1: спершу зняти сумнів, потім продавати.
Два голоси в одному списку потребують видимого шва. Тут це 2px лінії, а не друга бульбашка з іншим фоном і не аватарка: за принципом 4 сторінка лишається спокійною, а не перетворюється на переписку. Радіус нульовий зліва і 8 справа - коробка ніби виїжджає з-під грані, а не стоїть окремим елементом.
Помаранчевий тут не заклик до дії, і це єдине місце системи, де акцентний колір носить лінія без кнопки поруч. Дозволено тому, що це не текст: DESIGN-artifacts.md тримає акцент на тексті від 19px жирного, а межа під це правило не підпадає. Заливка відповіді - --bg-surface, тепла поверхня, і чорнило на ній звичайне --text-body.
margin-left: 0 не повторювало інше правило - воно повторювало значення за замовчуванням. Ніщо в системі не дає .qans лівого поля: сірий прототип відсуває відповідь через padding-left: 16, а рядок нижче замінює той відступ на 12 з чотирьох боків. Тобто оголошення скасовувало те, чого ніхто не робив.
| Заміряно в браузері | До | Після |
|---|---|---|
margin | 8px 0px 0px | 8px 0px 0px |
padding | 12px | 12px |
| ширина на 1280 / 360 | 1032 / 328 | 1032 / 328 |
Це трохи інша помилка, ніж ті, що змітала мітла 7.69. Там рядок повторював сусідній рядок - і його можна знайти, порівнявши два блоки файлу. Тут рядок повторював початкове значення властивості, і жодне порівняння файлів його не покаже: він виграє змагання, у якому більше нікого немає.
Правило
Оголошення має або щось змінити, або щось перебити. Якщо воно не робить ні першого, ні другого, воно не «про всяк випадок» - воно шум, у якому наступного разу загубиться справжній рядок.| Що | Звідки | Чому не тут |
|---|---|---|
| заголовок «Питання» і «＋ Поставити запитання» | section-head.css | заголовок секції однаковий на десятьох екранах; питання - лише на двох |
| кнопка «Поставити запитання» | button.css, фініш btn--text | текстова кнопка всередині рядка - одна декларація на весь продукт |
| «Показати ще відгуки» | pagination.css | сусідня секція, не ця |
Файлу лишається рівно три речі: шов між парами, кегль питання і вигляд відповіді. Тринадцять оголошень на компонент, який на екрані займає пів висоти телефона.
| Стан | Що робить | Чому так |
|---|---|---|
| спокій | питання, під ним відповідь із гранню | єдиний стан, який у компонента є |
| перша пара | волосина згори лишається | вона відділяє список від заголовка секції, а не пари одна від одної |
| наведення | немає | тут нема на що натискати: питання не розгортається, відповідь не ховається |
| фокус | немає | жодного контрола всередині пари. Кнопка «поставити запитання» стоїть у заголовку секції |
| питань ще немає | замість списку - коробка .emptybox.mini, вихід лишається в заголовку секції | у нового товару питати ще ніхто не встиг, а запросити спитати треба |
Два стани на компонент з тринадцяти оголошень, і разом вони коштували два нові: чорнило й колір грані. Решту - коробку, поле, рамку, радіус - малює те, що вже намальоване.
У нового товару список порожній, і досі секція просто не малювалась. Тепер це атом без жодного модифікатора: .emptybox.mini з empty-state.css, і в qa-item.css під нього не написано нічого.
Питання
product.html: 358 x 170.8, поле 24/16, 16 під заголовком - те саме, на чому стоїть волосина першої пари, тож заголовок не рухається між станом і списком. Нових оголошень у qa-item.css: 0Вихід - кнопка, яка вже стояла
.eact порожній навмисно: «＋ Поставити запитання» стоїть у заголовку секції на кожній сторінці товару, і з питаннями, і без них. Повторити її всередині коробки означало б написати один напис двічі на відстані 100px - і зрушити кнопку тієї миті, коли прийде перше питання. Тому тут нічого не перефарбовує btn--text: вихід позичений цілим, з button.css, на місці, яке йому дає section-head.css.Чому .mini, а не .empty. Та сама причина, що в блока опису: .empty - пунктирна рамка з портретом на цілий екран, а сторінка навколо цієї секції повна. Ведмідь тут був би не заспокоєнням, а другим героєм сторінки.
Правило
Відповідь підписана. «Магазин:» стоїть першим словом, а не дрібним підписом знизу: читач мусить знати, чий це голос, ще до того, як почав читати зміст.Антиправило
Не роби з цього чат. Ні аватарок, ні часу відповіді, ні «онлайн». Живий чат і консультації - поза MVP, і виглядати так, ніби вони є, гірше, ніж не мати їх зовсім.Сторінка звіряє себе з файлом: 4 власні класи і 2 стани. Другий стан класу не додає - коробку він позичає в empty-state.css, і в списку класів компонента її немає навмисно.
Прочитані з qa-item.css: 5 семантичних ролей і 8 примітивів. Дві нові ролі - обидві з очікування, і жодного нового примітива: стан не додав системі ані числа.
| Семантичні ролі (5) | Примітиви (8) |
|---|---|
--bg-surface --line-action --line-hair --text-body --text-primary | --container-text --fs-14 --fs-16 --fw-bold --radius-8 --space-12 --space-16 --space-8 |
Повз шкалу два числа: 1px волосини і 2px грані. Обидва - товщини ліній, і шкали товщин у системі немає. Заміряно: роль --line-hair читають 178 рядків системи, а 2px solid написано 12 разів у 10 файлах. Кандидат на пару токенів, рішення - етап 09.
Три проходи по 40 екранах на чотирьох ширинах: HEAD, HEAD ще раз і робоче дерево. Нульовий прохід 0, різниця 0, 215 452 елементи з кожного боку.
Плюс окремий замір .qans на двох ширинах: поле, відступ, товщина й колір грані та ширина коробки - однакові до і після.
Чого бракує
- Відповідь від покупця - на такі питання часто відповідають інші покупці, і другий голос підписаний не «Магазин:» у системі не передбачений
- Форма «Поставити запитання» - кнопка є, діалог за нею в кольорі не побудований
- Дата питання - у відгуку вона є, тут ні, і незрозуміло, це рішення чи недогляд
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.