دليل

ادمج موقعين مرجعيين في تصميم واحد لنموذج أولي

«اجعله يبدو كأن Notion التقى Stripe». هكذا يطلب العملاء النماذج الأولية طوال الوقت. مع ملف DESIGN.md لكل موقع، يمكنك تحويل هذه الجملة إلى مواصفات واحدة ملموسة: قارن الرموز جنبًا إلى جنب، وقرّر أي الملفين هو الأساس، ثم ادمج.

يعطيك Design Extractor الملفين. أما الدمج فقرارك أنت، يدويًا أو بمساعدة وكيل البرمجة، وهذا الدليل يشرح الطريقتين.

كُتب من أجل المصممين والوكالات الذين يبنون نماذج أولية. آخر تحديث .

ما الذي ستحصل عليه

  • ملفا DESIGN.md مقارنان رمزًا برمز، لتصبح الفروق ملموسة.
  • خطة دمج: ملف واحد أساسًا، ومجموعات رموز مسمّاة من الآخر.
  • ملف DESIGN.md المدموج، تصنعه يدويًا أو يصنعه وكيلك بالموجّه أدناه.
  • فحص للتباين، لتبقى النتيجة المدمجة سهلة القراءة.

كيف يعمل الدمج

الدمج ليس متوسطًا. خلط نصف لوحة ألوان بنصف أخرى يعطيك موقعًا لا يشبه أيًّا منهما. ما ينجح هو ملف أساسي واحد مع بضعة أجزاء مسمّاة من الآخر:

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

يتبع الملفان مواصفات DESIGN.md من Google، لذا تتطابق المجموعات: colors و typography و rounded و spacing و components. اطّلع على ما يحتويه ملف DESIGN.md لمعرفة البنية كاملة.

الخطوات

  1. احصل على الملفين

    انسخهما من المعرض إن كانا موجودين، أو الصق كل رابط في الصفحة الرئيسية لـ Design Extractor وشغّل عملية استخراج Pro لكل منهما.

  2. ضعهما جنبًا إلى جنب

    قارن الألوان الأساسية والخلفيات والخطوط وأحجام الخطوط واستدارة الحواف، كما في الجدول أدناه.

  3. اختر الأساس

    اختر الموقع الذي يتوافق تخطيطه وكثافته مع النموذج الأولي.

  4. سمِّ ما يُعيره الملف المكمّل

    دوّنه على شكل مجموعات رموز، مثل «عائلة لونه الأساسي».

  5. ادمج يدويًا أو بمساعدة وكيلك

    الطريقتان أدناه. احفظ النتيجة باسم DESIGN.md في مستودع النموذج الأولي.

  6. افحص التباين والبنية

    الصق الملف المدموج في أداة DESIGN.md Validator المجانية.

مثال تطبيقي: ⁨Notion⁩ يلتقي ⁨Stripe⁩

ملفان حقيقيان من المعرض: ملف DESIGN.md الخاص بـ ⁨Notion⁩ وملف DESIGN.md الخاص بـ ⁨Stripe⁩. استُخرج كلاهما من المواقع العامة للعلامتين التجاريتين، وليسا إرشادات رسمية للعلامة.

NotionStripe
اللون الأساسي#0075DE#533AFD
الخلفية#FFFFFF#FFFFFF
النص#000000#061B31
الخطوطNotion Inter، Lyon TextSohne
أكبر حجم خطhero-display، 96px، الوزن 600hero-display، 56px، الوزن 500
خط النص الأساسيbody، 16px، الوزن 400body-lg، 18px، الوزن 300
استدارة الأزرار8px4px
رموز الألوان2021
وصفات المكونات1471

طريقة لدمجهما

خذ ⁨Notion⁩ أساسًا لخطوطه ومسافاته واستدارة حوافه ومكوناته، ودع ⁨Stripe⁩ يُعير عائلة لونه الأساسي (primary، primary-focus، primary-bright، primary-pressed، primary-deep، primary-soft). هذا هو الطلب الكلاسيكي: «تخطيطنا، وحيويتهم».

تحقّق من الأرقام قبل أن تعتمد هذا الخيار. يبلغ تباين اللون الأساسي لـ ⁨Stripe⁩ على خلفية ⁨Notion⁩ نسبة 6.1:1. يصل تباين نص on-primary الخاص بـ ⁨Notion⁩ على اللون الأساسي الجديد إلى 6.1:1. يحتاج النص الأساسي إلى تباين 4.5:1 على الأقل وفق WCAG AA؛ ويحتاج النص الكبير والأيقونات إلى 3:1.

فخ واحد: اللون الأساسي الخاص بـ ⁨Notion⁩، أي #0075DE، يظهر 65 مرة في ملفه، معظمها داخل وصفات المكونات. استبدال الرمز في الأعلى لا يكفي؛ يجب تغيير كل نسخة منه.

رسم توضيحي للدمج اليدوي الموصوف أعلاه، جمعته هذه الصفحة من ملفَي المعرض: رموز ⁨Notion⁩ مع عائلة اللون الأساسي لـ ⁨Stripe⁩، مختصرًا. وهو ليس ميزة في Design Extractor وليس ناتجًا من وكيل.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

الدمج يدويًا

  1. انسخ الملف الأساسي إلى DESIGN.md وغيّر قيمة name فيه.
  2. في colors، استبدل عائلة اللون الأساسي في الملف الأساسي بقيم الملف المكمّل.
  3. ابحث في الملف كله عن كل قيمة hex قديمة واستبدلها. تكرر وصفات المكونات الألوان في CSS الخاص بها، لذا لا تكفي قائمة الرموز وحدها.
  4. أعد كتابة نص قسمَي Overview و Colors ليصفا المزيج، لا أيًّا من العلامتين.
  5. افحص الملف بالمدقّق وأصلح أي تحذيرات تتعلق بالتباين.

الدمج بمساعدة وكيلك

احفظ الملفين في مستودع النموذج الأولي، مثلًا تحت design/، وأعطِ وكيلك موجّهًا يسمّي الأساس والمجموعات المطلوب أخذها والفحوص المطلوب إجراؤها. كُتب هذا الموجّه لهذا الدليل بأسماء الملفات والرموز الحقيقية.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

راجع ما يُعيده الوكيل كأي تغيير آخر: اقرأ الفروقات (diff)، ثم الصق الملف في المدقّق. الوكيل يتولى الكتابة؛ أما القرارات الواردة في الموجّه فتبقى قراراتك.

الأسئلة الشائعة

⁨دمج تصميمَي موقعين في تصميم واحد⁩: أسئلة شائعة

إجابات قصيرة عمّا يسأل عنه الناس قبل تجربة ذلك.

لا، لا توجد ميزة للدمج. كل عملية استخراج تُعيد ملف DESIGN.md لموقع واحد. تدمج الملفين يدويًا، أو تطلب من وكيل البرمجة ذلك بموجّه مثل الموجود في هذا الدليل، ثم تراجع النتيجة.

اثنان، وأحيانًا ثلاثة. ملف واحد هو الأساس ويعطي البنية: سلّم الخطوط والمسافات واستدارة الحواف والمكونات. أما الملفات الأخرى فتُعير جزءًا مسمّى، مثل عائلة ألوان أو خط للعناوين. خلط القيم من ملفات أكثر يجعل النتيجة تبدو مرقّعة.

الملف الذي يتوافق تخطيطه وكثافته مع النموذج الأولي. إذا أراد العميل منتجًا هادئًا يشبه المستندات بألوان موقع آخر، فالموقع الهادئ هو الأساس والآخر يُعير ألوانه، لا العكس.

الصق الملف المدموج في أداة DESIGN.md Validator المجانية. تفحص الأداة البنية وتنبّه إلى ألوان النصوص ضعيفة التباين. ثم ابنِ شاشة حقيقية واحدة به قبل أن تعرضه على العميل.

احصل على الملفين لطلب عميلك

الصق رابط كل موقع مرجعي واحصل على ملف DESIGN.md الخاص به، جاهزًا للمقارنة والدمج.

احصل على ملف DESIGN.md من أي موقع ويب

أدلة ذات صلة

عرض كل أدلة DESIGN.md