Перепис кнопок
Не список класів зі стилю, а перелік того, що людина реально бачить на екранах. Браузер обійшов 180 екранів у двох в'юпортах і зняв обчислений стиль з кожного клікабельного елемента: 22 229 спостережень. Далі вони згорнулись у форми, форми - в осі, осі - у закритий набір.
Перепис стоїть перед кроком 6. Крок 6 нічого не вирішує, він тиражує: те, що система скаже, помножиться на 102 ще не пофарбованих екранів. Помилка в наборі варіантів коштує тут одну правку, а після тиражу - сто.
Перепис вище - знімок того, що знайшли, і він лишається як є: з нього виводились рішення. Нижче - той самий продукт, переміряний тим самим обходом після зведення значень. Дві колонки, бо знахідка без «стало» не закривається, а «стало» без знахідки не пояснюється.
| Що | Було | Стало | Рішення |
|---|---|---|---|
| радіус | 5 | 3 | було 10/11/8/12/0, стало 8/12/0 |
| колір рамки | 4 | 4 | не зведено: контурна кнопка й далі бере і --line-strong, і --line-hair - дві оголошені ролі на одному компоненті |
| кегль | 11 | 11 | не чіпали: кегль кнопки це вісь розміру, не дрейф |
Повний список рішень зі словами «змінна -> значення -> чому» - design/kit/docs/consolidation.md.
Сірий прототип каже, які роботи взагалі є в продукті: кожна річ, на яку можна натиснути. Кольорові екрани кажуть, які форми вже вирішені. Перетин дає три списки, і кожен потрібен: робота з формою, робота без форми, і дві форми на одну роботу.
Форму знімає браузер, а не читання css. Це принципово: .btn.dark усередині #coach-banner перевизначено на білу заливку, тобто клас з іменем «dark» рендериться білим. Читання файлу цього не показує, обчислений стиль показує одразу.
| Рівень | Скільки | Що це |
|---|---|---|
| Клікабельних елементів | 22 229 | усе, що має курсор-палець, посилання, кнопку або роль кнопки |
| З них коробок | 4 593 | має заливку або рамку і висоту 22-84 px |
| З них кнопок-дій | 2 120 | робить або веде; чіпи, таби, мініатюри, картки і поля - інші компоненти |
| Кнопок-дій у кольорі | 464 | тільки вони мають вирішену форму |
| Різних форм | 24 | після згортання за осями наголосу, вмісту і розміру |
Кожен рядок - реальна форма, яка сьогодні стоїть на екрані, з лічильником і класами, що її дають. Це перелік того, що є, а не пропозиція. Зведення значень - крок 8, бо значення змінює власник, а не перепис.
| Зразок | Наголос | Вміст | Розмір | Разів | Класи | Приклади |
|---|---|---|---|---|---|---|
| Залита | лише іконка | квадрат | 188 | .cartbtn | У кошик · Додати до замовлення | |
| Мій кабінет | Контурна | текст | середній | 53 | .btn .loadmore | Мій кабінет · Переглянути кошик |
| У кошик | Залита | текст | малий | 44 | .btn .go | У кошик · Зберегти |
лише в контексті .bb .addcart | Залита | текст | великий | 37 | .addcart .auth-cta .btn | Пройти квіз · У кошик |
| Змінити | Контурна | текст | малий | 32 | .btn .co-edit | Змінити · Деталі та ТТН |
| ✕ | Контурна | ведучий гліф + текст | малий | 18 | .auth-x .btn .cd-x | ✕ · ＋ Додати адресу |
| Увійти | Залита | текст | середній | 17 | .btn | Увійти · Повторити замовлення |
| Контурна | лише іконка | малий | 16 | .cartbtn .wish | Повідомити про надходження · В обране | |
| ＋ Нова сесія | Залита | ведучий гліф + текст | середній | 8 | .btn | ＋ Нова сесія · ＋ Залишити відгук |
| Контурна | іконка + текст | середній | 7 | .co-soc .ob-collapse | Google · Apple | |
| Для тренерів → | Обернена | текст + кінцева стрілка | великий | 6 | .btn | Для тренерів → · Стати тренером → |
| Продовжити з Google | Контурна | іконка + текст | великий | 6 | .sbtn | Продовжити з Google · Продовжити з Apple |
| ← Повернутись до колекції | Контурна | ведучий гліф + текст | середній | 4 | .btn .pmback | ← Повернутись до колекції |
| Одеса · змінити | Контурна | іконка + текст | малий | 4 | .co-city | Одеса · змінити · Оберіть місто · обов'язков |
| Оплату підтверджено - прод | Залита | текст + кінцева стрілка | великий | 4 | .auth-cta .co-proc-go | Оплату підтверджено - прод · Код надіслано - ввести → |
| Повторити замовлення | Залита | іконка + текст | малий | 4 | .btn | Повторити замовлення |
| Оформити замовлення → | Залита | текст + кінцева стрілка | середній | 2 | .btn | Оформити замовлення → |
| Повторити замовлення | Обернена | текст | середній | 2 | .btn | Повторити замовлення |
| ＋ Нова сесія | Обернена | ведучий гліф + текст | великий | 2 | .btn | ＋ Нова сесія |
| Повідомити про надходження | Залита | іконка + текст | середній | 2 | .btn | Повідомити про надходження |
| Оформити замовлення | Глуха | текст | середній | 2 | .cd-blocked | Оформити замовлення |
| Отримати код | Чорна | текст | малий | 2 | .co-getcode | Отримати код |
| Надіслати новий код | Контурна | текст | великий | 2 | .auth-alt | Надіслати новий код |
| ＋ Додати адресу | Залита | ведучий гліф + текст | малий | 2 | .btn | ＋ Додати адресу |
| Вісь | Значення | Правило вибору |
|---|---|---|
| Наголос | залита · контурна · обернена | Заливка акцентом означає головну дію ділянки, і вона в ділянці одна. Обернена - та сама головна дія, коли поверхня темна. Дві залиті поруч це не наголос, а його втрата. |
| Вміст | текст · іконка+текст · текст+стрілка · лише іконка | Ведуча іконка - дія тут (у кошик, увійти через Google). Кінцева стрілка - перехід звідси (усі покупки, для тренерів). Лише іконка - там, де слово не вміщається і робота однозначна з контексту, і тоді потрібна назва для читача екрана. |
| Розмір | малий · середній · великий | Диктує контейнер, а не важливість: рядок списку бере малий, картка і форма - середній, смуга покупки і порожній стан - великий. Ширина сюди не входить: 100%% проти auto вирішує макет, тому кнопка в картці і кнопка в смузі - одна кнопка. |
| Сусідство | окремо · приварена до поля | Кнопка «Знайти» в шапці (.go, 34 екрани, лише на 1280) має радіус 0: вона зрощена з полем пошуку і мусить бути з ним одним прямокутником. Це не варіант наголосу і не розмір - це четверта вісь, і вона вмикається лише в парі з полем. |
Побічно перепис знайшов колізію імен: .go це і кнопка пошуку в шапці, і статус «в дорозі» на пілюлі замовлення (.oh-status.go). Сьогодні вони не б'ються, бо обидві заскоплені, але одне ім'я на два різні компоненти - це міна під наступним рефакторингом.
Це та сама кнопка-дія, знята з екранів. Скільки різних значень вона має сьогодні на кожній властивості. 0px у кеглі і падінгах - це квадратні кнопки лише з іконкою.
| Властивість | Різних | Значення |
|---|---|---|
| колір рамки | 4 | rgb(217, 217, 217)×106, rgb(255, 90, 0)×61, rgb(233, 231, 226)×40, rgb(255, 255, 255)×8 |
| радіус | 5 | 10px×275, 11px×91, 8px×54, 0px×36, 12px×8 |
| кегль | 11 | 0px×188, 13px×49, 13.5px×46, 16px×44, 14.5px×40, 17px×27, 19px×26, 14px×18 |
| падінг згори | 9 | 0px×256, 11px×77, 10px×50, 14px×28, 12px×20, 15px×14, 13px×9, 16px×6 |
| падінг збоку | 11 | 0px×222, 16px×76, 17px×46, 18px×28, 20px×24, 14px×18, 26px×14, 13px×13 |
| товщина рамки | 2 | 1.5px×196, 1px×19 |
Найдорожче тут не кегль, а колір рамки: контурна кнопка бере три різні лінії. Це та сама роль на тому самому компоненті, тобто чистий дрейф, а не рішення. Зведення - крок 8, через власника значення.
Той самий рядок тексту, тобто та сама робота для людини, реалізований різними класами або різним наголосом. Кожен рядок тут - питання «чому», на яке має бути відповідь, інакше це дрейф.
| Напис | Класи | Наголос | Екрани |
|---|---|---|---|
| У кошик | .addcart .btn .mba | Залита×8 | account, product, product-reviews |
| Спробувати ще раз | .auth-cta .btn | Залита×10 | account-error, auth-error, checkout-declined, listing-error |
| Додати клієнту | .addcart .mba | Залита×3 | product-coach |
| ← Повернутись до колекції | .btn .pmback | Контурна×4 | product-oos, product-reviews |
| ✕ | .auth-x .cd-x | Контурна×16 | auth, auth-code, auth-error, auth-loading |
| Оформити замовлення | .btn .cd-blocked | Залита×2, Глуха×2 | cart, cart-oos |
| Отримати код | .auth-cta .co-getcode | Чорна×2, Залита×2 | auth, checkout |
| Повторити замовлення | .btn | Залита×6, Обернена×2 | account, account-orders, home-buyer, home-cart |
| ＋ Нова сесія | .btn | Залита×2, Обернена×2 | home-coach |
| ＋ Додати адресу | .btn | Залита×2, Контурна×2 | account-addresses, account-empty |
«Отримати код» - найгостріше: у діалозі входу вона залита акцентом, у чекауті - чорна. Одна дія, два різні кольори, і жоден з них не пояснений.
Ці кнопки існують у сірому прототипі і жодного разу не рендерились у кольорі. Майже всі - тренерський канал, тобто primary аудиторія. Якби крок 6 стартував зараз, форму для них довелось би вигадувати на льоту, по одній, на різних екранах, і вони б розійшлись.
| Клас | Разів | Напис | Екрани |
|---|---|---|---|
.coach-newcta | 34 | ＋Нова сесія | coach-client-new, coach-clients, coach-clients-cap |
.ch-edit | 8 | Редагувати клієнта | coach-client, coach-client-empty, coach-client-error |
.cv-cta | 6 | Перейти до магазину · Надіслати інше посилання | coach-verify, coach-verify-deadend, coach-verify-error |
.ck-btn | 6 | Прийняти всі · Тільки необхідні | system |
.tier-cta | 4 | Активувати Free · Оформити Pro | coach-verify-tier |
.ctab | 2 | ＋ Клієнт | coach-session-empty |
.wa | 2 | Оновити ціни | coach-session-priceblock |
.rev-google | 2 | 🔗 Оцінити в Google | content-reviews |
.next | 2 | Почати | quiz |
Плюс 23 некнопкових контролів без форми: чіпи пошуку (.sc-chip, .ov-chip), абетковий покажчик брендів (.dim), плитки вибору ролі (.opt-tile), поле міста (.addr-cityfld). Вони підуть своїми переписами - кнопка тут пілот методу.
Дірки вище не випадкові. 74 сторінки сірого прототипу несуть власний <style> - разом 2710 рядків і 501 селектор, яких немає в _wf.css. Найбільші: quiz 125, coach-session-addclient 120, coach-session-addempty 119, coach-session-priceblock 96.
Кольоровий шар накладався на спільний стиль, тому все, що осіло на сторінці, він ніколи не бачив. Саме тому .ch-edit, .cv-cta, .tier-cta, .ctab, .wa, .rev-google і .next не мають форми: вони не в системі взагалі. А .coach-newcta і .ck-btn у системі є і колір отримають самі - їм просто бракує пофарбованого екрана.
Це порушення власного правила
wireframes/docs/conventions.md: «One shared stylesheet _wf.css ... No per-file style forests». Форест виріс на 74 сторінках з 141, і найгустіший - у тренерському каналі, тобто в primary аудиторії.
.go - не діра, і помилка була моя
Grep по статичній розмітці на слово «Знайти» дав нуль, і я сказав, що кнопка пошуку не має вирішеної форми. Шапку вставляє design/_nav.js, тому в розмітці її немає взагалі, а на 390px десктопної шапки не існує. Обхід браузером на 1280 знаходить її на 34 кольорових екранах. Звідси два правила методу: перепис знімається в браузері, ніколи грепом, і завжди на двох ширинах. Знято.
.tbuy - не дефект
Перепис показав, що кнопка «У кошик» на полиці вкладок товару має форму в сірому і не має в кольорі. Перевірка в браузері: у кольорі вона display:none і вмикається класом .stuck, який вішає скрол. Тобто форма є, просто за станом, а статичний обхід стану не бачить. Знято. Запис лишається: інакше знахідка повернеться наступного разу тими самими словами.
Сторінка кнопки перестає бути теорією. Її блок «варіанти» тепер закритий набір з лічильниками і екранами, а не матриця, яку я придумав з голови.
Крок 6 отримує повний список. 9 кнопок, які інакше винайшли б по дорозі, тепер названі до того, як почався тираж.
Крок 8 отримує рахунок. Дрейф порахований по кожній властивості, і зведення піде числом, а не на око.