YANتصميم تطبيق ويب ولوحة معلومات
Autopost.ai. واجهة لتوليد المقالات ونشرها بالذكاء الاصطناعي
تصميم واجهة لتطبيق ويب يولّد المقالات بالذكاء الاصطناعي لمواقع WordPress، ويشمل لوحة المعلومات والإعداد ومحرر المقالات والوضعين الفاتح والداكن.
باختصار
- المشكلة
- تطبيق ويب يكتب مقالات بالذكاء الاصطناعي لمواقع WordPress. ومن يدفع يحتاج إلى أن يرى ما ينفقه وأن يبقى صاحب القرار فيما يُنشر.
- دوري
- صممت تدفقات المنتج وواجهته، من ربط نماذج الذكاء الاصطناعي إلى لوحة المعلومات ومحرر المقالات وقائمة المقالات، بالوضعين الفاتح والداكن.
- القرار الأساسي
- وضع الاستخدام والتكلفة بجانب أزرار التوليد، وترك الخطوة الأخيرة للشخص: بعد قراءة المقال، يقرر عمود واحد ما يحدث بعد ذلك، سواء النشر أو الحفظ كمسودة أو الجدولة أو التوليد من جديد.
- دوري
- مسارات المنتج وتصميم الواجهة
- حالة المشروع
- تصميم الواجهات · أرشيف Figma وDribbble
شاشات من ملف التصميم الأصلي في Figma ومن Dribbble، ببيانات تجريبية.
مساهمتي
Autopost.ai تطبيق ويب باللغة الإنجليزية لتوليد المقالات بالذكاء الاصطناعي وتجهيزها لموقع WordPress. يشمل عملي هنا الواجهة، من الإعداد الأول إلى شاشة مراجعة المقال وجدولته.
يعرض العمل المنشور على Dribbble بعنوان AI Content and SEO Generator المنتج نفسه، لذلك ضممت شاشاته إلى دراسة الحالة هذه. أرقام الاستخدام والأسماء وعناوين المقالات بيانات تجريبية.
إبراز الخطة والاستخدام
تبدأ لوحة المعلومات بالأمرين اللذين يأتي المستخدم من أجلهما: إنشاء عدة مقالات دفعة واحدة أو إنشاء مقال واحد. يقعان في أعلى العمود الأول، وفي كل منهما زر Generate with AI نفسه، بينما تمتد عدادات المقالات والمواضيع والكلمات في أعلى العمود الثاني.
تحتهما تكاليف الاستخدام لكل نموذج وتفاصيل الاشتراك ورسم بياني للرموز المميزة بحسب النموذج، وهي تجيب عن السؤال الذي يرافق أي أداة ذكاء اصطناعي مدفوعة: ما مقدار الاستخدام حتى الآن. كما يجاور Manage subscription الخطة، فيتحول الاطلاع إلى إجراء على الشاشة نفسها.
ربط النماذج أولًا
يجري الإعداد فوق لوحة المعلومات المموّهة، فيكون المنتج ظاهرًا أصلًا خلف الاستمارة. تطلب خطوة Setup your APIs مفتاحًا واحدًا لكل من Midjourney وGPT-3. تحت كل حقل سطر واحد يوضح مكان تسجيل الدخول ويحيل برابط إلى المفتاح، ويجعل زرّا Back وNext الخطوة جزءًا من تسلسل.
المراجعة قبل النشر
يتكوّن محرر المقالات من ثلاثة أعمدة. يضم العمود الأيسر الموضوع وإعدادات التوليد، مثل عدد الكلمات ونوع المقال والنبرة. أما الأوسط فيعرض المقال المولَّد مع صورته، وأما الأيمن فيحدد ما يحدث بعد ذلك: النشر أو الحفظ كمسودة أو الجدولة أو الجدولة التلقائية، مع اختيار الكاتب وحسابات التواصل الاجتماعي وزر لإعادة التوليد.
عند العودة إلى القائمة، تفصل التبويبات والتسميات بين المقالات المنشورة والمجدولة والمسودات وقيد التوليد، ويعرض المقال الذي لا يزال قيد التوليد تقدّمه على بطاقته.
استكشاف المظهرين
توجد الشاشات في الوضعين الفاتح والداكن. يبقى التخطيط كما هو بينما ينتقل موضع الإبراز: في الوضع الداكن تصبح الأزرار بيضاء وتتحول العناوين إلى الليلكي وتصبح أعمدة الرسم البياني فاتحة، فلا يضطر النيلي في النسخة الفاتحة إلى حمل التباين وحده.
