admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
24a644f57b4bee0b8a4a06bee85a1fbc192526de
workbuddy_skills/open-design/design-systems/nike/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

29 KiB
Raw Blame History

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

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

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

يشبه موقع Nike.com كاتدرائية تجارية متحركة — موقع يُحوِّل طاقة الرياضة المتفجرة إلى تجربة تسوق رقمية. يقوم التصميم على مبدأ البساطة الجذرية: تجريد كل شيء للأسود والأبيض والرمادي، حتى تتربع الصور الرياضية وألوان المنتجات على العرش دون منافسة. والنتيجة تبدو أقل شبهاً بموقع إلكتروني، وأكثر شبهاً بمجلة رياضية منسّقة بدقة مجلة فاخرة. كل بكسل في الصفحة إما يبيع منتجاً أو يقود نحوه.

نظام "Podium CDS" (نظام التصميم الأساسي الداخلي لـ Nike) يُرسي أساساً أحادي اللون بشكل صارم. تختفي واجهة المستخدم في النصوص السوداء (#111111) والأسطح البيضاء، مما يُفسح المجال للتصوير الفوتوغرافي الرئيسي — رياضيون يتصببون عرقاً، وأحذية في الهواء، وطاقة الملاعب — لتحمل العبء العاطفي. وحين يظهر اللون في واجهة المستخدم، يكون وظيفياً تقريباً حصراً: الأحمر للأخطاء، والأزرق للروابط، والأخضر للنجاح. المنتج هو القصة اللونية. هذا التحفظ يخلق مفارقة بصرية: أكثر الصفحات إشباعاً بالألوان على الإنترنت تبدو الأكثر تقشفاً، لأن كل حيوية مصدرها البضائع لا الواجهة.

نظام الخطوط هو النصف الآخر من هوية Nike البصرية. العناوين الضخمة بالحالة الكبيرة بخط Nike Futura ND — نوع مخصص مُكثَّف من Futura يتميز بارتفاع سطر مستحيل الضيق (0.90) — تخترق الصور الرئيسية كصدمة طباعية. أما تحت العناوين، فيتولى عائلة Helvetica Now كل شيء بدءاً من التنقل وصولاً إلى أوصاف المنتجات بوضوح دقة السويسريين. هذا الانقسام بين خط العرض التعبيري وخط النص الوظيفي يعكس ازدواجية علامة Nike التجارية: الإلهام يلتقي بالتنفيذ.

الخصائص الرئيسية:

  • واجهة مستخدم أحادية اللون (أسود/أبيض/رمادي) تجعل تصوير المنتجات المصدر اللوني الوحيد
  • خط عرض ضخم بالحالة الكبيرة (96px، ارتفاع سطر 0.90) يخترق الصور الرئيسية
  • تصوير فوتوغرافي يملأ الشاشة بالكامل بدون نصف قطر حواف — الصور تملأ كل حافة متاحة
  • أزرار بشكل حبة دواء (نصف قطر 30px) كعنصر تفاعلي رئيسي
  • شبكة تباعد 8px بانضباط رياضي — كل قياس يلتزم بالنظام
  • هيكل تسوق مدفوع بالفئات مع بطاقات صور تنقل كبيرة
  • نموذج ارتفاع خالٍ من الظلال ومحدود الحدود — التمييز بين الأسطح يتم من خلال تحولات الرمادي فقط

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

الألوان الأساسية

  • الأسود Nike (#111111): الأساس — النص الأساسي، وخلفيات الأزرار، ونص التنقل، وتراكبات الصور الرئيسية. ليس أسوداً نقياً (#000000) عن قصد، مما يخلق تجربة قراءة أكثر نعومة بشكل طفيف
  • الأبيض Nike (#FFFFFF): لوحة الصفحة الأساسية، ونص الأزرار على الخلفيات الداكنة، وأسطح البطاقات، وخلفية شريط التنقل

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

  • Snow (#FAFAFA): أخف سطح، تمييز شبه أبيض خفيف (--podium-cds-color-grey-50)
  • Light Gray (#F5F5F5): خلفية ثانوية، تعبئة خانة البحث، عنصر نائب للصورة، هيكل التحميل (--podium-cds-color-grey-100)
  • Hover Gray (#E5E5E5): خلفية حالة التمرير، تعبئة زر معطّل (--podium-cds-color-grey-200)
  • Dark Surface (#28282A): خلفية أساسية في الأقسام الداكنة/المعكوسة (--podium-cds-color-grey-800)
  • Deep Charcoal (#1F1F21): خلفية أساسية عكسية، أغمق سطح غير أسود (--podium-cds-color-grey-900)
  • Dark Hover (#39393B): حالة التمرير على الخلفيات الداكنة (--podium-cds-color-grey-700)

الألوان المحايدة والنصية

  • Primary Text (#111111): نص النص الرئيسي، والعناوين، وروابط التنقل (--podium-cds-color-text-primary)
  • Secondary Text (#707072): النص الوصفي، والبيانات الوصفية، والطوابع الزمنية، وتسميات الأسعار (--podium-cds-color-text-secondary)
  • Disabled Text (#9E9EA0): العناصر غير النشطة، والخيارات غير المتاحة (--podium-cds-color-text-disabled)
  • Disabled Inverse (#4B4B4D): النص المعطّل على الخلفيات الداكنة (--podium-cds-color-text-disabled-inverse)
  • Border Primary (#707072): لون الحد القياسي، يطابق النص الثانوي
  • Border Secondary (#CACACB): حدود خفية، وحدود حقول الإدخال، وخطوط الفاصل (--podium-cds-color-grey-300)
  • Border Disabled (#CACACB): حالة الحد غير النشط
  • Border Active (#111111): الحد النشط/المُركَّز، يطابق النص الأساسي

الألوان الدلالية والتركيز

  • Nike Red (#D30005): الأخطاء الحرجة، وشارات التخفيض، والإشعارات العاجلة (--podium-cds-color-red-600)
  • Bright Red (#EE0005): Red-500، أحمر أفتح قليلاً للتركيز
  • Nike Orange Badge (#D33918): نص الشارات، والعروض الترويجية (--podium-cds-color-text-badge)
  • Orange Flash (#FF5000): لهجة برتقالية تعبيرية (--podium-cds-color-orange-400)
  • Success Green (#007D48): التأكيد، والتوفر، والحالات الإيجابية (--podium-cds-color-green-600)
  • Success Inverse (#1EAA52): النجاح على الخلفيات الداكنة (--podium-cds-color-green-500)
  • Link Blue (#1151FF): روابط النص، والمميزات المعلوماتية (--podium-cds-color-blue-500)
  • Info Inverse (#1190FF): الروابط على الخلفيات الداكنة (--podium-cds-color-blue-400)
  • Warning Yellow (#FEDF35): خلفيات التحذير، ولافتات التنبيه (--podium-cds-color-yellow-200)
  • Focus Ring (rgba(39, 93, 197, 1)): حلقة مؤشر تركيز لوحة المفاتيح

طيف الألوان الموسّع (Podium CDS)

كل رامب لوني يمتد من 50 إلى 900 للاستخدام التعبيري في الحملات وصفحات المنتجات:

  • الأحمر: #FFE5E5 → #EE0005 → #530300
  • البرتقالي: #FFE2D6 → #FF5000 → #3E1009
  • الأصفر: #FEF087 → #FCA600 → #99470A
  • الأخضر: #DFFFB9 → #1EAA52 → #003C2A
  • الفيروزي: #D4FFFB → #008E98 → #043441
  • الأزرق: #D6EEFF → #1151FF → #020664
  • البنفسجي: #E4E1FC → #6E0FF6 → #1C0060
  • الوردي: #FFE1F3 → #ED1AA0 → #4C012D

نظام التدرجات اللونية

تتجنب Nike تدرجات واجهة المستخدم. حين تظهر التدرجات، تكون فوتوغرافية — مُطبَّقة على خلفيات الصور الرئيسية للمنتجات (مثل حذاء أحمر على تدرج من الأحمر إلى الأحمر الأعمق). نظام التصميم نفسه ألوان مسطحة فقط.

3. قواعد الخطوط

عائلة الخطوط

العرض: Nike Futura ND (نوع مُكثَّف مخصص من Futura حصري لـ Nike)

  • الخطوط الاحتياطية: Helvetica Now Text Medium, Helvetica, Arial
  • يُستخدم حصراً في عناوين العرض الكبيرة بالحالة الكبيرة
  • ارتفاع سطر ضيق بشكل مميز (0.90) وتحويل إلى حالة كبيرة

العناوين: Helvetica Now Display Medium

  • الخطوط الاحتياطية: Helvetica, Arial
  • يُستخدم لعناوين الأقسام وعناوين المنتجات بحجم 24–32px

النص المتوسط: Helvetica Now Text Medium (وزن 500)

  • الخطوط الاحتياطية: Helvetica, Arial
  • يُستخدم للروابط، والأزرار، والتسميات التوضيحية، ونص النص المُركَّز

النص: Helvetica Now Text (وزن 400)

  • الخطوط الاحتياطية: Helvetica, Arial
  • يُستخدم للنص الأساسي القياسي، والأوصاف، والبيانات الوصفية

العربية: Neue Frutiger Arabic — بديل خاص بالإعدادات المحلية

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

الدور الحجم الوزن ارتفاع السطر تباعد الأحرف ملاحظات
Display 96px 500 0.90 — Nike Futura ND، حالة كبيرة، عناوين رئيسية
Heading 1 32px 500 1.20 — Helvetica Now Display Medium، عناوين الأقسام
Heading 2 24px 500 1.20 — Helvetica Now Display Medium، الأقسام الفرعية
Heading 3 16px 500 1.50 — Helvetica Now Text Medium، عناوين البطاقات
Body 16px 400 1.75 — Helvetica Now Text، أوصاف المنتجات
Body Medium 16px 500 1.75 — Helvetica Now Text Medium، نص مُركَّز
Link 16px 500 1.75 — Helvetica Now Text Medium، روابط التنقل
Link Small 14px 500 1.86 — Helvetica Now Text Medium، روابط التذييل/المرافق
Button 16px 500 1.50 — Helvetica Now Text Medium، نص الدعوة لاتخاذ إجراء
Button Small 14px 500 1.50 — Helvetica Now Text Medium، الأزرار الثانوية
Caption 14px 500 1.50 — Helvetica Now Text Medium، تسميات الأسعار
Small 12px 500 1.50 — Helvetica Now Text Medium، الطوابع الزمنية
Tiny 12px 400 1.50 — Helvetica Now Text، النص القانوني

المبادئ

طباعة Nike هي دراسة في التوتر. طبقة العرض — Nike Futura ND بحجم 96px مع ارتفاع سطر مدمِّر 0.90 — مهندسة لتبدو كلوحة نتائج الملعب: ضخمة، ومُكثَّفة، وبحالة كبيرة، ومستحيلة التجاهل. تُحوِّل العناوين إلى صرخات معركة. أسفل طبقة العرض، يُقدم Helvetica Now نقيضاً كلينيكياً: قابلية قراءة بدقة سويسرية مع ارتفاع سطر سخي 1.75 لتصفح مريح للمنتجات. يهيمن الوزن 500 (Medium) على نص النص بأكمله، مما يمنح كتابة Nike حزماً طفيفاً دون ثقل الغامق — كل جملة تُقرأ كتوصية واثقة، لا كصراخ.

4. تنسيقات المكونات

الأزرار

الأساسي

  • الخلفية: الأسود Nike (#111111)
  • النص: الأبيض (#FFFFFF)، 16px/500، Helvetica Now Text Medium
  • الحد: لا يوجد
  • نصف قطر الحد: حبة دواء كاملة التدوير (30px)
  • الحشو: ~12px 24px
  • التمرير: تنتقل الخلفية إلى Grey-500 (#707072)، لون نص عند التمرير
  • النشط: تأثير تموج scale(0) مع شفافية 0.5
  • التركيز: حلقة box-shadow بعرض 2px في rgba(39, 93, 197, 1)
  • الانتقال: خلفية 200ms ease

الأساسي على خلفية داكنة

  • الخلفية: الأبيض (#FFFFFF)
  • النص: الأسود (#111111)
  • التمرير: تنتقل الخلفية إلى Grey-300 (#CACACB)

الثانوي (محدَّد)

  • الخلفية: شفاف
  • النص: الأسود Nike (#111111)
  • الحد: 1.5px solid #CACACB (grey-300)
  • نصف قطر الحد: 30px
  • التمرير: يتغمق الحد إلى #707072، والخلفية إلى grey-200

المعطّل

  • الخلفية: Grey-200 (#E5E5E5)
  • النص: Grey-400 (#9E9EA0)
  • المؤشر: not-allowed

زر الأيقونة

  • الخلفية: Grey-100 (#F5F5F5)
  • الشكل: نصف قطر 30px (أو 50% للدائري)
  • الحشو: 6px
  • التمرير: خلفية Grey-500

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

  • الخلفية: الأبيض (#FFFFFF) — لا حد مرئي للبطاقة في معظم الحالات
  • نصف قطر الحد: 0px لبطاقات صور المنتجات (صور من حافة إلى حافة)، 20px للحاويات التفاعلية
  • الظل: لا يوجد — لا تستخدم Nike أي ظلال للبطاقات
  • التمرير: لا تأثير رفع على بطاقات المنتجات؛ تسطير على روابط النص داخل البطاقات
  • بطاقات المنتجات: صورة في الأعلى (بدون نصف قطر)، بيانات وصفية نصية أسفلها بمسافة 12px
  • بطاقات الفئات: تصوير فوتوغرافي كامل الشاشة مع تراكب نص على تدرج داكن
  • الانتقال: شفافية 200ms ease لتبادل الصور عند التمرير

حقول الإدخال والنماذج

  • الخلفية: Grey-100 (#F5F5F5)
  • الحد: 1px solid #CACACB حين يكون مرئياً، أو بدون حد في حالة البحث
  • نصف قطر الحد: 24px (حقول البحث)، 8px (حقول النماذج)
  • الخط: Helvetica Now Text، 16px
  • التركيز: ينتقل الحد إلى #111111 (border-active)، حلقة تركيز 2px في rgba(39, 93, 197, 1)
  • الخطأ: حد #D30005 (حرج)
  • العنصر النائب: Grey-500 (#707072)
  • الانتقال: border-color 200ms ease

التنقل

  • الخلفية: الأبيض (#FFFFFF)، ثابت
  • الارتفاع: ~60px للسطح المكتبي
  • اليسار: شعار Nike Swoosh (24x24px SVG)
  • الوسط: روابط الفئات (New & Featured، Men، Women، Kids، Sale) بحجم 16px/500 Helvetica Now Text Medium
  • اليمين: البحث (حقل إدخال بنصف قطر 24px)، وأيقونتا المفضلة والسلة
  • التمرير: ينتقل لون النص إلى Grey-500 (#707072)
  • الجوال: قائمة همبرغر، تراكب ملء الشاشة
  • الشريط العلوي: شريط رسالة ترويجية بخلفية داكنة (#111111) ونص أبيض

معالجة الصور

  • الصور الرئيسية: كاملة الشاشة، بدون نصف قطر، من حافة إلى حافة
  • شبكة المنتجات: نسبة عرض إلى ارتفاع مربعة (1:1) أو 4:3، بدون نصف قطر
  • بطاقات الفئات: 16:9 أو 4:3، كاملة الشاشة مع تراكب نص
  • عنصر نائب الصورة: خلفية صلبة Grey-100 (#F5F5F5)
  • التحميل الكسول: loading="lazy" الأصلي، يستخدم الهيكل خلفية #F5F5F5
  • التمرير على المنتج: تبادل الصورة الثانوية (المنظر الأمامي ← المنظر الجانبي)

اللافتات الترويجية

  • خلفية داكنة (#111111) بعرض كامل مع نص أبيض
  • حشو ضيق (8-12px عمودي)
  • نص في الوسط، 12px/500 Helvetica Now Text Medium
  • تُستخدم لعروض الشحن، ومزايا الأعضاء، وإعلانات التخفيضات

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

نظام التباعد

الوحدة الأساسية: 4px (الشبكة الأساسية مضاعفات 8px)

الرمز القيمة الاستخدام
space-1 4px فجوات الأيقونات الضيقة، التباعد المضمَّن
space-2 8px الوحدة الأساسية، فجوات أيقونات الأزرار
space-3 12px الحشو الداخلي للبطاقات، الهوامش الضيقة
space-4 16px الحشو القياسي، تباعد التنقل
space-5 20px فجوات بطاقات المنتجات
space-6 24px الحشو الداخلي للأقسام، فجوات الشبكة
space-7 32px فواصل الأقسام
space-8 48px حشو الأقسام الرئيسية
space-9 64px حشو القسم الرئيسي
space-10 80px تباعد الأقسام الكبيرة

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

  • الحد الأقصى لعرض الحاوية: 1920px
  • عرض المحتوى القياسي: ~1440px مع حشو أفقي
  • شبكة المنتجات: 3 أعمدة على سطح المكتب، 2 عمود على الجهاز اللوحي، 1 عمود على الجوال
  • شبكة الفئات: 3 أعمدة بصور كاملة الشاشة
  • فجوة الشبكة: 4-12px بين بطاقات المنتجات (ضيقة عن قصد)
  • الحشو الأفقي: 48px على سطح المكتب، 24px على الجهاز اللوحي، 16px على الجوال

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

استراتيجية المسافة البيضاء لدى Nike عدوانية بشكل متعمد — ليس بالطريقة الفسيحة المتنفسة لعلامة أزياء فاخرة، بل بطريقة مضغوطة عالية الكثافة تملأ كل بكسل إما بمحتوى أو بفراغ مقصود. تستخدم شبكات المنتجات فجوات ضيقة (4-12px) لخلق شعور بالوفرة والاختيار. فواصل الأقسام سخية (48-80px) للفصل بين سياقات التسوق. الأثر العام هو متجر يبدو مكتظاً بالمنتجات مع البقاء سهل التنقل — كمتجر رياضي ضخم منظم جيداً.

مقياس نصف قطر الحد

القيمة السياق
0px صور المنتجات، التصوير الرئيسي (حواف حادة)
8px حقول النماذج (غير البحث)
18px العناصر التفاعلية الصغيرة
20px الحاويات، البطاقات ذات محتوى واجهة المستخدم
24px حقول البحث، حبات الدواء المتوسطة
30px الأزرار، الوسوم، المرشحات (حبة دواء كاملة)
50% أزرار الأيقونات الدائرية، عناصر نائبة للصور الرمزية

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

المستوى المعالجة الاستخدام
مسطح لا ظل، لا حد الحالة الافتراضية لكل شيء
فاصل 0px -1px 0px 0px #E5E5E5 inset خط مضمَّن خفي بين الأقسام
تركيز 0 0 0 2px rgba(39, 93, 197, 1) حلقة تركيز لوحة المفاتيح
تراكب ستارة داكنة فوق التصوير إمكانية قراءة النص على الصورة

فلسفة الارتفاع لدى Nike مسطحة بشكل جذري. لا ظلال للبطاقات، ولا رفع عند التمرير، ولا عناصر عائمة. يُعبَّر عن العمق حصراً من خلال اللون — الأقسام الداكنة تتراجع، والأقسام الفاتحة تتقدم، وتحولات الرمادي تشير إلى تغييرات الحالة. هذا التسطيح يعزز شخصية العلامة التجارية الرياضية والعملية: لا زخارف بصرية، مجرد تواصل مباشر. "الظل" الوحيد في النظام بأكمله هو خط فاصل مضمَّن بعرض 1px وحلقة التركيز المطلوبة لإمكانية الوصول.

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

  • تراكبات التصوير الرئيسي: ستائر تدرج داكنة فوق التصوير الكامل الشاشة لإمكانية قراءة النص
  • تدرجات خلفية المنتج: خلفيات ملونة خلف لقطات المنتج الرئيسية (مثل حذاء أحمر على تدرج أحمر)
  • أشرطة اللافتات: أشرطة ترويجية داكنة صلبة (#111111) في أعلى الصفحة

7. ما يجب فعله وما يجب تجنبه

ما يجب فعله

  • استخدم الأسود Nike (#111111) لجميع النصوص الأساسية — ليس الأسود النقي #000000 أبداً
  • احتفظ بأزرار على شكل حبة دواء (نصف قطر 30px) ومحدودة بالمتغيرين الأساسي والثانوي
  • استخدم التصوير الكامل الشاشة من حافة إلى حافة للأقسام الرئيسية — لا نصف قطر على الصور
  • دع تصوير المنتجات يوفر كل الحيوية اللونية؛ حافظ على واجهة المستخدم أحادية اللون
  • استخدم Nike Futura ND بحالة كبيرة فقط لعناوين العرض (96px+)
  • حافظ على فجوات ضيقة في شبكة المنتجات (4-12px) للحصول على شعور كثيف ووفير
  • استخدم Grey-100 (#F5F5F5) لجميع خلفيات الإدخال والعناصر النائبة
  • احتفظ باللون حصراً للمعنى الدلالي (أحمر=خطأ، أخضر=نجاح، أزرق=رابط)
  • استخدم وزن 500 (Medium) لجميع عناصر النص التفاعلية

ما يجب تجنبه

  • لا تضف ظلالاً للبطاقات — نموذج ارتفاع Nike مسطح تماماً
  • لا تستخدم نصف قطر الحد على صور المنتجات — العناصر التفاعلية فقط هي التي تحصل على زوايا مدورة
  • لا تُدخل ألوان العلامة التجارية خارج المقياس الرمادي لعناصر واجهة المستخدم
  • لا تستخدم Nike Futura ND تحت 24px — إنها وجه عرض حصراً
  • لا تضف تأثيرات رفع عند التمرير — بطاقات Nike لا تتحرك عند التمرير
  • لا تستخدم الوزن العادي (400) للأزرار أو الروابط — استخدم دائماً 500
  • لا تضع خلفيات ملونة خلف عناصر واجهة المستخدم — اللون محجوز لسياقات المنتج
  • لا تستخدم أكثر من مستويين من التسلسل النصي لكل بطاقة (عنوان + نص)
  • لا تضف فواصل زخرفية — الفاصل المضمَّن بعرض 1px هو النمط الوحيد للفاصل
  • لا تُليِّن التباين — تصميم Nike يدفع الأسود على الأبيض إلى الحد الأقصى عن قصد

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

نقاط التوقف

الاسم العرض التغييرات الرئيسية
الجوال <640px عمود واحد، تنقل همبرغر، تصغير نص العرض، حشو ضيق 16px
الجهاز اللوحي الصغير 640-768px تبدأ شبكة المنتجات بعمودين، التنقل لا يزال مطوياً
الجهاز اللوحي 768-960px شبكات عمودين، بطاقات الفئات تتسع، حشو أفقي 24px
سطح مكتب صغير 960-1024px يتوسع التنقل إلى كامل الأفقي، شبكة منتجات 3 أعمدة
سطح المكتب 1024-1440px تخطيط كامل، تنقل موسَّع، شبكات 3 أعمدة، حشو 48px
سطح مكتب كبير >1440px حاوية بحد أقصى للعرض في الوسط، هوامش متزايدة، صور رئيسية كاملة الشاشة

أهداف اللمس

  • الحد الأدنى لهدف اللمس: 44x44px (WCAG AAA)
  • أيقونات تنقل الجوال: مساحة لمس 48x48px
  • بطاقات المنتجات: السطح بأكمله قابل للنقر
  • أزرار المرشح: ارتفاع 36px كحد أدنى مع حشو 12px

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

  • التنقل: روابط الفئات الكاملة ← قائمة همبرغر أسفل 960px؛ أيقونات البحث والمفضلة والسلة تبقى مرئية
  • شبكات المنتجات: 3 أعمدة ← 2 عمود عند 960px ← 1 عمود عند 640px
  • الأقسام الرئيسية: يتقلص نص العرض من 96px ← 64px ← 48px؛ الصور الرئيسية تبقى كاملة الشاشة في جميع الأحجام
  • بطاقات الفئات: 3 أعمدة ← 2 عمود ← 1 عمود مع الحفاظ على التصوير الكامل الشاشة
  • حشو الأقسام: 80px ← 48px ← 32px ← 24px مع تضيق منفذ العرض
  • اللافتة الترويجية: النص يلتف أو يُقتطع، مع الحفاظ على الخلفية الداكنة

سلوك الصور

  • الصور التجاوبية عبر Nike CDN (c.static-nike.com) مع معاملات العرض
  • صور المنتجات: srcset بدقات متعددة (w_320، w_640، w_960، w_1920)
  • الصور الرئيسية: كاملة الشاشة في جميع نقاط التوقف، تتغير نسبة العرض إلى الارتفاع (16:9 سطح مكتب ← 4:3 جوال)
  • التحميل الكسول: loading="lazy" الأصلي، عنصر نائب grey-100 أثناء التحميل
  • توجيه الفن: تتغير اقتصاصات الصور الرئيسية بين تركيبات سطح المكتب والجوال

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

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

  • دعوة اتخاذ إجراء الأساسية: الأسود Nike (#111111)
  • الخلفية: الأبيض (#FFFFFF)
  • السطح الثانوي: الرمادي الفاتح (#F5F5F5)
  • نص العناوين: الأسود Nike (#111111)
  • نص النص / التمرير: النص الثانوي (#707072)
  • الحد: Border Secondary (#CACACB)
  • الخطأ: الأحمر Nike (#D30005)
  • الرابط: الأزرق Link (#1151FF)

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

  • "أنشئ قسماً رئيسياً للمنتج مع تصوير كامل من حافة إلى حافة، بدون نصف قطر حد، وتراكب تدرج داكن للنص، وعنوان ضخم بحالة كبيرة 96px/500 بأسلوب Nike Futura مع ارتفاع سطر 0.90 وزر حبة دواء بالأسود Nike (#111111) ونصف قطر 30px"
  • "صمم شبكة بطاقات منتجات من 3 أعمدة بصور مربعة (بدون نصف قطر)، وفجوة 4px بين البطاقات، واسم المنتج بحجم 16px/500 بالأسود Nike (#111111)، والسعر بحجم 14px/500، والنص الثانوي بلون Grey-500 (#707072)"
  • "ابنِ شريط تنقل أبيض ثابتاً بشعار محاذٍ لليسار، وروابط فئات في الوسط بحجم 16px/500 (#111111) مع لون تمرير #707072، وبحث محاذٍ لليمين (نصف قطر 24px، خلفية #F5F5F5)، وأيقونتي المفضلة والسلة"
  • "أنشئ شريط لافتة ترويجية بخلفية #111111، ونص أبيض مركزي 12px/500، وحشو عمودي 8px — عرض كامل، بدون نصف قطر"
  • "صمم زراً ثانوياً محدداً بخلفية شفافة، وحد 1.5px بلون #CACACB، ونصف قطر حبة دواء 30px، ونص 16px/500 #111111، مع تغميق الحد إلى #707072 عند التمرير"

دليل التكرار

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

  1. ركّز على مكوّن واحد في كل مرة
  2. استشهد بأسماء الألوان المحددة والرموز السداسية من هذا المستند
  3. تذكر: تصوير المنتجات هو اللون — واجهة المستخدم تبقى أحادية اللون
  4. استخدم المقياس الرمادي لتغييرات الحالة: #F5F5F5 → #E5E5E5 → #CACACB → #707072
  5. إذا بدا شيء ما ملوناً للغاية في واجهة المستخدم، فمن المحتمل أنه كذلك — Nike تحافظ على واجهة المستخدم بتدرجات رمادية
  6. خط العرض (Nike Futura) يجب أن يكون دائماً بالحالة الكبيرة وألا ينزل أبداً تحت 24px
  7. خط النص (Helvetica Now) يجب أن يكون بوزن 500 دائماً تقريباً للعناصر التفاعلية
Reference in new issue View Git Blame Copy Permalink