Картка адреси
Куди везти. Три збережені адреси в кабінеті - і діалог, у якому їх заводять. Найщільніший із дрібних файлів системи: 34 селектори на 52 рядки, і половина з них - не картка.
Розмітка звідси - та сама, що на account-addresses.html.
.def фарбує рамку картки й рамку плашки в --line-action. Це єдине помаранчеве в компоненті, і воно означає «сюди поїде за замовчуванням»flex-wrap. На 360 вони переносяться, і це навмисне: три кнопки в рядок на телефоні дали б по 90px кожнійСітка .addr-list: один стовпчик до 720, два вище. Не три - адреса це рядок тексту, який не можна скорочувати, і в третину екрана він не вміщується.
| Частина | Селекторів | Що це |
|---|---|---|
| картка | 13 | .addr-list .addr-card .addr-tag .addr-type .addr-line .addr-sub .addr-acts .addr-add .addr-hint і прев'ю .aaddr .adef |
| діалог | 17 | .addr-modal .addr-methods .addr-method з трьома дітьми, .addr-back .addr-2col .addr-cityfld .addr-check .addr-note .addr-del-row |
У реєстрі організма для нього немає, а молекула на 34 селектори - це вже не молекула. Записано; заводити 28-му рядок посеред проходу - це рішення про число, яке опубліковане на обзорі.
Діалог будує сірий прототип, і це не помилка
Розмітку діалогу збираєwireframes/_nav.js, і всі 40 кольорових екранів вантажать цей файл. Поведінка живе в сірому шарі, design/_nav.js додає лише візуальне збагачення. Це рівно правило «design/ володіє візуальним шаром».
Спершу я прочитав це навпаки. grep по розмітці сказав, що сім класів файлу мають 0 екземплярів, і виглядало це як мертва половина. У DOM їх 3, 3, 3, 3, 4 і 1: скрипт будує діалог при завантаженні, а grep шукав статичну розмітку.
Нова адреса
Оберіть спосіб доставки - далі заповнимо лише потрібні поля.
Спершу питають «як», а не «куди». Три способи доставки вимагають різних полів: відділення - номер, поштомат - номер поштомата, кур'єр - вулицю з будинком і квартирою. Питати все одразу означало б показати форму, де половина полів зайва.
Нова адреса · Відділення
Вирішувач по всіх 34 селекторах: 18 оголошень не виграють ніде, і всі 18 - це поділ етапу 08, структура проти кольору на .addr-card, .addr-tag, .addr-type, .addr-sub, .addr-hint. Мертвих оголошень у файлі немає. Нічого не переїжджає, нічого не видаляється.
Але два заміри вимагали рішення власника. Перше зроблено на 7.59 і описане нижче, друге лишається відкритим.
було: голий <button> | стало: .btn--outline .btn--s .btn | |
|---|---|---|
| рамка · радіус · кегль · вага · колір · проміжок | однаково, до пікселя | |
| мінімальна висота | 0 (виходило 40 випадково) | 40, бо --size-40 |
| поля з боків | 16 | 12 |
| поля з боків до 480 | ті самі 16 | 8, бо button.css:187 |
| розмір на 1280 | 178×40 | 170×40 |
Кнопка взяла фініш, дев'ять оголошень пішли
Це був тринадцятий рукописний примірник контурного фінішу, намальований на голому<button> без жодного класу. Тепер клас дає wireframes/_nav.js - так само, як його вже мала сусідня «Скасувати». Уся видима зміна - ширина: фініш каже --space-12 там, де рукопис казав --space-16, а нижче 480 - --space-8, чого рукописна кнопка не вміла зовсім. На 1280 вона вужча на 8px, на 360 - на 16. Кнопка тепер стискається на телефоні разом з усіма іншими.
Сірий прототип не зрушив ні на піксель: 166×40 до і після. _wf.css не знає btn--outline і btn--s та ігнорує їх, а те, що знає - .btn - програє властивість за властивістю власному правилу .addr-del-row button. Заміряно в обох шарах, а не виведено.
І це поправка до того, що я написав тут напередодні
Крок 7.58 казав: кнопка «40 замість 44, єдиний контрол поза драбиною». Невірно на обох рахунках.--size-40 - це щабель, .btn--s і є 40, а сорок чотири взялися з того, що я порівнював із кнопкою шапки, яка несла wfh-act numbtn поверх фінішу. Дублювання було справжнім, описаний дефект - ні.2. Чотири прапорці в продукті - не системні
Заміряно на всіх 40 кольорових екранах: 351 системна коробка.cb на восьми екранах, і 4 голі <input type="checkbox"> на двох - три тут і один на account-profile.html. Голий прапорець малює операційна система: 18×18 без рамки, без радіуса, без галочки системи. base.css фарбує його accent-color, тож він помаранчевий - але це не той самий контрол.
Це не дефект цього файлу: .addr-check input{ 18px } лише задає розмір. Дефект у розмітці, і він ширший за цей компонент - четвертий прапорець узагалі на іншому екрані.
.adef .tag проти .addr-tag, .adef .line проти .addr-lineЦе вже третя пара видань одного поняття після .aord-* проти .oh-* на 7.52 і двох бровок на 7.50. Тут прев'ю справді простіше за картку - без способу доставки, без дій - але плашка «Основна» в них однакова по суті й різна в коді: 10/black/caps тут, 10/black/caps там, рамка тільки у другої. Зведення - Крок 6.
| Стан | Що робить | Чому так |
|---|---|---|
| звичайна | рамка-волосина, тінь --elevation-1 | картка, а не рядок списку: адреси переглядають, а не читають підряд |
| основна | .def: рамка й плашка беруть --line-action | одна з трьох, і її треба впізнати не читаючи |
| наведення на спосіб | .addr-method:hover: рамка --line-inverse, фон --bg-sunken | рядок вибору відповідає всім тілом, бо натискають усе тіло |
| крок «інший спосіб» | .addr-back - текстова кнопка згори форми | вибір способу не тупик: помилились - повертаєтесь, не закриваючи діалог |
| редагування | .addr-del-row з'являється, у новій адресі його немає | видалити можна лише те, що вже існує |
| до 720 | сітка стає одноколонковою | адресу не можна скорочувати, а в півекрана на 360 вона не влазить |
Правило
Спершу «як», потім «куди». Три способи доставки вимагають різних полів. Питати все одразу означає показати форму, де половина полів зайва, а людина не знає, які саме.Антиправило
Не роби видалення схожим на решту дій. Кнопка «Видалити адресу» відрізняється від сусідів лише піктограмою й тим, що стоїть за лінією - а після 7.59 вона взяла той самий контурний фініш, що й «Редагувати». Це найменше, що можна зробити, і цього мало: стан для незворотної дії в системі ще не описаний, і саме тому дублювання прибрали, а не поглибили.Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій картки береться патерном .actions. Власний gap: 8 проти патернових 12 лишився тут як відхилення і записаний у беклог.
Сторінка звіряє себе з файлом: 28 власних класів і 3 стани оголошено в address-card.css.
.addr-del-row і .addr-back стояли в станах і не є станами - обидва тут-таки намальовані вище, а вмикає їх не клас: рядок видалення ховає атрибут hidden (r.hidden = !edit), а «інший спосіб» ховає .mode-edit на самій модалці. Умова справжня, носій у неї інший, і в таблиці нижче вона описана словами.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: жодного - запит зник. Було@media (min-width: 720px), поза реєстром. Що саме міняється: список адрес заповнює ряд через auto-fit з підлогою --grid-col-min-panel. Адрес буває одна або сім, тобто фіксованої кількості тут немає, і саме тому заповнення чесніше за точку. Зміряно: одна колонка до 660, дві від 660 (сьогодні було 720), на 1280 - 358px на картку, як і з запитом. І одне знято при перевірці: розгортка спершу сказала, що .addr-2col не стоїть на жодній сторінці - вона стоїть, у стенді, на client-dialog.html, а корпус приладу це продукт.Прочитані з address-card.css: 13 семантичних ролей і 20 примітивів.
| Семантичні ролі (13) | Примітиви (20) |
|---|---|
--bg-page --bg-sunken --bg-surface --elevation-1 --line-action --line-hair --line-inverse --line-strong --mark-faint --text-action --text-body --text-primary --text-secondary | --container-text --fs-10 --fs-12 --fs-14 --fs-16 --fs-18 --fs-24 --fw-black --fw-bold --fw-semibold --grid-col-min-panel --lh-airy --ls-caps --radius-12 --radius-8 --space-12 --space-16 --space-2 --space-4 --space-8 |
Повз шкалу тільки чотири числа: 1px і 1.5px (дві товщини ліній, і браузер малює обидві однаково - 7.49), 18px прапорця, 90vh висоти діалогу, 720px точки перелому. Найчистіший файл після нотатки про поповнення.
7.59 прогнав A/B, бо цього разу було що порівнювати. Три проходи по 40 екранах на чотирьох ширинах: нульовий прохід 0, і рівно один дайджест змінився - три однакові кнопки видалення на account-addresses.html, поля 16 → 12 і 16 → 8 нижче 480. Більше нічого на 40 екранах.
Сирий вивід показав 24 рядки, і всі 24 були неправдою
Ключ перепису цеТЕГ.класи#номер, а кнопка отримала класи - тож вона й кожен наступний BUTTON на сторінці перейменувались. Порівняння за ключем дало 24 рядки «елемент з'явився / зник». Порівняння мультимножин дайджестів, де ім'я не має значення, дало два: один зник, один з'явився. Це той самий урок, що на 7.48: коли крок змінює DOM, порівнюють мультимножини, а не рядки за ключем.А на 7.58 A/B не ганявся, і ось чому. Крок не змінив жодного байта в design/system/: змінились тільки ця сторінка, рядок реєстру й лічильник на обзорі, а їх не вантажить жоден із 40 кольорових екранів. Порівнювати нічого з нічим - це не доказ, а витрачені двадцять п'ять хвилин. Сказати «нуль рядків» про прогін, якого не було, гірше, ніж не робити прогін.
Замість нього працювали два інструменти, які тут доречні: вирішувач по 34 селекторах на 40 екранах і прямі заміри з відкритим діалогом, бо в спокої він закритий і перепис його не бачить - той самий випадок, що .ord-oos на 7.54.
Це і є результат кроку: файл виявився чистим. Вирішувач не знайшов мертвих оголошень, чужих сімей не виявилось, переїжджати нічому. Дві знахідки - висота кнопки видалення й чотири голі прапорці - лежать у розмітці, а не тут, і обидві рухають пікселі, тож обидві оголошені й не зроблені.
Чого бракує
Кнопка видалення 40 замість 44- зроблено на 7.59, і опис дефекту був неправильний: 40 це щабель. Дев'ять оголошень знято, кнопка взяла фініш- Чотири голі прапорці проти 351 системної коробки. Ширше за цей файл
- Немає стану для незворотної дії. «Видалити адресу» виглядає як звичайна контурна кнопка. У системі немає ні небезпечного фінішу, ні підтвердження як компонента
- Третя пара видань одного поняття:
.adef .tagпроти.addr-tag. Крок 6 - Діалог на 17 селекторів усередині молекули - або він організм, або молекула завелика
- Немає стану «жодної адреси» - у нового покупця список порожній, і хто його малює, у цьому файлі не сказано
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.