كيف تصمم تطبيقاً جميلاً بالذكاء الاصطناعي

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

لماذا تبدو تصاميم الذكاء الاصطناعي عادية

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

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

الخطوة 1: اجمع المراجع قبل أن تكتب الطلب

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

لكل مرجع، اكتب ما الذي يعجبك بكلمات بسيطة:

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

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

الخطوة 2: اختر اتجاهاً تصميمياً وسمّه

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

ضع الاتجاه في أول طلب، مع من هو التطبيق لأجله:

ابنِ تطبيق حجوزات لاستوديو يوغا مستقل. الاتجاه التصميمي: هادئ ومينيمال، كجدول مواعيد مطبوع. خلفية بيج فاتح، ونص شبه أسود، ولون تمييز أخضر مريمي خافت للأزرار والحالات المحددة. سيريف للعناوين، وخط sans-serif نظيف للنص. مسافات واسعة، بلا تدرجات، بلا ظلال، بلا رموز تعبيرية. أولوية للهاتف.

الخطوة 3: ضع القواعد: الخطوط والألوان والمسافات

هذه العناصر الثلاثة تحمل معظم الجودة البصرية. أن تكون صريحاً بشأنها هو أكبر تحسين واحد يمكنك إحداثه.

الخطوط

• خط أو خطان. خط للعناوين وخط للنص، أو عائلة واحدة بعدة أوزان.
• مقياس للخطوط. عدد محدود من الأحجام يُستخدم بثبات، مثلاً 14 و16 و20 و28 و40 بكسل، بدلاً من أن يختار كل مكوّن ما يحلو له.
• نص قراءة مريح. حوالي 16 بكسل على الويب، وارتفاع سطر نحو 1.5، وطول سطر بين 60 و75 حرفاً للنصوص الطويلة.
• التسلسل الهرمي بالوزن والحجم، لا باللون. العناوين أعرض وأكبر، والنص الثانوي أصغر وبرمادي أخف.

الألوان

• معظمها محايد. الخلفيات والأسطح والحدود ودرجات الرمادي للنص تقوم بمعظم العمل.
• لون تمييز واحد للإجراءات والحالات المحددة. ثانٍ فقط إذا كان له دور واضح.
• ألوان دلالية للنجاح والتحذير والخطأ، وتُستخدم لها فقط.
• التباين. يطلب معيار WCAG 2 نسبة تباين لا تقل عن 4.5:1 للنص العادي، و3:1 للنص الكبير. النص الرمادي الفاتح على الأبيض يفشل كثيراً، فاطلب من الذكاء الاصطناعي أن يتحقق.
• الوضع الداكن، إن أردته، يُصمم بقصد لا يُقلب ببساطة.

المسافات والتخطيط

• مقياس مسافات مثل 4 و8 و12 و16 و24 و32 و48 و64 بكسل. كل شيء يلتزم به.
• المحاذاة. الحواف متراصة، والمحتوى على شبكة أو في عمود بعرض أقصى ثابت.
• التقارب. الأشياء المرتبطة قريبة من بعضها، والأشياء غير المرتبطة أبعد. هذه القاعدة وحدها تصلح معظم الشاشات المزدحمة.
• حاويات أقل. ليس كل شيء يحتاج إلى بطاقة. الحدود والفواصل والمساحات البيضاء تجمع المحتوى بهدوء أكبر في أحيان كثيرة.

طلب يجهّز النظام مرة واحدة:

قبل بناء المزيد من الشاشات، أنشئ نظام تصميم صغيراً واستخدمه في كل مكان: مقياس خطوط 14/16/20/28/40 بكسل، وارتفاع سطر للنص 1.5، ومقياس مسافات 4/8/12/16/24/32/48 بكسل، ودرجات محايدة من الأبيض القريب إلى الأسود القريب، ولون تمييز واحد (#3F6B5A) للإجراءات الأساسية فقط، والأحمر للأخطاء فقط. يجب أن تشترك الأزرار والحقول والبطاقات في نصف قطر حواف واحد. تحقق من أن كل النصوص تستوفي معيار WCAG AA للتباين.

إذا كنت تعمل في أداة تفهم الكود، فغالباً ما يتحول هذا إلى رموز تصميم (design tokens)، أي متغيرات CSS أو سمة Tailwind، وهذا يعني أن التغييرات اللاحقة تتم في مكان واحد.

الخطوة 4: ابنِ شاشة واحدة بإتقان أولاً

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

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

الشاشة المرجعية المكتملة تنقل ذوقك بشكل أوضح بكثير من أي صفة.

الخطوة 5: كرر التعديلات بطلبات محددة وصغيرة

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

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

الخطوة 6: التفاصيل التي تفصل الجيد عن العادي

بعد أن تصبح البنية صحيحة، هذه الأمور الصغيرة تجعل التطبيق يبدو مكتملاً:

• حالات الفراغ. ما يراه المستخدم الجديد دون بيانات: شرح قصير وإجراء واحد واضح، لا جدول فارغ.
• حالات التحميل. هياكل عظمية بشكل المحتوى نفسه، لا دوائر دوّارة في كل مكان.
• حالات الخطأ. رسائل بلغة بسيطة بجانب الحقل الذي سببها.
• حالات التمرير والتركيز والضغط لكل عنصر تفاعلي. حلقات التركيز مهمة لمستخدمي لوحة المفاتيح.
• محتوى حقيقي. استبدل «Lorem ipsum» و«John Doe» بنص وبيانات واقعية؛ فالمحتوى الوهمي يُخفي مشكلات التخطيط.
• أيقونات من مجموعة واحدة، بحجم أو حجمين، وبسماكة خط ثابتة.
• صور لها غرض. الصور الحقيقية لمنتجك أو مكانك أو أشخاصك أفضل من الصور العامة. وإذا استخدمت صوراً عامة أو مولّدة، فحافظ على أسلوب ثابت.
• النصوص. تسميات قصيرة ومحددة («احجز الحصة»، لا «إرسال») تفعل لجودة الإحساس بالتطبيق ما تفعله أي لمسة لون.

أخطاء شائعة

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

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

التصميم مع Mythex

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

الأسئلة