admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
32 KiB
32 KiB
Дизайн-система за мотивами Uber
Category: Медіа та споживчий сегмент Платформа мобільності. Насичений чорно-білий стиль, щільна типографіка, міська енергія.
1. Візуальна тема та атмосфера
Дизайн-мова Uber — це майстер-клас впевненого мінімалізму: чорно-білий всесвіт, де кожен піксель слугує меті та жодна деталь не з'являється просто так. Весь досвід побудований на разючій дуальності: насичений чорний (#000000) та чистий білий (#ffffff), і жодних середніх сірих відтінків, що розмивали б повідомлення. Це не стерильний мінімалізм стартапу, який ще не завершив дизайн, — це навмисна стриманість бренду, настільки зрілого, що він може дозволити собі говорити пошепки.
Фірмовий шрифт, UberMove, — пропрієтарний геометричний гротеск із чітко вираженими квадратними пропорціями та інженерним характером. Заголовки в UberMove Bold розміром 52px мають вагу білборда — авторитетні, прямолінійні, без вибачень. Супровідний шрифт UberMoveText обробляє основний текст та кнопки з дещо м'якшим, більш читабельним характером при середньому накресленні (500). Разом вони утворюють типографічну систему, що нагадує схему транзитного маршруту: чітку, ефективну, побудовану для швидкого сканування.
Справжня відмінність дизайну Uber — використання повноформатних фотографій та ілюстрацій у поєднанні з інтерактивними елементами у формі пілюлі (border-radius 999px). Навігаційні чіпи, кнопки CTA та селектори категорій — усі мають цю капсульну форму, створюючи тактильну, зручну для великого пальця мовну систему інтерфейсу, що безпомилково впізнавана як Uber. Ілюстрації — теплі, злегка стилізовані сцени з водіями, пасажирами та міськими пейзажами — привносять людяність у те, що інакше могло б бути холодною монохромною системою. Сайт чергує білі розділи з повністю чорним футером, а розкладка на основі карток використовує найніжніші можливі тіні (rgba(0,0,0,0.12-0.16)), щоб створити легке відчуття підйому, не порушуючи плаский естетичний стиль.
Ключові характеристики:
- Чорно-біла основа з практично відсутніми середніми сірими в хромі інтерфейсу
- UberMove (заголовки) + UberMoveText (текст/UI) — пропрієтарна родина геометричних гротесків
- Форма пілюлі скрізь: кнопки, чіпи, елементи навігації — усі з border-radius 999px
- Теплі, людські ілюстрації, що контрастують із разючим монохромним інтерфейсом
- Розкладка на основі карток із ледь помітними тінями (непрозорість 0.12–0.16)
- Сітка відступів 8px із компактними, інформаційно насиченими розкладками
- Виразна фотографія як повноформатний фон для hero-секцій
- Чорний футер, що якорить сторінку в темному середовищі з високим контрастом
2. Кольорова палітра та ролі
Основні
- Uber Black (
#000000): Визначальний колір бренду — використовується для основних кнопок, заголовків, тексту навігації та футера. Не «майже чорний» і не «темно-сірий», а справжній, бескомпромісний чорний. - Pure White (
#ffffff): Основний колір поверхні та інверсний текст. Використовується для фонів сторінок, поверхонь карток і тексту на чорних елементах.
Інтерактивні стани та кнопки
- Hover Gray (
#e2e2e2): Стан наведення для білих кнопок — чистий, холодний світло-сірий, що забезпечує чіткий зворотний зв'язок без теплоти. - Hover Light (
#f3f3f3): Тонке наведення для піднятих білих кнопок — ледь помітний сірий для м'якого інтерактивного відгуку. - Chip Gray (
#efefef): Фон для вторинних/фільтрувальних кнопок і навігаційних чіпів — нейтральний, ультра-світлий сірий.
Текст та контент
- Body Gray (
#4b4b4b): Вторинний текст і посилання в футері — справжній середній сірий без теплого чи холодного відтінку. - Muted Gray (
#afafaf): Третинний текст, знецінені посилання в футері та placeholder-контент.
Рамки та розділення
- Border Black (
#000000): Тонкі рамки 1px для структурного обмеження — використовуються рідко, на розділювачах і контейнерах форм.
Тіні та глибина
- Shadow Light (
rgba(0, 0, 0, 0.12)): Стандартне підняття картки — легке, як пір'їна, підняття для контентних карток. - Shadow Medium (
rgba(0, 0, 0, 0.16)): Дещо сильніше підняття для плаваючих кнопок дії та оверлеїв. - Button Press (
rgba(0, 0, 0, 0.08)): Врізна тінь для активних/натиснутих станів вторинних кнопок.
Стани посилань
- Default Link Blue (
#0000ee): Стандартний синій браузера для текстових посилань із підкресленням — використовується в основному контенті. - Link White (
#ffffff): Посилання на темних поверхнях — у футері та темних секціях. - Link Black (
#000000): Посилання на світлих поверхнях із підкресленням.
Система градієнтів
- Дизайн Uber повністю позбавлений градієнтів. Дуальність чорного/білого та блоки суцільного кольору створюють всю візуальну ієрархію. Жодних градієнтів у системі — кожна поверхня є суцільним кольором, кожен перехід — чіткою межею або тінню.
3. Правила типографіки
Сімейство шрифтів
- Заголовок / Display:
UberMove, з підміною:UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif - Основний текст / UI:
UberMoveText, з підміною:system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
Примітка: UberMove та UberMoveText — пропрієтарні шрифти. Для зовнішніх реалізацій використовуйте system-ui або Inter як найближчий доступний замінник. Геометричний, квадратний характер UberMove можна наблизити за допомогою Inter або DM Sans.
Ієрархія
| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Примітки |
|---|---|---|---|---|---|
| Display / Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (щільна) | Максимальний вплив, присутність білборда |
| Заголовок секції | UberMove | 36px (2.25rem) | 700 | 1.22 (щільна) | Головні якорі секцій |
| Назва картки | UberMove | 32px (2rem) | 700 | 1.25 (щільна) | Заголовки карток і функцій |
| Підзаголовок | UberMove | 24px (1.5rem) | 700 | 1.33 | Вторинні заголовки секцій |
| Малий заголовок | UberMove | 20px (1.25rem) | 700 | 1.40 | Компактні заголовки, назви списків |
| Навігація / UI великий | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Навігаційні посилання, виразний текст UI |
| Основний текст / Кнопка | UberMoveText | 16px (1rem) | 400–500 | 1.25–1.50 | Стандартний основний текст, підписи кнопок |
| Підпис | UberMoveText | 14px (0.88rem) | 400–500 | 1.14–1.43 | Метадані, описи, малі посилання |
| Мікро | UberMoveText | 12px (0.75rem) | 400 | 1.67 (розріджена) | Дрібний шрифт, юридичний текст |
Принципи
- Жирні заголовки, середній основний текст: Заголовки UberMove виключно насиченістю 700 (жирний) — кожен заголовок б'є з силою білборда. Основний і UI-текст UberMoveText використовує 400–500, утворюючи чітку візуальну ієрархію через контраст насиченості.
- Щільні міжрядкові інтервали заголовків: Усі заголовки використовують висоту рядка 1.22–1.40 — компактно і пружно, призначено для сканування, а не читання.
- Функціональна типографіка: Жодних декоративних прийомів. Ніякого letter-spacing, text-transform чи орнаментального розміру. Кожен текстовий елемент слугує прямій комунікаційній меті.
- Два шрифти, суворі ролі: UberMove — виключно для заголовків. UberMoveText — виключно для основного тексту, кнопок, посилань і UI. Межа ніколи не порушується.
4. Стилізація компонентів
Кнопки
Основна чорна (CTA)
- Фон: Uber Black (
#000000) - Текст: Pure White (
#ffffff) - Padding: 10px 12px
- Радіус: 999px (повна пілюля)
- Обведення: немає
- Фокус: врізане кільце
rgb(255,255,255) 0px 0px 0px 2px - Основна кнопка дії — жирна, з високим контрастом, неможливо не помітити
Вторинна біла
- Фон: Pure White (
#ffffff) - Текст: Uber Black (
#000000) - Padding: 10px 12px
- Радіус: 999px (повна пілюля)
- Наведення: фон змінюється на Hover Gray (
#e2e2e2) - Фокус: фон змінюється на Hover Gray, з'являється врізане кільце
- Використовується на темних поверхнях або як вторинна дія поруч із основною чорною
Чіп / Фільтр
- Фон: Chip Gray (
#efefef) - Текст: Uber Black (
#000000) - Padding: 14px 16px
- Радіус: 999px (повна пілюля)
- Активний стан: врізана тінь
rgba(0,0,0,0.08) - Навігаційні чіпи, селектори категорій, перемикачі фільтрів
Плаваюча кнопка дії
- Фон: Pure White (
#ffffff) - Текст: Uber Black (
#000000) - Padding: 14px
- Радіус: 999px (повна пілюля)
- Тінь:
rgba(0,0,0,0.16) 0px 2px 8px 0px - Transform:
translateY(2px)— невеликий зсув - Наведення: фон змінюється на
#f3f3f3 - Елементи керування картою, кнопка прокрутки вгору, плаваючі CTA
Картки та контейнери
- Фон: Pure White (
#ffffff) на білих сторінках; чіткого візуального розрізнення фону карток немає - Рамка: відсутня за замовчуванням — картки визначаються тінню, а не обводкою
- Радіус: 8px для стандартних контентних карток; 12px для featured/promoted карток
- Тінь:
rgba(0,0,0,0.12) 0px 4px 16px 0pxдля стандартного підйому - Картки насичені контентом із мінімальними внутрішніми відступами
- Картки, орієнтовані на зображення, використовують повноформатні ілюстрації з текстом поверх або знизу
Поля введення та форми
- Текст: Uber Black (
#000000) - Фон: Pure White (
#ffffff) - Рамка: 1px solid Black (
#000000) — єдине місце, де видимі рамки помітно присутні - Радіус: 8px
- Padding: стандартні комфортні відступи
- Фокус: без спеціального витягнутого стану — спирається на стандартне кільце фокусу браузера
Навігація
- Фіксована верхня навігація з білим фоном
- Логотип: wordmark/іконка Uber розміром 24x24px у чорному кольорі
- Посилання: UberMoveText розміром 14–18px, насиченість 500, в Uber Black
- Навігаційні чіпи у формі пілюлі з фоном Chip Gray (
#efefef) для категорійної навігації ("Ride", "Drive", "Business", "Uber Eats") - Перемикач меню: кругла кнопка з border-radius 50%
- Мобільна версія: шаблон гамбургер-меню
Обробка зображень
- Теплі, намальовані вручну сцени (не фотографії для функціональних секцій)
- Стиль ілюстрацій: злегка стилізовані люди, тепла кольорова палітра в ілюстраціях, сучасний вайб
- Hero-секції використовують жирну фотографію або ілюстрацію як повноширинний фон
- QR-коди для CTA завантаження застосунку
- Усі зображення використовують стандартний border-radius 8px або 12px при розміщенні в картках
Характерні компоненти
Навігація з категорійними пілюлями
- Горизонтальний ряд кнопок у формі пілюлі для навігації верхнього рівня ("Ride", "Drive", "Business", "Uber Eats", "About")
- Кожна пілюля: фон Chip Gray, чорний текст, радіус 999px
- Активний стан позначається чорним фоном з білим текстом (інверсія)
Hero з подвійною дією
- Розділений hero: текст/CTA ліворуч, карта/ілюстрація праворуч
- Два поля введення поруч для місця відправлення/призначення
- Кнопка CTA "See prices" у чорній пілюлі
Картки для планування заздалегідь
- Картки, що просувають функції типу "Uber Reserve" і планування поїздок
- Насичені ілюстраціями з теплими, людиноцентричними зображеннями
- Чорні кнопки CTA з білим текстом внизу
5. Принципи розкладки
Система відступів
- Базова одиниця: 8px
- Шкала: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
- Padding кнопки: 10px 12px (компактний) або 14px 16px (комфортний)
- Внутрішній padding картки: приблизно 24–32px
- Вертикальні відступи між секціями: щедрі, але ефективні — приблизно 64–96px між основними секціями
Сітка та контейнер
- Максимальна ширина контейнера: приблизно 1136px, відцентрований
- Hero: розділена розкладка з текстом ліворуч і візуалом праворуч
- Функціональні секції: двоколонні сітки карток або повноширинні однаколонні
- Футер: багатоколонна сітка посилань на чорному фоні
- Повноширинні секції, що розтягуються до країв вікна перегляду
Філософія білого простору
- Ефективний, а не повітряний: Білий простір Uber функціональний — достатньо для розділення, але ніколи не порожньо. Це відступи транзитної системи: компактні, чіткі, цілеспрямовані.
- Насичені контентом картки: Картки компактно пакують інформацію з мінімальними внутрішніми відступами, покладаючись на тінь і радіус для визначення меж.
- Повітря між секціями: Основні секції отримують щедрі вертикальні відступи, але всередині секцій елементи тісно згруповані.
Шкала border-radius
- Гостра (0px): Жодних квадратних кутів в інтерактивних елементах
- Стандартна (8px): Контентні картки, поля введення, списки
- Комфортна (12px): Featured картки, більші контейнери, посилання-картки
- Повна пілюля (999px): Усі кнопки, чіпи, елементи навігації, пілюлі
- Коло (50%): Аватар-зображення, контейнери іконок, кругові елементи керування
6. Глибина та піднятість
| Рівень | Обробка | Застосування |
|---|---|---|
| Плаский (Level 0) | Без тіні, суцільний фон | Фон сторінки, вбудований контент, текстові секції |
| Тонкий (Level 1) | rgba(0,0,0,0.12) 0px 4px 16px |
Стандартні контентні картки, функціональні блоки |
| Середній (Level 2) | rgba(0,0,0,0.16) 0px 4px 16px |
Підняті картки, оверлей-елементи |
| Плаваючий (Level 3) | rgba(0,0,0,0.16) 0px 2px 8px + translateY(2px) |
Плаваючі кнопки дії, елементи керування картою |
| Натиснутий (Level 4) | rgba(0,0,0,0.08) inset (spread 999px) |
Активні/натиснуті стани кнопок |
| Кільце фокусу | rgb(255,255,255) 0px 0px 0px 2px inset |
Індикатори фокусу з клавіатури |
Філософія тіней: Uber використовує тінь виключно як структурний інструмент, ніколи декоративно. Тіні завжди чорні з дуже низькою непрозорістю (0.08–0.16), створюючи мінімальне підняття, необхідне для розділення шарів контенту. Радіуси розмиття помірні (8–16px) — достатньо, щоб відчуватися природно, але ніколи драматично. Кольорових тіней, стопок тіней і ефектів розсіяного світіння немає. Глибина передається більше через контраст чорних/білих секцій, ніж через підняття тіней.
7. Правила та заборони
Робіть
- Використовуйте справжній чорний (
#000000) і чистий білий (#ffffff) як основну палітру — разючий контраст І Є Uber - Використовуйте border-radius 999px для всіх кнопок, чіпів і навігаційних елементів у формі пілюлі
- Зберігайте всі заголовки в UberMove Bold (700) для впливу рівня білборда
- Використовуйте ледь помітні тіні (непрозорість 0.12–0.16) для підняття карток — майже невидимі
- Підтримуйте компактний, насичений інформацією стиль розкладки — Uber надає пріоритет ефективності над повітряністю
- Використовуйте теплі, людиноцентричні ілюстрації, щоб пом'якшити монохромний інтерфейс
- Застосовуйте радіус 8px для контентних карток і 12px для featured контейнерів
- Використовуйте UberMoveText насиченістю 500 для навігації та виразного тексту UI
- Поєднуйте чорні основні кнопки з білими вторинними для розкладок із подвійною дією
Не робіть
- Не вносьте колір в хром UI — інтерфейс Uber суворо чорний, білий і сірий
- Не використовуйте округлені кути менше 999px на кнопках — форма повної пілюлі є основним елементом ідентичності
- Не застосовуйте важкі тіні або тіні з високою непрозорістю — глибина має бути ледь помітною
- Не використовуйте шрифти із зарубками — типографіка Uber виключно геометричний гротеск
- Не створюйте повітряні, просторі розкладки з надмірним білим простором — щільність Uber навмисна
- Не використовуйте градієнти або кольорові оверлеї — кожна поверхня є плоским, суцільним кольором
- Не змішуйте UberMove в основний текст або UberMoveText у заголовки — ієрархія є суворою
- Не використовуйте декоративні рамки — рамки є функціональними (поля введення, розділювачі) або відсутніми
- Не розмивайте контраст чорного/білого відтінками «майже білого» чи «майже чорного» — дуальність є навмисною
8. Адаптивна поведінка
Контрольні точки
| Назва | Ширина | Ключові зміни |
|---|---|---|
| Mobile Small | 320px | Мінімальна розкладка, одна колонка, стопочні поля введення, компактна типографіка |
| Mobile | 600px | Стандартний мобільний, стопочна розкладка, гамбургер-навігація |
| Tablet Small | 768px | Починаються двоколонні сітки, розширені розкладки карток |
| Tablet | 1119px | Повна планшетна розкладка, hero-контент пліч-о-пліч |
| Desktop Small | 1120px | Активується десктопна сітка, горизонтальні навігаційні пілюлі |
| Desktop | 1136px | Повна десктопна розкладка, максимальна ширина контейнера, розділений hero |
Цілі для дотику
- Усі кнопки-пілюлі: мінімальна висота 44px (вертикальний padding 10–14px + висота рядка)
- Навігаційні чіпи: щедрий padding 14px 16px для комфортного натискання великим пальцем
- Кругові елементи керування (меню, закрити): радіус 50% забезпечує великі, легкі для натискання цілі
- Поверхні карток слугують повноформатними цілями для дотику на мобільних пристроях
Стратегія згортання
- Навігація: Горизонтальна навігація з пілюлями згортається в гамбургер-меню з круговим перемикачем
- Hero: Розділена розкладка (текст + карта/візуал) укладається в одну колонку — текст зверху, візуал знизу
- Поля введення: Поля відправлення/призначення пліч-о-пліч укладаються вертикально
- Картки функцій: Двоколонна сітка згортається в повноширинні стопочні картки
- Заголовки: Display розміром 52px зменшується через 36px, 32px, 24px, 20px
- Футер: Багатоколонна сітка посилань згортається в акордеон або стопочну однаколонну
- Категорійні пілюлі: Горизонтальне прокручування з переповненням на менших екранах
Поведінка зображень
- Ілюстрації масштабуються пропорційно в своїх контейнерах
- Зображення hero підтримують пропорції, можуть обрізатися на менших екранах
- Секції з QR-кодами ховаються на мобільних (завантаження застосунку переходить до прямих посилань на магазини)
- Зображення на картках підтримують border-radius 8–12px за будь-яких розмірів
9. Посібник з підказками для агента
Швидке посилання на кольори
- Основна кнопка: "Uber Black (#000000)"
- Фон сторінки: "Pure White (#ffffff)"
- Текст кнопки (на чорному): "Pure White (#ffffff)"
- Текст кнопки (на білому): "Uber Black (#000000)"
- Вторинний текст: "Body Gray (#4b4b4b)"
- Третинний текст: "Muted Gray (#afafaf)"
- Фон чіпу: "Chip Gray (#efefef)"
- Стан наведення: "Hover Gray (#e2e2e2)"
- Тінь картки: "rgba(0,0,0,0.12) 0px 4px 16px"
- Фон футера: "Uber Black (#000000)"
Приклади підказок для компонентів
- "Створіть hero-секцію на Pure White (#ffffff) із заголовком розміром 52px UberMove Bold (700), висота рядка 1.23. Використовуйте текст Uber Black (#000000). Додайте підзаголовок у Body Gray (#4b4b4b) розміром 16px UberMoveText насиченістю 400 з висотою рядка 1.50. Розмістіть CTA-кнопку-пілюлю Uber Black (#000000) з білим текстом Pure White, радіус 999px, padding 10px 12px."
- "Розробіть навігаційну панель із категоріями у вигляді горизонтальних кнопок-пілюль. Кожна пілюля: фон Chip Gray (#efefef), текст Uber Black (#000000), padding 14px 16px, border-radius 999px. Активна пілюля інвертується до фону Uber Black з текстом Pure White. Використовуйте UberMoveText розміром 14px насиченістю 500."
- "Побудуйте функціональну картку на Pure White (#ffffff) з border-radius 8px і тінню rgba(0,0,0,0.12) 0px 4px 16px. Заголовок у UberMove розміром 24px насиченістю 700, опис у Body Gray (#4b4b4b) розміром 16px UberMoveText. Додайте кнопку-пілюлю CTA чорного кольору внизу."
- "Створіть темний футер на Uber Black (#000000) з текстом заголовка Pure White (#ffffff) у UberMove розміром 20px насиченістю 700. Посилання в футері у Muted Gray (#afafaf) розміром 14px UberMoveText. Наведення посилань переходить у Pure White. Багатоколонна сіткова розкладка."
- "Розробіть плаваючу кнопку дії з фоном Pure White (#ffffff), радіусом 999px, padding 14px і тінню rgba(0,0,0,0.16) 0px 2px 8px. При наведенні фон змінюється на #f3f3f3. Використовуйте для прокрутки вгору або елементів керування картою."
Посібник з ітерацій
- Зосередьтеся на ОДНОМУ компоненті за раз
- Посилайтеся на суворо чорно-білу палітру — "використовуйте Uber Black (#000000)", а не "зробіть темніше"
- Завжди вказуйте радіус 999px для кнопок і пілюль — це обов'язково для ідентичності Uber
- Явно описуйте сімейство шрифтів — "UberMove Bold для заголовка, UberMoveText Medium для підпису"
- Для тіней використовуйте "шепітна тінь (rgba(0,0,0,0.12) 0px 4px 16px)" — ніяких важких тіней
- Зберігайте компактні, насичені інформацією розкладки — Uber ефективний, а не повітряний
- Ілюстрації мають бути теплими і людяними — описуйте "стилізованих людей у теплих тонах", а не абстрактні форми
- Поєднуйте чорні CTA з білими вторинними для збалансованих розкладок із подвійною дією