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。
19 KiB
19 KiB
نظام تصميم مستوحى من 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): البطاقات والحاويات والأسطح المرتفعة - منتصف داكن (
#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 | عادي | عادي | وزن عنوان عريض |
| عنوان مميز | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (ضيق) | عادي | رؤوس أقسام شبه عريضة |
| نص أساسي عريض | SpotifyMixUI | 16px (1.00rem) | 700 | عادي | عادي | نص مؤكَّد |
| نص أساسي | SpotifyMixUI | 16px (1.00rem) | 400 | عادي | عادي | نص أساسي قياسي |
| زر بأحرف كبيرة | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (ضيق) | 1.4px–2px | text-transform: uppercase |
| زر | SpotifyMixUI | 14px (0.88rem) | 700 | عادي | 0.14px | زر قياسي |
| رابط تنقل عريض | SpotifyMixUI | 14px (0.88rem) | 700 | عادي | عادي | التنقل |
| رابط تنقل | SpotifyMixUI | 14px (0.88rem) | 400 | عادي | عادي | تنقل غير نشط |
| تسمية توضيحية عريضة | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | عادي | بيانات وصفية عريضة |
| تسمية توضيحية | SpotifyMixUI | 14px (0.88rem) | 400 | عادي | عادي | بيانات وصفية |
| صغير عريض | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | عادي | علامات وأعداد |
| صغير | SpotifyMixUI | 12px (0.75rem) | 400 | عادي | عادي | نص دقيق |
| شارة | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | عادي | text-transform: capitalize |
| مجهري | SpotifyMixUI | 10px (0.63rem) | 400 | عادي | عادي | أصغر نص |
المبادئ
- التباين الثنائي عريض/عادي: معظم النصوص إما 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 | شبكة عمودين |
| جهاز لوحي كبير | 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."
دليل التكرار
- ابدأ بـ
#121212— كل شيء يعيش في الظلام شبه الأسود - أخضر Spotify للإبرازات الوظيفية فقط (تشغيل، نشط، عبارة الدعوة إلى الفعل)
- اجعل كل شيء حبة — 500px للكبيرة، 9999px للصغيرة، 50% للدائرية
- أحرف كبيرة مع تباعد واسع للأزرار — صوت الملصق المنهجي
- ظلال ثقيلة (شفافية 0.3–0.5) للارتفاع — الظلال الخفيفة غير مرئية على الخلفيات الداكنة
- غلاف الألبوم يوفر كل الألوان — تبقى الواجهة لا لونية