الدليل‹التصميم
التصميممبتدئ‏٧ دقائق قراءة

النمط وبصمة التصميم

عرّف نمطاً — ألواناً، وخطوطاً، وتباعداً — بصفته بصمة تصميم واحدة، وطبّق النظام نفسه عبر كل شاشة على اللوحة. أعد التنسيق دفعةً واحدة لتجربة اتّجاه جديد دون إعادة بناء أي صفحة.

ما هي بصمة التصميم

بصمة التصميم هي النظام البصري المشترك خلف تصميمك — لوحة الألوان، والخطوط، ومقياس التباعد، ودرجة الاستدارة التي تحدّد كيف يبدو كل شيء وكيف يشعر. عرّفها مرّة، فتُطبَّق على كل شاشة على اللوحة، حتى يبقى المنتج متماسكاً مهما نما.

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

ℹ
ملاحظة.تعيش بصمة التصميم هذه داخل وحدة التصميم وتحكم اللوحة بأكملها. إنها تحلّ محلّ النسخة القديمة المؤطّرة ضمن البنّاء — هنا تتعلّق ببصمة كل تصميماتك، لا ببناء واحد.

تعريف نمط

يمكنك تعريف نمطك بالطريقة نفسها التي تصمّم بها — بالمحادثة. صف الحالة المزاجية أو العلامة التي تريدها، فيقترح شريك التصميم بالذكاء الاصطناعي مجموعة منسجمة من الألوان والخطوط والتباعد. عدّل أي قيمة من هناك.

1
الألوان
لون أساسي للعلامة، ولون أو لونان ثانويان، إضافةً إلى ألوان السطح والنص المحايدة. يربط النظام كلّاً منها بدور، حتى تشير الشاشات إلى 'الأساسي' بدلاً من قيمة لون ثابتة.
2
الخطوط
عائلة خطّ للعناوين وأخرى للنص، إضافةً إلى مقياس أحجام متّسق وارتفاع سطر. صف نبرة ('هندسي ونظيف'، 'دافئ وتحريري') ويختار المساعد خطوطاً مناسبة.
3
التباعد والاستدارة
وحدة تباعد أساسية تحكم الإيقاع والحشو عبر التخطيطات، ودرجة استدارة تنطبق على الأزرار والبطاقات وحقول الإدخال — من زوايا حادّة إلى حواف على شكل حبّة دواء.

إن كانت لديك علامة قائمة بالفعل، يمكنك توجيه مايندلاب إلى موقع ويب مباشر فيستخرج هويتك تلقائياً — الألوان، والخطوط، والتباعد — ويحوّلها إلى بصمة تصميم جاهزة للتطبيق.

نظام واحد عبر الشاشات

بمجرّد تعريف بصمة التصميم، تتبعها كل صفحة على اللوحة. عندما يبني المساعد شاشة جديدة، يستخدم النظام نفسه تلقائياً — الألوان والخطوط نفسها، والإيقاع نفسه — حتى تبدو الصفحة العاشرة كأنها تنتمي إلى الأولى.

هذا هو ما يجعل التصميم متعدّد الصفحات قابلاً للإدارة. لا تكرّر قرارات الأسلوب على كل شاشة؛ تتّخذها مرّة على مستوى النظام، وتُطبَّق في كل مكان.

💡
نصيحة.ابنِ شاشتك الأولى، اضبط بصمة التصميم حتى تشعر بأنها صحيحة، ثم اطلب الصفحات المتبقّية. ستُولَد بالفعل متّسقة مع نظامك.

إعادة التنسيق

لأن النمط نظام واحد، فإن تجربة مظهر مختلف تماماً لا تعني إعادة بناء أي شيء. تعدّل بصمة التصميم، فتتبدّل كل الشاشات على اللوحة معاً — البنية والمحتوى يبقيان، والطبقة البصرية فقط هي ما يتغيّر.

text
Restyle everything to a darker, premium palette with a serif heading font.
Now try a playful version — brighter accent, more rounded corners.
Go back to the calmer neutral system from before.

هذا يجعل إعادة التنسيق رخيصة بما يكفي للاستكشاف. جرّب اتّجاهات متعدّدة بسرعة، التقط النسخ المفضّلة لديك بصفتها إصدارات، وقارن بينها قبل أن تستقرّ على واحد.

الرموز خلف الكواليس

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

css
:root {
  --color-primary: #7C3AED;
  --color-secondary: #00D5D8;
  --color-surface: #FFFFFF;
  --color-text: #131313;
  --color-text-muted: #6B7280;
  --radius-base: 10px;
  --space-unit: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

عندما تحوّل تصميماً إلى تطبيق ويب حقيقي، تنتقل مجموعة الرموز هذه معه، حتى يرث المنتج المُصدَّر نظام التصميم نفسه الذي رأيته على اللوحة.

نصائح للحصول على نظام نظيف

1
اضبط النظام مبكراً
حدّد بصمة التصميم قبل بناء صفحات كثيرة. الشاشات المبنية فوق نظام مستقرّ تحتاج إلى تنظيف أقل لاحقاً.
2
حافظ على لوحة محدودة
لون أساسي ولون أو لونان ثانويان وبضع ألوان محايدة عادةً ما تكفي. اللوحات المزدحمة بالألوان تجعل الشاشات تبدو غير متماسكة.
3
اختبر إعادة التنسيق مبكراً
أعد تنسيق صفحاتك القليلة الأولى مرّة بمجرّد بنائها. إن لم يصمد النظام بشكل جيد عبر مظهر جديد، فعالِج ذلك قبل أن تكبر اللوحة.
⚠
انتبه.تجاوز رموز النظام على شاشة واحدة بنصوص ثابتة يكسر القدرة على إعادة التنسيق دفعةً واحدة لتلك الشاشة. التزم بنظام بصمة التصميم ما لم تكن لديك حاجة متعمّدة لاستثناء.
الخطوات التالية
→ العودة إلى الدليل