Carbon Design System

معرفی و داستان شکل‌گیری

Carbon Design System دیزاین‌سیستم متن‌باز IBM برای طراحی و توسعه محصولات و تجربه‌های دیجیتال است. این سیستم بر پایه IBM Design Language ساخته شده و مجموعه‌ای از اصول طراحی، Design Tokenها، کامپوننت‌ها، الگوهای تجربه کاربری، کتابخانه‌های کدنویسی و منابع طراحی را در اختیار تیم‌ها قرار می‌دهد.

IBM محصولات سازمانی متعددی دارد که توسط تیم‌های مختلف و برای صنایع گوناگون طراحی می‌شوند. نبود یک زبان مشترک میان این محصولات می‌توانست به رابط‌های ناسازگار، تکرار فرایند طراحی و افزایش هزینه توسعه منجر شود. Carbon با هدف تبدیل زبان طراحی IBM به یک سیستم اجرایی شکل گرفت تا تیم‌ها بتوانند تجربه‌هایی هماهنگ و مقیاس‌پذیر ایجاد کنند.

Carbon تنها یک کتابخانه کامپوننت نیست. IBM Design Language پایه‌های هویت بصری مانند رنگ، تایپوگرافی و Grid را مشخص می‌کند و Carbon این مفاهیم را به Token، کامپوننت، Pattern و کد قابل استفاده در محصول تبدیل می‌کند. همین ارتباط نزدیک میان زبان برند و پیاده‌سازی فنی، یکی از ویژگی‌های اصلی این سیستم است.

Carbon ابتدا برای نیازهای محصولات IBM ساخته شد، اما به‌صورت متن‌باز در اختیار سایر تیم‌ها نیز قرار دارد. این سیستم علاوه بر کتابخانه اصلی، اکوسیستم گسترده‌تری برای محصولات، وب‌سایت‌ها، فضای ابری، نمودارها و تجربه‌های مبتنی بر هوش مصنوعی دارد.

فلسفه و اصول طراحی

Carbon خود را سیستمی باز و فراگیر معرفی می‌کند. بازبودن به این معناست که سیستم فقط توسط یک تیم مرکزی ساخته نمی‌شود و اعضای جامعه می‌توانند در توسعه آن مشارکت کنند. این رویکرد به Carbon اجازه می‌دهد براساس نیازهای واقعی محصولات رشد کند و راه‌حل‌های موفق را به دارایی‌های مشترک تبدیل کند.

فراگیربودن نیز به نقش جدی دسترس‌پذیری در Carbon اشاره دارد. طراحی باید برای افراد با توانایی‌ها، شرایط و روش‌های تعامل متفاوت قابل استفاده باشد. دسترس‌پذیری در این سیستم یک قابلیت جانبی نیست، بلکه بخشی از تعریف کامپوننت‌ها، الگوها و معیارهای کیفیت محسوب می‌شود.

اصل مهم دیگر، وضوح در محصولات پیچیده است. بسیاری از محصولات IBM برای کارهای حرفه‌ای، تحلیل داده، مدیریت زیرساخت و تصمیم‌گیری‌های تخصصی ساخته می‌شوند. رابط باید بتواند حجم زیادی از اطلاعات را بدون ایجاد آشفتگی نمایش دهد و کاربر را در انجام وظایف پیچیده هدایت کند.

Carbon همچنین میان هماهنگی و انعطاف‌پذیری تعادل برقرار می‌کند. کامپوننت‌ها و Tokenهای مشترک باعث می‌شوند محصولات به یک خانواده تعلق داشته باشند، اما تیم‌ها همچنان می‌توانند سیستم را برای حوزه، محتوا و نیازهای خاص محصول خود گسترش دهند.

زبان بصری

زبان بصری Carbon دقیق، ساختاریافته و مناسب محصولات سازمانی است. استفاده گسترده از Grid، تایپوگرافی قدرتمند، رنگ‌های خنثی و سلسله‌مراتب روشن باعث می‌شود رابط حتی در صفحات داده‌محور، منظم باقی بماند.

رنگ‌های Carbon از پالت IBM Design Language گرفته شده‌اند. طیف خاکستری نقش اصلی را در ساختار رابط دارد و رنگ آبی IBM معمولاً برای اقدامات اصلی و عناصر تعاملی استفاده می‌شود. رنگ‌های دیگر به‌شکل محدودتر برای وضعیت‌ها، پشتیبانی بصری، نمودارها و ایجاد تأکید به کار می‌روند.

Carbon رنگ‌ها را از طریق Tokenهای معنایی مدیریت می‌کند. به‌جای استفاده مستقیم از مقادیر Hex، Tokenهایی مانند متن اصلی، Border ظریف، لایه پس‌زمینه، خطا یا Focus تعریف می‌شوند. مقدار این Tokenها براساس Theme تغییر می‌کند، اما نقش آن‌ها ثابت باقی می‌ماند.

این سیستم چهار Theme اصلی دارد: White و Gray 10 برای رابط‌های روشن، و Gray 90 و Gray 100 برای رابط‌های تاریک. مدل لایه‌بندی رنگ کمک می‌کند سطوح مختلف بدون وابستگی کامل به سایه از یکدیگر جدا شوند. در تم‌های روشن، لایه‌های سفید و خاکستری روشن به‌صورت متناوب استفاده می‌شوند و در تم‌های تاریک، هر لایه نسبت به سطح زیرین کمی روشن‌تر می‌شود.

تایپوگرافی Carbon با خانواده فونت IBM Plex ارتباط نزدیکی دارد. IBM Plex در نسخه‌های Sans، Serif و Mono عرضه شده و نقش مهمی در انتقال هویت IBM دارد. Type Tokenها ترکیبی از اندازه، وزن، Line Height و Letter Spacing را تعریف می‌کنند و استفاده منظم از آن‌ها باعث ایجاد سلسله‌مراتب هماهنگ در محصولات می‌شود.

یکی از ویژگی‌های شاخص Carbon، سیستم 2x Grid است. این Grid براساس واحدهای کوچک و نسبت‌های دوبرابری شکل گرفته و میان ستون‌ها، فاصله‌ها، تایپوگرافی و اجزای رابط ارتباط برقرار می‌کند. هدف آن فقط ایجاد ستون‌بندی نیست؛ بلکه تلاش می‌کند تمام عناصر صفحه از منطق فضایی مشترکی پیروی کنند.

حرکت در Carbon برای توضیح رابطه میان عناصر، ارائه بازخورد و هدایت توجه استفاده می‌شود. Motion باید کاربردی باشد و نباید انجام وظیفه را کند یا تمرکز کاربر را مختل کند. مدت و رفتار انیمیشن براساس نوع تغییر و فاصله‌ای که عنصر طی می‌کند انتخاب می‌شوند.

کامپوننت‌ها و الگوهای طراحی

Carbon مجموعه گسترده‌ای از کامپوننت‌های عمومی و سازمانی ارائه می‌دهد. Button، Checkbox، Dropdown، Text Input، Tabs و Tooltip در کنار اجزای پیچیده‌تری مانند Data Table، Tree View، Date Picker، Combo Box، Structured List، Modal، Notification و UI Shell قرار دارند.

کامپوننت‌ها فقط از نظر ظاهری مستند نشده‌اند. مستندات آن‌ها کاربرد، رفتار، انواع، حالت‌ها، محتوا، دسترس‌پذیری و نحوه استفاده در طراحی و کد را پوشش می‌دهد. این ساختار به طراح و توسعه‌دهنده کمک می‌کند برداشت مشترکی از عملکرد هر عنصر داشته باشند.

Data Table یکی از کامپوننت‌های مهم Carbon است و نشان می‌دهد این سیستم تا چه اندازه برای محصولات داده‌محور طراحی شده است. قابلیت‌هایی مانند مرتب‌سازی، انتخاب، گسترش ردیف، عملیات گروهی و Pagination به تیم‌ها اجازه می‌دهند جدول‌های پیچیده را براساس ساختاری استاندارد ایجاد کنند.

UI Shell نیز ساختار کلی محصولات را تعریف می‌کند و می‌تواند شامل Header، Navigation، Side Panel و دیگر عناصر سراسری باشد. استفاده از Shell مشترک باعث می‌شود پیمایش در محصولات مختلف IBM قابل پیش‌بینی‌تر باشد.

Carbon علاوه بر کامپوننت‌ها، Patternهایی برای رسیدن کاربر به یک هدف مشخص ارائه می‌دهد. Patternها نحوه ترکیب چند کامپوننت در یک جریان یا سناریوی کامل را توضیح می‌دهند و فاصله میان اجزای منفرد و تجربه نهایی محصول را کاهش می‌دهند.

Carbon Charts نیز برای نمایش داده در قالب نمودارهای هماهنگ و دسترس‌پذیر توسعه یافته است. وجود این کتابخانه برای محصولاتی که بخش مهمی از تجربه آن‌ها به تحلیل و مقایسه داده وابسته است، ارزش زیادی دارد.

تجربه استفاده و شخصی‌سازی

Carbon منابع رسمی طراحی در Figma و کتابخانه‌های کدنویسی برای React، Angular، Vue، Svelte و Web Components ارائه می‌دهد. کتابخانه React اصلی‌ترین و بالغ‌ترین پیاده‌سازی آن محسوب می‌شود، اما وجود گزینه‌های دیگر استفاده از سیستم را در پروژه‌های مختلف امکان‌پذیر می‌کند.

Design Kitهای فیگما شامل کامپوننت‌ها، استایل‌ها، عناصر پایه و Wireframeها هستند. هماهنگی نام‌گذاری و رفتار اجزا میان Figma و کتابخانه‌های کدنویسی، فرایند تحویل طراحی به توسعه را ساده‌تر می‌کند.

Carbon برای رنگ، تایپوگرافی، فاصله‌گذاری و دیگر ویژگی‌ها از Token استفاده می‌کند. این ساختار باعث می‌شود تغییرات پایه در مقیاس بزرگ و به‌شکل هماهنگ اعمال شوند. Themeها نیز امکان استفاده از تجربه‌های روشن و تاریک را فراهم می‌کنند.

بااین‌حال، Carbon به‌شدت با هویت بصری IBM پیوند خورده است. استفاده از IBM Plex، آبی IBM، Grid و سبک خاص کامپوننت‌ها باعث می‌شود ظاهر پیش‌فرض آن به‌راحتی قابل تشخیص باشد. تیم‌هایی خارج از IBM باید مشخص کنند که می‌خواهند از زبان بصری Carbon استفاده کنند یا فقط ساختار فنی و رفتاری آن را به‌عنوان پایه سیستم خود در نظر بگیرند.

شخصی‌سازی عمیق Carbon امکان‌پذیر است، اما همیشه ساده نیست. تغییر پراکنده ظاهر کامپوننت‌ها می‌تواند هماهنگی سیستم و امکان دریافت به‌روزرسانی‌ها را کاهش دهد. بهتر است تغییرات در سطح Token، Theme و کامپوننت‌های توسعه‌یافته روی سیستم انجام شوند.

Carbon for AI نیز یکی از بخش‌های جدیدتر این اکوسیستم است. این چارچوب برای مشخص‌کردن حضور هوش مصنوعی، محتوای تولیدشده توسط AI و قابلیت‌های توضیح‌پذیری طراحی شده است. هدف آن ایجاد شفافیت و کمک به کاربر برای تشخیص نقش هوش مصنوعی در تجربه محصول است.

دسترس‌پذیری و RTL

دسترس‌پذیری یکی از قوی‌ترین بخش‌های Carbon است. کامپوننت‌های این سیستم از IBM Accessibility Checklist پیروی می‌کنند که براساس WCAG، Section 508 و استانداردهای اروپایی شکل گرفته است.

راهنمای Carbon موضوعاتی مانند کنتراست رنگ، استفاده از Screen Reader، پیمایش با صفحه‌کلید، ساختار محتوا، حالت Focus و ارائه جایگزین برای اطلاعات دیداری یا صوتی را پوشش می‌دهد. Focus در بسیاری از اجزا با Border واضح نمایش داده می‌شود تا کاربران صفحه‌کلید بتوانند موقعیت خود را تشخیص دهند.

Carbon تأکید می‌کند که دسترس‌پذیری اجزای منفرد به‌تنهایی برای ساخت یک محصول دسترس‌پذیر کافی نیست. ترتیب محتوا، ساختار صفحه، متن‌های جایگزین، مدیریت Focus و ترکیب کامپوننت‌ها باید در تجربه نهایی بررسی شوند.

Themeهای Carbon نیز برای ایجاد کنتراست مناسب طراحی شده‌اند، اما استفاده نادرست از رنگ‌ها یا جایگزین‌کردن Tokenها می‌تواند این تعادل را از بین ببرد. بنابراین هنگام شخصی‌سازی باید ترکیب‌های رنگی و وضعیت‌های تعاملی دوباره آزمایش شوند.

در زمینه RTL، Carbon نسبت به برخی سیستم‌هایی مانند Ant Design یا Bootstrap راهنمای عمومی و متمرکز کمتری ارائه می‌دهد. ممکن است بخش‌هایی از ساختار و کامپوننت‌ها با تعیین جهت صفحه سازگار شوند، اما نباید پشتیبانی کامل از فارسی یا عربی را بدون آزمایش فرض کرد.

محصول فارسی نیازمند بررسی جداگانه Navigation، Data Table، Pagination، Breadcrumb، فرم‌ها، Popupها، آیکن‌های جهت‌دار و حرکت Focus است. برای تایپوگرافی نیز باید فونت فارسی مناسبی جایگزین یا در کنار IBM Plex تعریف شود. بنابراین استفاده از Carbon در محصول RTL امکان‌پذیر است، اما معمولاً به لایه‌ای اختصاصی از Style، Token و تست نیاز دارد.

نقاط قوت و محدودیت‌ها

مهم‌ترین نقطه قوت Carbon، کامل‌بودن ارتباط میان برند، طراحی و کد است. IBM Design Language پایه‌های بصری را تعریف می‌کند و Carbon آن‌ها را به ابزارهای قابل استفاده در محصول تبدیل می‌کند.

مستندات دقیق، کامپوننت‌های مناسب محصولات سازمانی، Patternها، کتابخانه نمودارها و منابع رسمی فیگما از دیگر مزایای آن هستند. Carbon برای داشبوردها، محصولات ابری، ابزارهای تحلیلی و رابط‌هایی که با حجم زیادی از داده سروکار دارند، انتخاب قدرتمندی است.

ساختار Tokenمحور، Themeهای روشن و تاریک و مدل دقیق لایه‌بندی نیز باعث می‌شوند تیم‌ها بتوانند رابط‌هایی منظم و مقیاس‌پذیر ایجاد کنند. توجه جدی به دسترس‌پذیری، Carbon را به مرجع ارزشمندی برای طراحی فراگیر تبدیل کرده است.

در مقابل، هویت بصری پیش‌فرض Carbon ارتباط نزدیکی با IBM دارد. استفاده مستقیم از فونت، رنگ‌ها و کامپوننت‌ها ممکن است محصول را شبیه یکی از محصولات IBM نشان دهد. ایجاد هویت مستقل می‌تواند به شخصی‌سازی گسترده نیاز داشته باشد.

ظاهر Carbon نیز نسبتاً رسمی و صنعتی است. این ویژگی برای محصولات سازمانی مناسب است، اما ممکن است برای محصولات سرگرمی، شبکه‌های اجتماعی یا تجربه‌های بسیار احساسی و مصرفی بیش از اندازه جدی به نظر برسد.

پیچیدگی اکوسیستم و مستندات گسترده نیز می‌تواند شروع کار را برای تیم‌های کوچک دشوار کند. علاوه بر این، پشتیبانی از RTL نیازمند بررسی و توسعه بیشتری نسبت به برخی گزینه‌های جایگزین است.

جمع‌بندی و درس‌های طراحی

Carbon انتخاب مناسبی برای محصولات سازمانی، داشبوردهای تحلیلی، ابزارهای ابری و سیستم‌هایی است که به نمایش حجم زیادی از اطلاعات نیاز دارند. تیم‌هایی که برای React توسعه می‌دهند یا دسترس‌پذیری برای آن‌ها اهمیت بالایی دارد، می‌توانند بیشترین استفاده را از این سیستم ببرند.

یکی از مهم‌ترین درس‌های Carbon، ارتباط مستقیم میان زبان برند و اجزای اجرایی محصول است. هویت بصری تنها در فایل‌های Brand Guideline باقی نمی‌ماند و از طریق Tokenها، Grid، Typography و Componentها وارد محصول می‌شود.

سیستم 2x Grid نیز نشان می‌دهد Grid می‌تواند فراتر از ستون‌بندی صفحه عمل کند و به پایه مشترک فاصله‌گذاری، تایپوگرافی و ساختار کامپوننت‌ها تبدیل شود.

درس مهم دیگر، جایگاه دسترس‌پذیری در معماری دیزاین‌سیستم است. دسترس‌پذیری در Carbon یک بررسی نهایی نیست و در تعریف Tokenها، Themeها، تعاملات و کامپوننت‌ها حضور دارد.

در نهایت، بهترین استفاده از Carbon زمانی اتفاق می‌افتد که تیم منطق ساختاری آن را بشناسد و مشخص کند چه بخش‌هایی باید حفظ و چه بخش‌هایی باید با هویت و نیازهای محصول جایگزین شوند. Carbon می‌تواند پایه بسیار قدرتمندی باشد، اما استفاده موفق از آن به انتخاب آگاهانه میان استانداردهای سیستم و نیازهای واقعی کاربران وابسته است.