سیستمهای طراحی برای توسعهدهندگان
یکپارچگی یک تجمل نیست. کاربران انتظار دارند محصولات در هر صفحهای روان و قابل اعتماد به نظر برسند.
یک سیستم طراحی چیزی فراتر از رنگها و دکمههاست. این یک زبان مشترک برای تیمهای طراحی، توسعه و محصول است. این سیستم مجموعهای از کامپوننتها، الگوها و قوانین قابل استفاده مجدد است.
درون یک سیستم طراحی چیست؟
- کامپوننتهای UI مانند دکمهها و ورودیها
- توکنهای طراحی (Design tokens) برای رنگها و فاصلهگذاری
- قوانین دسترسیپذیری (Accessibility)
- استانداردهای کدنویسی
- مستندات
نمونههای محبوب شامل Google Material Design، Microsoft Fluent و IBM Carbon هستند.
یک سیستم طراحی مشکلات واقعی مهندسی را حل میکند.
۱. از کارهای تکراری جلوگیری میکند بدون یک سیستم، شما مدام همان دکمهها و فرمها را میسازید. یک سیستم طراحی به شما کامپوننتهای قابل استفاده مجدد میدهد. دیگر لازم نیست برای هر المان CSS اختصاصی بنویسید. شما از یک کامپوننت واحد استفاده میکنید که استایلدهی، حالتها (states) و واکنشگرایی (responsiveness) را مدیریت میکند. این کار باعث صرفهجویی در زمان میشود.
۲. یکپارچگی را تضمین میکند اگر یک صفحه دکمههای گرد و صفحه دیگر دکمههای مربعی داشته باشد، محصول شما ناتمام به نظر میرسد. یک سیستم طراحی باعث میشود دکمهها، فاصلهگذاریها و تایپوگرافی در همه جا یکسان باشند. کاربران مجبور نیستند رابط کاربری شما را دوباره یاد بگیرند.
۳. شکافهای ارتباطی را برطرف میکند طراحان و توسعهدهندگان اغلب یکدیگر را اشتباه درک میکنند. ممکن است یک طراح درخواست یک «دکمه مدرن» را داشته باشد و شما آن را به شکل متفاوتی تفسیر کنید. یک سیستم طراحی کلمات مبهم را با استانداردها جایگزین میکند. شما از توکنها و کامپوننتهای مشخص استفاده میکنید. در این حالت همه با یک زبان صحبت میکنند.
۴. معماری تمیز را ترویج میدهد به جای ایجاد فایلهای جداگانه برای هر دکمه، شما یک کامپوننت Button با انواع مختلف (variations) میسازید. این کار از اصل DRY پیروی میکند و نگهداری کد شما را آسانتر میکند.
۵. تغییرات سراسری را آسان میکند اگر یک برند رنگ اصلی خود را تغییر دهد، نباید صدها فایل را جستجو کنید. با استفاده از design tokens، شما مقدار را در یک نقطه تغییر میدهید و این تغییر بلافاصله در همه جا اعمال میشود.
۶. دسترسیپذیری را در هسته خود میسازد پیادهسازی دستی دسترسیپذیری در هر بار کار، دشوار است. یک سیستم طراحی شامل ناوبری با کیبورد و استانداردهای ARIA است. شما به صورت پیشفرض کامپوننتهای دسترسیپذیر دریافت میکنید.
یک سیستم طراحی صرفاً یک کتابخانه کامپوننت نیست. یک کتابخانه به شما میگوید چگونه یک دکمه بسازید، اما یک سیستم طراحی به شما میگوید که چرا آن دکمه وجود دارد و چگونه باید رفتار کند.
برای ساخت محصولات بهتر، سیستمهای هوشمندانهتری بسازید.
منبع: https://dev.to/pixel_mosaic/design-systems-for-developers-why-they-matter-18f0