مكتبة واحدة تحت أربعة منتجات: اثنا عشر تدرّجًا لونيًا، ومصفوفة حالات لكل عنصر تحكّم، ومكوّنات تستخدمها شاشات التاجر والمشغّل والفاحص والبائع جميعًا.
01السياق
شغّلت Carsparency أربع واجهات منتجات: موقعًا للبائعين، وتطبيقًا ميدانيًا للفاحصين، ولوحة إدارة داخلية للموظفين، ومنصة للتجار. لكلٍّ منها ملف Figma خاص بها، والأربع كلها مبنية على مكتبة مشتركة واحدة.
يوثّق ملف نظام التصميم هذه المكتبة في إحدى عشرة لوحة (الألوان، والخطوط، والأزرار، وحقول النماذج، ومفاتيح التبديل، ومسارات التنقّل، وترقيم الصفحات، والإشعارات المنبثقة، والنوافذ الحوارية، والترويسة والتذييل، والمكوّنات الصغيرة) وصفحة للأيقونات.
02المشكلة
لا تتشابه المنتجات الأربعة، وذلك عن قصد. فموقع البائعين فاتح ورحب، بينما تطبيق الفحص ولوحة الإدارة ومنصة التجار داكنة وكثيفة. ومع ذلك ينبغي أن يتعرّف البائع والتاجر على الشركة نفسها.
من دون مكتبة مشتركة، كان كل ملف سيعيد رسم أزراره وحقوله بنفسه، ولتباعدت المنتجات الأربعة شاشةً بعد شاشة.
03البنية
تنتظم الألوان في اثني عشر تدرّجًا (الأخضر الأساسي، والرمادي، والأزرق، والأخضر، والأحمر، والبرتقالي، والبنفسجي، والمرجاني، والأزرق البنفسجي، والأصفر البرتقالي، والكحلي، وأزرق سماوي). يمتد كل تدرّج من 900 إلى 50، ويستمر التدرّج الرمادي حتى الأبيض، وتُميَّز الدرجة 500 بوصفها القيمة الرئيسية. أما اللون الأساسي للعلامة، #00B86B، فهو الدرجة 500 من التدرّج الأخضر.
بُنيت المكوّنات على هيئة مجموعات تغطي متغيّراتها النوع والحجم والحالة معًا. فمجموعة الأزرار وحدها تضم 90 متغيّرًا: مصمتة ومحدّدة الإطار، أساسية ورمادية، بثلاثة أحجام، وبحالات الوضع الافتراضي والتمرير والضغط والتعطيل والتحميل.
04القرارات الرئيسية
مستخلصة من اللوحات ومن طريقة استخدام ملفات المنتجات لها.
يأتي كل لون في عشر درجات مع قيمة رئيسية مميَّزة. تحتاج الشاشات الداكنة الكثيفة إلى عدة ظلال متقاربة للأسطح والحدود والنصوص، والتدرّجات توفّرها دون ابتكار ألوان جديدة.
وُثّقت الأزرار والحقول كمصفوفات من النوع والحجم والحالة. فحالات التمرير والضغط والتعطيل والتحميل والخطأ مصمَّمة، لا متروكة لاجتهاد من يبنيها.
تصل الألوان والمكوّنات إلى ملفات المنتجات كأنماط ومثيلات مرتبطة بالمكتبة، لا كنسخ ملصوقة، فيمكن لأي تغيير في المكتبة أن يصل إلى المنتجات الأربعة.
يعتمد موقع البائعين الفاتح والأدوات الاحترافية الداكنة على التدرّجات نفسها من طرفيها المتقابلين، ما يحافظ على اتساق العلامة ويمنح كل فئة الكثافة التي تحتاجها.
05الحل
كل مكوّن تفاعلي مرسوم في كل حالة يمكن أن يكون عليها، لا في مظهره الساكن فقط. تغطي لوحة حقول النماذج حالات الوضع الافتراضي، ومع أيقونة، والمؤشَّر عليه، والخطأ، والتمرير، والقائمة المنسدلة، محدَّدةً وغير محدَّدة، للسمتين الفاتحة والداكنة، فلا يضطر المطوّر أبدًا إلى تخمين شكل الخطأ في السمة الداكنة.
تخدم التدرّجات نفسها السمتين كلتيهما. يستخدم الموقع الأطراف الفاتحة من التدرّج الرمادي للأسطح، وتستخدم المنتجات الداكنة طرفه الداكن، ويبقى الأخضر الأساسي لون الإجراء الثابت في الحالتين.
داكنة: تطبيق الفحص
فاتحة: معالج البائع
06المنظومة
أقوى دليل على نظام التصميم يكمن في الملفات التي تستخدمه. فالإطارات في ملفات Pro ولوحة الإدارة والفحص والموقع تأخذ ألوانها كلها من الأنماط المنشورة نفسها (تدرّجَي الأخضر الأساسي والرمادي)، لا من نسخ محلية.
ومكوّناتها تأتي من المكتبة نفسها أيضًا. فحقول النص والنوافذ الحوارية وترقيم الصفحات ومسارات التنقّل والأزرار وأيقونات النظام في ملفات المنتجات مثيلاتٌ لمكوّنات المكتبة، وصولًا إلى مجموعة مفاتيح تبديل يتطابق اسمها، بخطئه الإملائي، بين المكتبة وتطبيق الفحص.
07دوري
مستخلص من ملف نظام التصميم. لا تسجّل الملفات من عمل غيره على المكتبة، وأنماط ألوانها منشورة من ملف مكتبة خارج هذه المجموعة، لذا فهذا ليس ادّعاءً بالتأليف المنفرد.
اللوحات معلَّمة بـ Version 0.0.1، أي أنها نسخة مبكرة من المكتبة لا نسخة مكتملة.
08النتائج
هذه أعداد لعمل مصمَّم، لا نتائج. ولم يُسجَّل ما إذا كان فريق الهندسة قد اعتمد المكتبة في الكود.
09ما تعلّمته
تستحق المكتبة اسمها حين تستخدمها ملفات أخرى. والدليل هنا في طبقات ملفات المنتجات نفسها، لا في اللوحات.
رسم المكوّنات في وضعها الساكن سريع. معظم المتغيّرات الـ265 حالات، وهناك تحديدًا يُحسم الاتساق بين المنتجات الأربعة.
الاسم المكتوب بخطأ إملائي يبقى في كل منتج يستخدم المكوّن، ما يجعل ضبط التسمية قبل النشر أمرًا يستحق العناء.