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

​
إنشاء تصميم

1

افتح مشروعًا جديدًا

من لوحة معلومات Flowstep الخاصة بك، أنشئ مشروعًا جديدًا أو افتح مشروعًا موجودًا تريد إضافة الشاشات إليه.
2

اكتب موجهك

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

حدّد عدد الشاشات التي تريدها

افتراضيًا، ينشئ Flowstep شاشة واحدة. إذا أردت عدة شاشات، فاذكر ذلك صراحةً في موجهك. يمكن لـ Flowstep إنشاء حتى 6 شاشات من موجه واحد.
4

أنشئ

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

​
إيقاف التوليد

أثناء استجابة Flowstep، يتحول زر الإرسال إلى زر إيقاف (Stop Flowstep response). انقر عليه لإيقاف التوليد. في الطلب الذي يتضمن عدة شاشات، تبقى الشاشات التي انتهت على لوحتك، وتُزال الشاشات غير المكتملة. الإيقاف بعد أن يبدأ Flowstep ببناء الشاشات لا يزال يستهلك الرسالة — راجع الرسائل والحدود.

​
شاشة واحدة مقابل شاشات متعددة

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

​
المزيد من طرق إرسال الموجهات

النص ليس المدخل الوحيد. يمكنك أيضًا:
  • إرفاق ملفات — أضف صورًا (JPG وPNG وWEBP) أو مستندات (PDF وMD وTXT) بحجم يصل إلى 3 MB لكل ملف إلى الموجه، عبر السحب والإفلات، أو منتقي الملفات، أو اللصق. أشِر إلى الصورة المرفقة في موجهك، وسيدمجها Flowstep في الشاشات المُنشأة. راجع استخدام المراجع.
  • إملاء موجهك — انقر على زر الميكروفون في شريط الموجه (أو اضغط Cmd+Shift+V على Mac، أو Ctrl+Shift+V على Windows) وتحدّث لمدة تصل إلى 60 ثانية. يُضاف النص إلى ما كتبته بالفعل.
  • دع Flowstep يبحث في الويب — عندما يتطلب موجهك ذلك (على سبيل المثال، “انسخ صفحة الأسعار في Stripe”)، يمكن لـ Flowstep البحث في الويب وقراءة هوية الصفحة — الألوان والخطوط والشعار ومكونات واجهة المستخدم — واستخدامها في الشاشات المُنشأة. يقرر Flowstep بنفسه ما إذا كان سيبحث، لذا لا يُفعَّل مع كل موجه بالضرورة. لاحظ أن المواقع المُعاد إنشاؤها تستخدم صورًا وتنقلًا مختلفين عن الأصل.
  • تحديد إرشادات التصميم — حدّد قواعد أسلوب دائمة تنطبق على كل توليد في الملف. راجع إرشادات التصميم.

​
كتابة موجهات فعّالة

مثال على موجه لشاشة واحدة: “صمّم شاشة تسجيل دخول للجوال لتطبيق تتبع اللياقة، تحتوي على حقلي البريد الإلكتروني وكلمة المرور، وزر تسجيل الدخول، ورابط نسيت كلمة المرور.”
مثال على موجه لعدة شاشات: “أنشئ عدة شاشات لتدفق التسجيل في تطبيق توصيل الطعام — يغطي اختيار تفضيلات المطبخ، وإدخال عنوان التوصيل، وتأكيد أول طلب.”
مثال على موجه لرحلة كاملة: “غطِّ رحلة المستخدم كاملةً في تطبيق لتقارير المصروفات، من تقديم الإيصال حتى موافقة المدير.”
ضع هذه المبادئ في اعتبارك عند كتابة الموجهات:
  • حدّد المنصة (جوال، أو سطح مكتب، أو تابلت) حتى يضبط Flowstep أحجام الشاشات بشكل صحيح.
  • صِف هدف المستخدم، لا عناصر واجهة المستخدم فقط، فـ Flowstep يستنتج التخطيط من النية.
  • أدرج المحتوى المهم مثل التسميات أو الإجراءات أو البيانات إذا كان مهمًا للتصميم.
  • استخدم عبارات مثل “generate multiple screens” (أنشئ عدة شاشات) أو “cover the full user journey” (غطِّ رحلة المستخدم كاملة) لتفعيل الإخراج متعدد الشاشات.