Quill: اللبنات الأساسية لتصميم UX و UI السلس لـ Deriv

هل سبق وأن واجهت تناقضات في التصميم عبر منتجات مختلفة أو وجدت نفسك تقضي وقتًا ثمينًا في مهام متكررة في واجهة المستخدم؟ في Deriv، واجهنا هذه التحديات بشكل مباشر مع Quill، نظام التصميم الداخلي الخاص بنا. يحمل اسم "Quill" معنى خاصًا بالنسبة لنا. يربط تاريخ شركتنا بآمالنا في تصميم أفضل.

كما يشرح وقاص آوان، نائب الرئيس الأول للمنتج لدينا: "كان الريش يستخدم تاريخيًا للكتابة والرسم – وهو رمز لكيفية تشكيل نظام التصميم الخاص بنا للتجارب الرقمية من خلال توفير اللبنات الأساسية الضرورية. Quill 5، الاسم الأصلي للمبنى الذي يضم مقر Deriv في Cyberjaya، حيث بدأت رحلة نظام التصميم الخاص بنا."

ما يتجاوز الجماليات: كيف يحل Quill تحديات نظام تصميم واجهة المستخدم على نطاق واسع

Quill ليس مجرد جعل الأمور تبدو جميلة. إنه حل استراتيجي للمشكلات التصميمية المعقدة التي نواجهها مع نمو وتطور منتجاتنا. إليك كيف يجعل Quill الفرق:

• القابلية للتوسع: يتيح Quill لمنتجاتنا التوسع والتكيف بسرعة دون التضحية بالاتساق أو التأثير على الجودة.
• القابلية للصيانة والتحسين المستمر: مع Quill، يمكننا تحديث وتعزيز عناصر واجهة المستخدم بسلاسة، مما يطيل دورة حياة منتجاتنا.
• الإنتاجية: نستفيد من مكونات واجهة المستخدم المعرفة مسبقًا في Quill لتسريع جداول التطوير والقضاء على الحاجة للبدء من الصفر.
• جودة الكود والتصميم: يرفع Quill معاييرنا للتصميم والكود، مما ينتج عنه منتجات أكثر قوة وقابلة للاختبار وسهلة الوصول.
• الاتساق: يُمكن تحقيق تجربة مستخدم موحدة عبر جميع نقاط الاتصال بالمنتج بفضل Quill، مما يعزز هوية علامتنا التجارية.

عناصر تصميم واجهة المستخدم الخاصة بـ Quill من أجل نظام تصميم تجربة مستخدم فعّال

تكمن قوة Quill في مكوناته المنظمة جيدًا. لنلق نظرة على كيفية عمل الرموز، والأيقونات، والمكونات معًا لإنشاء نظام تصميم سلس.

أ. رموز Quill: أساس عناصر تصميم واجهة المستخدم المتسقة

تُعد رموز Quill أساس الاتساق، حيث تترجم قرارات التصميم (مثلًا في Figma) إلى أسماء فئات موحدة للمطورين. هذا يضمن مظهرًا وشعورًا موحدًا عبر جميع منتجات Deriv.

لنلقي نظرة أكثر تفصيلاً على هيكل رموز Quill، باستخدام gap وfont-size وline-height كمثال. لكل نوع رمز غرض محدد وقاعدة تسمية، مع لاحقة "-xx" التي تشير إلى أحجام مختلفة مثل xs (صغير جدًا)، sm (صغير)، md (متوسط)، وlg (كبير).

الفجوة

تعرف الفجوات بين العناصر لتصاميم متسقة (semantic-spacing-gap-xx، مثلًا semantic-spacing-gap-lg).

حجم الخط

يحدد حجم الخط لعناصر النص المختلفة، بما في ذلك العناوين (text-heading-xx)، نص الجسم (text-body-xx)، التسمية التوضيحية (text-caption)، والخط أحادي المسافة (text-code-xx).

ارتفاع السطر

يحدد التباعد العمودي بين سطور النص، مؤثرًا على قابلية القراءة وكثافة النص في العناوين (leading-heading-xx)، نص الجسم (leading-body-xx)، التسمية التوضيحية (leading-caption)، وكتل وقصاصات الشيفرة (leading-code-xx).

رموز Quill ليست مجرد إرشادات؛ إنها النسيج الرابط الذي يوازن كل بيكسل وسطر كود مع مبادئ تصميم Deriv.

ب. مكونات تصميم UX الخاصة بـ Quill: عناصر التصميم الأساسيّة لواجهة المستخدم

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

لتبسيط التكامل، جميع مكونات Quill متوفرة للتصدير عبر NPM (مدير حزم النود).

لنوضح ذلك بمثال مختصر لمكون الرابط الأساسي. (انظر الكود الكامل هنا.)

يمكننا بعد ذلك استخدام Storybook كملعب تفاعلي لعرض مكون الرابط الخاص بنا.  يمكنك استكشاف مستودع GitHub الخاص بنا لرؤية المزيد من الأمثلة.

استخدام مكونات تصميم Quill في قاعدة الكود

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

لدينا أيضًا إصدارات متعددة من بعض المكونات متوفرة في Quill للسماح بتنوعات في السلوكيات المطلوبة.

ج. أيقونات Quill: عناصر تصميم واجهة المستخدم الحيوية للاتساق البصري

قمنا بتطوير مجموعة شاملة من أيقونات SVG لتلبية احتياجات جميع مشاريعنا. هذه الأيقونات متاحة في مستودع GitHub الخاص بـ Quill icons ويمكن دمجها في قاعدة الكود الخاصة بنا باستخدام المعرفات الفريدة لها.

لدمج أيقونات Quill في أي مشروع، يجب أولاً تثبيت حزمة Deriv Quill icons في المشروع.

لاستخدام الأيقونات، يمكننا استيراد الأيقونات المحددة من حزمة NPM.

داخل المكون، يمكننا استخدام الأيقونة المستوردة كعنصر JSX.

نظرًا لحجم الأيقونات المستخدمة، أنشأنا تطبيق "Quill Icon Park"، وهو دليل بصري وتطبيق بحث يسمح للمصممين والمطورين بالبحث بسهولة في مكتبة أيقونات Quill.

الوصول إلى أيقونات Quill

لمن يرغب في الغوص في عالم أيقونات Quill، إليك مكان العثور على كل ما تحتاجه:

• مستودع المشروع: مستودع GitHub الخاص بنا وحزمة NPM.
  
• Quill Icon Park: استكشف مستودع GitHub والموقع الإلكتروني لمحة مفصلة عن الأيقونات، بما في ذلك معاينات بصرية وإرشادات الاستخدام.

تطور Quill: رسم مسار مستقبل تصميم UX و UI في Deriv

Quill ليس نظامًا ثابتًا؛ بل يتطور باستمرار لتلبية احتياجات Deriv المتغيرة. نعمل على تكاملات مثيرة:

• تكامل نظام إدارة المحتوى (CMS): سيمكن هذا منشئي المحتوى والمطورين من إدارة ونشر المحتوى داخل نظام CMS الخاص بنا مع الحفاظ على اتساق التصميم.
• تكامل تطبيق الهاتف المحمول: نحن أيضًا نمدد Quill ليشمل تطبيقات الهاتف المحمول، مع تحسين المكونات للشاشات الأصغر وضمان تجربة سلسة عبر جميع المنصات.

تأثير Quill على تصميم الواجهة

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

حول المؤلف

حبيب الإسلام ميا هو مهندس الواجهة الأمامية الرئيس في Deriv، شغوف بالتكنولوجيا، والذكاء الاصطناعي، ولغات الحاسوب، يبني تطبيقات سهلة الاستخدام ويكتب قصصًا عن اختبار A/B وتقنيات الواجهة الأمامية. في أوقات فراغه، يظل نشيطًا بممارسة عدة رياضات، مزيجًا بين حبه للتكنولوجيا والسفر.

‍