0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

33 KiB

Raw Blame History

Дизайн-система, натхненна Apple

Category: Медіа та споживчі продукти Споживча електроніка. Преміальний порожній простір, SF Pro, кінематографічні зображення.

1. Візуальна тема та атмосфера

Вебмова Apple — це точна редакційна система, яка чергується між галерейним спокоєм та насиченими роздрібними інформаційними блоками. Візуальний тон залишається стриманим: широкі нейтральні полотна, тихий хром і зображення продукту, яким віддається майже вся виразна вага. Інтерфейс сконструйовано так, щоб він зникав, аби обладнання, матеріали та варіанти оздоблення стали наративним переднім планом.

На п'яти проаналізованих сторінках ритм послідовний, але не монолітний. Маркетингові поверхні (домашня сторінка та Environment) використовують кінематографічне чергування чорного та світла за розділами, тоді як комерційні поверхні (потоки Store та Shop) запроваджують тісніші відступи, більше утилітарних елементів керування й щільніші стоси карток, не порушуючи основну граматику бренду. Результат — одна система з двома передачами: режим вітрини та режим транзакції.

Типографіка є стабілізатором. SF Pro Display несе ієрархію героїв і мерчандайзингу з компактними висотами рядків та контрольованим трекінгом, тоді як SF Pro Text обробляє метадані продукту, навігацію, фільтри та щільний UI вибору. Типографіка залишається непомітною, але діапазон масштабу достатньо широкий, щоб підтримувати як білбордне героїчне повідомлення, так і мікроутилітарні підписи.

Ключові характеристики:

Бінарний ритм розділів: глибокі чорні сцени (#000000), що чергуються з блідими нейтральними полями (#f5f5f7)
Єдине синє акцентне сімейство для семантики дій і посилань (#0071e3, #0066cc, #2997ff)
Два режими роботи в одній системі: кінематографічні модулі-вітрини та щільні комерційні конфігуратори
Сильна опора на зображення та матеріальне оздоблення; UI-хром залишається візуально тонким
Тісні заголовні показники (SF Pro Display, semibold) у парі з компактною типографікою тексту/посилань (SF Pro Text)
Геометрія пігулок і капсул як фірмова мова дій (18px до 980px та круглі елементи керування)
Глибина використовується ощадливо; контраст і розділення поверхонь виконують більшу частину роботи з нашаруванням
Багатосторінковий ритм кольорових блоків: чорні героїчні розділи -> бліді нейтральні поля мерчандайзингу -> утилітарні білі роздрібні поверхні -> темні мікроповерхні для елементів керування

2. Палітра кольорів та ролі

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Основні

Абсолютний чорний (#000000): занурювальні героїчні полотна, високодраматичні розділи продуктів, глибокі UI-якорі.
Блідий сірий Apple (#f5f5f7): основна світла поверхня для смуг функцій, блоків порівняння та редакційних переходів.
Майже чорне чорнило (#1d1d1f): основний текст і колір елементів керування з темною заливкою на світлих полотнах.

Вторинні та акцентні

Синій дії Apple (#0071e3): основна заливка дій та акцент бренду, що сигналізує фокус.
Синій текстового посилання (#0066cc): колір вбудованого посилання, оптимізований для читабельності довгих текстів.
Високояскравий синій посилання (#2997ff): яскраве оформлення посилання на темніших сценах, де потрібен сильніший контраст.

Поверхня та фон

Чисто біле полотно (#ffffff): фони роздрібу/списку продуктів та щільні транзакційні секції.
Графітова поверхня A (#272729): контекстний шар темної картки та елементів керування медіа.
Графітова поверхня B (#262629): трохи глибший темний утилітарний шар для груп елементів керування.
Графітова поверхня C (#28282b): піднесені темні допоміжні поверхні.
Графітова поверхня D (#2a2a2c): найтемніший піднесений рівень, що використовується для розділення в насиченіших темних сценах.

Нейтральні та текст

Вторинний нейтральний сірий (#6e6e73): вторинний текст тіла, допоміжні описи, третинні метадані.
М'який сірий межі (#d2d2d7): роздільники, тонкі контури та приглушене утилітарне обмеження.
Середній сірий межі (#86868b): сильніші контури полів у контекстах конфігурації продуктів та фільтрів.
Утилітарний темно-сірий (#424245): перехід темно-нейтрального тексту/поверхні в контекстах магазину.

Семантичні та акцентні

Сигнал вибору/фокусу (#0071e3): спільний сигнал фокусу та вибраного стану в маркетингових і комерційних контекстах.
Помилка/Попередження/Успіх: жодна окрема семантична палітра послідовно не була видима в наборі вилучених поверхонь.

Система градієнтів

Вилучені сторінки переважно керуються суцільними поверхнями. Візуальне багатство походить від фотографії та рендерингу оздоблення, а не від постійних UI-градієнтів.

3. Правила типографіки

Сімейство шрифтів

Сімейство для дисплея: SF Pro Display, запасні SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Сімейство для тексту: SF Pro Text, запасні SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Розподіл використання: сімейство для дисплея обробляє героїчні/продуктові заголовки та заголовки мерчандайзингу; сімейство для тексту обробляє навігацію, елементи керування, підписи та щільний комерційний текст.

Ієрархія

Роль	Розмір	Вага	Висота рядка	Міжлітерний інтервал	Примітки
Hero Display XL	80px	600	1.00-1.05	-1.2px	Масштаб героя Environment/store
Hero Display L	56px	600	1.07	-0.28px	Героїчні моменти домашньої сторінки
Section Display	48px	500-600	1.08	-0.144px	Основні заголовки розділів
Product Heading	40px	600	1.10	normal	Заголовки секцій продуктів і кампаній
Feature Display	38px	600	1.21	0.152px	Виноски пристроїв і мерчандайзингу
Promo Display	32px	300-600	1.09-1.13	0.128px до 0.352px	Підгерої на рівні модуля
Card/Product Title	28px	600	1.14	0.196px	Найменування на рівні плиток і ключовий текст
Utility Heading	24px	600	1.17	0.216px / -0.2px	Заголовки конфігуратора та згрупованого вмісту
Link/Action Heading	21px	600	1.14-1.38	0.231px	Більші промопосилання
Subhead	19px	600	1.21	0.228px	Компактні вступи до секцій
Body Primary	17px	400	1.47	-0.374px	Стандартне тіло та роздрібні описи
Body Emphasis	17px	600	1.24	-0.374px	Акцентовані підписи та ключові значення
Control Label	14px	400-600	1.29-1.47	-0.224px	Кнопки, допоміжні підписи, компактний навігаційний текст
Micro UI	12px	400-600	1.00-1.33	-0.12px	Дрібний шрифт, мікропідписи
Legal/Meta	10px	400	1.30-1.47	-0.08px	Щільні метадані та юридичний допоміжний текст

Принципи

Безперервність між типами сторінок: одна й та сама типографічна ДНК охоплює кінематографічні запуски та потоки купівлі продукту, запобігаючи розколу бренду між маркетингом і комерцією.
Стиснення на масштабі: рівні дисплея використовують тісне ведення рядка та контрольований трекінг, щоб відчуватися машинними та орієнтованими на продукт.
Читабельна щільність на роздрібній глибині: SF Pro Text балансує компактність з достатнім вертикальним ритмом для довгих списків продуктів та матриць опцій.
Виміряна шкала ваги: 600 — домінуюча вага акценту; 700 з'являється вибірково; 300 використовується ощадливо для контрасту у більших рядках.

Примітка про замінники шрифтів

Найближчі вільнодоступні замінники: Inter для реалізації з насиченим текстом та метрики SF Pro Display-like, апроксимовані за допомогою Inter Tight для заголовків.
При заміні трохи збільшуйте висоту рядка (+0.02 до +0.06) на розмірах тіла та зменшуйте інтенсивність негативного трекінгу, щоб зберегти читабельність.

4. Стилізація компонентів

Кнопки

Основна дія із заливкою: фон #0071e3, текст #ffffff, радіус 8px, компактний горизонтальний відступ (зазвичай 8px 15px). Використовується для рішучих дій купівлі/просування.
Дія з темною заливкою: фон #1d1d1f, текст #ffffff, радіус 8px. Використовується, коли світлим поверхням потрібен стриманий висококонтрастний основний елемент.
Сімейство дій пігулка/капсула: великі капсульні дії з радіусами 18px-56px та крайні пігулкові посилання з 980px. Встановлює м'який, але точний силует заклику до дії Apple.
Утилітарні оболонки фільтрів/кнопок: світлі оболонки (#fafafc або напівпрозорий білий) з тонкими сірими межами (#d2d2d7 / #86868b) для щільних контекстів конфігурації.
Поведінка при натисканні: активні елементи керування зазвичай зменшують масштаб або трохи зсувають заливку, щоб вказати на фізичне підтвердження натискання.

Картки та контейнери

Редакційні/продуктові картки: світлі картки на полях #f5f5f7 або білих з мінімальним обрамленням та композицією, що ставить зображення на перше місце.
Темні утилітарні картки: графітові рівні (#272729 до #2a2a2c), що використовуються для накладок, елементів керування медіа та модулів темного контексту.
Панелі конфігуратора: заокруглені контейнери (часто 12px-18px) з чітким, але стриманим визначенням межі.
Модулі каруселі/прожектора: більші заокруглені оболонки (28px-36px) для смуг рекомендованого вмісту.

Поля введення та форми

Поля введення роздрібу: напівпрозорі або білі фони, темний текст (#1d1d1f), обмеження межею (#86868b).
Елементи керування вибором: кругла/тоглова геометрія елементів керування часто з'являється в інтерфейсах вибору продуктів.
Стратегія щільності: поля форм залишаються візуально тихими, щоб зберегти домінування зображень пристроїв та ієрархії ціноутворення.

Навігація

Глобальна маркетингова навігація: компактна темна напівпрозора панель із посиланнями дрібним шрифтом та стриманою іконографією.
Шари навігації Store/підмагазину: додаткові утилітарні панелі, чипи та сегментовані елементи керування для звуження за категоріями та продуктами.
Ієрархія посилань: сині кольори посилань залишаються основним інтерактивним сигналом, тоді як нейтральний текст підтримує щільні набори навігації.

Обробка зображень

Фотографія, орієнтована на об'єкт: обладнання та аксесуари виносяться на передній план на контрольованих суцільних поверхнях.
Високоточний рендеринг оздоблення: відбиваючі/матеріальні деталі є центральними у візуальному переконанні.
Змішане обрамлення: героїчні сцени на повну ширину співіснують із заокругленими роздрібними картками та щільно обрізаними мерчандайзинговими мініатюрами.

Інші характерні компоненти

Матриця конфігуратора продукту: стоси опцій та селектори, що поєднують чипи, елементи керування у стилі радіокнопок та контекстні блоки ціни/підсумку.
Точки/стрілки керування каруселлю: круглий словник елементів керування в приглушених накладках для прогресу галереї.
Панелі історій Environment: наративні розділи, що змішують редакційну типографіку з кінематографічними візуалами продукту/середовища.

5. Принципи компонування

Система відступів

Базова одиниця фактично становить 8px, але система підтримує щільні мікрокроки для точного вирівнювання.
Часто повторно використовувані значення відступів на сторінках: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
Універсальні константи ритму, видимі в обох потоках — маркетинговому та роздрібному: каркас одиниці 8px з утилітарними інтервалами 14-20px для відступів компонентів та інтервалів списків.

Сітка та контейнер

Сторінки-вітрини: великі центральні колонки з широким горизонтальним простором для дихання та повноширинними кольоровими розділами.
Комерційні сторінки: тісніші багатоколонкові сітки продуктів та елементів керування з частим модульним складанням.
Поведінка контейнера: обмежене читабельне ядро зі щедрими зовнішніми полями на ширинах десктопа.

Філософія порожнього простору

Темп сцен: основні візуальні розділи використовують широкий простір для дихання зверху/знизу.
Стиснення інформації за потреби: роздрібні сторінки навмисно стискають відступи, щоб показати більше дієвої інформації на одне поле перегляду.
Розділення, кероване контрастом: переходи між секціями більше покладаються на зміни поверхонь, ніж на декоративні роздільники.

Шкала радіусів межі

5px: крихітні утилітарні посилання/теги та незначні малі оболонки.
8px-12px: стандартні елементи керування та компактні поля.
16px-18px: картки, рамки модулів та комерційні панелі.
28px-36px: більші контейнери модулів та прожектора.
56px / 100px / 980px: капсули, великі пігулки та фірмові видовжені форми CTA.
50%: круглі елементи керування медіа та вибором.

6. Глибина та піднесення

Рівень	Обробка	Використання
Рівень 0	Плоскі нейтральні поверхні (`#ffffff`, `#f5f5f7`, `#000000`)	Основні наративні та продуктові сцени
Рівень 1	Тонке обмеження межею (`#d2d2d7`, `#86868b`)	Фільтри, поля введення, утилітарні картки
Рівень 2	М'яка тінь (`rgba(0,0,0,0.08)` до `rgba(0,0,0,0.22)` де присутня)	Виділені картки та піднесені модулі мерчандайзингу
Рівень 3	Сходинки темної поверхні (`#272729` -> `#2a2a2c`)	Накладки, елементи керування медіа, темні утилітарні кластери
Доступність	Синій сигнал фокусу (`#0071e3`)	Акцент клавіатури та вибору

Глибина навмисно стримана. Apple віддає перевагу тональному контрасту, сходинкам поверхонь та композиційній ієрархії перед важкими стосами тіней.

Декоративна глибина

Декоративна глибина створюється переважно фотографічним реалізмом та матеріальним рендерингом, а не синтетичними UI-ефектами.
Напівпрозорі накладки та склоподібні утилітарні панелі забезпечують легке атмосферне нашарування в навігації та елементах керування.

7. Що варто та чого не варто робити

Варто

Використовуйте нейтральну тріаду (#000000, #f5f5f7, #ffffff) як структурну основу.
Резервуйте сині акценти для справжньої семантики дій та навігації.
Тримайте типографіку тісною та виваженою, особливо на масштабах дисплея.
Підтримуйте мову геометрії капсул/кіл для елементів керування та ключових дій.
Дозвольте зображенням продукту нести візуальну драму; тримайте хром непомітним.
Використовуйте обмеження межею в щільних роздрібних контекстах замість важкого оздоблення карток.
Зберігайте чітке розділення між модулями-вітринами та транзакційними модулями, водночас тримаючи основні токени спільними.

Не варто

Не запроваджуйте широкі вторинні акцентні палітри, що конкурують із синім Apple.
Не зловживайте тінями, ефектами сяйва чи декоративними градієнтами в основному UI-хромі.
Не змішуйте незв'язані сімейства шрифтів і не послаблюйте трекінг без розбору.
Не зводьте всі кути до єдиного радіуса; Apple використовує цілеспрямовані рівні радіусів.
Не перевантажуйте комерційні модулі товстими межами чи гучними візуальними ефектами.
Не видаляйте нейтральну каденцію контрасту між темними та світлими розділами.
Не ставтеся до маркетингових потоків і потоків купівлі як до окремих дизайн-систем.

8. Адаптивна поведінка

Точки зламу

Назва	Ширина	Ключові зміни
Small Mobile	374px і нижче	Стиснені роздрібні елементи керування, одноколонкові стоси продуктів
Mobile	375px-640px	Одноколонкові модулі, компактні рядки дій, ущільнені селектори
Tablet	641px-833px	Розширені картки та змішані переходи 1-2 колонки
Tablet Wide	834px-1023px	Стабільніший багатоколонковий мерчандайзинг, більші текстові блоки
Desktop	1024px-1240px	Повні роздрібні компонування та структури порівняння продуктів
Desktop Wide	1241px-1440px	Розширення героя маркетингу та ширші відступи секцій
Large Desktop	1441px+	Максимальний простір для дихання розділів та широка редакційна композиція

Цілі дотику

Основні та вторинні дії зазвичай подаються в зручних для дотику геометріях пігулок/кнопок.
Круглі елементи керування медіа та вибором узгоджуються з мінімальним наміром дотику в мобільних контекстах.
Щільний комерційний UI використовує компактні підписи, але зберігає чіткі області влучення завдяки оточуючому відступу форми.

Стратегія згортання

Героїчна типографіка маркетингу масштабується вниз дискретними рівнями, зберігаючи контраст ієрархії.
Сітки продуктів і комерції згортаються з багатоколонкових до складених карток із постійною видимістю селекторів.
Утилітарна навігація стискається у простіші групування посилань/елементів керування, зберігаючи ключові дії.
Кластери опцій/конфігурації стають вертикально упорядкованими, щоб тримати потік купівлі лінійним на малих екранах.

Поведінка зображень

Зображення продукту зберігають співвідношення сторін і центральність крізь точки зламу.
Героїчні візуали залишаються домінуючими на мобільних, з текстом, переміщеним навколо пріоритету медіа.
Роздрібні мініатюри залишаються розбірливими завдяки тіснішій логіці обрізки та щільнішому складанню карток.
Модулі, керовані зображеннями, продовжують закріплювати ритм у міру зростання щільності компонування.

9. Посібник із підказок для агента

Швидкий довідник кольорів

Синій основної дії: Синій дії Apple (#0071e3)
Синій вбудованого посилання: Синій текстового посилання (#0066cc)
Темне полотно розділу: Абсолютний чорний (#000000)
Світле полотно розділу: Блідий сірий Apple (#f5f5f7)
Основний текст на світлому: Майже чорне чорнило (#1d1d1f)
Вторинний текст: Вторинний нейтральний сірий (#6e6e73)
М'яка роздрібна межа: М'який сірий межі (#d2d2d7)
Сильна роздрібна межа: Середній сірий межі (#86868b)

Приклади підказок для компонентів

"Розробіть продуктовий герой у стилі Apple на чорному полотні (#000000) із заголовком SF Pro Display semibold (48-56px), стислим допоміжним текстом та двома капсульними CTA, що використовують #0071e3 та #1d1d1f."
"Створіть панель комерційної конфігурації на білому (#ffffff) із заокругленими картками 18px, полями з межею #86868b, текстом тіла SF Pro Text 17px та компактними селекторами опцій."
"Побудуйте сітку мерчандайзингових карток, що чергує поверхні #f5f5f7 та білу, з картками, орієнтованими на зображення, стриманими тінями та метаданими SF Pro Text 14-17px."
"Згенеруйте кластер елементів керування каруселлю, використовуючи круглі кнопки (радіус 50%), приглушені сірі накладки та чіткий зворотний зв'язок активності для навігації галереєю."
"Скомпонуйте змішаний ритм маркетингової + роздрібної сторінки: темний розділ-вітрина -> світлий розділ функцій -> щільний модуль списку продуктів, зберігаючи сині акценти лише для дій та посилань."

Посібник з ітерацій

Спочатку зафіксуйте нейтральну основу (#000000, #f5f5f7, #ffffff), перш ніж налаштовувати акценти.
Тримайте сині акценти рідкісними та цілеспрямованими; якщо все синє, ієрархія руйнується.
Налаштовуйте типографіку в такому порядку: масштаб дисплея, читабельність тіла, потім мікропідписи.
Узгоджуйте радіус за класом компонента (поле, картка, капсула, коло), а не за єдиним універсальним заокругленням.
Поступово збільшуйте щільність при переході від секцій-вітрин до комерційних секцій.
Перевіряйте, що зображення продукту залишається найсильнішим візуальним шаром після кожної ревізії.

Відомі прогалини

Окремі семантичні кольори статусу (помилка/попередження/успіх) не були послідовно видимі в наборі вилучених сторінок.
Деякі мікростани взаємодії варіюються залежно від модуля і не представлені як універсальні системні токени.
Кілька роздрібних модулів виявляють контекстно-специфічні перевизначення типографіки, які не з'являються на всіх п'яти сторінках.

33 KiB Raw Blame History Unescape Escape