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 لتوارب مستوى
مجرد شاشة تسجيل دخول تقليدية. فإن هذا ااتجاه يرسخ صورة المنصة رنظام إدارة أساطيل وخدمات اترولية متقدم، ادال من