admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea02f186a59d88b880ea032066638dabc5d20364
workbuddy_skills/open-design/design-systems/playstation/DESIGN-ar.md
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

40 KiB
Raw Blame History

نظام تصميم مستوحى من PlayStation

Category: ميديا ومستهلكون تجزئة أجهزة ألعاب الفيديو. تخطيط قناة ثلاثي الأسطح، خط عرض رصين، تأثير تحجيم عند التمرير بلون سيان.

1. الطابع البصري والأجواء

يقدّم موقع PlayStation.com نفسه بأسلوب الجناح التسويقي لعلامة إلكترونيات استهلاكية فاخرة تبيع ترفيهاً بالمصادفة. تنظيم الصفحة يقوم على قناة عمودية من الأسطح المتعاقبة: رأسية شبه سوداء وعرض رئيسي، تليها سلسلة من الألواح التحريرية البيضاء الناصعة في الوسط، ثم تذييل أزرق داكن يرسّخ التجربة كلها. بين أنماط الأسطح هذه، يعتمد الموقع اعتماداً كبيراً على الصور الفوتوغرافية والمعالجات ثلاثية الأبعاد لمنتجات PS5 وأغلفة الألعاب وأذرع التحكم DualSense، فيترك للأجهزة أن تقوم بالعمل العاطفي بينما يبقى الإطار بالغ الرصانة.

السمة الطباعية الأبرز هي SST Light (وزن 300) بأحجام كبيرة. تُستخدم عائلة SST المخصصة من Sony من 22px حتى 54px بوزن 300، مما يمنح عناوين العرض طابعاً هامساً أنيقاً أقرب إلى إعلان ساعات فاخرة منه إلى متجر ألعاب. هذه "السلطة الهادئة" هي النقيض التام لصراخ Manuka في The Verge أو كثافة منضدة الصحف في Wired — PlayStation يريد من الخط أن يتراجع وللمنتج أن يقود. يعتمد النص الأساسي وواجهة المستخدم على أوزان 500-700، لكن صوت العرض يبقى رفيعاً وهادئاً دائماً.

المكان الوحيد الذي تنكسر فيه هذه الرصانة هو التفاعل. كل زر رئيسي يحمل نفس الحركة عند التمرير: يتحول الملء إلى سيان كهربائي #1eaedb، يظهر إطار أبيض بعرض 2px، تزهر خلفه حلقة خارجية زرقاء من PlayStation بعرض 2px، ويتحجّم الزر بالكامل 1.2×. هذا الجمع بين انبثاق اللون والإطار والحلقة وتأثير الرفع هو سمة Sony التفاعلية الفريدة بين كبار العلامات — كأنها رسوم متحركة مصغّرة لـ"تشغيل الطاقة" تتكرر مئات المرات عبر صفحة واحدة.

السمات الرئيسية:

  • تخطيط قناة ثلاثي الأسطح: رأسية شبه سوداء، محتوى أبيض ناصع، تذييل أزرق داكن — تتعاقب دون أن تمتزج
  • SST وزن 300 من 22 إلى 54px للعرض — عناوين "سلطة هادئة" تتيح للتصوير المنتجي أن يتصدر
  • PlayStation Blue #0070cc كمرساة العلامة؛ السيان #1eaedb محجوز حصراً لحالات التمرير والتركيز
  • كل عنصر تفاعلي يتحجّم 1.2× عند التمرير — سمة رفع "تشغيل الطاقة" الفريدة في PlayStation
  • أزرار حبة دواء بنصف قطر 999px كامل؛ فن البطاقات في مستطيلات مدوّرة من 12 إلى 24px
  • برتقال التجارة #d53b00 محجوز حصراً لعبارات الحث في PlayStation Store وحالات الشراء
  • تغطية واسعة للنقاط الفاصلة تصل إلى 2120px — يتمدد الموقع حتى سياقات التصفح على شاشات 4K

2. لوحة الألوان وأدوارها

الأساسي (مرساة العلامة)

  • PlayStation Blue (#0070cc): اللون المرسى للعلامة. يُستخدم على التذييل الرئيسي والروابط المضمّنة وملء الأزرار الرئيسية على الأسطح الداكنة وكل علامة "رسمية". عامِله كشيء ثابت لا يتغير — فهو اللون الأكثر ارتباطاً بهذه العلامة في ذاكرة المستهلك.
  • Console Black (#000000): أسود خالص للرأسية والخلفيات البطولية ومناطق عرض المنتجات. يستخدم PlayStation الأسود لإطار الأجهزة كما تستخدم المتاحف الأسود لإطار المنحوتات.

الثانوي والمميز

  • PlayStation Cyan (#1eaedb): لون التفاعل. يُطبَّق فقط على حالات التمرير والتركيز والنشاط للأزرار والروابط. لا يظهر أبداً كخلفية افتراضية أو لون نص في حالة السكون. اقرن معه إطاراً أبيض #ffffff بعرض 2px وحلقة خارجية #0070cc بعرض 2px عند التمرير للحصول على المعالجة الكاملة المميزة.
  • Link Hover Blue (#1883fd): المتغير الأكثر إشراقاً المستخدم عند تمرير الروابط النصية المضمّنة. مختلف عن السيان — هذا لون الرابط، والسيان لون الزر.
  • Dark Link Blue (#0068bd): لون الرابط في حالة السكون على الأسطح الفاتحة — ابن عم أكثر تشبعاً من الأزرق الأساسي للعلامة.

الأسطح والخلفيات

  • Paper White (#ffffff): لوحة المحتوى الرئيسية للألواح التحريرية بين الرأسية والتذييل.
  • Ice Mist (#f5f7fa): نقطة التوقف الجوية لتدرج القسم الفاتح. يُستخدم بشكل خفي خلف بعض الألواح لرفعها عن الأبيض الخالص.
  • Divider Tint (#f3f3f3): لون الخط الأفقي الهادئ بين صفوف المحتوى.
  • Masthead Black (#000000): قماش شريط التنقل العلوي والعرض الرئيسي — محجوز للمناطق التي يتصدرها المنتج.
  • Shadow Black (#121314): مرساة بداية تدرج القسم الداكن عندما يحتاج اللوح إلى عمق جوي.
  • Filter Mist (rgba(245, 247, 250, 0.3)): خلفية شفافة تُستخدم خلف أشرطة الفلترة الثابتة — اللحظة الوحيدة لـ"glassmorphism" في الموقع.

المحايدات والنصوص

  • Display Ink (#000000): عناوين العرض الرئيسية على الأسطح البيضاء.
  • Deep Charcoal (#1f1f1f): عناوين النص الأساسي ولون الرابط في حالة السكون — أكثر نعومة قليلاً من الأسود الخالص للحد من التأثير البصري على الكتل الكبيرة.
  • Body Gray (#6b6b6b): نص أساسي ثانوي وبيانات وصفية.
  • Mute Gray (#cccccc): ملصقات ثلاثية وحالات معطّلة.
  • Placeholder Ink (rgba(0, 0, 0, 0.6)): نص نموذج العنصر النائب — أسود بنسبة 60%، ليس قيمة رمادية منفصلة.
  • Inverse White (#ffffff): النص الأساسي على الأسطح الداكنة والزرقاء.
  • Dark-Link Blue (#53b1ff): لون الرابط في حالة السكون على الأسطح الداكنة/السوداء — متغير أفتح وأكثر حيوية من PlayStation Blue لسهولة القراءة على الأسود.

الدلالي والتجاري

  • Commerce Orange (#d53b00): محجوز لعبارات الحث في حالة الشراء في PlayStation Store ونداءات الأسعار وشارات "على عرض". اللون الدافئ الوحيد في الموقع — استخدمه بتحفظ وأبداً خارج سياق تجاري.
  • Commerce Orange Active (#aa2f00): حالة الضغط/النشاط لأزرار التجارة.
  • Warning Red (#c81b3a): أخطاء النموذج وتحذيرات الإجراءات التدميرية.
  • Shadow Wash 80 (rgba(0, 0, 0, 0.8)): الستارة الدرامية المستخدمة خلف نص الرأسية على صور المنتجات.
  • Shadow Wash 16 (rgba(0, 0, 0, 0.16)): حلقة ارتفاع خفيفة الوزن على البطاقات.
  • Shadow Wash 08 (rgba(0, 0, 0, 0.08)): ارتفاع بطاقة خفيف جداً — بالكاد مرئي لكنه يفصل الألواح البيضاء عن الخلفية البيضاء.
  • Shadow Wash 06 (rgba(0, 0, 0, 0.06)): أخف ظل في النظام.

نظام التدرجات

يستخدم PlayStation تدرجَي قسم فحسب:

  • تدرج القسم الفاتح: من #ffffff إلى #f5f7fa — غسيل يكاد لا يُدرك يرفع اللوح هادئاً عن اللوحة.
  • تدرج القسم الداكن: من #121314 إلى #000000 — غسيل عمودي قصير يمنح ألواح الرأسية نمق تدرج داكن خفياً دون إدخال أي تحول في الصبغة.

كلا التدرجَين يُستخدمان فقط كخلفيات للأقسام، وليس داخل المكونات. لا توجد أزرار بتدرج، ولا نصوص بتدرج، ولا هالات مضيئة. العلامة زرقاء — لا زرقاء إلى بنفسجية، ولا زرقاء إلى سيانية.

3. قواعد الطباعة

عائلة الخط

  • SST / Playstation SST (Sony، خاص) — بديل: Arial، Helvetica. خط Sony العالمي المخصص، صمّمه Toshi Omagari وAkira Kobayashi. يغطي أوزان 300 / 500 / 600 / 700 عبر الصفحة الرئيسية. الوزن 300 من 22 إلى 54px هو السمة الطباعية لـPlayStation.
  • SST (مضغوط / بديل) — بديل: helvetica، arial. متغير مضغوط يُستخدم في حفنة من وحدات واجهة المستخدم حيث تكون العرض مهمة.
  • Arial — بديل للمرافق لمتغير الزر النادر الذي يُعرض بخط sans النظام.

التسلسل الهرمي

الدور الخط الحجم الوزن ارتفاع السطر تباعد الحروف ملاحظات
عرض رئيسي (XL) SST 54px / 3.38rem 300 1.25 -0.1px أكبر لحظة SST في الصفحة — عنوان فاخر بوزن هادئ
عرض رئيسي (L) SST 44px / 2.75rem 300 1.25 0.1px عناوين رئيسية ثانوية
عرض كبير SST 35px / 2.20rem 300 1.25 — عناوين ألواح الميزات
عرض متوسط SST 28px / 1.75rem 300 1.25 0.1px عناوين الأقسام
عرض مضغوط SST 22px / 1.38rem 300 1.25 0.1px عناوين الوحدات — لا يزال بوزن خفيف 300
Playstation SST Sub Playstation SST 22.5px / 1.41rem 400 1.30 — عنوان فرعي ترويجي
عنوان واجهة صغير SST 18px / 1.13rem 600 1.00 — عناوين واجهة مضغوطة
زر / عبارة حث SST 18px / 1.13rem 500 1.25 0.4px ملصق الزر الرئيسي
زر / مؤكّد SST 18px / 1.13rem 700 1.25 0.45px عبارات حث عالية التأكيد (شراء، اشتراك)
زر عريض SST 18px / 1.13rem 600 1.50 — ملصق الزر الثانوي
نص أساسي هادئ SST 18px / 1.13rem 400 1.50 0.1px نص القراءة القياسي
نص رابط SST 18px / 1.13rem 400 1.50 — نص الرابط المضمّن
زر مضغوط SST 14px / 0.88rem 700 1.25 0.324px عبارات حث صغيرة في البطاقات
تعليق مرافق SST 14px / 0.88rem 500 1.50 — تعليقات وملصقات وسوم
نص تعليق SST 14px / 0.88rem 400 1.50 — بيانات وصفية قياسية
Playstation Caption Bold Playstation SST 14px / 0.88rem 700 1.40 — تعليق مؤكّد
Playstation Caption Mid Playstation SST 14px / 0.88rem 600 1.40 — تعليق شبه عريض
Playstation Button Playstation SST 14.4px / 0.90rem 700 1.00 0.144px زر واجهة بتباعد سطري ضيق
Playstation Tab Playstation SST 14px / 0.88rem 400 1.10 0.14px ملصق تبويب/حبة دواء
Playstation Compact Caption Playstation SST 12.8px / 0.80rem 400 1.10 — أصغر تعليق واجهة
تعليق صغير SST 12px / 0.75rem 500 1.50 — نص دقيق في التذييل ونص قانوني
تعليق مضغوط عريض SST 12.06px / 0.75rem 700 1.50 — نص صغير مؤكّد

المبادئ

  • الوزن 300 بالأحجام الكبيرة هو الصوت. PlayStation هي علامة وحيدة بين كبار علامات أجهزة الألعاب تستخدم وزناً خفيفاً في عناوين الرأسية. قاوِم الرغبة في "ترقية" خط العرض إلى 500 أو 700 — الهدوء هو الشخصية.
  • تقفز الأوزان في طبقة واجهة المستخدم. أسفل 18px يتحول النظام إلى 500-700 لسهولة القراءة. تدرج الوزن من 300 (عرض) إلى 400 (نص أساسي) إلى 500 (تعليقات) إلى 700 (أزرار) هو التسلسل الهرمي.
  • تباعد الحروف شبه غائب. معظم القيم تتراوح بين 0.1 إلى 0.45px، موجبة أو سالبة قليلاً. قيمة -0.1px على الرأسية بحجم 54px تضغط خط العرض بالقدر الكافي ليقرأ كـ"مصمَّم" دون أن يصبح تصريحاً طباعياً.
  • نظامان لـSST. "SST" و"Playstation SST" هما وظيفياً نفس العائلة بمجموعات مقياس مختلفة قليلاً (Playstation SST أضيق في الأحجام الصغيرة). عاملهما على أنهما قابلان للتبادل لأغراض خارج ترخيص Sony الداخلي.
  • لا أحرف كبيرة كاملة. خلافاً لـThe Verge وWired، نادراً ما يستخدم PlayStation ملصقات بأحرف كبيرة. تبقى الدوافع والوسوم بحالة العنوان أو حالة الجملة — حركة أخرى من "السلطة الهادئة".
  • لا خط عريض أي مكان. النظام بأكمله sans serif. لا يوجد تناظر بصوت مطبعي.

4. أنماط المكونات

الأزرار

رئيسي — حبة دواء PlayStation Blue

  • الخلفية: #0070cc (PlayStation Blue)
  • النص: #ffffff، SST 18px / 500 / 0.4px تتبع
  • الإطار: لا شيء في حالة السكون
  • نصف قطر الإطار: 999px — حبة دواء كاملة
  • الحشوة: ~12px 24px (متغير حسب فئة الحجم)
  • المحيط: rgb(255, 255, 255) none 0px في حالة السكون
  • عند التمرير (الحركة المميزة):
    • تتحول الخلفية إلى #1eaedb (PlayStation Cyan)
    • يبقى النص #ffffff
    • يظهر إطار أبيض #ffffff بعرض 2px
    • تزهر حلقة خارجية #0070cc بعرض 2px (0 0 0 2px #0070cc)
    • transform: scale(1.2) — يكبر الزر فعلياً بنسبة 20%
  • نشط: opacity: 0.6 — تعتيم سريع للإشارة إلى الضغط
  • تركيز: مثل التمرير، لكن الحلقة تتحول إلى rgb(0, 114, 206) 0px 0px 0px 2px ظل تركيز
  • انتقال: ~180ms ease على الخلفية والتحويل والظل

ثانوي — مخطط أبيض على داكن

  • الخلفية: #ffffff
  • النص: #0172ce (متغير PlayStation Blue)
  • الإطار: 2px outset #000000 — إطار outset حقيقي، نادر جداً في CSS الحديث
  • نصف القطر: يتفاوت (غالباً 999px أو 36px)
  • الحشوة: 16px 20px
  • التمرير: نفس ملء السيان المميز + scale(1.2) + معالجة الحلقة
  • التركيز: نفس معالجة الحلقة

برتقال التجارة

  • الخلفية: #d53b00 (Commerce Orange)
  • النص: #ffffff، SST 18px / 700 / 0.45px تتبع
  • نصف قطر الإطار: 999px — حبة دواء
  • يُستخدم فقط على عبارات الحث في PS Store / شراء / اشتراك Plus
  • نشط: تتحول الخلفية الداكنة إلى #aa2f00
  • التمرير: يتبع قاعدة عكس السيان كبقية الأزرار (ليس تمريراً خاصاً بالبرتقال)

شفاف Ghost

  • الخلفية: شفافة
  • النص: #1f1f1f (Deep Charcoal)
  • الإطار: 1px solid #dedede
  • الحشوة: 0 10px (ضيق، محسَّن للتنقل)
  • التمرير: ملء سيان، نص أبيض، إطار أبيض 2px، scale(1.2)
  • نشط: ينتقل النص إلى #0072ce، شفافية 0.6

دائرة أيقونة

  • الخلفية: rgba(0, 0, 0, 0.2) على التصوير؛ #ffffff على الأسطح الفاتحة
  • نصف قطر الإطار: 100% — دائرة تامة
  • يُستخدم لأسهم التدوير السابق/التالي وأزرار المشاركة
  • التمرير: يتفاتح إلى var(--color-role-backgrounds-primary-link-hover) (نحو #e5e5e5 على الفاتح)

عبارة حث صغيرة (داخل البطاقة)

  • SST 14px / 700 / 0.324px تتبع
  • حشوة ~8px 16px
  • نصف القطر: 999px
  • يُستخدم داخل بطاقات الألعاب لعبارات الحث "اشترِ الآن" / "أضف إلى السلة"

البطاقات والحاويات

بطاقة رئيسية (ميزة لعبة)

  • الخلفية: تصوير/معالجة — عادةً مرسوخة على الأسود
  • نصف قطر الإطار: 24px أو 19px لبطاقات الميزات
  • الحشوة: داخل 32-48px
  • الظل: rgba(0, 0, 0, 0.8) 0px 5px 9px 0px — ظل إسقاط درامي يُستخدم فقط عندما تتداخل البطاقة مع صور الرأسية
  • التمرير: تحويل تحجيم خفي، تظهر مخطط سيان على عبارة الحث الرئيسية

بلاطة غلاف اللعبة

  • الخلفية: غلاف اللعبة، بدون حشوة
  • نصف قطر الإطار: 12px أو 13px (صور) / 19px (إطار البطاقة)
  • الظل: rgba(0, 0, 0, 0.08) 0px 5px 9px 0px — ارتفاع خفيف الوزن
  • التمرير: تضيء عبارة الحث الرئيسية للبطاقة بالسيان، قد تتحجم البطاقة نفسها 1.02×
  • الانتقال: 200ms ease على التحويل

لوح محتوى (أبيض)

  • الخلفية: #ffffff أو تدرج القسم الفاتح #ffffff → #f5f7fa
  • الإطار: عادةً لا شيء؛ يُفصل عن الجيران بالمسافات والظلال الخفيفة
  • نصف القطر: 12px-24px حسب تسلسل اللوح الهرمي
  • الظل: rgba(0, 0, 0, 0.06) 0px 5px 9px 0px — الأخف في النظام

بطاقة داكنة على داكن

  • الخلفية: rgba(0, 0, 0, 0.2) فوق التصوير
  • نصف قطر الإطار: 6px (مضغوط) أو 24px (ميزة)
  • يُستخدم لإدراجات "مجموعة الصحافة" أو "كتلة الإحصاءات" فوق فيديو الرأسية

المدخلات والنماذج

  • افتراضي: خلفية #ffffff، إطار 1px solid #cccccc، نصف قطر الإطار 3px (أضيق من بقية النظام — المدخلات هي المكان الوحيد الذي يصبح فيه PlayStation مضغوطاً فعلاً)، نص SST 16px بـ#1f1f1f، عنصر نائب rgba(0, 0, 0, 0.6).
  • تركيز: حلقة تركيز #0070cc بعرض 2px عبر box-shadow: 0 0 0 2px #0070cc. لا يتغير لون الإطار — الحلقة هي التي تؤدي العمل.
  • خطأ: ينتقل الإطار والنص إلى #c81b3a (Warning Red)، نص خطأ مضمّن أسفله بنفس اللون الأحمر.
  • انتقال: ~180ms ease على الإطار والظل.

التنقل

  • شريط التنقل العلوي: شريط أسود #000000 ممتد بالكامل مع شعار PlayStation (أبيض) محاذٍ لليسار، روابط الفئات في المنتصف بـSST 14-16px / 500، وعبارة حث صغيرة "تسجيل الدخول" محاذية لليمين.
  • التمرير على رابط التنقل: ينتقل اللون من #ffffff إلى #1883fd (Link Hover Blue)، بدون خط تحت.
  • القسم النشط: يُميَّز بخط تحتي خفي بعرض 2px بلون #0070cc.
  • الجوّال: ينهار التنقل إلى درج hamburger. داخل الدرج، تتكدس الروابط عمودياً بفجوات 16px وحشوة أفقية 20px.
  • السلوك الثابت: يبقى شريط التنقل مثبتاً في الأعلى عند التمرير؛ عندما يدخل منطقة سطح فاتح لا ينعكس — يبقى ذو خلفية سوداء طوال الوقت.

معالجة الصور

  • نسب العرض إلى الارتفاع: 16:9 لفيديو/تصوير الرأسية، 1:1 لمعالجات أجهزة التحكم، 3:4 لأغلفة الألعاب، 4:3 لصور الحياة اليومية.
  • الزوايا: مدوّرة إلى 12px أو 13px أو 24px حسب سياق البطاقة. أغلفة الألعاب تحصل على 6-12px، صور الرأسية على 24px.
  • امتلاء كامل: فقط في رأسية العرض الرئيسي وبانرات التذييل الترويجية. كل شيء آخر يجلس داخل عمود محتوى به حشوة.
  • الظل: إسقاط درامي rgba(0, 0, 0, 0.8) 0 5px 9px 0 على الرأسيات، خفيف rgba(0, 0, 0, 0.06) 0 5px 9px 0 على بلاطات الشبكة.
  • التمرير: تبقى الصورة ثابتة، إطار البطاقة وعبارة الحث الرئيسية هما اللتان تستجيبان.
  • التحميل الكسول: loading="lazy" على كل شيء أسفل الطية، eager على رأسية العرض الرئيسي.

حبة دواء متجر الألعاب (مميزة)

  • الخلفية: #ffffff
  • النص: #000000، SST 14px / 500
  • الحشوة: 14px 18px
  • نصف القطر: 9999px — حبة دواء كاملة
  • وسوم حبة دواء محايدة تجلس بجوار أغلفة الألعاب لتسمية المنصة ("PS5"، "PS4"، "PSVR2"). تباين أبيض على داكن.

5. مبادئ التخطيط

نظام التباعد

  • الوحدة الأساسية: 8px.
  • المقياس: 1، 2، 3، 4.5، 5، 8، 9، 10، 12، 14، 15، 16، 18، 20، 21px.
  • حشوة القسم: 48-96px عمودياً بين الألواح الرئيسية. تستخدم انتقالات الرأسية إلى المحتوى الطرف الأكبر.
  • حشوة البطاقة: 20-32px داخلياً. يمكن أن تتمدد بطاقات الرأسية المميزة إلى 48px.
  • التباعد المضمّن: 8-12px بين العنوان والمقدمة، 12-16px بين المقدمة وعبارة الحث.
  • المقياس الصغير: القيم 1/2/3/4.5/5/9/10/12 تُستخدم لحشوة حبة الدواء وتباعد التعليق وإزاحات الإطار — ليس للإيقاع التحريري.

الشبكة والحاوية

  • الحد الأقصى للعرض: ~1920px (الكسر المكتشف يصل إلى 2120px). تحدّد الحاويات عادةً عند 1280-1920px حسب اللوح.
  • أنماط الأعمدة: شبكة 12-عموداً متجاوبة تنحل إلى صفوف بلاطات ألعاب من 3/4/6 أعمدة حسب التسلسل الهرمي. مناطق الرأسية تمتد غالباً 12 عموداً؛ البلاطات المميزة تجلس في تشكيلات 6+3+3 أو 4+4+4.
  • الحشوة الخارجية: 16px جوّال → 48px لوحي → 64-96px سطح مكتب.
  • الفجوات: 16-24px بين الأعمدة، أضيق (8-12px) داخل مجموعات البلاطات.

فلسفة المساحة البيضاء

يعامل PlayStation المساحة البيضاء كما تعامل العلامة الفاخرة إضاءة المتجر — كإشارة مميزة. ثمة مسافة تنفس عمودية أكثر بوضوح بين الوحدات مقارنةً بأي موقع تجزئة رئيسي آخر، وكثيراً ما تحمل الألواح التحريرية البيضاء عنواناً واحداً + صورة واحدة + عبارة حث واحدة بحشوة على مستوى الرأسية. الأثر هو "إيقاع معرض" حيث يحصل كل منتج على غرفته الخاصة بدلاً من التنافس في شبكة من الصور المصغرة.

مقياس نصف قطر الإطار

  • 2px — أزرار بانر ملفات تعريف الارتباط وواجهة الإدارة الصغيرة
  • 3px — مدخلات النماذج وألواح التبويب (أضيق من كل شيء آخر — إشارة مقصودة لـ"واجهة وظيفية")
  • 6px — الأزرار المضغوطة والصور المضمّنة
  • 12px — صور أغلفة الألعاب القياسية وصور المحتوى
  • 13px — بعض أغلفة الأشكال (إزاحة بـ1px عن 12px للتداخل)
  • 19px — بطاقات الميزات
  • 20px — امتدادات وسوم مضمّنة
  • 24px — بطاقات الرأسية وإطارات الميزات الرئيسية
  • 36px — متغيرات التنقل وأزرار ثانوية بشكل حبة دواء كاملة
  • 48px — أزرار الميزات الكبيرة
  • 999px / 100% — أزرار رئيسية بشكل حبة دواء كاملة وأزرار أيقونة دائرية

أحد عشر قيمة منفصلة لنصف القطر — من أغنى أنظمة الأنصاف في أي موقع في هذا الكتالوج. يوجد هذا التنوع لأن PlayStation يستخدم عمداً أنصاف قطر مختلفة لـتسلسلات هرمية مختلفة: 3px للمرافق، 12px للوسائط، 24px للميزات، 999px لعبارات الحث.

6. العمق والارتفاع

المستوى المعالجة الاستخدام
0 لا ظل محتوى افتراضي على #ffffff
1 rgba(0, 0, 0, 0.06) 0 5px 9px 0 رفع خفيف جداً للوح تحريري
2 rgba(0, 0, 0, 0.08) 0 5px 9px 0 ارتفاع بلاطة شبكة قياسي
3 rgba(0, 0, 0, 0.16) 0 5px 9px 0 بطاقة مؤكّدة (تمرير أو نشطة)
4 rgba(0, 0, 0, 0.8) 0 5px 9px 0 ظل تراكب الرأسية — إسقاط درامي يُستخدم فوق التصوير
5 0 0 0 2px #0070cc (حلقة تركيز) حالة تركيز الزر الرئيسي
6 0 0 0 2px #000000 (حلقة تمرير) حلقة تمرير الزر الثانوي
7 تدرج قسم #121314 → #000000 عمق جوي على ألواح الرأسية الداكنة

فلسفة العمق في PlayStation متدرجة لكن مقيَّدة. يمتد مقياس الظل من 0.06 إلى 0.16 للحالات العادية، ثم يقفز إلى 0.8 للإسقاطات على الرأسية — لا يوجد وسط 0.2، 0.3، 0.4. الأثر هو أن معظم الصفحة تبقى شبه مسطحة، لكن عندما تحتاج بطاقة الرأسية إلى التحليق فوق التصوير، فإنها تحلّق فعلاً. الارتفاع إما مهموس أو مصروخ، وليس مبهوتاً.

العمق الزخرفي

  • تدرجات الأقسام (الداكنة والفاتحة، كلاهما موصوف أعلاه) — تُستخدم فقط كخلفيات للأقسام
  • حلقات التركيز/التمرير بعرض 2px، زرقاء أو سيانية دائماً حسب الحالة
  • لا توهج، لا ضبابية، لا تأثيرات جوية بخلاف تدرجَي القسمَين
  • لا أزرار بتدرج ولا نصوص بتدرج — النظام البصري كتل ألوان صلبة في كل مكان باستثناء انتقالات الأقسام

7. ما يجب وما لا يجب

يجب

  • يجب استخدام PlayStation Blue (#0070cc) كملء رئيسي لعبارات الحث ومرساة التذييل. إنه اللون المرسى للعلامة.
  • يجب استخدام SST وزن 300 لكل عنوان عرض بحجم 22px وما فوق. العنوان بالوزن الخفيف هو الصوت.
  • يجب تطبيق توقيع التمرير الكامل على كل زر رئيسي: ملء سيان + إطار أبيض 2px + حلقة زرقاء خارجية 2px + scale(1.2).
  • يجب استخدام نصف قطر حبة الدواء الكامل (999px) على الأزرار الرئيسية وأزرار التجارة.
  • يجب حجز PlayStation Cyan (#1eaedb) حصراً لحالات التمرير والتركيز والنشاط — ليس أبداً كخلفية ساكنة.
  • يجب استخدام Commerce Orange (#d53b00) فقط على عبارات الحث في PlayStation Store / الشراء ونداءات الأسعار.
  • يجب التعاقب بين ألواح الرأسية الداكنة وألواح المحتوى البيضاء والتأسيس بتذييل أزرق داكن — تخطيط القناة ثلاثي الأسطح هو إيقاع الصفحة.
  • يجب استخدام ظلال إسقاط الرأسية الدرامية rgba(0, 0, 0, 0.8) عندما تتداخل بطاقة مع تصوير المنتج.
  • يجب إبقاء شريط التنقل العلوي أسود في كل موضع تمرير — لا ينعكس إلى الأبيض فوق الألواح الفاتحة.

لا يجب

  • لا يجب تثقيل عناوين العرض. الوزن 300 من 22 إلى 54px هو صوت PlayStation. خط العرض بالوزن 700 يبدو كـ"متجر ألعاب آخر".
  • لا يجب استخدام ملصقات أو دوافع بأحرف كبيرة كاملة. نادراً ما يستخدم PlayStation الأحرف الكبيرة — إنها علامة سلطة هادئة، لا علامة شريط تحذير.
  • لا يجب استخدام أزرار أو نصوص أو خلفيات بتدرج خارج تدرجَي القسمَين المعلنَين.
  • لا يجب إدخال ألوان دافئة خارج Commerce Orange. لا عبارات حث حمراء، لا تمييزات صفراء، لا حبوب نجاح خضراء.
  • لا يجب استخدام زوايا مربعة على الأزرار أو الوسائط. النظام به أحد عشر نصف قطر — اختر واحداً، لكن لا تختر 0 أبداً.
  • لا يجب تخطي حركة التمرير scale(1.2) على الأزرار الرئيسية. رفع التحجيم هو توقيع تفاعل العلامة.
  • لا يجب استخدام خط عريض. النظام 100% SST sans.
  • لا يجب السماح للسيان #1eaedb بالظهور كلون نص أو خلفية في حالة السكون. إنه موجود فقط في الحركة.
  • لا يجب تصميم ألواح تتنافس على الانتباه. إيقاع المساحة البيضاء في PlayStation يمنح كل وحدة "غرفة معرضها" الخاصة.

8. السلوك التجاوبي

نقاط الكسر

الاسم العرض التغييرات الرئيسية
جوّال صغير <400px عمود واحد، ينهار التنقل إلى hamburger، يتقلص عرض SST الرئيسي إلى ~28px
جوّال 400-599px عمود واحد، تتكدس البلاطات بعرض كامل، تفتح الحشوة إلى 16px
جوّال كبير 600-767px لا يزال عموداً واحداً لكن خيار عمودين للبلاطات في وحدات محددة
لوحي عمودي 768-1023px شبكة ألعاب عمودين، التنقل لا يزال مضغوطاً
لوحي أفقي 1024-1279px شبكة 3-4 أعمدة، التنقل الكامل مُعاد
سطح مكتب 1280-1599px شبكة تحريرية كاملة، حجم عرض رئيسي أقصى (44-54px)
سطح مكتب كبير 1600-1919px الحاوية تحدّ عند 1600px، تتوسع الهوامش
4K / شاشة كبيرة ≥1920px تتمدد الحاوية إلى حد أقصى 1920px، يتوسع محتوى الرأسية لمطابقة مسافة المشاهدة على التلفاز
عريض جداً ≥2120px نقطة كسر قصوى — تبقى الصفحة مثبتة، الهوامش الخارجية تمتص العرض الزائد

اكتشف المسح 30 نقطة كسر بين 320px و2120px — نطاق تجاوبي غير عادي في اتساعه. يضبط PlayStation تحديداً لـسياقات الشاشة الكبيرة (1920-2120px) لأن أصحاب PS5 يتصفحون الموقع كثيراً على أجهزة التلفاز عبر متصفح الجهاز أو عبر الإرسال من الهاتف. تتوقف معظم مواقع التجزئة عن الضبط عند 1440px؛ PlayStation يستمر في الضبط حتى 4K.

أهداف اللمس

  • أزرار حبة الدواء الرئيسية ارتفاعها ~48-56px (نص SST 18px + ~12-16px حشوة عمودية) — مريحة لمعيار WCAG AAA.
  • روابط التنقل أصغر (~32-40px ارتفاعاً) على سطح المكتب؛ على الجوّال تحصل على حشوة 48px+ داخل الدرج.
  • أزرار دائرة الأيقونات 40-48px — صديقة للمس.

استراتيجية الانهيار

  • التنقل: تنقل كامل → مضغوط → درج hamburger مع ضيق نافذة العرض. يبقى الشعار مثبتاً لليسار؛ تبقى عبارة الحث مثبتة لليمين.
  • الشبكة: 6 أعمدة → 4 → 3 → 2 → 1. تُعيد بطاقات بلاطات الألعاب التدفق دون قص غلاف الفن.
  • التباعد: تضيق حشوة القسم من 96px → 64px → 48px → 32px → 24px مع ضيق نافذة العرض.
  • الخط: يتقلص عرض SST الرئيسي من 54px → 44px → 35px → 28px → 22px. الوزن الخفيف 300 محفوظ في كل حجم.
  • تصوير الرأسية: تبديل التوجيه الفني — سطح المكتب يستخدم محاصيل عريضة 16:9، الجوّال يستخدم محاصيل 4:3 أو 1:1 مع المنتج في المنتصف.

سلوك الصور

  • نقطية متجاوبة (srcset + <picture> مع توجيه فني)، تُحفظ نسب العرض إلى الارتفاع لكل نقطة كسر.
  • جاهزة لـ4K: يقدم الموقع صوراً عالية الكثافة عند 1920px+ لتجنب تكبير الحجم عند التصفح على التلفاز.
  • loading="lazy" على كل شيء أسفل الطية؛ الرأسية eager مع تلميح تحميل مسبق.

9. دليل موجّه للوكلاء

مرجع سريع للألوان

  • عبارة الحث الرئيسية: "PlayStation Blue (#0070cc)"
  • التمييز عند التمرير / التركيز: "PlayStation Cyan (#1eaedb)"
  • الخلفية (سطح أبيض): "Paper White (#ffffff)"
  • الخلفية (سطح داكن): "Console Black (#000000)"
  • نص العنوان على الأبيض: "Display Ink (#000000)"
  • نص الأساسي على الأبيض: "Deep Charcoal (#1f1f1f)"
  • نص الأساسي على الأسود: "Inverse White (#ffffff)"
  • تمييز التجارة / الشراء: "Commerce Orange (#d53b00)"
  • مرساة التذييل: "PlayStation Blue (#0070cc)"

أمثلة موجّهات المكونات

  1. "أنشئ زر عبارة حث رئيسي بملء PlayStation Blue بلون #0070cc، نص أبيض بـSST 18px / 500 / 0.4px تتبع، نصف قطر إطار 999px، حشوة 12px × 24px. عند التمرير، تنتقل الخلفية إلى PlayStation Cyan بلون #1eaedb، يظهر إطار أبيض #ffffff بعرض 2px، تزهر حلقة خارجية #0070cc بعرض 2px عبر box-shadow، ويتحجم الزر بأكمله 1.2× — كل ذلك في انتقال ease مدته 180ms."
  2. "صمّم لوح رأسية على لوحة Console Black بلون #000000 مع عنوان 54px بوزن SST 300 بلون #ffffff وتباعد حروف -0.1px وارتفاع سطر 1.25. ضع عبارة حث رئيسية واحدة أسفله بمعالجة التمرير القياسية لـPlayStation. لا ملصقات بأحرف كبيرة كاملة في أي مكان."
  3. "ابنِ بلاطة غلاف لعبة: صورة بنسبة عرض إلى ارتفاع 3:4 بنصف قطر إطار 12px، ظل إسقاط خفيف rgba(0, 0, 0, 0.08) 0 5px 9px 0، عنوان SST 14px / 700 أسفله، وسم منصة SST 12px / 500، وعبارة حث رئيسية صغيرة 14px / 700 / 0.324px تتبع بلون PlayStation Blue."
  4. "أنشئ زر عبارة حث تجارية لشراء في PlayStation Store: ملء Commerce Orange بلون #d53b00، نص #ffffff بـSST 18px / 700 / 0.45px تتبع، نصف قطر 999px، حشوة 12px × 28px. يتحول الحالة النشطة إلى #aa2f00. التمرير يتبع عكس السيان القياسي مع تحجيم 1.2×."
  5. "صمّم لوح محتوى أبيض بين أقسام الرأسية الداكنة: خلفية #ffffff مع تدرج القسم الفاتح الخفي #ffffff → #f5f7fa، نصف قطر إطار 24px، حشوة داخلية 48px، ارتفاع خفيف جداً rgba(0, 0, 0, 0.06) 0 5px 9px 0، عنوان SST 300 بحجم 35px، فقرة نص أساسي 18px، وعبارة حث رئيسية واحدة."

دليل التكرار

عند تحسين الشاشات الموجودة المصممة بهذا النظام:

  1. افحص وزن العرض. كل عنوان بحجم 22px وما فوق يجب أن يكون بوزن SST 300. إذا رأيت وزن 500 أو 700 على مستوى الرأسية، فقد فقدت صوت PlayStation.
  2. افحص معالجة التمرير. كل زر رئيسي يجب أن يتحجم 1.2× عند التمرير مع تركيبة ملء السيان + إطار أبيض + حلقة زرقاء. افقد أياً من هذه الأربعة وينكسر توقيع التفاعل.
  3. افحص الزوايا. كل حاوية وزر يجب أن يقع على 2، 3، 6، 12، 13، 19، 20، 24، 36، 48، أو 999px / 100%. الزوايا المربعة تكسر الصوت.
  4. افحص تفشي الألوان. يجب أن تظهر فقط PlayStation Blue (#0070cc) والسيان (#1eaedb) وCommerce Orange (#d53b00) والرموز الرمادية/الأسود/الأبيض المعلنة في الإطار. إذا رأيت أي صبغة أخرى، صحّحها.
  5. افحص تعاقب الأسطح. يجب أن تتعاقب الصفحة: رأسية داكنة → محتوى أبيض → رأسية داكنة → محتوى أبيض → تذييل أزرق. إذا كان لوحان بنفس السطح متجاورَين، أدرج انتقالاً.
  6. افحص حالة الأحرف. حالة الجملة وحالة العنوان فقط. لا ملصقات أو أزرار أو دوافع بأحرف كبيرة كاملة. إذا رأيت أحرفاً كبيرة، حوّلها.
  7. افحص وزن الظل. يجب أن تقع شفافية الظل على 0.06 / 0.08 / 0.16 / 0.8 — لا شيء بينهما. إذا رأيت ظلال إسقاط 0.1، 0.2، 0.3، 0.5، صحّح إلى أقرب مستوى معلن.
  8. افحص المساحة البيضاء. إذا بدت وحدتان "تتنافسان" (تتصارعان على الانتباه)، أضف 48-96px من مساحة التنفس العمودية. إيقاع غرفة المعرض في PlayStation غير قابل للتفاوض.
Reference in new issue View Git Blame Copy Permalink