→ كل الفيديوهات
فيديو · · قراءة 1 دقائق

10 أساليب لتصميم واجهات UI بالذكاء الاصطناعي

إذا بدت واجهاتك المصممة بالذكاء الاصطناعي متشابهة، فجرّب تسمية الأسلوب البصري الذي تريده بدل الاكتفاء بطلب «واجهة جميلة». يشرح Abdul Osama (عبدول أسامة) عشرة أساليب، من المحاكاة الواقعية إلى الواجهات المكانية، لتختار منها ما يناسب طلبك.

أهم النقاط

  • سمِّ أسلوب التصميم عند طلب واجهة من أداة AI بدل الاكتفاء بوصفها بأنها جميلة.
  • يعرض الفيديو عشرة أساليب مختلفة لتصميم UI.
  • تختلف الأساليب بين محاكاة الأشياء الحقيقية، والزجاج، والبساطة، والبطاقات المنظمة، والواجهات المكانية.
  • اختيار الأسلوب يوضح الاتجاه البصري، لكنه لا يغني عن تحديد نوع الواجهة المطلوبة.

إذا كانت الواجهات التي تنتجها باستخدام AI، أي الذكاء الاصطناعي، متشابهة، فابدأ بتحديد أسلوب تصميم UI الذي تريده. وUI هو تصميم العناصر التي يراها المستخدم ويتفاعل معها في الواجهة. يرى Abdul Osama (عبدول أسامة) أن معرفة أسماء الأساليب تساعدك على وصف الشكل المطلوب بدل تركه مفتوحًا لتفسير أداة AI.

«السبب مش الـ AI، السبب إنك ما تعرفش مدارس الـ UI Design المختلفة.» — عبدول أسامة

الأساليب التي يذكرها

| الأسلوب | كيف تبدو الواجهة؟ | |---|---| | Skeuomorphism | يحاكي خامات وأشكال أشياء حقيقية؛ قد يبدو الزر كزر مادي. | | Neumorphism | عناصر ناعمة وظلال خفيفة تجعلها تبدو بارزة من الخلفية. | | Glassmorphism | طبقات شفافة تشبه الزجاج مع تأثيرات ضبابية. | | Claymorphism | عناصر مستديرة تبدو كأنها مصنوعة من الصلصال. | | Minimalism | عناصر قليلة ومظهر بسيط ونظيف. | | Maximalism | ألوان قوية وتفاصيل كثيرة ومظهر ممتلئ بالحياة. | | Brutalism | مظهر جريء وخشن لا يسعى إلى الزخرفة التقليدية. | | Liquid Glass | واجهات زجاجية سائلة ولمعان يتفاعل مع المستخدم. | | Bento Grid | تقسيم المحتوى إلى بطاقات منظمة يسهل مسحها بصريًا. | | Spatial UI | واجهات للمساحات ثلاثية الأبعاد، ومنها تجارب AR وVR؛ أي الواقع المعزز والافتراضي. |

بالأرقام

  • 10 أساليب: عدد أساليب تصميم الواجهات التي يستعرضها الفيديو.

ماذا تطلب من أداة AI؟

بدل طلب «صمّم واجهة جميلة لبرنامج»، سمِّ الأسلوب الذي تقصده، مثل Minimalism أو Bento Grid، واذكر نوع الواجهة المطلوبة. هكذا تصبح نقطة البداية البصرية أوضح؛ ولا يعني ذلك أن أسلوبًا واحدًا مناسب لكل مشروع.

«سمّي الستايل اللي أنت عايزه.» — عبدول أسامة

الخطوة التالية

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

أسئلة وأجوبة

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

يربط عبدول ذلك بعدم تحديد أسلوب UI المطلوب. اقتراحه هو تسمية الأسلوب صراحةً عند طلب التصميم.

ما الفرق بين Skeuomorphism وNeumorphism؟

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

متى أذكر Bento Grid في طلب التصميم؟

اذكره عندما تريد تقسيم المحتوى إلى بطاقات منظمة يسهل مسحها بصريًا، كما يصفه الفيديو.

ما المقصود بـSpatial UI؟

هو تصميم واجهات للمساحات ثلاثية الأبعاد، مثل بيئات الواقع المعزز AR والواقع الافتراضي VR.

النص الكامل للفيديو

ديزايناتك بالـ AI كلها شبه بعض والسبب مش الـ AI السبب إنك ما تعرفش مدارس الـ UI Design المختلفة احفظ بقى الـ Design Styles العشرة دول وهيفرقوا معاك قوي في الـ Interfaces اللي هتعرف تطلعها بالـ AI أولهم الـ Skeuomorphism بيقلد خمات وأشكال الحياة الحقيقية فالزرار يحاول يطلعه لك أكينه زرار بجد بعد كده عندك الـ Neumorphism عناصر نعمة بـ Shadows خفيفة كأنها طلع من الخلفية بعد كده Glassmorphism طبقات زجاجية شفافة ولعب بالـ Blurring بعد كده عندك الـ Claymorphism عناصر شكلها كأنها معمولة من السلصال وده بيعجب الناس كتير يعني بعد كده عندك المينيماليزم طبعا ده قرفونا بيه أقل عناصر ممكنة كل حاجة بسيطة ونظيفة زي ما جوجل دايما بتحاول تعمل عكس ده تماماً بقى سيستم تاني اسمه الـ Maximalism ألوان قوية تفاصيل كتير وتفاصيل مليانة حياة وأشكال وألوان صارخة بعد كده في نظام اسمه Brutalism معرفش بيعذبوا الناس دول ولا ايه ستايل جريء خشن ومش بيحاول يبقى جميل يعني هو فكرته لعبكة بعد كده عندك الـ Liquid Glass عملته مايكروسوفت زمان في ويندوز فيستا قلش منهم بعد كده أبل عرفت بتعمله حلو وبقى ترندي دلوقتي واجهات زجاجية سائلة ولمعة بتتفاعل مع المستخدم وأكيد كلكم مستخدمي الآيفون والماك عارفينه بعد كده عندنا نظام الـ Bento Grid وده بايز بايز أبل برضو بتستخدمه بيقسم المحتوى في Cards منظمة وسهلة للمسح البصري عندك بعد كده الـ Spatial UI وده نظام واجهات مصمم للـ AR والVR في المساحات اللي فيها 3D كتير بدل بقى من هنا ورايح ما تيجي تقوله اعملي مثلا Software بيو آي حلو سمي الستايل اللي انت عايزه وتاخد شغل زي الفل أنا عبد الله وسامح تابعونا عشان تعرف كل جديد في الزكاء الصناعي والتسويق

Abdul Osama
عن الكاتب

عبدول أسامة (Abdul Osama): رائد أعمال ومسوّق مصري، مؤسس وكالة ASPIRED، يشرح الذكاء الاصطناعي والتسويق والأعمال بالعربي.

كُتب هذا النص بمساعدة الذكاء الاصطناعي من الفيديو، وقد يحتوي على أخطاء بسيطة في النقل. · نسخة Markdown

شاهد أيضًا

أربع مكتبات UI لمساعدة AI Agent في التصميم

أربع مكتبات UI لمساعدة AI Agent في التصميم

يعرض Abdul Osama (عبدول أسامة) أربع مكتبات لمكوّنات الواجهات يمكن تقديمها إلى AI Agent ليستند إليها عند بناء التصميم: Radix UI وArk UI وPark UI وAriakit. فكرته هي استخدام مكوّنات وأمثلة جاهزة كأساس، ثم تخصيص الألوان والخطوط بما يناسب المشروع.

5 أكتوبر 2026 · قراءة 1 دقائق
أنظمة تصميم مفتوحة المصدر لمشاريع Vibe Coding

أنظمة تصميم مفتوحة المصدر لمشاريع Vibe Coding

يوضح Abdul Osama (عبدول أسامة) أن طلب تصميم «شكله حلو» من الذكاء الاصطناعي لا يحدد له اتجاهًا بصريًا واضحًا. ينصح بتسمية نظام التصميم وتحديد لوحة الألوان والهوية البصرية، ويعرض خمسة خيارات مفتوحة المصدر يمكن تجربتها في مشاريع Vibe Coding.

5 أكتوبر 2026 · قراءة 2 دقائق
تجربة مساعد عبدول أسامة الصوتي على موقعه

تجربة مساعد عبدول أسامة الصوتي على موقعه

أضاف Abdul Osama (عبدول أسامة) مساعدًا ذكيًا بصوته إلى موقعه. يمكن للزائر التحدث معه إذا سمح اتصال الإنترنت بذلك، أو مراسلته نصيًا؛ ويجيب عن أسئلة حول عبدول وما يقدمه، وقد يطلب رقم الهاتف لإضافته إلى قائمة WhatsApp.

17 أكتوبر 2026 · قراءة 1 دقائق
مجتمع واتساب

انضم لتحديثات عبدول على واتساب

اكتب اسمك ورقم واتساب. أول ما يحصل حاجة كبيرة هتعرفها قبل الجميع: كورسات جديدة، أدوات، جلسات مباشرة، والتحديثات المميزة جدًا.

حددنا دولتك: الولايات المتحدة. غيّر الكود لو رقمك من دولة تانية.

اسأل الذكاء الاصطناعي عني