اسحب للاستكشاف. مرّر أو استخدم إصبعين للتكبير. افتح المساعدة لعرض اختصارات لوحة المفاتيح.

Yan
متاح
للمشاريع
لنتحدث
Yan Fontão Boring view
All work

Case 036تصميم تطبيق ويب ولوحة معلومات

Autopost.ai

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

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهات · أرشيف Figma وDribbble
غلاف عرض Autopost التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

01

مساهمتي

Autopost.ai تطبيق ويب باللغة الإنجليزية لتوليد المقالات بالذكاء الاصطناعي وتجهيزها لموقع WordPress. يشمل عملي هنا الواجهة، من الإعداد الأول إلى شاشة مراجعة المقال وجدولته.

يعرض العمل المنشور على Dribbble بعنوان AI Content and SEO Generator المنتج نفسه، لذلك ضممت شاشاته إلى دراسة الحالة هذه. أرقام الاستخدام والأسماء وعناوين المقالات بيانات تجريبية.

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

02

إبراز الخطة والاستخدام

تبدأ لوحة المعلومات بالأمرين اللذين يأتي المستخدم من أجلهما: إنشاء عدة مقالات دفعة واحدة أو إنشاء مقال واحد. يقعان في أعلى العمود الأول، وفي كل منهما زر Generate with AI نفسه، بينما تمتد عدادات المقالات والمواضيع والكلمات في أعلى العمود الثاني.

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

لوحة المعلومات نفسها في الوضع الداكن، بأزرار بيضاء وعناوين ليلكية وأعمدة رسم بياني فاتحة.
يحافظ الوضع الداكن على التخطيط ويغيّر موضع الإبراز.

03

ربط النماذج أولًا

يجري الإعداد فوق لوحة المعلومات المموّهة، فيكون المنتج ظاهرًا أصلًا خلف الاستمارة. تطلب خطوة Setup your APIs مفتاحًا واحدًا لكل من Midjourney وGPT-3. تحت كل حقل سطر واحد يوضح مكان تسجيل الدخول ويحيل برابط إلى المفتاح، ويجعل زرّا Back وNext الخطوة جزءًا من تسلسل.

مربع حوار Setup your APIs فوق لوحة معلومات مموّهة، فيه حقول لمفاتيح Midjourney وGPT-3، وروابط مساعدة، وزرّا Back وNext.
توضح خطوة الإعداد من أين يأتي كل مفتاح API.
حاسوب محمول على حافة خرسانية يعرض محرر المقالات: إعدادات التوليد على اليسار، ومقال عن الجري في ماراثون مع رسمه التوضيحي في الوسط، وإعدادات النشر على اليمين.
يتيح المحرر تجهيز المقال المولَّد ومراجعته وجدولته.

04

المراجعة قبل النشر

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

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

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

05

استكشاف المظهرين

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

كولاج مائل لشاشات Autopost الفاتحة: المحرر وشبكة مسودات المقالات ولوحة المعلومات وإعدادات التوليد ومركز المساعدة وبطاقة ترحيب.
من عمل AI Content and SEO Generator: المحرر والمسودات ولوحة المعلومات والإعدادات معًا.
000

التعليمات

Yan Fontão
لمسة
تفتح شاشة
نقرة
تفتح شاشة
سحب
يتجوّل في اللوحة
العجلة
الفأرة تكبّر، ولوحة اللمس تحرّك، وإصبعان يكبّران
− +
تراجع لرؤية اللوحة كاملة، أو اقترب
الأسهم
في دراسة الحالة: ↑↓ لتبديل الدراسة، ←→ لتبديل الوسائط. في اللوحة: للتحريك
مسافة
تفتح أو تعود
Enter
يفتح
Esc Backspace
رجوع
Home
العودة إلى الوسط، ثم إلى المقدمة
PgUp PgDn
القناة السابقة أو التالية
Tab
يتنقل بين المشاريع والروابط
R
مشروع عشوائي
0–9
اكتب رقم القناة، 1–61
?
هذه الصفحة
الاختصارات

موسيقى اللوحة

الملفات مضغوطة وموحّدة الصوت للويب.

متاح
للمشاريع
لنتحدث

رسالة جديدة إلى يان

أخبرني من أنت وسأرد عليك.

000

عن يان

مرحبًا، أنا يان

مصمم منتجات/ مهندس تصميم

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

  • 2018بداية تطوير البرمجيات
  • UI + codeالتصميم والتنفيذ

عملت مع Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

البرازيل · عن بُعد أو هجين أو حضوريًا

صورة يان فونتاو جالسًا بسترة خضراء ونظارة ويمسك ميكروفونًا.
متاح
للمشاريع
لنتحدث
متاح
للمشاريع
لنتحدث
000

قناة مقفلة

بموجب اتفاقية عدم إفصاح

أدخل الرمز

اطلب الرمز من يان ↗
متاح
للمشاريع
لنتحدث
YAN FONTÃO دراسات الحالة

القناة 36 تصميم تطبيق ويب ولوحة معلومات

Autopost.ai

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

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهات · أرشيف Figma وDribbble

شاهده على Dribbble

غلاف عرض Autopost التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

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

شاشات من ملف التصميم الأصلي في Figma ومن Dribbble، ببيانات تجريبية.

مساهمتي

Autopost.ai تطبيق ويب باللغة الإنجليزية لتوليد المقالات بالذكاء الاصطناعي وتجهيزها لموقع WordPress. يشمل عملي هنا الواجهة، من الإعداد الأول إلى شاشة مراجعة المقال وجدولته.

يعرض العمل المنشور على Dribbble بعنوان AI Content and SEO Generator المنتج نفسه، لذلك ضممت شاشاته إلى دراسة الحالة هذه. أرقام الاستخدام والأسماء وعناوين المقالات بيانات تجريبية.

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

إبراز الخطة والاستخدام

تبدأ لوحة المعلومات بالأمرين اللذين يأتي المستخدم من أجلهما: إنشاء عدة مقالات دفعة واحدة أو إنشاء مقال واحد. يقعان في أعلى العمود الأول، وفي كل منهما زر Generate with AI نفسه، بينما تمتد عدادات المقالات والمواضيع والكلمات في أعلى العمود الثاني.

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

لوحة المعلومات نفسها في الوضع الداكن، بأزرار بيضاء وعناوين ليلكية وأعمدة رسم بياني فاتحة.
يحافظ الوضع الداكن على التخطيط ويغيّر موضع الإبراز.

ربط النماذج أولًا

يجري الإعداد فوق لوحة المعلومات المموّهة، فيكون المنتج ظاهرًا أصلًا خلف الاستمارة. تطلب خطوة Setup your APIs مفتاحًا واحدًا لكل من Midjourney وGPT-3. تحت كل حقل سطر واحد يوضح مكان تسجيل الدخول ويحيل برابط إلى المفتاح، ويجعل زرّا Back وNext الخطوة جزءًا من تسلسل.

مربع حوار Setup your APIs فوق لوحة معلومات مموّهة، فيه حقول لمفاتيح Midjourney وGPT-3، وروابط مساعدة، وزرّا Back وNext.
توضح خطوة الإعداد من أين يأتي كل مفتاح API.
حاسوب محمول على حافة خرسانية يعرض محرر المقالات: إعدادات التوليد على اليسار، ومقال عن الجري في ماراثون مع رسمه التوضيحي في الوسط، وإعدادات النشر على اليمين.
يتيح المحرر تجهيز المقال المولَّد ومراجعته وجدولته.

المراجعة قبل النشر

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

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

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

استكشاف المظهرين

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

كولاج مائل لشاشات Autopost الفاتحة: المحرر وشبكة مسودات المقالات ولوحة المعلومات وإعدادات التوليد ومركز المساعدة وبطاقة ترحيب.
من عمل AI Content and SEO Generator: المحرر والمسودات ولوحة المعلومات والإعدادات معًا.