تخطَّ إلى المحتوى
نظام الدعم
تصميم واجهات وتجربة المستخدم

واجهات مصمَّمة لأجل العمل نفسه

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

تصميم يصمد أمام الهندسة

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

الفوائد الأساسية

ما الذي يغيّره هذا في عملك.

تذاكر دعم أقل

معظم حمل الدعم مشكلة واجهة. تصميم الخطوة المربكة كما ينبغي أرخص من توظيف من يعالجها.

بناء أسرع

نظام تصميم بمتغيرات ومكوّنات حقيقية يجعل الشاشة الثانية تكلّف جزءًا يسيرًا من الأولى.

متاح الوصول بحكم البناء

التباين وحالات التركيز ومسارات لوحة المفاتيح والتسمية تُقرَّر في التصميم، حيث تغييرها زهيد.

مصمَّم بثلاث لغات

تخطيطات مُختبَرة بأطوال الكلمات التركية وتدفّق العربية من اليمين إلى اليسار، لا مترجمة بعد الحقيقة.

ما الذي نسلّمه

ما تحصل عليه فعلًا.

  • الاستكشاف ومسارات المستخدم

    من يفعل ماذا، وكم مرة، وأين تتعطل العملية الحالية فعلًا.

  • مخططات هيكلية

    بنية وتسلسل يُتفق عليهما قبل أن يتجادل أحد حول اللون.

  • تصميم الواجهة

    كل حالة ستوجد في الإنتاج: فارغة، وتحميل، وخطأ، ورفض صلاحية، وبيانات أكثر من اللازم.

  • أنظمة التصميم

    متغيرات ومكوّنات وقواعد — ما يبقي الشاشة الأربعين متسقة مع الأولى.

  • نماذج أولية تفاعلية

    مسار قابل للنقر لاختبار المستخدمين أو لعرضه على مستثمر، قبل أن يكلّف المسار وقت هندسة.

  • التسليم للمطوّرين

    حالات موثَّقة ومقياس مسافات ومتغيرات تُترجم إلى شيفرة لا إلى لوحة إلهام.

القدرات الأساسية

التخصصات الهندسية التي تستند إليها هذه الخدمة.

استكشاف المنتج
بحث المستخدمين
هندسة المعلومات
التخطيط الهيكلي
التصميم البصري والواجهة
التصميم المتجاوب
تخطيط RTL ومتعدد اللغات
إتاحة الوصول (WCAG)
النمذجة الأولية
حوكمة نظام التصميم

التقنيات التي نستخدمها

المنظومة التقنية التي نلجأ إليها، ووظيفة كل جزء فيها.

Figma

حيث تُصمَّم الواجهة وتُراجَع وتُسلَّم — ملف واحد يعود إليه التصميم والتنفيذ معًا.

Tailwind

نظام تنسيق قائم على الأدوات يحافظ على اتساق التصميم عبر قاعدة شيفرة كبيرة دون تراكم أنماط CSS مخصصة.

React

مكتبة مكوّنات للواجهات ذات الحالة المتغيرة باستمرار — لوحات التحكم والمحررات وكل ما يتحدث أمامك.

Vue.js

إطار واجهات تدريجي يمكن إضافته إلى صفحة واحدة من تطبيق قائم دون إعادة كتابته بالكامل.

TypeScript

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

انتشار التقنيات

التقنيات في هذه المنظومة موثَّق علنًا استخدامها من قِبل مؤسسات من بينها ما يلي.

GitLab

Vue.js

المصدر

Slack

TypeScript

المصدر

تُذكر هذه المؤسسات بوصفها مستخدمين موثَّقين للتقنيات المدرجة. وهي ليست عملاء لدى Vertex Arc، ولا يعني ذكرها وجود أي علاقة بها أو تأييد منها لـ Vertex Arc.

القطاعات التي نخدمها

قطاعات تناسبها هذه الخدمة عادةً.

  • البرمجيات كخدمة
  • التقنية المالية
  • الرعاية الصحية
  • التعليم
  • التجارة الإلكترونية
  • الخدمات المهنية

منهجية التنفيذ لدينا

كيف يسير العمل من أول محادثة إلى الدعم المستمر.

  1. الاستكشاف

    نحدّد ما يجب أن يفعله البرنامج، ومن يستخدمه، وأي القيود حقيقي. والمخرج نطاق مكتوب لا عرض بيع.

  2. البنية المعمارية

    نموذج البيانات والحدود والتكاملات والبنية التحتية تُقرَّر ويُتفق عليها قبل أن يكتب أحد شيفرة التطبيق.

  3. التصميم

    المسارات والواجهة، بما في ذلك الحالات الفارغة والخاطئة وحالات رفض الصلاحية التي تحدّد شعور المنتج فعلًا.

  4. التطوير

    بناء على دفعات قابلة للمراجعة ضمن بنية متعارف عليها، مع اختبارات حول الأجزاء التي يكلّف كسرها كثيرًا.

  5. الجودة والأمان

    اختبار وظيفي وفحوص أداء ومراجعة للمصادقة والتفويض ومخاطر الاعتماديات قبل الإطلاق.

  6. الإطلاق

    النشر والمراقبة وفترة متابعة لصيقة بينما تكتشف الحركة الحقيقية ما لم تكتشفه بيئة الاختبار.

  7. التحسين المستمر

    تحديثات وترقيات وأعمال جديدة عبر نظام الدعم، فيبقى المنتج مصانًا بدل أن يتقادم بصمت.

حالات الاستخدام

كيف يبدو هذا كمنتج مكتمل.

إعادة تصميم منتج يعمل

الإبقاء على ما يعرفه مستخدموك مع إصلاح الأجزاء التي تولّد حمل الدعم والتسرّب.

تصميم منتج جديد

من المسار الأول إلى نظام التصميم، فيبدأ البناء من شيء محدّد لا من وصف.

بناء نظام تصميم

توحيد منتج نما شاشة بعد شاشة في مكوّنات يبني عليها فريق كامل.

لماذا Vertex Arc

مصمّمون يعرفون ما يكلّف بناؤه كثيرًا

ننبّه إلى التفاعل الذي سيكلّف ثلاثة أسابيع وهو ما يزال مستطيلًا على صفحة.

كل الحالات لا الحالة المثالية فقط

تُصمَّم الحالات الفارغة والخاطئة وحالات رفض الصلاحية. وإلا اخترعها مطوّر في السادسة مساءً.

العربية تُصمَّم لا تُترجَم

تخطيط RTL وتنقّل معكوس وطقم خطوط عربي جزء من ملف التصميم لا مهمة لاحقة.

ونستطيع بناءه أيضًا

وجود التصميم والهندسة في فريق واحد يجعل التسليم حوارًا لا وثيقة لا يقرؤها أحد.

الأسئلة الشائعة

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