Tawsil · Design System v1.0

نظام تصميم توصيل
من المكوّن إلى التطبيق.

الأسس البصرية والمكوّنات وتدفق الشاشات لتطبيق توصيل الطعام. كل شاشة أدناه هي التطبيق الحقيقي يعمل داخل الإطار، وليست صورة ثابتة.

7 شاشات24 مكوّنًاRTL أولًاتجربة التطبيق ←

الألوان

COLOR TOKENS
Orange 500--brand #FF5A1F
Ink 900--ink #16131F
Cream 50--bg #FFF6EE
Mint 600--success #12A877
Sun 400--rating #FFC43D
Red 500--danger #E5484D
50100200300500600700900

الخطوط والمقاسات

TYPOGRAPHY · SPACING
Display 32/700
جوعان؟ اطلب الآن
Title 21/700
برغر الدار الكلاسيكي
Body 15/400
لحم بقري مفروم طازج، جبن شيدر وصلصة الدار.
Caption 12/500
20–30 دقيقة · 1.8 km
Numbers · Manrope
1 650 DA · 4.9 ★

المسافات (4pt)

4
8
12
16
24
32

الزوايا والظلال

radius-md 12–16
radius-lg 20–24
pill
elev-1 cards
elev-brand CTA

المكوّنات

COMPONENTS

الأزرار — أساسي، ثانوي، حدودي، معطّل

الحقول — عادي، نشط، خطأ

⌕ ابحث عن مطعم أو طبق...
FIRST0✓
0661 00 00رقم غير مكتمل
+2−

الرقاقات والشارات

🍽️ الكل🍔 برغر🍕 بيتزا🥗 صحي
توصيل مجاني★ 4.8🔥 الأكثر طلبًاتم التوصيلFIRST0
✓أُضيف برغر الدار إلى السلة

بطاقة مطعم

بيتزا القصبةبيتزا · فرن حطب · 2.6 km

شريط التنقل

⌂
الرئيسية
▤
طلباتي
◫
السلة
◯
حسابي
3عرض السلة1 950 د.ج

حالة الطلب

✓تم الاستلام✓التحضير🛵في الطريق⌂تم

تدفق الشاشات

USER FLOW — LIVE PROTOTYPE

قرارات التصميم

UX RATIONALE
الدفع عند الاستلام أولًاالخيار الافتراضي لأنه الأكثر استعمالًا محليًا، مع عرض المجموع النهائي قبل التأكيد لتقليل الإلغاءات.
شفافية الرسومالتوصيل ورسوم الخدمة والخصم تظهر سطرًا بسطر في السلة والدفع، والحد الأدنى للطلب يوضَّح قبل المتابعة.
مطعم واحد لكل سلةتنبيه واضح عند إضافة طبق من مطعم آخر بدل دمج طلبين يصعب توصيلهما معًا.
RTL أصيلالأسهم، الأدراج وترتيب الأرقام مصممة للعربية من البداية، مع عزل الأرقام اللاتينية لمنع انقلابها.
لمسة واحدة للإضافةزر + على صورة الطبق يفتح ورقة الخيارات، والكمية في السلة تظهر فوق الصورة.
تتبّع مطمئنوقت وصول بالدقائق، 4 مراحل، وبيانات السائق مع زري اتصال ورسالة.