دیزاین سیستم چیست و کِی لازم میشود
«دیزاین سیستم» عبارتی است که معمولاً به معنای «کتابخانهٔ کامپوننت» به کار میرود. این تعریف ناقص است و همان جایی است که بیشتر تلاشها شکست میخورند.
کتابخانهٔ کامپوننت، خروجی یک دیزاین سیستم است. خود سیستم، مجموعهٔ تصمیمهایی است که آن کامپوننتها را تولید میکند.
تفاوت عملی: تیمی که فقط کامپوننت دارد، برای هر نیاز جدید دوباره تصمیم میگیرد. تیمی که سیستم دارد، جواب را از قواعد استخراج میکند.
چهار لایه، از پایین به بالا
۱. توکنها
کوچکترین واحد تصمیم: رنگها، اندازههای فاصله، اندازههای قلم، شعاع گوشه، سایه، مدت انیمیشن.
نکتهٔ کلیدی: توکن باید نام معنایی داشته باشد، نه نام ظاهری.
--color-primary خوب است. --color-blue بد است — چون روزی که رنگ برند
سبز شود، یا باید همهجا را عوض کنید یا متغیری دارید به نام «آبی» که سبز
است.
و مقیاس محدود بگذارید. اگر فاصلهها میتوانند هر عددی باشند، هر صفحهای عدد خودش را میگیرد. مقیاس ششتایی — ۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲ — تقریباً همیشه کافی است و همین محدودیت است که انسجام میسازد.
۲. عناصر پایه
دکمه، ورودی، برچسب، نماد، کارت. ساختهشده از توکنها.
برای هرکدام، همهٔ حالتها تعریف شود: عادی، روی آن، فشرده، فوکوس، غیرفعال، در حال بارگذاری، خطا.
حالت فوکوس را حذف نکنید — برای کاربر صفحهکلید تنها راه فهمیدن موقعیت است. جزئیاتش در دسترسپذیری وب.
۳. الگوها
ترکیبهای پرتکرار: فرم، جدول، پیمایش، پنجرهٔ بازشو، حالت خالی، صفحهٔ خطا.
حالت خالی و حالت خطا را جدی بگیرید. اینها بخشی از دیزاین سیستماند و تقریباً همیشه فراموش میشوند — بعد هر توسعهدهندهای برای «هیچ نتیجهای یافت نشد» چیز متفاوتی میسازد.
۴. قواعد
آنچه واقعاً سیستم را سیستم میکند و در کتابخانهٔ کامپوننت وجود ندارد:
- کِی از دکمهٔ اصلی استفاده کنیم و کِی از فرعی؟ در هر صفحه فقط یک دکمهٔ اصلی.
- لحن پیامها چیست؟ خطا چطور نوشته میشود؟
- تأیید عملیات خطرناک چه شکلی است؟
- چه چیزی انیمیشن میگیرد و چه چیزی نه؟
بدون این لایه، دو توسعهدهنده با همان کامپوننتها دو رابط متفاوت میسازند.
کِی لازم میشود
زود ساختنش، اتلاف است. ساختن دیزاین سیستم برای محصولی که هنوز شکل نگرفته، یعنی تثبیت تصمیمهایی که فردا عوض میشوند.
نشانههای اینکه وقتش رسیده:
بیش از یک نفر رابط میسازد. با یک نفر، انسجام در ذهن اوست.
بیش از یک محصول یا پلتفرم دارید. سایت و پنل و اپ که باید یکی به نظر برسند.
همان چیز را بارها ساختهاید. اگر پنج نوع دکمه در محصول دارید که هیچکدام دلیلی ندارند، علامت روشنی است.
تغییر ساده گران شده. «رنگ برند عوض شد» نباید یک هفته کار باشد.
عضو جدید طول میکشد تا همسبک شود.
اگر هیچکدام برقرار نیست، به دیزاین سیستم نیاز ندارید. به چند قاعدهٔ نوشتهشده نیاز دارید — که خودش قدم اول است.
مسیر تدریجی
روشی که در پروژهها جواب داده و از «پروژهٔ دیزاین سیستم» بهتر است:
۱. توکنها را استخراج کنید از آنچه همین حالا دارید. رنگها و فاصلههای موجود را فهرست کنید. معمولاً غافلگیرکننده است — سایتی که فکر میکردید سه رنگ دارد، هجده تا دارد.
۲. یکدست کنید. هجده رنگ را به شش برسانید.
۳. پرتکرارترین عناصر را استاندارد کنید. دکمه و ورودی و کارت. نه همه را.
۴. الگوها را وقتی تکرار شدند اضافه کنید، نه از قبل. قاعدهٔ ساده: بار سوم که چیزی را ساختید، تبدیلش کنید به کامپوننت.
۵. قواعد را بنویسید، هر بار که تصمیمی گرفتید.
مزیت این ترتیب: در هر مرحله چیزی قابل استفاده دارید و هیچوقت پروژهای ششماهه بدون خروجی ندارید.
آنچه در محصول فارسی خاص است
راستبهچپ باید در خود توکنها باشد، نه بهعنوان لایهای روی آن. یعنی از
ویژگیهای منطقی CSS استفاده کنید تا سیستم با تغییر dir بچرخد. تفصیلش در
وب فارسی.
مقیاس تایپوگرافی فارسی با لاتین یکی نیست. متن فارسی به اندازهٔ قلم و فاصلهٔ سطر بیشتری نیاز دارد.
نمادهای جهتدار دو حالت دارند. فلش «بعدی» در فارسی به چپ اشاره میکند. این باید در خود کامپوننت حل شود، نه اینکه هر بار دستی انتخاب شود.
اعداد. تصمیم بگیرید کجا فارسی و کجا لاتین، و آن را در سیستم ثبت کنید — وگرنه هر صفحهای متفاوت میشود.
اشتباهاتی که سیستم را میکشند
ساختنش بهعنوان پروژهٔ جدا از محصول. سیستمی که تیم محصول در ساختنش نقشی نداشته، استفاده نمیشود.
کاملگرایی. تلاش برای پوشش هر حالت ممکن، پیش از آنکه لازم شود.
نداشتن مالک. سیستمی که همه استفاده میکنند و هیچکس مسئولش نیست، بعد از شش ماه با محصول واگرا میشود.
فاصلهٔ طراحی و کد. اگر فایل طراحی و کد دو منبع مستقل باشند، از هم دور میشوند. توکنها باید یک منبع داشته باشند.
نبود مسیر استثنا. همیشه موردی هست که در سیستم نمیگنجد. اگر راهی برایش نگذارید، تیم دورش میزند و همانجا انسجام میشکند.
بازدهی که واقعاً میبینید
بعد از شش تا دوازده ماه:
- ساخت صفحهٔ جدید از ترکیب قطعات موجود، نه از صفر.
- تغییرات سراسری — رنگ، فاصله، فونت — در یک جا.
- عضو جدید سریعتر همسبک میشود.
- بحثهای تکراری طراحی حذف میشوند.
- کیفیت پایه بالا میرود، چون دسترسپذیری و حالتهای خطا یک بار درست حل شدهاند.
آن مورد آخر کمگفتهترین و ارزشمندترین است: دیزاین سیستم، راهی است برای اینکه کارهای درست را پیشفرض کنید — و کاری که پیشفرض باشد، در فشار تحویل هم انجام میشود.