تصميم الواجهات وتجربة المستخدم
واجهات وتفاعل وأنظمة تصميم، مصمّمة على القيود التي ستواجهها الهندسة فعلًا.
نظرة عامة
واجهات وأنماط تفاعل ونظام تصميم لمنتج يجب أن يُبنى، لا أن يُعرض فقط. ويغطّي العمل الحالات التي تنتجها البيانات الحقيقية: الفارغة، وقيد التحميل، والمرفوضة بالصلاحيات. وأهميته تكبر حين يسير التصميم والهندسة في الوقت نفسه، وحين يجب أن تطابق الواجهة نموذج البيانات لا عرضًا تجريبيًا.
- مسارات المنتج وحالات الشاشات
- نظام التصميم ومكتبة المكوّنات
- رموز تصميم تقرأها الواجهة الأمامية مباشرة
- تخطيطان عربي وإنجليزي، معكوسان لا مترجمان
- النماذج والتحقّق ورسائل الخطأ
- التباين وترتيب التركيز وأحجام مناطق اللمس
- نماذج أولية للتفاعلات التي يصعب وصفها
ما الذي تستلمه
- 01مكتبة مكوّنات في Figma، تحمل التنويعات والحالات التي لكل مكوّن في المنتج.
- 02ملف رموز للون والخط والتباعد والاستدارة، تقرأه الواجهة الأمامية بدل أن تنسخ منه.
- 03مواصفة تفاعل لكل مسار، تغطّي نقاط الدخول وحالات الإخفاق وما يفعله زر الرجوع.
- 04قواعد عكس الاتجاه للتخطيط والأيقونات والمكوّنات ذات الاتجاه.
- 05نصوص الواجهة بالعربية والإنجليزية للتسميات والحالات الفارغة ورسائل الخطأ.
- 06سجل إمكانية وصول لكل شاشة: نسب التباين، وترتيب التركيز، وأحجام مناطق اللمس.
- Figma
- Figma Variables
- Figma Dev Mode
- DTCG design tokens
- Style Dictionary
- Storybook
- Tailwind CSS
- Radix UI
- CSS logical properties
- WCAG
كيف يسير المشروع
يبدأ التصميم مع قراءة المعمارية، لا بعدها. أول جولة هي المسارات والحالات على الشاشات التي تحمل أكبر قدر من المنطق، مرسومة على نموذج البيانات لا قبله. والشاشة الممتلئة بالبيانات هي النصف السهل. تُبنى المكوّنات مرة واحدة وتُسمّى بالاسم نفسه في Figma وفي المستودع، فتغيير رمز واحد يحرّك الاثنين. ويُراجع التخطيطان العربي والإنجليزي معًا في كل مرحلة، لأن العكس قرار بنيوي لا جولة ترجمة. والمراجعة عند المهندسين الذين سينفّذونه: ما لا يمكن بناؤه بالكلفة المتفق عليها يُغيَّر وهو ما يزال رسمًا. وبعد الإطلاق تُدار إصدارات المكتبة، وتُضاف الشاشة الجديدة إليها لا تُرسم بجانبها.
- واجهة أمامية تنفّذ من مكتبة لا تفسّر صورة.
- شاشات لديها جواب جاهز للفارغ والبطيء والمرفوض.
- عربية وإنجليزية تبقيان منتجًا واحدًا لا تخطيطين يتباعدان.
- تغيير بصري يُجرى في رمز واحد، ويصل إلى كل موضع يُستخدم فيه.
أخبرنا بما تبنيه.
أرسل لنا الفكرة بخطوطها العريضة، ونعود إليك بقراءة صريحة للنطاق والتسلسل وما يتطلبه تشغيله في الإنتاج.