الذكاء الاصطناعي يبني ما تطلبه… وذوقك هو الفارق: عشرة معايير لتصميم احترافي

الذكاء الاصطناعي يُخرج تصميمًا «يعمل»، لا تصميمًا جميلًا بالضرورة. الفرق بين موقع مبتدئ وموقع محترف ليس في الكود، بل في القرارات: أيّ عنصر هو الأكبر؟ ماذا يظهر؟ ما المسافة الصحيحة؟ وهذه قرارات تتّخذها أنت.

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

أولًا: الأساسات، ما يفرّق بين المبتدئ والمحترف#

1. الهرمية البصرية: عنصر واحد يسود#

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

• زرّ إجراء رئيسي واحد بلون مميّز في الشاشة؛ وإن احتجت زرًّا ثانيًا فاجعله بإطار دون تعبئة.
• لتُبرز عنصرًا لا تكبّره فقط، بل خفّف ما حوله؛ فالأهمية نسبية.
• قفزة واضحة في وزن الخط (800 للعنوان و400 للنص) أفضل من تدرّج خجول.

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

2. التباين: مقروء أولًا ثم جميل#

التباين فرق الوضوح بين النص وخلفيته. النص الرمادي الفاتح «الأنيق» أكبر فخّ في التصميم: يبدو راقيًا على شاشتك، وغير مقروء على هاتف مستخدمك تحت الشمس.

القاعدة: تباين النص الأساسي مع خلفيته لا يقل عن 4.5 : 1 (معيار WCAG)، والعناوين الكبيرة 3 : 1. الاختبار: اخفض سطوع شاشتك 30٪؛ ما اختفى تباينه ضعيف. وأي نص فوق صورة يحتاج طبقة تعتيم تحته.

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

3. المحاذاة: كل عنصر على خط#

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

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

ثانيًا: النظام، القواعد الرقمية التي تصنع الاتساق#

4. قاعدة الألوان 60-30-10#

60٪ من الشاشة لون محايد (الخلفية)، و30٪ لون أساسي (الهوية)، و10٪ فقط للون المميّز (الأزرار والتنبيهات). هذه العشرة بالمئة سرّ «قفز» الزر؛ فإن انتشر اللون المميّز في كل مكان فقد تميّزه.

• إن شعرت أن التصميم «مزدحم» فغالبًا تمدّد لون العشرة بالمئة؛ أزله من كل مكان عدا زرّ الإجراء.
• للنجاح والخطأ استخدم أخضر وأحمر هادئين لا فاقعين، وبكميات قليلة.
• قبل إضافة لون جديد جرّب درجة أفتح أو أغمق من ألوانك الحالية.

طبّق قاعدة 60-30-10: الخلفية بلون محايد [مثل #F7F3EC] بنحو 60٪ من الشاشة، واللون الأساسي [مثل #1A2B4C] للترويسة والعناوين والأقسام الداكنة بنحو 30٪، واللون المميّز [مثل #C9A961] للأزرار والروابط المهمة فقط بما لا يتجاوز 10٪. لا تستخدم اللون المميّز في الخلفيات أو النصوص الطويلة.

5. سلّم الخطوط: خط واحد وأحجام محسوبة#

الصفحة المحترفة فيها خط واحد وأربعة أحجام أو خمسة بينها فرق واضح (مثل 40 و28 و20 و16 و13). الأحجام العشوائية هي ما يعطي إحساس «الهواة» دون أن يعرف أحد السبب.

• ارتفاع السطر للنص العربي بين 1.7 و1.9؛ فالعربية تحتاج إلى تنفّس أكثر من الإنجليزية.
• السطر المثالي بين 50 و75 حرفًا؛ اطلب عرضًا أقصى للفقرات.
• الخط العريض للتمييز لا للزينة: إن كان 30٪ من النص عريضًا فلا شيء عريض فعلًا.
• التزم بخطوط مصمّمة للعربية مثل Cairo وTajawal وIBM Plex Sans Arabic؛ فبعض الخطوط الأجنبية تكسر اتصال الحروف.

استخدم خطًّا عربيًّا واحدًا [مثل Cairo] بسلّم أحجام ثابت: 40px للعنوان الرئيسي، و28px لعناوين الأقسام، و17px للنص، و13px للتفاصيل. ارتفاع السطر 1.8 للنص العربي، وعرض الفقرة الأقصى 65ch. الوزن 800 للعناوين فقط.

6. سلّم المسافات: مضاعفات الثمانية#

كل المسافات (الداخلية والخارجية والفجوات) من سلّم واحد: 8 و16 و24 و32 و48 و64. ليس لأن الثمانية رقم سحري، بل لأن السلّم الثابت يجعل كل شيء «من العائلة نفسها». والقاعدة الذهبية: المسافة بين الأقسام أكبر من المسافة داخلها، فتفهم العين التجميع وحدها.

استخدم سلّم مسافات ثابتًا بمضاعفات 8px: المسافات الداخلية للبطاقات 24px، وبين البطاقات 24px، وبين الأقسام 80px على الأقل. كن سخيًّا في المساحات البيضاء، وقرّب العناصر المرتبطة ببعضها.

7. الاتساق: القرار نفسه في كل مكان#

العنصر الواحد يأخذ قرارًا واحدًا مرة واحدة: نصف قطر زوايا واحد لكل البطاقات، وظل واحد، ونمط زرّ واحد. حين تختلف استدارة كل بطاقة، يشعر الزائر أن «شيئًا خاطئًا» دون أن يحدّده؛ وهذا أخطر أنواع الانطباعات.

عرّف متغيّرات CSS في أول الملف للألوان والمسافات ونصف القطر، واستخدمها في كل العناصر دون استثناء: --radius-card: 14px; --radius-btn: 9px; وظل واحد فقط لكل البطاقات. نمطان للأزرار فقط: أساسي ممتلئ وثانوي بإطار.

ثالثًا: اللمسات، الفرق بين الجيد والفاخر#

8. الظلال والعمق: ناعمة ومنخفضة#

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

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

استخدم ظلالًا ناعمة خفيفة فقط: box-shadow: 0 12px 30px -12px rgba(0,0,0,.25) لكل البطاقات، وعند المرور ترتفع البطاقة 4px ويقوى الظل قليلًا. لا ظلال سوداء حادّة ولا ظلال ملوّنة.

9. الحركة الصحيحة: عند التفاعل فقط#

الحركة الأنيقة تفاعل دقيق: ردّ فعل صغير وسريع على فعل المستخدم؛ يرتفع الزر عند المرور، وينضغط عند النقر، وتظهر رسالة التأكيد بنعومة. أمّا الحركة التي تحدث «وحدها» دون سبب فتحوّل الموقع إلى سيرك.

• المدة بين 150 و250 مللي ثانية؛ أسرع من ذلك لا يُرى، وأبطأ يعطّل.
• ثلاث حركات تكفي موقعًا كاملًا: مرور الأزرار والبطاقات، وظهور ناعم للأقسام مرة واحدة، ورسالة التأكيد.
• اطلب transition لا animation؛ فالأولى مرتبطة بطبيعتها بتفاعل.
• احترم دائمًا إعداد تقليل الحركة (prefers-reduced-motion)؛ فالحركة تُدير رؤوس بعض الناس فعلًا.

أضف تفاعلات دقيقة فقط: عند المرور يرتفع الزر قليلًا بمدة 200ms، وعند الضغط ينضغط. لا تضف أي حركة مستمرّة أو تلقائية دون تفاعل المستخدم، واحترم إعداد prefers-reduced-motion.

10. البساطة: احذف حتى يتعطّل#

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

راجع الصفحة واحذف كل عنصر زخرفي لا يخدم هدفًا واضحًا: الأيقونات الزائدة، والشارات، والتدرّجات، وأي نص يمكن اختصاره. الهدف تصميم نظيف لكل عنصر فيه وظيفة.

سبعة أخطاء خادعة#

تصميمات تبدو «جميلة» لحظة البناء، لكنها تخدع:

الوصفة الكاملة: أمر نظام التصميم#

ضع هذا الأمر في أول كل مشروع جديد؛ فهو يجمع المعايير العشرة في أمر واحد. عدّل الألوان على هويتك:

اتّبع نظام التصميم التالي في كل العمل القادم دون استثناء:
• الصفحة عربية RTL بالكامل، بخط عربي واحد [مثل Cairo]، والنص محاذى لليمين.
• الألوان بقاعدة 60-30-10: خلفية محايدة [#F7F3EC]، ولون أساسي [#1A2B4C]، ولون مميّز [#C9A961] للأزرار والإجراءات فقط. ألوان مسطّحة دون تدرّجات.
• عرّف متغيّرات CSS للألوان والمسافات ونصف القطر واستخدمها دائمًا: --radius-card: 14px; --radius-btn: 9px;
• سلّم خطوط ثابت: 40/28/17/13px، وارتفاع سطر 1.8، وعرض فقرة أقصى 65ch.
• مسافات بمضاعفات 8px وسخية: 24px داخل البطاقات و80px بين الأقسام.
• في كل شاشة بطل واحد: عنوان أكبر بوضوح وزرّ إجراء مميّز واحد، والباقي بإطار.
• تباين WCAG AA (4.5 : 1) لكل النصوص.
• ظل ناعم واحد: 0 12px 30px -12px rgba(0,0,0,.25).
• حركة عند التفاعل فقط بين 150 و250ms، مع احترام prefers-reduced-motion.
• التصميم للهاتف أولًا: افحص على 390px، والأزرار بارتفاع 48px.
• لا رموز تعبيرية في الواجهة، ولا عناصر زخرفية بلا وظيفة.
• جرّب بمحتوى عربي حقيقي طويل وتأكّد أن التصميم يحتمله.

قائمة الفحص قبل أن تقول «انتهيت»#

• أغمضت عينيّ وعرفت البطل في كل شاشة.
• خفضت سطوع الشاشة وبقيت كل النصوص مقروءة.
• اللون المميّز في الإجراءات فقط.
• خط واحد وسلّم أحجام ثابت، بلا حجم عشوائي.
• المسافات من سلّم الثمانية، والأقسام تتنفّس.
• الاستدارة نفسها والظل نفسه في كل البطاقات.
• الحركة عند التفاعل فقط.
• جرّبت على 390px بمحتوى عربي طويل حقيقي.
• لعبت لعبة الحذف، وكل عنصر باقٍ يدافع عن وجوده.