نظام الواجهة والحركة والصور

تستخدم منصات الويب لغة حركة واحدة قائمة على motion 13 ومكوّنات AppMotionProvider وMotionRouteFrame وMotionActiveIndicator وMotionProgress وMotionPage وMotionStagger وMotionItem وMotionSurface من @shambus/ui. تعتمد الحركة على opacity وtransform فقط في الدخول والرفع والتقدم، بقيم قصيرة ملائمة لواجهات المنتجات. لا تستخدم الواجهات framer-motion القديم.

تتبع المكونات إعداد تقليل الحركة في نظام التشغيل. عند تفعيله تبقى العناصر في مواضعها وتقتصر الاستجابة على ظهور هادئ، كما توقف CSS الحركات والتمرير السلس غير الضروري. يطبق تطبيقا Flutter السلوك نفسه عبر MediaQuery.disableAnimationsOf(context).

قواعد الحركة في المنتج

• يبقى غلاف التطبيق ثابتاً عند الانتقال، ويبدّل MotionRouteFrame محتوى المسار خلال انتقال قصير لا يتجاوز بصرياً نحو 320ms.
• ينتقل مؤشر التنقل المشترك بين الروابط عبر layoutId بدلاً من إطفاء خلفية وإظهار أخرى، مع بقاء aria-current هو مصدر الحالة الدلالية.
• يتحرك تقدم الحجز بواسطة scaleX بدلاً من width، ويعرض progressbar وقيمته الدقيقة لقارئ الشاشة.
• تظهر القوائم المهمة بتتابع 55ms، ويتوقف التتابع بعد ثمانية عناصر حتى لا يؤخر الوصول إلى البيانات.
• تستخدم نوافذ الحوار منحنى CSS نابضاً مولداً، بينما تستخدم التنبيهات انتقال دخول/خروج قصيراً وتنتظر اكتمال الخروج قبل إزالة العنصر.
• شريط تقدم قراءة التوثيق مرتبط بالتمرير عبر useScroll وuseSpring، ولا يغير تخطيط الصفحة.

في Flutter تتحرك المسارات الفرعية مسافة 3.5% فقط مع ظهور يبدأ من 94%، بمدة 280ms والرجوع خلال 200ms. تبقى وجهات شريط العميل السفلي من نوع NoTransitionPage لأن الشريط هو السياق الثابت، بينما تستخدم المهام المتفرعة انتقالاً اتجاهياً يراعي RTL. إذا طلب النظام تقليل الحركة يعاد العنصر النهائي فوراً بلا إزاحة.

مراجع نمط التدفق

استخدمت المراجع لتحديد بنية التفاعل فقط، من دون نسخ ألوان أو علامة أو محتوى أي منتج:

• حجز الراكب: تقدم واضح، مراحل قابلة للرجوع، وملخص قريب من الإجراء كما في BlaBlaCar.
• لوحة الشركة: غلاف ثابت، قوائم قرار كثيفة، وإجراءات مرتبطة بالسياق كما في Jobber.
• يوم السائق: المهمة الحالية أولاً، ثم أقرب إجراء تشغيلي، كما في شاشتي Lyft وBlaBlaCar، مع تسلسل العمل المرجعي في Jobber.
• صفحة التعريف والوصول المبكر: تسلسل قيمة مختصر وإجراء واحد واضح مستلهم من TravelPerk، Joby، وZoox.

تبقى لوحة شام باص خضراء عربية وعلى أسطح slate باردة، ولا تستخدم الحركة لتعويض نقص البيانات أو لتأخير إجراء تشغيلي.

الخط العربي والبداية

يستخدم المنتج عائلة Cairo محلية لا تعتمد على Google Fonts وقت التشغيل. يحزم تطبيقا Flutter ملف Cairo-Variable.ttf المرخص وفق OFL داخل كل تطبيق، ويعرّفانه في pubspec.yaml ثم يطبّقانه صراحة في الثيمين الفاتح والداكن. يجب أن يحتوي build/web/assets/FontManifest.json بعد بناء release على عائلة Cairo ومسار الأصل المحلي؛ وجود الاسم في Dart وحده لا يكفي للتحقق.

تحزم تطبيقات الويب الثلاثة خط Cairo-Variable.ttf المحلي بواسطة next/font/local، وتستخدم صفحة «قريباً» والتوثيق نسخة WOFF2 فرعية محلية تغطي العربية واللاتينية، مع حفظ ملف الترخيص بجانب الخط. تقتصر سياسة font-src على الأصل نفسه. لا يجوز إعادة @import أو fonts.googleapis.com إلى أي من هذه الأسطح، لأن الخط جزء من أول عرض عربي ويجب ألا ينتظر طرفاً خارجياً.

لا تضيف شاشة البداية مهلة تجميلية ثابتة. ينتقل تطبيق السائق بعد أول إطار متاح فور اكتمال قرار الجلسة المحلية، بينما تبقى تهيئة الخدمات الحرجة فقط وراء بوابة البداية القابلة لإعادة المحاولة. تقاس سرعة البداية حتى ظهور حالة مفيدة مثل تسجيل الدخول أو «رحلات اليوم»، لا حتى ظهور splash مؤقت.

عند بقاء PUBLIC_SITE_MODE=coming-soon ينشر المشغل الصفحة صراحةً بواسطة deploy-production.sh apps coming-soon. يرفض السكربت هذا الهدف في وضع live، ولا يضيفه إلى مجموعة التطبيقات الافتراضية، كي لا يعيد تفعيل صفحة الإطلاق دون قصد. يستخدم الهدف مسار rollout نفسه ويفحص صحة الحاوية قبل إزالة النسخة السابقة.

تعتمد صفحة الإطلاق تكويناً تحريرياً تقوده الصورة بنسبة تقارب 62% على سطح المكتب، مع لون شام باص الأخضر ودرجاته فقط إلى جانب الأبيض. لا تستخدم بطاقات SaaS متراكمة أو زوايا pill في كل عنصر. يوضح النص حالتين منفصلتين بصدق: الإطلاق العام للركاب قريب، بينما العرض المخصص لشركات النقل متاح الآن. يقود الإجراء الأساسي إلى طلب نسخة تحمل هوية الشركة وبياناتها وصلاحياتها، ويظهر دخول الشركات كإجراء ثانوي. اعتمد القرار على مراجعة نمط الإطلاق المصور لدى Poly، وبطل الطريق الغامر لدى Lightship، والتكوين التحريري ذي اللون المهيمن لدى Going، من دون نسخ أصولها أو نصوصها.

تُخزّن صورة البطل محلياً بثلاثة أحجام WebP (640 و960 و1600) ويُحمّل المتصفح الحجم الملائم عبر srcset. الصورة مونتاج سفر تحريري مولد يجمع دلالات دمشق وحمص وحلب مع حافلة خضراء؛ لا تمثل مساراً جغرافياً يمكن رؤيته من نقطة واحدة ولا حافلة مشغل فعلية. يعتمد الدخول على stagger قصير وتحويل/شفافية فقط، بمنحنى spring قليل الارتداد مولد من Motion، ويتوقف كله عند prefers-reduced-motion.

معيار النص التسويقي العربي

يجب أن تجيب كل صفحة تسويقية، بعبارات قصيرة ومباشرة، عن أربعة أسئلة قبل أي وصف جمالي: ماذا نقدم؟ لمن؟ ما المشكلة التي نزيلها؟ ولماذا يهم ذلك في سوريا؟ تبدأ العناوين بالنتيجة التي تهم القارئ، ثم يسمي النص المهام الفعلية مثل مقارنة المواعيد والأسعار، اختيار المقعد، أو إدارة الرحلات والحافلات والفريق.

لا تستخدم ترجمة حرفية لعبارات SaaS مثل «تجربة سلسة»، «حل مبتكر»، «منصة متكاملة» أو «نقلة نوعية» من دون معنى تشغيلي يمكن التحقق منه. لا تستخدم صيغة التفضيل أو أرقاماً أو تغطية جغرافية غير مثبتة. تُكتب العربية الفصحى الخفيفة بمفردات مألوفة في سوريا، ويُقرأ النص بصوت مرتفع للتأكد من قصر الجملة ووضوح الضمير وطبيعية فعل الإجراء. يجب أن يصف CTA الفعل والنتيجة: «اطلب تجربة مخصصة لشركتك» أو «اختر مقعدك»، لا «ابدأ الآن» وحدها.

في صفحة «قريباً»، تعرّف الرسالة الفجوة مباشرة: سؤال الراكب بين أكثر من مكتب، وتوزع تشغيل الشركة بين أدوات متعددة. تربط أهمية المنتج بالوصول بين المحافظات للعمل والدراسة والعلاج والأهل، من دون تحويل الصفحة إلى تقرير أو ادعاء أن كل الرحلات متاحة قبل الإطلاق.

صور المسارات

توجد اثنتا عشرة صورة WebP مولّدة خصيصاً لمسارات العرض، بثلاثة مشاهد مختلفة لكل ممر:

• دمشق — حلب
• دمشق — اللاذقية
• حمص — دمشق
• حلب — اللاذقية

كل مشهد مونتاج سفر تحريري واقعي يجمع دلالات بصرية من نقطتي الممر مع طريق وحافلة كجسر بصري بينهما؛ مثال ذلك حضور هوية حمص وهوية دمشق في صورة الممر نفسها. هذا تركيب توضيحي مقصود، وليس ادعاءً بأن المعالم تظهر معاً من نقطة تصوير جغرافية واحدة.

تُحزم الصور محلياً في موقع العميل وتطبيق Flutter، ولا تعتمد الواجهة وقت التشغيل على مزود توليد أو رابط خارجي. يحل العميل الصورة من مدينتي الانطلاق والوصول حلاً حتمياً. يُستخدم معرّف الرحلة وموعدها لاختيار أحد المشاهد الثلاثة اختياراً ثابتاً، فتظهر الانطلاقات المتكررة على الممر نفسه بصور متنوعة من دون أن تتغير الصورة عشوائياً بعد إعادة الرسم. المسارات غير المعروفة تستخدم اختياراً ثابتاً من المجموعة نفسها، ويعامل الاتجاهان على الممر نفسه معاملة واحدة.

كل ظهور للصورة يحمل وصف وصول ووسم صورة توضيحية للمسار. لا تمثل الصورة حافلة المشغل الفعلية ولا يجوز استخدامها كشعار شركة.

هوية شركة النقل

شعار الشركة كيان مستقل عن صورة المسار. عند وجود شعار مرفوع يظهر كما هو مع object-fit: contain. عند عدم وجوده، تُنشئ الواجهة علامة أحرف وألوان حتمية من اسم الشركة. لا تستخدم أيقونة باص واحدة لكل الشركات، ولا تُنشئ شعاراً اصطناعياً قد يوحي بهوية تجارية لم توافق عليها الشركة.

قواعد الإضافة

1. استخدم مكونات الحركة المشتركة وثوابت المدة بدلاً من أرقام انتقال محلية جديدة.
2. لا تحرك خصائص التخطيط مثل width وheight عند إمكان استخدام التحويل.
3. اختبر الوضع العادي وprefers-reduced-motion: reduce.
4. افصل شعار المشغل عن صورة المسار، واكتب وصفاً صريحاً للصور التوضيحية.
5. أضف لكل ممر ثلاثة مشاهد على الأقل عندما سيظهر أكثر من موعد في القائمة.
6. حسّن WebP قبل إضافته، ثم أضف نسخة محلية لتطبيق الموبايل عند استخدامه هناك.

لغة السطوح التشغيلية

تعتمد الواجهات التشغيلية الهوية الخضراء الأصلية لشام باص: #10B981 للإجراءات الأساسية، ودرجات emerald التابعة لها للحالات التفاعلية، وأبيض مع slate بارد للخلفيات والنص والحدود. لا تستخدم الخلفيات الكريمية أو الرملية، ولا يضاف لون زخرفي ثانٍ إلى السطح. تبقى ألوان التحذير والخطر والمعلومة محجوزة لمعناها التشغيلي فقط. تتجنب الصفحات الرئيسية شبكات KPI التسويقية المنفصلة؛ تبدأ بدلاً من ذلك بحالة اليوم، ثم قائمة القرار، ثم الإجراءات المرتبطة بالسياق.

ينطبق ذلك أيضاً على shell المتصفح قبل بدء React أو Flutter: يجب أن تستخدم شاشة البدء خلفية #F8FAFC ومؤشر emerald، كي لا تظهر ومضة كريمية أو هوية مختلفة أثناء تحميل الحزمة. لا يجوز أن تعيد شاشات bootstrap تعريف لوحة ألوان مستقلة عن الثيم.

تُعطّل خاصية الجلب المسبق لروابط Next.js في الشريط الجانبي والقوائم التشغيلية الكثيفة. لا تحتاج شاشة الرحلات إلى تحميل صفحات كل صف وكل قسم قبل أن ينقر المستخدم؛ هذا يستهلك الشبكة والخادم ويؤخر البيانات المهمة. يبقى prefetch مقبولاً فقط لمسار تالٍ واحد واضح عندما تثبت القياسات أنه يحسن التجربة.

في لوحة الشركة يعني ذلك ترتيب المغادرات حسب الوقت وإظهار جاهزية الباص والسائق والإشغال والحجوزات التي تحتاج قراراً. وفي لوحة الإدارة يعني ذلك ترتيب الشركات والعروض المنتهية والحوادث المفتوحة في طابور واحد مع احترام صلاحيات المشرف.

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