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。
250 lines
22 KiB
Markdown
250 lines
22 KiB
Markdown
# Система дизайну натхненна Spotify
|
||
|
||
> Category: Медіа та споживачі
|
||
> Музичний стримінг. Яскравий зелений на темному тлі, жирний шрифт, акцент на обкладинках альбомів.
|
||
|
||
## 1. Візуальна тема та атмосфера
|
||
|
||
Веб-інтерфейс Spotify — це темний, занурюючий музичний плеєр, що огортає слухачів майже чорним коконом (`#121212`, `#181818`, `#1f1f1f`), де обкладинки альбомів і контент стають основним джерелом кольору. Філософія дизайну — «темрява на першому місці для контенту» — інтерфейс відступає в тінь, щоб музика, подкасти і плейлисти могли сяяти. Кожна поверхня є відтінком вугілля, що створює театральне середовище, де єдиний справжній колір — це іконічний зелений Spotify (`#1ed760`) і самі обкладинки альбомів.
|
||
|
||
Типографіка використовує SpotifyMixUI та SpotifyMixUITitle — власні шрифти з сімейства CircularSp (Circular від Lineto, адаптований для Spotify) з розширеним стеком запасних варіантів, що включає арабські, єврейські, кириличні, грецькі, деванагарі та CJK шрифти — відображаючи глобальне охоплення Spotify. Система шрифтів компактна й функціональна: 700 (жирний) для акцентів і навігації, 600 (напівжирний) для вторинних акцентів, 400 (звичайний) для основного тексту. Кнопки використовують верхній регістр і позитивний міжлітерний інтервал (1.4px–2px) для систематичного, схожого на ярлик вигляду.
|
||
|
||
Відмітна риса Spotify — геометрія таблетки та кола. Основні кнопки мають радіус 500px–9999px (повна таблетка), кругові кнопки відтворення — радіус 50%, а поля пошуку — таблетки 500px. У поєднанні з важкими тінями (`rgba(0,0,0,0.5) 0px 8px 24px`) на піднятих елементах та унікальною комбінацією вставленої рамки й тіні (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`) результатом є інтерфейс, що нагадує преміальний аудіопристрій — тактильний, округлий і розроблений для дотику.
|
||
|
||
**Ключові характеристики:**
|
||
- Темна занурювальна тема майже чорного кольору (`#121212`–`#1f1f1f`) — інтерфейс зникає за контентом
|
||
- Зелений Spotify (`#1ed760`) як єдиний акцент бренду — ніколи декоративний, завжди функціональний
|
||
- Шрифтове сімейство SpotifyMixUI/CircularSp із підтримкою глобальних шрифтів
|
||
- Кнопки-таблетки (500px–9999px) і кругові елементи керування (50%) — округлі, оптимізовані для дотику
|
||
- Підписи кнопок у верхньому регістрі з широким міжлітерним інтервалом (1.4px–2px)
|
||
- Важкі тіні на піднятих елементах (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||
- Семантичні кольори: негативний червоний (`#f3727f`), попереджувальний помаранчевий (`#ffa42b`), інформаційний синій (`#539df5`)
|
||
- Обкладинка альбому як основне джерело кольору — інтерфейс за задумом ахроматичний
|
||
|
||
## 2. Кольорова палітра та ролі
|
||
|
||
### Основний бренд
|
||
- **Зелений Spotify** (`#1ed760`): Основний акцент бренду — кнопки відтворення, активні стани, заклики до дії
|
||
- **Майже чорний** (`#121212`): Найглибша фонова поверхня
|
||
- **Темна поверхня** (`#181818`): Картки, контейнери, піднятi поверхні
|
||
- **Середньо-темний** (`#1f1f1f`): Фони кнопок, інтерактивні поверхні
|
||
|
||
### Текст
|
||
- **Білий** (`#ffffff`): `--text-base`, основний текст
|
||
- **Сріблястий** (`#b3b3b3`): Вторинний текст, приглушені підписи, неактивна навігація
|
||
- **Майже білий** (`#cbcbcb`): Трохи яскравіший вторинний текст
|
||
- **Світлий** (`#fdfdfd`): Близький до чисто білого для максимального акценту
|
||
|
||
### Семантичні
|
||
- **Негативний червоний** (`#f3727f`): `--text-negative`, стани помилок
|
||
- **Попереджувальний помаранчевий** (`#ffa42b`): `--text-warning`, стани попереджень
|
||
- **Інформаційний синій** (`#539df5`): `--text-announcement`, інформаційні стани
|
||
|
||
### Поверхня та рамка
|
||
- **Темна картка** (`#252525`): Підняти поверхня картки
|
||
- **Середня картка** (`#272727`): Альтернативна поверхня картки
|
||
- **Сірий рамки** (`#4d4d4d`): Рамки кнопок на темному тлі
|
||
- **Світла рамка** (`#7c7c7c`): Контурні рамки кнопок, приглушені посилання
|
||
- **Роздільник** (`#b3b3b3`): Лінії-роздільники
|
||
- **Світла поверхня** (`#eeeeee`): Кнопки світлого режиму (рідко)
|
||
- **Зелена рамка Spotify** (`#1db954`): Варіант зеленої акцентної рамки
|
||
|
||
### Тіні
|
||
- **Важка** (`rgba(0,0,0,0.5) 0px 8px 24px`): Діалоги, меню, підняті панелі
|
||
- **Середня** (`rgba(0,0,0,0.3) 0px 8px 8px`): Картки, випадаючі меню
|
||
- **Вставлена рамка** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Комбінація рамки й тіні для полів введення
|
||
|
||
## 3. Правила типографіки
|
||
|
||
### Шрифтові сімейства
|
||
- **Заголовок**: `SpotifyMixUITitle`, запасні варіанти: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||
- **Інтерфейс / Основний текст**: `SpotifyMixUI`, той самий стек запасних варіантів
|
||
|
||
### Ієрархія
|
||
|
||
| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Назва розділу | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Жирна вага заголовка |
|
||
| Заголовок функції | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (щільний) | normal | Напівжирні заголовки розділів |
|
||
| Жирний основний | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Акцентований текст |
|
||
| Основний | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Стандартний основний текст |
|
||
| Кнопка у верхньому регістрі | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (щільний) | 1.4px–2px | `text-transform: uppercase` |
|
||
| Кнопка | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Стандартна кнопка |
|
||
| Жирне навігаційне посилання | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Навігація |
|
||
| Навігаційне посилання | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Неактивна навігація |
|
||
| Жирний підпис | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Жирні метадані |
|
||
| Підпис | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Метадані |
|
||
| Дрібний жирний | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Теги, лічильники |
|
||
| Дрібний | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Дрібний текст |
|
||
| Значок | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||
| Мікро | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Найменший текст |
|
||
|
||
### Принципи
|
||
- **Жирний/звичайний бінарний**: Більшість тексту є або 700 (жирним), або 400 (звичайним), 600 використовується помірно. Це створює чітку візуальну ієрархію через контраст насиченості, а не варіацію розміру.
|
||
- **Кнопки у верхньому регістрі як система**: Підписи кнопок використовують верхній регістр і широкий міжлітерний інтервал (1.4px–2px), створюючи систематичний голос «ярлика», відмінний від контентного тексту.
|
||
- **Компактний розмір**: Діапазон 10px–24px — вужчий за більшість систем. Шрифт Spotify компактний і функціональний, розроблений для перегляду плейлистів, а не читання статей.
|
||
- **Підтримка глобальних шрифтів**: Розширений стек запасних варіантів (арабський, єврейський, кириличний, грецький, деванагарі, CJK) відображає охоплення Spotify у понад 180 ринках.
|
||
|
||
## 4. Стилі компонентів
|
||
|
||
### Кнопки
|
||
|
||
**Темна таблетка**
|
||
- Фон: `#1f1f1f`
|
||
- Текст: `#ffffff` або `#b3b3b3`
|
||
- Відступ: 8px 16px
|
||
- Радіус: 9999px (повна таблетка)
|
||
- Використання: Навігаційні таблетки, вторинні дії
|
||
|
||
**Темна велика таблетка**
|
||
- Фон: `#181818`
|
||
- Текст: `#ffffff`
|
||
- Відступ: 0px 43px
|
||
- Радіус: 500px
|
||
- Використання: Основні кнопки навігації застосунку
|
||
|
||
**Світла таблетка**
|
||
- Фон: `#eeeeee`
|
||
- Текст: `#181818`
|
||
- Радіус: 500px
|
||
- Використання: Заклики до дії у світлому режимі (згода на куки, маркетинг)
|
||
|
||
**Контурна таблетка**
|
||
- Фон: прозорий
|
||
- Текст: `#ffffff`
|
||
- Рамка: `1px solid #7c7c7c`
|
||
- Відступ: 4px 16px 4px 36px (асиметричний для іконки)
|
||
- Радіус: 9999px
|
||
- Використання: Кнопки підписки, вторинні дії
|
||
|
||
**Кругова кнопка відтворення**
|
||
- Фон: `#1f1f1f`
|
||
- Текст: `#ffffff`
|
||
- Відступ: 12px
|
||
- Радіус: 50% (коло)
|
||
- Використання: Елементи керування відтворенням/паузою
|
||
|
||
### Картки та контейнери
|
||
- Фон: `#181818` або `#1f1f1f`
|
||
- Радіус: 6px–8px
|
||
- На більшості карток немає видимих рамок
|
||
- Наведення: незначне освітлення фону
|
||
- Тінь: `rgba(0,0,0,0.3) 0px 8px 8px` на піднятих
|
||
|
||
### Поля введення
|
||
- Поле пошуку: фон `#1f1f1f`, текст `#ffffff`
|
||
- Радіус: 500px (таблетка)
|
||
- Відступ: 12px 96px 12px 48px (з урахуванням іконки)
|
||
- Фокус: рамка стає `#000000`, контур `1px solid`
|
||
|
||
### Навігація
|
||
- Темна бічна панель зі SpotifyMixUI 14px насиченість 700 для активних, 400 для неактивних
|
||
- Приглушений колір `#b3b3b3` для неактивних елементів, `#ffffff` для активних
|
||
- Кругові кнопки іконок (радіус 50%)
|
||
- Логотип Spotify у верхньому лівому куті зеленого кольору
|
||
|
||
## 5. Принципи макету
|
||
|
||
### Система відступів
|
||
- Базова одиниця: 8px
|
||
- Масштаб: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||
|
||
### Сітка та контейнер
|
||
- Бічна панель (фіксована) + основна область контенту
|
||
- Картки альбомів/плейлистів на основі сітки
|
||
- Рядок «зараз грає» на всю ширину внизу
|
||
- Адаптивна область контенту заповнює решту простору
|
||
|
||
### Філософія відступів
|
||
- **Темне ущільнення**: Spotify щільно пакує контент — сітки плейлистів, списки треків та навігація розміщені щільно. Темний фон забезпечує візуальний відпочинок між елементами без великих прогалин.
|
||
- **Щільність контенту замість простору**: Це застосунок, а не маркетинговий сайт. Кожен піксель служить досвіду прослуховування.
|
||
|
||
### Масштаб радіуса рамки
|
||
- Мінімальний (2px): Значки, явні теги
|
||
- Непомітний (4px): Поля введення, дрібні елементи
|
||
- Стандартний (6px): Контейнери обкладинок альбомів, картки
|
||
- Комфортний (8px): Розділи, діалоги
|
||
- Середній (10px–20px): Панелі, елементи оверлею
|
||
- Великий (100px): Великі кнопки-таблетки
|
||
- Таблетка (500px): Основні кнопки, поле пошуку
|
||
- Повна таблетка (9999px): Навігаційні таблетки, пошук
|
||
- Коло (50%): Кнопки відтворення, аватари, іконки
|
||
|
||
## 6. Глибина та підйом
|
||
|
||
| Рівень | Обробка | Використання |
|
||
|-------|-----------|-----|
|
||
| Базовий (рівень 0) | Фон `#121212` | Найглибший шар, фон сторінки |
|
||
| Поверхня (рівень 1) | `#181818` або `#1f1f1f` | Картки, бічна панель, контейнери |
|
||
| Піднятий (рівень 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Випадаючі меню, картки при наведенні |
|
||
| Діалог (рівень 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Модальні вікна, оверлеї, меню |
|
||
| Вставлений (рамка) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Рамки полів введення |
|
||
|
||
**Філософія тіней**: Spotify використовує помітно важкі тіні для темно-тематичного застосунку. Тінь з непрозорістю 0.5 при розмитості 24px створює драматичний ефект «ширяння в темряві» для діалогів та меню, тоді як тінь з непрозорістю 0.3 при розмитості 8px забезпечує більш тонке підняття картки. Унікальна комбінація вставленої рамки й тіні на полях введення створює заглиблену, тактильну якість.
|
||
|
||
## 7. Що робити і чого не робити
|
||
|
||
### Що робити
|
||
- Використовуйте майже чорні фони (`#121212`–`#1f1f1f`) — глибина через варіацію відтінків
|
||
- Застосовуйте зелений Spotify (`#1ed760`) лише для елементів керування відтворенням, активних станів і основних закликів до дії
|
||
- Використовуйте форму таблетки (500px–9999px) для всіх кнопок — кругову (50%) для елементів керування відтворенням
|
||
- Застосовуйте верхній регістр і широкий міжлітерний інтервал (1.4px–2px) на підписах кнопок
|
||
- Зберігайте компактну типографіку (діапазон 10px–24px) — це застосунок, а не журнал
|
||
- Використовуйте важкі тіні (непрозорість 0.3–0.5) для піднятих елементів на темних фонах
|
||
- Дозвольте обкладинці альбому надавати колір — сам інтерфейс ахроматичний
|
||
|
||
### Чого не робити
|
||
- Не використовуйте зелений Spotify декоративно або на фонах — він лише функціональний
|
||
- Не використовуйте світлі фони для основних поверхонь — темне занурення є ключовим
|
||
- Не пропускайте геометрію таблетки/кола на кнопках — квадратні кнопки руйнують ідентичність
|
||
- Не використовуйте тонкі/легкі тіні — на темних фонах тіні мають бути важкими, щоб бути видимими
|
||
- Не додавайте додаткові кольори бренду — зелений і ахроматичні сірі становлять повну палітру
|
||
- Не використовуйте збільшену висоту рядка — типографіка Spotify компактна й щільна
|
||
- Не відкривайте прості сірі рамки — замість цього використовуйте тіньові або вставлені рамки
|
||
|
||
## 8. Адаптивна поведінка
|
||
|
||
### Контрольні точки
|
||
| Назва | Ширина | Ключові зміни |
|
||
|------|-------|-------------|
|
||
| Малий мобільний | <425px | Компактний мобільний макет |
|
||
| Мобільний | 425–576px | Стандартний мобільний |
|
||
| Планшет | 576–768px | Сітка з 2 колонок |
|
||
| Великий планшет | 768–896px | Розширений макет |
|
||
| Малий десктоп | 896–1024px | Бічна панель видима |
|
||
| Десктоп | 1024–1280px | Повний десктоп макет |
|
||
| Великий десктоп | >1280px | Розширена сітка |
|
||
|
||
### Стратегія згортання
|
||
- Бічна панель: повна → згорнута → прихована
|
||
- Сітка альбомів: 5 колонок → 3 → 2 → 1
|
||
- Рядок «зараз грає»: зберігається на всіх розмірах
|
||
- Пошук: поле-таблетка зберігається, ширина регулюється
|
||
- Навігація: бічна панель → нижня панель на мобільному
|
||
|
||
## 9. Посібник для агентів
|
||
|
||
### Швидкий довідник кольорів
|
||
- Фон: Майже чорний (`#121212`)
|
||
- Поверхня: Темна картка (`#181818`)
|
||
- Текст: Білий (`#ffffff`)
|
||
- Вторинний текст: Сріблястий (`#b3b3b3`)
|
||
- Акцент: Зелений Spotify (`#1ed760`)
|
||
- Рамка: `#4d4d4d`
|
||
- Помилка: Негативний червоний (`#f3727f`)
|
||
|
||
### Приклади підказок для компонентів
|
||
- «Створіть темну картку: фон `#181818`, радіус 8px. Заголовок 16px SpotifyMixUI насиченість 700, білий текст. Підзаголовок 14px насиченість 400, `#b3b3b3`. Тінь `rgba(0,0,0,0.3) 0px 8px 8px` при наведенні.»
|
||
- «Спроектуйте кнопку-таблетку: фон `#1f1f1f`, білий текст, радіус 9999px, відступ 8px 16px. 14px SpotifyMixUI насиченість 700, верхній регістр, міжлітерний інтервал 1.4px.»
|
||
- «Створіть кругову кнопку відтворення: фон зеленого Spotify (`#1ed760`), іконка `#000000`, радіус 50%, відступ 12px.»
|
||
- «Створіть поле пошуку: фон `#1f1f1f`, білий текст, радіус 500px, відступ 12px 48px. Вставлена рамка: `rgb(124,124,124) 0px 0px 0px 1px inset`.»
|
||
- «Спроектуйте навігаційну бічну панель: фон `#121212`. Активні елементи: 14px насиченість 700, білий. Неактивні: 14px насиченість 400, `#b3b3b3`.»
|
||
|
||
### Посібник з ітерацій
|
||
1. Починайте з `#121212` — все існує в майже чорній темряві
|
||
2. Зелений Spotify лише для функціональних виділень (відтворення, активний, заклик до дії)
|
||
3. Усе у формі таблетки — 500px для великих, 9999px для малих, 50% для кругових
|
||
4. Верхній регістр і широке трекінг на кнопках — систематичний голос ярлика
|
||
5. Важкі тіні (непрозорість 0.3–0.5) для підйому — легкі тіні невидимі на темному тлі
|
||
6. Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним
|