Іконки
Набір - це сітка з правилами, а не лист картинок. Нижче анатомія клітинки, оптичний баланс і аудит усіх … гліфів по фарбі: де фарба виходить за поле безпеки і де центр зсунутий.
viewBox 0 0 24 24 на всьому наборі. Не «десь близько до 24»: одна сітка на всі гліфи - єдине, що дозволяє малювати новий і не приміряти його до сусідів.2..22. Ці два модулі не порожнеча, а запас: іконка стоїть поруч з текстом, у кнопці й у кружку, і без запасу вона в кружку торкається краю.0.95 за геометрію шляху. Межу перевіряють по фарбі, а не по кривій, інакше поле безпеки з'їдається половиною штриха.Однаковий габарит і однакова вага - різні речі. Коло, вписане в те саме поле, що й квадрат, виглядає меншим: око рахує площу, а не описаний прямокутник. Тому набір навмисно не однорозмірний.
Не претензія до малюнка, а перелік місць, де гліф стоїть щільніше за правило. Пунктир - поле 2..22; дивись, де фарба його перетинає. Числа міряє ця сторінка на живому наборі при відкритті, тому вони не можуть застаріти.
Частина з цього - правильна оптична поправка, частина - недогляд, і відрізнити їх може лише око на сітці. Тому тут не вирок, а список на перегляд: зсув понад пів модуля має бути свідомим.
Що тут, а що на сторінці оправи. Набір відповідає за те, як гліф намальовано: товщина штриха, компенсація на дрібних розмірах, оптичний баланс. Оправа - за те, як гліф стоїть: розмір у рядку, колір, мітка в кінці підпису, брендова коробка. До кроку 7.16 обидві сторінки називались «Іконки» і чотири правила стояли на них двічі; тепер у кожного один власник.
| Вісь | Правило | Чому |
|---|---|---|
| Розмір | оголошує оправа | 1.05em у рядку, фіксовані px окремо - це правила icon.css, не набору. Див. Атоми → Іконка. |
| Товщина | 1.9 | Одна на весь набір. Товщина задана в модулях viewBox, тому масштабується разом з гліфом. |
| Виняток | 2.4 і 2.6 під 14px | На 10px штрих 1.9 рендериться в 0.79px і зникає. Компенсація на дрібних розмірах - практика, а не дрейф. |
| Колір | оголошує оправа | Жоден гліф кольору не має - тут це факт набору. Що з ним робить currentColor, сказано в Атоми → Іконка. |
Кожен у своїй клітинці, з полем безпеки. Сторінка підключає design/system/icons.js - той самий файл, який малює іконки на екранах продукту. Другої копії набору немає ніде.
Єдиний гліф набору, який щось показує, а не тільки називає. Банка меду наповнюється: заповнення - це ранг, а колір - метал. Медалей 🥉🥈🥇 у сірому прототипі більше немає: медаль каже «ви змагалися», а це не те, чим є рівень лояльності.
Знято на перевірці 31.07
Був прохід, який спорожняв банку кожного рівня, якого покупець ще не досяг. Це зламало марку: заповнення вже несе ранг, і другим значенням «не ваше» воно перевантажилось - «Золото» перестало виглядати золотим і стало схожим на іконку, що не завантажилась. Правило: заповнення = ранг, колір = метал, а стан - робота сходинки (рамка, підкладка й слово під нею). Рівень 0 - порожня банка - лишається тим, чим і був: рівня ще немає, акаунт новий.
Зірка рейтингу - та сама зірка, що й у шапці, лише залита. Один малюнок, дві обробки: контур для навігаційного чипа, заливка для рейтингу. Другий шлях означав би другу зірку, яку треба тримати синхронно.
Ці чотири порушують правило контуру, і саме так і треба: канал чи спосіб входу впізнають за маркою, а не за нашим малюнком. Значок-диск із вибитим гліфом на 16px виживає там, де контур перетворюється на кашу. Google порушує двічі - він у своїх чотирьох кольорах, оголошених на шляхах, бо одноколірний Google не є маркою Google.
Ліцензія: Telegram і Viber - один набір Flaticon через підписку Freepik проєкту; файл атрибуції - операційний [?] до публічного запуску.
Набір переїхав у систему
Гліфи жили в design/_nav.js - у скрипті стенда. Показати їх вітрина могла тільки копією, і копія розійшлася: trash у джерелі записаний трьома склеєними рядками, збірка взяла перший, і дизайн-система малювала відро без корпусу, поки продукт малював цілий гліф. Полагоджено не парсер, а власність: набір, анатомія й обидва будівники розмітки тепер у design/system/icons.js, стенд і вітрина читають його, і 39 екранів підключають той самий файл.
Доказ: 80 пар екран×ширина, 7 336 намальованих гліфів - розмітка збіглася один в один, зсувів нема, різниця рівно в +1 елемент на екран - той самий новий <script>.
Другий захід: те, чого в реєстрі не було
Власник знайшов дірку єдиним способом, яким її можна було знайти: не побачив банку в дизайн-системі. Разом з нею в скрипті стенда малювалися ще три сім'ї - залита зірка рейтингу та марки Google і Apple. Тепер у системі всі: банка з чотирма рівнями, зірка як варіант, марки поруч з Telegram і Viber. Стенд лишив собі обгортку зі станом (.uiv-tier.t0..t3 несе метал) і обхід DOM.
Доказ: 78 пар екран×ширина, 7 334 гліфи. Змінилися рівно 584 - і всі три перемальовані навмисно: flame 296, flask 144, drop 144. Банка (84 входження), зірка й марки збіглися байт у байт, кількість елементів не зрушила на жодному екрані.
Три гліфи перемальовано
flame - було 9.9×13.9 фарби проти медіани набору 18.5, і центр на 3 модулі вище: у меню каталогу «Жироспалювачі» читалось як дрібна мітка, що висить над своїм рядком, поки сусідній bolt заповнював клітинку. Той самий малюнок, масштаб 1.42 від оптичного центру: 13.3×18.9, dy 0.00.
drop - сусід по тому ж меню з тією ж вадою (11.9×15.9, dy -1.00), тому масштабований разом: колонку гліфів судять одне проти одного, а не поодинці.
flask - закривалися два просвіти: горловина була 3 модулі, з обведенням 1.9 всередині лишалось 1.1 білого, а лінія рівня не доходила до стінок 1.0 - достатньо близько, щоб круглі кінці злилися зі стінкою в грудку замість стику. Горловина 3.6, лінія йде від стінки до стінки.
Чого бракує набору
- Немає шкали для іконки без підпису -
1.05emпокриває лише випадок «поруч із текстом». - Немає правила, коли іконка може стояти без підпису, і 41 кнопка лише з іконкою досі без
aria-label. - Поле безпеки перевіряє ця сторінка, а не збірка - новий гліф потрапляє в аудит автоматично, але зупинити його нікому: перевірка спрацьовує, коли сторінку відкрили.