index

Published on Oct 11, 2026

index

index - Document to Flipbook

Published on Oct 11, 2026

Description:

وثيقة هندسة وتجربة المستخدم UI/UX دليل تحسين واجهة تسجيل الدخول المؤسسية (clutteringDe (.1 مشروع صحاري ررالء لدارة المحروقات | الترقية إلى معاييرManagement Fleet Enterprise المشرلة الساسية ترمن في احتواء الاطاقة الحالية على: )الشعار، العنوان، الوصف، التاوياات في )Footerالحقول، نسيت رلمة المرور، زر الدخول، الدخول المن، 4 أيقونات، و ،Tabs Enterprise صغيرة ادال من نظام Startup مساحة موحدة؛ ما يمنحها انطااع واجهة ضخم. .2 ااستعادة والمان. الشعار ← العنوان الرئيسي ← الحقول الساسية ← زر تسجيل الدخول ← خيارات  التسلسل الاصري المقترح: الشرل والتوزيع الموصى اه: • اسم المستخدم: ] أدخل اسم المستخدم [ • رلمة المرور: ] أدخل رلمة المرور [ • ااستعادة: ] نسيت رلمة المرور؟ [ موضعها أسفل النموذج مااشرة ارااط واضح ادال من • الجراء الساسي: ] تسجيل الدخول [ .3جعلها صغيرة ومعزولة عن التسلسل الطايعي. (Password UX) اشرل اختياري آمن. )Me Remember" (توفير خيار "حفظ ايانات الدخول  للدخول المااشر. Enter ودعم زر )Autofocus (تفعيل الترريز التلقائي  .(detection Lock Caps (راشف الحروف الرايرة  إضافة مؤشر قوة رلمة المرور عند التسجيل.  .(Eye Toggle (توفير زر إظهار/إخفاء رلمة المرور صياغة رسائل خطأ واضحة ومحددة: "ايانات الدخول غير صحيحة، يرجى التحقق من  .4 اسم المستخدم ورلمة المرور"، وتجنب الرسائل العامة غير المفيدة. (Button States) .1 الحالة اافتراضية:)Default( زر اارز اتااين لوني واضح يحمل نص "تسجيل الدخول". .2 حالة التحميل:)Loading( "جاري تسجيل الدخول..." مع مؤشر انتظار دائري )Spinner (وتعطيل التفاعل. .3 حالة النجاح:)Success( التحرم. أيقونة تأريد خضراء ) ) قال اانتقال لشاشة .4 حالة الخطأ:)Error( تنايه مرئي االلون الحمر مع حررة اهتزاز (Shake(. خفيفة .5) Microinteractions) مع )transition Border (حررة إطار انسيااية :)Focus (عند ترريز الحقل  وحررة تفاعلية لليقونة. Label صعود الـ وتفعيل حالة الـ )msعند النقر على الزر: استجااة حررية ازمن )150–250  مع منع النقرات المترررة لمنع تررار الرسال. Loading.6 (Live Fleet Visualization) ثاات إلى تمثيل حي ومااشر Mockup Dashboard تحويل الاطاقات الحالية من مجرد حررة ايانات خفيفة مع خريطة مصغرة لمسارات الصهاريج.  لنظام إدارة السطول الاترولي العالمي: :)Status Live (مؤشرات فورية لعمليات التوزيع والوقود  ] 42 مرراة نشطة | 18 محطة | 705,021 لتر إجمالي الوقود [ احررة رسومية طفيفة. .7 (Premium Atmosphere) انساة شفافية منخفضة جدال مع طاقات ضوء ضاااية ناعمة )Grid (شارة خلفية  .Green/Navy Deep → Teal Dark :تدرج لوني عميق ومتزن  .8 لمنع ظهور الصفحة امظهر القوالب الجاهزة. )Gradients Radial( (Glassmorphism & A11y) خفيف + شفافية منضاطة + إطار دقيق + Blur (الزجاج المتوازن: استخدام معادلة  وتفادي ااعتماد على اللون وحده لتوضيح الخطاء. ،pxمساحات لمس ا تقل عن 44 معايير الوصولية العالمية: تااين ألوان معتمد، دعم التنقل االرامل عار لوحة المفاتيح،  .Blur دون ماالغة في الـ )ظل ناعم أهم 7 تغييرات مقترحة للتنفيذ الفوري: Fleet Live (تطوير الجانب اليسر إلى لوحة مراقاة أسطول حية 4. .)Success/Error/Loading (إضافة حاات التفاعل للنموذج 3. .)Typography (رفع جودة الخطوط والتاياوغرافي العراي 2. .)Card Login (تاسيط وتجريد اطاقة الدخول 1. تحسين التجاوب الرامل مع شاشات الهواتف المحمولة. 6. .)interactions-Micro (إضافة تفاعلت حررية متزنة وخفيفة 5. .)Visualizationومعايير أمان الجلسة. )FAدعم التحقق اخطوتين )2 7. النتيجة والتوجه العام الموصى به: وليس Evolution الواجهة الحالية ممتازة رقاعدة انطلق، والتطوير النسب هو نحافظ على الهوية واللوان والتقسيم الساسي، ونرتقي االتفاصيل الدقيقة :Revolution عالمي. واالنساة لمشروع صحاري ررالء لدارة المحروقات، Enterprise لتوارب مستوى مجرد شاشة تسجيل دخول تقليدية. فإن هذا ااتجاه يرسخ صورة المنصة رنظام إدارة أساطيل وخدمات اترولية متقدم، ادال من