جرد الواجهة

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

جرد لقطات الشاشة

جرد الواجهة (interface inventory) سهل الوصف ومملّ التنفيذ: تلتقط صورة لكل نسخة من كل عنصر في واجهات منتجاتك، وتجمعها حسب النوع. كل الأزرار على لوحة، وكل حقول الإدخال على لوحة ثانية، وكل النوافذ المنبثقة على ثالثة.

في Northwind أجريته مع مصمّمَي منتجات خلال أربعة أيام، على تطبيق الـ dispatch والموقع التسويقي. استخدمنا ملف Figma مشتركًا بصفحة لكل فئة: الأزرار، حقول الإدخال، القوائم المنسدلة، الأيقونات، الألوان، الطباعة، البطاقات، النوافذ المنبثقة، الجداول، الحالات الفارغة، و«أخرى». وحملت كل لقطة رابط مصدرها حتى يتحقّق منها أيّ أحد.

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

تدقيق الكود

تفوت لقطات الشاشة ما لا يراه المستخدم على الشاشة التي أمامك: حالات الـ hover، وحالات الخطأ، وصفحات الإدارة التي لا يعرضها أحد في العروض التوضيحية. الكود يلتقط كل ذلك. وأسرع تدقيق عالي القيمة هو إحصاء قيم الألوان الخام في ملفات الأنماط.

الفخّ الأول هو الصيغة. #FFF و#ffffff و#FfFfFf لون واحد. وحّد الصيغة قبل العدّ، وإلا ستكون أرقامك خاطئة وسيلاحظ أحدهم ذلك.

// A slice of Northwind's CSS, pulled from three repos.
const css = `
  .btn { background: #1F5AE0; color: #FFF; }
  .btn:hover { background: #1b50c9; }
  .card { border: 1px solid #DADFE4; color: #1f2933; }
  .meta { color: #5f6b7a; }
  .footer { color: #66737F; border-top: 1px solid #dde1e6; }
  .title { color: #222B35; }
  .banner { background: #ffffff; color: #1F2933; }
  .link { color: #1f5ae0; }
`;

function expand(hex) {
  const h = hex.slice(1).toLowerCase();
  return h.length === 3 ? '#' + [...h].map((c) => c + c).join('') : '#' + h;
}

const counts = new Map();
for (const match of css.match(/#[0-9a-fA-F]{3,6}\b/g)) {
  const value = expand(match);
  counts.set(value, (counts.get(value) ?? 0) + 1);
}

const ranked = [...counts].sort((a, b) => b[1] - a[1]);
console.log(`${ranked.length} distinct colors`);
for (const [value, n] of ranked) console.log(value, n);

شغّله وستحصل على تسع قيم مختلفة من ثماني قواعد قصيرة. لاحظ #1f2933 و#222b35: لونا نص لن يفرّق بينهما أحد. ولاحظ #dadfe4 و#dde1e6: رماديّان للحدود. هذه القيم شبه المكرّرة هي الاكتشاف الحقيقي. لم يختر أحد تسعة ألوان؛ بل اختار عدّة أشخاص لونًا واحدًا كلٌّ على حدة.

في كود حقيقي تطبّق الفكرة نفسها على كل ملف .css و.scss وكل styled-component، وتضيف تحليل rgb() وhsl(). وتذهب النتيجة إلى جدول بيانات: القيمة، وعدد مرّاتها، والملفات، وإلى أيّ مجموعة من القيم شبه المتطابقة تنتمي.

من الأرقام إلى الأولويات

الأرقام الخام لا تخبرك بما تفعل. ما يخبرك رقمان لكل عنصر:

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

ثم أضف التكلفة. لكل عنصر عالي الأولوية، اسأل فريق الهندسة كم تنفيذًا منفصلًا يصونون. كان في كود Northwind أحد عشر مكوّن زر، لكلٍّ منها خلل خاص في نمط التركيز (focus). جملة «نحن نصلح الخطأ نفسه إحدى عشرة مرة» هي التي جعلت الإدارة توافق على التوظيف. كثيرًا ما يقدّم المصمّمون الجرد كحجّة عن الجودة؛ أما القادة فيموّلونه كحجّة عن التكلفة.

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

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