أربع اتجاهات لتصميم لوحة الإدارة
نفس الشاشة — الرئيسية مع أقسام التجهيز واللمبة والعاجل — معمولة بأربع روح مختلفة، كلها بهوية فلوكة (الأزرق البترولي واللوجو). جرّب كل اتجاه فاتح وغامق وعلى الموبايل، وبعدين اختار واحد من تحت. اللي هيتختار هيبقى الأساس لكل صفحات اللوحة (كل صفحة بعد كده ليها تصميمها الخاص جوه نفس الروح).
المعاينة الحية
غيّر الاتجاه والوضع والجهاز. البيانات وهمية بس شكلها زي الشغل الحقيقي: أقسام التجهيز الأربعة، طلب عاجل أحمر فوق، وطلب عليه «لمبة» بتنبض.
صباح الخير يا عمر 👋
📦 التجهيز افتح الكل ←
| الطلب | العميل | القطع | المكان | الحالة |
|---|---|---|---|---|
| FL-260412 | منة ع. | 3 | A-04 | عاجل |
| FL-260398 | سارة م. | 6 | B-11 | ناقص N2515 |
| FL-260405 | ندى ح. | 2 | A-07 | جاري التحضير |
| FL-260407 | هبة س. | 4 | C-02 | جاري التحضير |
| FL-260409 | مريم ك. | 1 | A-01 | تم التحضير |
📊 الطلبات بالحالة
📈 المبيعات بالساعة التقرير ←
الأرقام والأسماء للتوضيح بس. الجرس بيرن بصوت في اللوحة الحقيقية (والصوت بيتقفل من الإعدادات).
الاتجاهات الأربعة
كل اتجاه ليه شخصية ومكان بيلمع فيه. اضغط «معاينة» عشان تشوفه فوق، و«اختار ده» عشان تسجل اختيارك.
المرسى Classic Navy
كلاسيكي وثابت: سايدبار بالأزرق البترولي الكامل زي اللوجو، محتوى فاتح هادي، ولمسة نحاسي في الأرقام. أقرب حاجة لشكل الأنظمة اللي الفريق متعود عليها بس أنضف بكتير.
- فريق كبير من أدوار مختلفة
- الشغل اليومي الطويل (مريح للعين)
- أسهل في التعلم
- أقل تميّز بصرياً
- السايدبار الغامق بياخد مساحة
الميناء Light Airy
خفيف ومريح: كل حاجة فاتحة، سايدبار أبيض بعلامة اختيار فيروزي، كروت مدورة بظلال ناعمة، وأول رقم مميّز بتدرج البحر. شكل منتجات الـ SaaS الحديثة.
- الإدارة والمودريشن وخدمة العملاء
- عرضه للعميل والشركاء
- الموبايل (بيتحول تطبيق بسهولة)
- أقل كثافة في الجداول الكبيرة
- محتاج عناية في التباين
غرفة العمليات Ops Dense
للتشغيل السريع: شريط أيقونات ضيق بدل السايدبار، جداول كثيفة، أرقام بخط ثابت العرض، وألوان حالات قوية تتشاف من بعيد. مصمم لشاشات المخزن ومحطة التقفيل والتابلت.
- الأوبريشن والتقفيل والتسليم
- شغل بالسكانر من غير ماوس كتير
- بيانات كتير في شاشة واحدة
- أقل دفئاً للإدارة
- محتاج تعوّد للأيقونات من غير نص
ورق بورسعيد Editorial
بروح الموقع الجديد («THE FLOUKA EDIT»): خلفية ورقي كريمي، خطوط رفيعة بدل الظلال، عناوين بخط El Messiri، ولمسة طوبي. لوحة ليها شخصية البراند نفسها.
- تطابق كامل مع هوية الموقع
- مميّز جداً ومش شبه أي نظام تاني
- التقارير والطباعة
- الخلفية الكريمي محتاجة شاشات كويسة
- أقل مناسبة للشاشات الكثيفة جداً
اختيار شائع ومنطقي: B «الميناء» للإدارة والطلبات والتقارير + شاشات التشغيل (التقفيل، التسليم، المراجعة بالمسدس) بروح C «غرفة العمليات». نفس الألوان والخطوط، بس الكثافة بتتغير حسب الشاشة.
المقارنة
تقييم من 5 لكل معيار — على حسب طبيعة شغل فلوكة (تشغيل مخزن كتير + إدارة + عرض للعميل).
| المعيار | A المرسى | B الميناء | C غرفة العمليات | D ورق بورسعيد |
|---|---|---|---|---|
| قرب من هوية فلوكة | ●●●●○ | ●●●●○ | ●●●○○ | ●●●●● |
| كثافة البيانات | ●●●○○ | ●●●○○ | ●●●●● | ●●●○○ |
| راحة العين لشغل 8 ساعات | ●●●●● | ●●●●○ | ●●●●○ | ●●●●○ |
| شاشات المخزن والسكانر | ●●●○○ | ●●●○○ | ●●●●● | ●●○○○ |
| الموبايل كتطبيق | ●●●●○ | ●●●●● | ●●●○○ | ●●●●○ |
| الوضع الغامق | ●●●●● | ●●●●○ | ●●●●● | ●●●○○ |
| الانطباع عند العرض للعميل | ●●●○○ | ●●●●● | ●●●○○ | ●●●●● |
| سهولة التعلم للفريق | ●●●●● | ●●●●● | ●●●○○ | ●●●●○ |
الثابت في كل الاتجاهات
أياً كان الاختيار، دي قواعد اللوحة اللي مش هتتغير.
فاتح وغامق
الفاتح هو الأساسي والافتراضي، والغامق بنفس العناية. الاختيار بيتحفظ لكل مستخدم من غير وميض عند فتح الصفحة.
عربي وإنجليزي
العربي الافتراضي. كل النصوص من ملفات ترجمة، الاتجاه بيتقلب لوحده، والتواريخ والأرقام حسب اللغة.
الموبايل تطبيق
شريط تبويب تحت، الجداول كروت، الفلاتر في ورقة من تحت، زرار عايم للإضافة، سحب للتحديث، وتتثبت كتطبيق (PWA).
صفحة = تصميمها
كل صفحة ليها ملف CSS وملف JS خاصين بيها. المشترك بس: الألوان، الأساس، المكونات، الحركات.
لغة التشغيل
نفس العلامات في كل مكان: الأحمر = عاجل، اللمبة الصفرا النابضة = محتاج انتباه، الشريط الملون = وسم العميل، الأخضر = جملة.
جرس حي بصوت
طلب جديد، لمبة، طلب تحويل مستني تأكيدك، تاجر جديد — بشارة وصوت يتغير أو يتقفل من الإعدادات.
الحركة
حركات كتير بس ليها معنى. نوعين: «إشارة» (حاجة اتغيرت ولازم تتشاف) و«تجميل» (دخول وتحويم).
| الحركة | النوع | فين | المدة |
|---|---|---|---|
| نبض اللمبة | إشارة | طلب فيه استثناء أو تنبيه | مستمرة لحد ما تتطفي |
| وميض الصف الجديد | إشارة | طلب جديد وصل لحظياً | 1.2 ث مرة واحدة |
| هزة + أحمر | إشارة | سكان غلط في محطة التقفيل | 300ms + صوت |
| علامة صح بتترسم | إشارة | طلب اتقفل صح | 400ms + صوت |
| عدّاد بيعد | تجميل | أرقام الرئيسية | 900ms |
| دخول متتابع | تجميل | الكروت والصفوف | ≤ 400ms |
| رسم الجرافات | تجميل | الرسومات | 800ms |
| هيكل تحميل لامع | تجميل | أي كارت بيحمّل لوحده | لحد التحميل |
| لوجو المرساة بيتحرك | تجميل | التحميل بين الصفحات | لحد التحميل |
كل الحركات بتقف لو الجهاز مظبوط على «تقليل الحركة».
الاختيار
اختيارك بيتحفظ على الجهاز ده، وبيظهر في الرئيسية مع باقي الموافقات.