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

28 KiB
Raw Blame History

نظام التصميم المستوحى من Shopify

Category: التجارة الإلكترونية والتجزئة منصة تجارة إلكترونية. سينمائية تُقدّم الظلام أولاً، لكنة خضراء نيون، خط خفيف للغاية.

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

Shopify.com هو مسرح رقمي يضع الظلام في المقدمة — موقع يُقدّم منصة التجارة الخاصة به كعرض أول سينمائي. تتكشف التجربة بأكملها على خلفية من الأسطح شبه السوداء التي تحمل أخفت همس من الأخضر الغابوي العميق (#02090A، #061A1C، #102620)، مما يخلق أجواءً ليلية تبدو أقل شبهاً بصفحة تسويق لتطبيق SaaS وأكثر شبهاً بكشف منتج حصري في مؤتمر تقني. هذه الظلمة ليست بارداً أو مؤسسية — إنها الظلام الدافئ الحاضن لتجربة فاخرة، كالجلوس في الصف الأول من قاعة مظلمة.

الطباعة هي النجمة التي لا جدال فيها. NeueHaasGrotesk — نسل مُهذَّب من Helvetica — يظهر بحجم هائل (96px) بوزن خفيف بشكل لا يُصدَّق (330-400)، مما يُنشئ عناوين تبدو منقوشة في الضوء لا مطبوعة بالحبر. تمنح ميزة ss03 في OpenType الأحرف طابعاً مميزاً يُفرّق طباعة Shopify عن استخدام Helvetica العام. أسفل طبقة العرض، يتعامل Inter Variable مع نص الجسم بدقة جراحية، مستخدماً أوزاناً متغيرة غير اعتيادية (420، 450، 550) تعيش في المساحات بين نقاط توقف الأوزان التقليدية. تُشير هذه الدقة إلى شركة تهتم بكل تفصيلة.

تُستخدَم الألوان بتحفظ شديد. اللكنة الأساسية هي Shopify Neon Green (#36F4A4) — نعناع كهربائي يظهر حصراً على حلقات التركيز وإبراز اللكنات، ينبض كإشارة بيولومينية في مواجهة القماش المظلم. تُوفّر الدرجات الخضراء الأكثر ليونة (Aloe #C1FBD4، Pistachio #D4F9E0) طبقات جوية. الأبيض هو لون النص الوحيد المهم على الأسطح المظلمة، بينما يتولى مقياس محايد مبني على الزنك (#A1A1AA حتى #3F3F46) التسلسل الهرمي للمعلومات الهادئة. والنتيجة تصميم يجعل تقنية التجارة تبدو كأنها تنتمي إلى مستقبل الخيال العلمي.

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

  • تصميم يُقدّم الظلام أولاً مع ألوان تحتية بتدرجات غابوية عميقة (ليس أسود نقي)
  • طباعة عرض خفيفة للغاية (وزن 330) بحجم هائل (96px) تُنشئ حضوراً غيريّاً
  • الأخضر النيون (#36F4A4) بوصفه اللكنة الفردية عالية الطاقة في مواجهة الظلام
  • أزرار pill كاملة (نصف قطر 9999px) بوصفها الشكل التفاعلي الأساسي
  • ظلال مربعات متعددة الطبقات ومتعددة المراحل تُنشئ عمقاً فوتوغرافياً
  • لقطات شاشة المنتج مُضمَّنة في سياقات واجهة مستخدم مظلمة، متناسقة مع الظلام المحيط
  • مقياس محايد مبني على الزنك للتسلسل الهرمي للنص — متوازن بين الدفء والبرود

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

الأساسي

  • Shopify White (#FFFFFF): النص الأساسي على الأسطح المظلمة، تعبئة الأزرار، العناصر عالية التباين
  • Shopify Black (#000000): خلفية الجسم، نص الزر على الأبيض، قاعدة أقصى تباين (--color-shade-100)

الثانوي واللكنة

  • Neon Green (#36F4A4): اللكنة المميزة — حلقات التركيز، الإبراز التفاعلي، مؤشرات الحالة النشطة. كهربائي وبيولوميني
  • Aloe (#C1FBD4): طبقة خضراء ناعمة للخلفيات الزخرفية، البطاقات الجوية (--color-aloe-10)
  • Pistachio (#D4F9E0): أخف درجة خضراء للتمييز الدقيق بين الأسطح (--color-pistachio-10)

السطح والخلفية

  • Void (#000000): خلفية الصفحة الجذر — أسود حقيقي لأقصى عمق
  • Deep Teal (#02090A): أسطح البطاقات، حاويات المحتوى — شبه أسود مع لون تحتي أخضر
  • Dark Forest (#061A1C): خلفيات الأقسام ذات الطابع الأخضر الظاهر
  • Forest (#102620): الأسطح المظلمة المرتفعة، خلفيات الترويسة — أدفأ درجة مظلمة
  • Dark Card Border (#1E2C31): حدود البطاقات على الأسطح المظلمة، تعريف الحدود الدقيق

المحايدات والنص (مقياس الزنك)

  • Shade-30 (#D4D4D8): أخف محايد، حدود بالكاد مرئية على المظلم (--color-shade-30)
  • Muted Text (#A1A1AA): النص الثانوي، البيانات الوصفية، الأوصاف — الصوت الهادئ
  • Shade-50 (#71717A): النص الثلاثي، الطوابع الزمنية، المعلومات الأقل أهمية (--color-shade-50)
  • Shade-60 (#52525B): النص المعطّل، المحايدات الزخرفية (--color-shade-60)
  • Shade-70 (#3F3F46): الفواصل الدقيقة، حدود واجهة المستخدم بالكاد مرئية (--color-shade-70)
  • Light Border (#E4E4E7): الحدود على الأسطح الفاتحة (نادر — فقط في نوافذ الوضع الفاتح)

الدلالي واللكنة

  • Link Muted (#9797A2): نص رابط مُخفَّت مع تزيين التسطير
  • Link Sage (#9DABAD): روابط مُخفَّتة بظل teal
  • Link Lavender (#BDBDCA): نوع رابط أفتح
  • Link Mint (#99B3AD): نوع رابط بظل أخضر للأقسام ذات الطابع المحدد

نظام التدرج

  • Dark Teal Wash: تدرج شعاعي من مركز #102620 إلى حافة #02090A — يُستخدَم خلف عروض المنتجات
  • Green Atmospheric: تدرجات محيطية ذات ظل أخضر دقيق خلف أقسام البطل، تُنشئ العمق دون ألوان صلبة
  • Spotlight: منطقة مضيئة مُركَّزة تتلاشى إلى الأسود — تُنشئ إضاءة عرض تقديمي بأسلوب مؤتمر keynote

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

عائلة الخطوط

العرض: NeueHaasGrotesk (نسل مُهذَّب من Helvetica، خط متغير)

  • البدائل: Helvetica، Arial، sans-serif
  • ميزات OpenType: ss03 (المجموعة الأسلوبية 3 — بدائل أشكال الحروف المميزة)
  • الأوزان المتاحة: 330، 360، 400، 500، 750 (متغير)
  • يُستخدَم لجميع العناوين ونص البطل والعناصر الكبيرة

الجسم: Inter-Variable

  • البدائل: Helvetica، Arial، sans-serif
  • ميزات OpenType: ss03
  • الأوزان المتاحة: 400، 420، 450، 500، 550 (متغير)
  • يُستخدَم لنص الجسم والروابط والأزرار وعناصر واجهة المستخدم

أحادي الفضاء: ui-monospace

  • البدائل: SFMono-Regular، Menlo، Monaco، Consolas، Liberation Mono، Courier New
  • يُستخدَم لمقتطفات الكود وتسميات البيانات والمحتوى التقني

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

الدور الحجم الوزن ارتفاع السطر تباعد الأحرف ملاحظات
Display XL 96px 400 1.00 — NeueHaasGrotesk، عناوين البطل، "ss03"
Display XL Bold 90.74px 750 1.00 4.54px NeueHaasGrotesk، عرض التأكيد
Display XL Tracked 96px 400 1.00 2.4px NeueHaasGrotesk، عرض متباعد
Display Light 96px 330 0.96 — NeueHaasGrotesk، عرض غيري
Heading 1 70px 330 1.00 — NeueHaasGrotesk، عناوين الأقسام
Heading 2 55px 330 1.16 — NeueHaasGrotesk، الأقسام الفرعية
Heading 3 48px 330 1.14 — NeueHaasGrotesk، عناوين الميزات
Heading 4 32px 360 1.14 0.32px NeueHaasGrotesk، عناوين البطاقات
Heading 5 28px 500 1.28 0.42px NeueHaasGrotesk، العناوين الصغيرة
Heading 6 24px 400 1.14 0.36px NeueHaasGrotesk، العناوين الثانوية
Body Large 20px 500 1.40 0.3px NeueHaasGrotesk / Inter، الفقرات الرئيسية
Body 18px 400 1.56 — Inter-Variable، الجسم المعياري
Body Medium 18px 550 1.56 — Inter-Variable، الجسم المُؤكَّد
Body Small 16px 400 1.50 — Inter / NeueHaasGrotesk، الجسم المضغوط
Body Small Medium 16px 420 1.50 — Inter-Variable، مُؤكَّد قليلاً
Button 16px 400 1.50 — NeueHaasGrotesk، نص CTA
Nav Link 18px 500 1.25 0.72px NeueHaasGrotesk، عناصر التنقل
Caption 14px 500 1.49 0.28px NeueHaasGrotesk / Inter، البيانات الوصفية
Caption Medium 14px 550 1.49 0.28px Inter-Variable، تعليق مُؤكَّد
Overline 15.36px 400 1.50 1.54px NeueHaasGrotesk، تسميات واسعة التباعد
Micro 13px 500 1.50 -0.13px Inter، نص صغير ضيق التباعد
Label 12px 400 1.20 0.72px Inter، تسميات بحروف كبيرة
Code 16px 400 1.50 — ui-monospace، حروف كبيرة، كتل الكود
Code Small 12px 400 1.33 — ui-monospace، حروف كبيرة، كود مضمَّن

المبادئ

طباعة Shopify هي درس متقن في دقة الخطوط المتغيرة. تعيش طبقة العرض تقريباً حصراً عند الأوزان 330-400 — نص بوزن الريشة يبدو وكأنه يحلق فوق الخلفية المظلمة كضوء مُسقَط. هذا عكس النهج الغامق الثقيل الذي تتبعه معظم مواقع SaaS: حيث يصرخ الآخرون، تهمس Shopify بالحجم. تُنشئ العناوين 96px عند الوزن 330 مفارقة الحجم الهائل والضربة الرقيقة التي تبدو في آن واحد هائلة وهشة. تُفعّل ميزة ss03 في OpenType مجموعة أسلوبية تمنح أحرفاً محددة (على الأرجح 'a' و'g' وبعض الأرقام) مظهراً أكثر أناقة، مما يُميّز طباعة Shopify عن استخدام Helvetica Neue المعياري. يتعامل Inter Variable مع طبقة الجسم بدقة جراحية، مستخدماً أوزاناً كـ 420 و550 الموجودة بين النقاط التقليدية — كل قطعة نص لها بالضبط الوزن البصري الذي تحتاجه.

4. تصميمات المكونات

الأزرار

الأساسي (تعبئة بيضاء)

  • الخلفية: أبيض (#FFFFFF)
  • النص: أسود (#000000)
  • الحد: 2px solid شفاف
  • نصف قطر الحد: pill كامل (9999px)
  • المساحة الداخلية: 12px 26px 12px 16px (غير متماثل — مساحة يمينية أكثر للتوازن البصري)
  • تمرير الفأرة: تقليل طفيف في الشفافية أو انتقال الخلفية
  • التركيز: حلقة مخطط تحديد #36F4A4 (أخضر نيون) 2px
  • الانتقال: all 200ms ease

الثانوي (Ghost/مُخطَّط)

  • الخلفية: شفاف
  • النص: أبيض (#FFFFFF)
  • الحد: 2px solid أبيض (#FFFFFF)
  • نصف قطر الحد: pill كامل (9999px)
  • المساحة الداخلية: 12px 26px 12px 16px
  • تمرير الفأرة: يمتلئ بخلفية بيضاء مع نص أسود
  • التركيز: مخطط تحديد #36F4A4 2px

Badge/Tag (محايد ممتلئ)

  • الخلفية: rgba(255, 255, 255, 0.2) (زجاج مثلَّج)
  • النص: أبيض (#FFFFFF)
  • الحد: لا شيء
  • نصف قطر الحد: مُدوَّر بشكل دقيق (4px)
  • المساحة الداخلية: 12px 16px
  • الخط: 16px عادي

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

  • الخلفية: Deep Teal (#02090A) على الصفحات المظلمة
  • الحد: 1px solid #1E2C31 (Dark Card Border) — حد بالكاد مرئي
  • نصف قطر الحد: 8px للبطاقات المعيارية، 12px للبطاقات المميزة، 20px 20px 0 0 للبطاقات المُدوَّرة من الأعلى
  • الظل: نظام متعدد الطبقات:
    • الراحة: rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
    • الإبراز الأبيض المضمَّن يُنشئ توهجاً دقيقاً في الحافة العلوية
  • تمرير الفأرة: يتوسع الظل، قد تضيء البطاقة قليلاً
  • الانتقال: box-shadow 300ms ease، transform 200ms ease

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

  • الخلفية: شفاف أو Dark Forest (#061A1C)
  • النص: أبيض (#FFFFFF)
  • الحد: 1px solid #3F3F46 (Shade-70)
  • نصف قطر الحد: 8px
  • المساحة الداخلية: 12px 16px
  • التركيز: 2px solid #36F4A4 (حلقة تركيز أخضر نيون)
  • النص النائب: Shade-50 (#71717A)
  • الانتقال: border-color 200ms ease

التنقل

  • الخلفية: شفاف (مُركَّب على بطل مظلم)، يصبح Forest (#102620) عند التمرير
  • الارتفاع: ~64px
  • يسار: شعار Shopify wordmark (SVG، أبيض على مظلم)
  • وسط/يمين: روابط التنقل بـ 18px/500 NeueHaasGrotesk، أبيض، تباعد الحروف 0.72px
  • CTA: زر pill أبيض "Start for free" (يمين)
  • CTA ثانوي: زر Ghost بحد أبيض
  • تمرير الفأرة: الروابط تنتقل إلى Muted Text (#A1A1AA) أو تكتسب تسطيراً
  • الجوال: قائمة hamburger، تراكب مظلم على الشاشة الكاملة
  • الانتقال: background 300ms ease عند التمرير

معالجة الصور

  • لقطات شاشة المنتج: مُضمَّنة في سياقات واجهة مستخدم مظلمة، متناسقة مع الظلام المحيط
  • معاينات واجهة الإدارة: تُعرَض على خلفيات مظلمة مع حدود بطاقات دقيقة
  • نسب العرض إلى الارتفاع: متنوعة — صور البطل عريضة (16:9 تقريباً)، لقطات الميزات مرنة
  • جميع الصور تجلس بإحكام داخل حاويات مظلمة — لا حدود أو أطر ساطعة
  • تحميل كسول مع أسطح نائبة مظلمة

مؤشرات الثقة

  • إحصاءات مُعرَضة بشكل بارز: "15+" (سنوات)، "150M+" (مشترين)
  • أرقام بحجم العرض في NeueHaasGrotesk
  • أقسام نداء منظومة الشركاء/المطورين
  • شهادات ذات طابع مظلم مُدمَجة في تدفق الصفحة

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

نظام التباعد

الوحدة الأساسية: 8px

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

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

  • أقصى عرض للحاوية: ~1280px (مُوسَّط)
  • البطل: عرض كامل، خلفية مظلمة من حافة إلى حافة مع نص مُوسَّط
  • أقسام الميزات: تخطيطات عمودين مع نص ولقطات شاشة المنتج
  • أقسام الإحصاءات: تخطيط أفقي مع أرقام كبيرة
  • المساحة الداخلية الأفقية: 64px سطح المكتب، 32px الجهاز اللوحي، 16px الجوال
  • فجوة الشبكة: 24-32px بين كتل المحتوى الرئيسية

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

استراتيجية المساحة البيضاء في Shopify مسرحية. تتفصل الأقسام بمساحات شاسعة من الفضاء المظلم — 80px إلى 120px من المساحة التنفسية السوداء الخالصة — تُنشئ إيقاع عرض تقديمي لا صفحة ويب. كل كتلة محتوى هي "شريحتها" الخاصة في تمرير بأسلوب keynote. داخل الأقسام، يكون التباعد أضيق وأكثر تعمداً، مما يُنشئ كثافة تركيز في مواجهة الفراغ الشاسع. التباين بين الفراغ على المستوى الكلي والدقة على المستوى الجزئي هو ما يمنح الموقع إيقاعه السينمائي.

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

القيمة السياق
4px Tags، badges، العناصر الدقيقة
8px البطاقات المعيارية، المدخلات، حاويات الفيديو
12px البطاقات المميزة، حاويات الصور، الأزرار (غير pill)
20px البطاقات المُدوَّرة من الأعلى (20px 20px 0 0)، رؤوس النوافذ المنبثقة
340px العناصر الزخرفية الكبيرة المُدوَّرة
9999px أزرار pill، شارات pill، عناصر التنقل

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

المستوى المعالجة الاستخدام
الأساسي لا ظل، سطح مظلم خلفية الصفحة الافتراضية
دقيق rgba(0,0,0,0.1) 0px 0px 0px 1px + توهج أبيض مضمَّن البطاقات في وضع الراحة
متوسط متعدد الطبقات: حلقة 1px + ظل 2px + 4px + 8px البطاقات المُرتفعة، الأقسام المميزة
مرتفع rgba(0,0,0,0.25) 0px 25px 50px -12px النوافذ المنبثقة، القوائم المنسدلة، التراكبات
التركيز 0px 0px 0px 2px #36F4A4 حلقة تركيز لوحة المفاتيح (أخضر نيون)

نظام الظلال في Shopify متطور بشكل غير اعتيادي. بدلاً من قيم ظل منفردة، تستخدم البطاقات نهجاً متراكماً متعدد الطبقات: حلقة 1px لتعريف الحدود، تمويهات تدريجية 2px/4px/8px لسقوط الضوء الطبيعي، وتوهج أبيض مضمَّن دقيق (rgba(255,255,255,0.03)) يُحاكي سطح زجاجي مُضاء من الأعلى. على الخلفيات المظلمة، تُعتِم الظلال من أسطح مظلمة بالفعل، لذا تعمل الظلال أكثر كـ "ambient occlusion" من التعلية التقليدية — تبدو البطاقة وكأنها تغوص قليلاً في السطح بدلاً من الطفو فوقه.

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

  • تدرجات teal مظلمة: طبقات شعاعية محيطية خلف أقسام البطل وعروض المنتجات
  • تأثيرات spotlight: مناطق مضيئة مُركَّزة تتلاشى إلى الأسود، تُنشئ إضاءة مسرحية بأسلوب keynote
  • توهج الحواف: حواف فاتحة دقيقة على البطاقات المظلمة عبر inset box-shadow
  • هالات خضراء جوية: ظلال خضراء خافتة في تدرجات الخلفية، تُردد اللكنة الترويجية

7. افعل ولا تفعل

افعل

  • استخدم تسلسل سطح الأسود-teal المظلم (Void → Deep Teal → Dark Forest → Forest) للعمق
  • حافظ على طباعة العرض عند الوزن 330-400 — الخفة الغيرية هي توقيع التصميم
  • استخدم Neon Green (#36F4A4) حصراً لحالات التركيز وإبراز اللكنات الحاسمة
  • طبّق نصف قطر 9999px على جميع أزرار CTA الأساسية — pill الكامل غير قابل للتفاوض
  • استخدم نظام الظلال متعدد الطبقات لارتفاع البطاقات — الظلال المنفردة تبدو مسطحة
  • حافظ على ميزة ss03 في OpenType عبر جميع النصوص — إنها جزء من الهوية الطباعية
  • استخدم Inter Variable لنص الجسم وNeueHaasGrotesk للعناوين — لا تخلط أدوارهما أبداً
  • أنشئ تباعداً مسرحياً بين الأقسام (80px+) لإيقاع سينمائي

لا تفعل

  • لا تستخدم الأسود النقي (#000000) للنص على الخلفيات المظلمة — استخدم الأبيض (#FFFFFF) فقط
  • لا تُدخل ألواناً دافئة (برتقالي، أحمر، أصفر) — اللوحة صارمة الرودة (خضر، teals، محايدات)
  • لا تستخدم أوزان خطوط أعلى من 500 لنص جسم NeueHaasGrotesk — الأوزان الثقيلة تكسر الشعور الغيري
  • لا تطبّق لكنات خضراء على أسطح كبيرة — Neon Green لإبرازات صغيرة دقيقة فقط
  • لا تستخدم زوايا حادة (نصف قطر 0px) على العناصر التفاعلية — كل شيء مُدوَّر
  • لا تضف خلفيات ساطعة — الموضوع المظلم أساسي لا اختياري
  • لا تستخدم box-shadows بطبقة واحدة — النهج المتراكم هو النظام
  • لا تضع ارتفاع السطر فوق 1.56 لنص الجسم — نص Shopify مضغوط نسبياً
  • لا تخلط NeueHaasGrotesk وInter بنفس الحجم/الدور — مقاييس أوزانهما مختلفة
  • لا تستخدم تباعد أحرف أدنى من 0 للعناوين — عناوين Shopify تتبع التباعد المحايد أو الإيجابي

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

نقاط التوقف

الاسم العرض التغييرات الرئيسية
الجوال <640px عمود واحد، تنقل hamburger، نص العرض يتقلص إلى 48px، مساحة داخلية 16px
الجهاز اللوحي 640-1024px تبدأ شبكات العمودين، نص العرض عند 70px، مساحة داخلية 32px
سطح المكتب 1024-1440px التخطيط الكامل، التنقل الموسع، عرض 96px، مساحة داخلية 64px
سطح مكتب كبير >1440px حاوية أقصى عرض مُوسَّطة، تباعد الأقسام المتزايد

أهداف اللمس

  • الحد الأدنى لهدف اللمس: 44x44px (WCAG AAA)
  • أزرار pill: ارتفاع 48px كحد أدنى مع مساحة داخلية أفقية سخية
  • روابط التنقل: منطقة لمس 44px
  • أسطح البطاقات: البطاقة كاملة قابلة للنقر حيث تكون مُرتبطة

استراتيجية الطي

  • التنقل: روابط أفقية كاملة → قائمة hamburger دون 1024px؛ يبقى الشعار وزر CTA مرئيَّين
  • قسم البطل: عرض 96px → 70px على الجهاز اللوحي → 48px على الجوال؛ يحافظ على توسيط العمود الواحد
  • أقسام الميزات: نص+صورة ذو عمودين → عمود واحد مُكدَّس دون 768px
  • الإحصاءات: صف أفقي → عمودي مُكدَّس على الجوال
  • مساحة الأقسام الداخلية: 64px → 40px → 24px → 16px مع تضيق نافذة العرض
  • البطاقات: شبكة → كومة، مع الحفاظ على عرض كامل على الجوال

سلوك الصور

  • لقطات شاشة المنتج: تجاوبية داخل حاويات مظلمة، تحافظ على نسبة العرض إلى الارتفاع
  • صور البطل: عرض كامل على جميع نقاط التوقف، تُحمَّل ببطء مع نائبات مظلمة
  • معاينات واجهة الإدارة: تتقلص بشكل متناسب، قد تقص على الجوال
  • جميع الصور تستخدم CDN (cdn.shopify.com) مع srcset تجاوبية

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

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

  • CTA الأساسي: Shopify White (#FFFFFF)
  • خلفية الصفحة: Void Black (#000000)
  • سطح البطاقة: Deep Teal (#02090A)
  • خلفية القسم: Dark Forest (#061A1C)
  • خلفية مُرتفعة: Forest (#102620)
  • اللكنة: Neon Green (#36F4A4)
  • نص الجسم: White (#FFFFFF)
  • نص مُخفَّت: Muted (#A1A1AA)
  • حد مظلم: Dark Card Border (#1E2C31)

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

  • "أنشئ قسم بطل على خلفية سوداء حقيقية (#000000) مع عنوان NeueHaasGrotesk بـ 96px/330 بالأبيض، وعنوان فرعي بـ 20px/500 بـ #A1A1AA، وزرَّي pill: أبيض ممتلئ (نصف قطر 9999px) وghost بحد أبيض 2px"
  • "صمّم بطاقة ميزة على Deep Teal (#02090A) بحد #1E2C31 1px، ونصف قطر 12px، وظل متعدد الطبقات (حلقة 1px + تمويه 2px/4px/8px بنسبة أسود 10%)، يحتوي على عنوان أبيض 32px/360 ونص جسم #A1A1AA 18px/400"
  • "ابنِ قسم إحصاءات على Dark Forest (#061A1C) مع أرقام بيضاء 96px/750 (NeueHaasGrotesk)، تسميات وصفية #A1A1AA 16px/400، وتباعد 64px سخي بين كتل الإحصاءات"
  • "أنشئ تنقلاً ثابتاً بخلفية شفافة (تصبح #102620 عند التمرير)، شعار Shopify أبيض يساراً، روابط تنقل بيضاء 18px/500 بتباعد حروف 0.72px، وزر pill أبيض 'Start for free' يميناً"
  • "صمّم وسماً/شارةً بخلفية زجاج مثلَّج rgba(255,255,255,0.2)، نصف قطر 4px، مساحة داخلية 12px 16px، نص أبيض 16px — يطفو فوق سطح بطاقة مظلم"

دليل التكرار

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

  1. ركّز على مكوِّن واحد في كل مرة
  2. ارجع إلى أسماء الألوان المحددة والرموز السداسية من هذا الوثيق
  3. تذكر: هذا تصميم يُقدّم الظلام أولاً — الأسطح الفاتحة هي الاستثناء لا القاعدة
  4. يجب أن يبدو نص العرض دائماً خفيف الوزن (الوزن 330-400) — إذا بدا ثقيلاً فقلّل الوزن
  5. Neon Green (#36F4A4) ثمين — استخدمه باعتدال للتركيز واللكنة فقط
  6. التسلسل الهرمي للسطح المظلم (أسود → deep teal → dark forest → forest) يُنشئ عمقاً دقيقاً
  7. الظلال متعددة الطبقات — قيمة box-shadow واحدة لن تُجسّد شعور بطاقة Shopify
  8. يجب أن تكون ميزة ss03 في OpenType نشطة على جميع النصوص للتناسق الطباعي
Reference in new issue View Git Blame Copy Permalink