محمود محسن
19 سبتمبر 2024
### ترجمة المدونة إلى اللغة العربية:
Flowbite هي مكتبة مفتوحة المصدر لمكونات واجهة المستخدم (UI) تم بناؤها باستخدام الفئات الموجهة للأدوات من Tailwind CSS. كما تتضمن عناصر تفاعلية مثل القوائم المنسدلة، والنوافذ المنبثقة، ومنتقيات التواريخ.
#### قبل الانتقال إلى العمل الرقمي
قد يكون من المفيد تدوين بعض الأفكار في دفتر الرسم. بهذه الطريقة، يمكنك التفكير بعمق قبل الالتزام بمشروع تصميم فعلي.
#### Flowbite: مكتبة المكونات القائمة على Tailwind CSS
اكتشفت مكتبة مكونات قائمة على Tailwind CSS تُدعى Flowbite. تحتوي هذه المكتبة على أكثر مكونات واجهة المستخدم استخدامًا مثل الأزرار، وقوائم التنقل، والبطاقات، وعناصر النماذج، والمزيد. جميعها مبنية باستخدام فئات Tailwind CSS.
#### البدء مع Flowbite
أولاً، عليك فهم كيفية عمل Flowbite. هذه المكتبة ليست إطار عمل آخر، بل هي مجموعة من المكونات المستندة إلى Tailwind CSS، ويمكنك نسخها ولصقها مباشرة من الوثائق.
تتضمن المكتبة أيضًا ملف JavaScript يتيح العناصر التفاعلية مثل النوافذ المنبثقة، والقوائم المنسدلة، ومنتقيات التواريخ. يمكنك إدراج هذا الملف في مشروعك اختياريًا عبر CDN أو NPM.
#### دليل البدء السريع
يمكنك الاطلاع على دليل البدء السريع لاستكشاف العناصر من خلال تضمين ملفات CDN في مشروعك. ولكن إذا كنت ترغب في بناء مشروع باستخدام Flowbite، يُفضل اتباع خطوات أدوات البناء بحيث يمكنك تنظيف وضغط ملفات CSS الناتجة.
ستحصل أيضًا على العديد من صفحات تطبيقات واجهة المستخدم، وواجهة تسويق، وصفحات التجارة الإلكترونية التي يمكن أن تساعدك في بدء مشاريعك بسرعة أكبر. يمكنك التحقق من جدول المقارنة لفهم الفروق بين الإصدار المفتوح المصدر والإصدار الاحترافي من Flowbite.
---
#### متى يكون التصميم مفيدًا؟
قد يبدو العمل الإضافي غير ضروري في البداية، ولكن هناك لحظات رئيسية يكون فيها النماذج الأولية مفيدة:
1. **اختبار قابلية الاستخدام**: هل يستطيع المستخدم معرفة كيفية الخروج من الشاشات؟ وهل يمكنه اتباع مسار المستخدم المخطط له وشراء شيء ما من الموقع؟
2. **إشراك الأطراف المعنية**: تحقق مما إذا كانت مربعات الموافقة على الخصوصية (GDPR) تظهر بشكل صحيح من خلال مشاركة النماذج مع فريق الحماية.
3. **إبهار العميل**: يمكن للنماذج الأولية أن تساعد في شرح أو بيع فكرتك من خلال توفير تجربة عملية للعميل.
4. **التواصل مع الفريق**: استخدام وسيلة تفاعلية لمعاينة واختبار عناصر التصميم يمكن أن يحسن الفهم بين المصممين والمطورين.
#### وضع الأسس للتصميم الأفضل
قبل الانتقال إلى العمل الرقمي، قد يكون من المفيد رسم بعض الأفكار في دفتر الرسم. بهذه الطريقة، يمكنك التفكير بعمق قبل الالتزام بمشروع التصميم.
---
#### فهم الطباعة
- **الخصائص الطباعية**: الخط هو مجموعة من الأحرف تشترك في أنماط محددة.
- **الأساس**: تمثل الخطوط أنماطًا مشتركة عبر مجموعة من الأحرف.
#### تصنيف الخطوط
- **الخطوط ذات الزوائد (Serif)**: هي أشكال صغيرة تظهر عند بداية أو نهاية الخطوط في الأحرف.
- الخطوط الكلاسيكية: تتميز بتباين منخفض بين السماكة والرقة.
- الانحناءات المائلة: تظهر بشكل واضح في الأحرف الصغيرة.
---
#### أفضل الممارسات لإنشاء النماذج الأولية
- **الدقة المنخفضة أو العالية**: تشير الدقة إلى مدى قرب النموذج من المنتج الحقيقي.
- **ابدأ من الداخل للخارج**: ركز على العناصر الأكثر أهمية للمستخدم، مثل زر "اشترِ الآن" أو معرض الصور، وخصص الأولويات بناءً على ذلك.
والآن، لديك كل ما تحتاجه لتصميم ومشاركة النماذج الأولية — مباشرة باستخدام Flowbite Figma.