منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۹ دقیقه

سیستم طراحی (Design System) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. متن کامل اصلی به‌همراه همهٔ تصاویر در لینک انتهای صفحه در دسترس است.

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

ساده‌ترین راه فهمیدن سیستم طراحی این است: تصور کنید یک «منبع واحد حقیقت» دارید که همه — طراح، مهندس، نویسندهٔ محتوا و مدیر محصول — به آن رجوع می‌کنند. وقتی این منبع وجود ندارد، هر تیم تصمیم‌های خودش را می‌گیرد و بعد از دو سال، محصول شما هفت رنگ آبیِ کمی متفاوت، چهار نوع دکمهٔ «ذخیره» و سه لحن نوشتاری مختلف دارد. هیچ‌کدام از این‌ها به‌تنهایی فاجعه نیستند؛ اما روی هم، همان چیزی می‌شوند که کاربر از آن به‌عنوان «به‌هم‌ریخته» یاد می‌کند.

سیستم طراحی دقیقاً شامل چه چیزهایی است؟

فهرست محتویات یک سیستم طراحی از چیزی که بیشتر آدم‌ها تصور می‌کنند طولانی‌تر است. فقط رنگ و فونت نیست؛ تصمیم‌هایی است که اگر مکتوب نشوند، هر بار از نو گرفته می‌شوند:

• - عناصر استاندارد رابط: جعبه‌های ورودی، فهرست‌های کشویی، منوها و هر چیزی که کاربر مستقیماً با آن کار می‌کند.
• - رنگ‌ها و فونت‌های تأییدشدهٔ برند: نه «رنگ‌های قشنگ»، بلکه پالت مشخصی که استفاده از بیرونش نیاز به دلیل دارد.
• - دکمه‌ها و نشانه‌های تعامل: چیزی که به کاربر می‌گوید این عنصر قابل کلیک است — همان بحث افوردنس.
• - راهنمای تعامل‌ها: پنل از کدام سمت باز شود، تغییر اندازه با کدام حرکت انجام شود، انیمیشن چقدر طول بکشد.
• - سیستم گرید انعطاف‌پذیر و قواعد چیدمان: اینکه اجزا کجا بنشینند و فاصله‌شان چقدر باشد — پایهٔ عملی سلسله‌مراتب بصری.
• - فهرست آیکن‌ها همراه با معنایشان: تا آیکن سطل زباله در یک صفحه «حذف» و در صفحهٔ دیگر «آرشیو» معنا ندهد.
• - راهنمای محتوا: از فعل استفاده کنیم یا اسم؟ با کاربر دوم‌شخص حرف بزنیم یا اول‌شخص؟ پیام خطا چه ساختاری داشته باشد؟
• - قواعد برچسب‌گذاری: کجا آیکن تنها کافی است و کجا حتماً باید متن هم بیاید.
• - جای دکمه‌های فراخوان به اقدام و قاعدهٔ ذخیره‌سازی: ذخیرهٔ خودکار داشته باشیم یا کاربر صریحاً دکمهٔ ذخیره بزند؟

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

هفت فایده‌ای که سیستم طراحی می‌سازد

• - ۱. یکدستی بیشتر: تایپوگرافی، فاصله‌گذاری و اجزای رابط در همهٔ پلتفرم‌ها یک شکل می‌مانند. کاربر لازم نیست در هر صفحه از نو یاد بگیرد.
• - ۲. کارایی بالاتر: وقتی دکمه، فرم و مودال از قبل ساخته شده‌اند، طراح به‌جای بازسازی چرخ، سراغ مسئلهٔ واقعی می‌رود.
• - ۳. همکاری روان‌تر: سیستم طراحی یک زبان مشترک میان طراح و مهندس می‌سازد. «همان دکمهٔ ثانویه» جمله‌ای است که هر دو دقیقاً یک چیز از آن می‌فهمند.
• - ۴. مقیاس‌پذیری: هرچه محصول بزرگ‌تر می‌شود، هزینهٔ نداشتن سیستم بیشتر می‌شود. سیستم طراحی همان چیزی است که اجازه می‌دهد تیم رشد کند بدون اینکه محصول از هم بپاشد.
• - ۵. کنترل کیفیت: وقتی همه از یک منبع استفاده می‌کنند، اصلاح یک ایراد در آن منبع، همه‌جا را اصلاح می‌کند.
• - ۶. فراگیری: سیستم طراحی جای طبیعی برای نهادینه‌کردن دسترس‌پذیری است — کنتراست کافی و اندازهٔ درست، یک‌بار در کامپوننت حل می‌شود، نه هزار بار در صفحه‌ها.
• - ۷. تقویت برند: تکرار منظم رنگ، فرم و لحن، همان چیزی است که برند را در ذهن آدم‌ها می‌سازد.

فایدهٔ ششم را جدی بگیرید، چون بیشترین بازده را دارد. اگر دسترس‌پذیری وظیفهٔ «هر طراح در هر صفحه» باشد، عملاً هیچ‌وقت انجام نمی‌شود؛ اما اگر کنتراست درست و ناحیهٔ لمس کافی درون خودِ کامپوننت نشسته باشد، رعایتش حالت پیش‌فرض می‌شود.

نُه جزء اصلی یک سیستم طراحی

• - ۱. کتابخانهٔ کامپوننت: اجزای قابل‌استفادهٔ مجدد رابط — دکمه، منو، فیلد ورودی. این کتابخانه هم‌زمان توسعه را سریع‌تر می‌کند و تجربه را یکدست نگه می‌دارد. ابزارهایی مثل فیگما دقیقاً برای ساخت و نگهداری همین ساخته شده‌اند.
• - ۲. کتابخانهٔ الگو: راه‌حل‌های استاندارد برای مسائل تکرارشوندهٔ طراحی. فرم تماس و جریان ورود به حساب، الگو هستند؛ یعنی ترکیبی از چند کامپوننت که با هم یک مسئلهٔ مشخص را حل می‌کنند.
• - ۳. راهنمای سبک برند: ظاهر بصری برند را تعریف می‌کند: تایپوگرافی، پالت رنگ، و قواعد استفاده از لوگو. لحن و صدای متن هم معمولاً همین‌جا مستند می‌شود.
• - ۴. ارزش‌های برند: اصول بنیادینی که هویت و فرهنگ برند را می‌سازند و پشت هر تصمیم طراحی نشسته‌اند. اگر ارزش شما «صراحت» است، پیام خطای مبهم نقض ارزش است، نه فقط یک ایراد جزئی.
• - ۵. اصول طراحی: ایده‌های راهنمای فرایند طراحی. دسترس‌پذیری و تایپوگرافی معمولاً دو ستون اصلی این بخش‌اند.
• - ۶. کتابخانهٔ آیکن: نمادهای بصری که کنش‌ها و مفاهیم را منتقل می‌کنند. کتابخانهٔ آیکن شرکت IBM نمونهٔ خوبی است که برای هر آیکن، راهنمای دقیق استفاده هم دارد.
• - ۷. راهنمای محتوا: لحن، سبک و زبان متن‌ها را تعیین می‌کند — از قواعد دستوری گرفته تا واژگان مجاز.
• - ۸. راهنمای دسترس‌پذیری: تضمین می‌کند محصول برای افراد دارای معلولیت قابل‌استفاده است: کنتراست رنگ، اندازهٔ متن و فاصله‌گذاری.
• - ۹. توکن‌های طراحی: مهم‌ترین جزء فنی، که بخش بعدی کاملاً به آن اختصاص دارد.

توکن‌های طراحی: قلب فنی ماجرا

توکن طراحی یعنی به‌جای نوشتن مقدار خام، به آن یک «نام» بدهید و همه‌جا آن نام را صدا بزنید. مثلاً به‌جای اینکه در سی جای مختلف کد و فایل طراحی، رنگ #4B0082 را دستی بنویسید، توکنی به اسم primary-color تعریف می‌کنید و همه‌جا از آن استفاده می‌کنید.

فایدهٔ ماجرا وقتی معلوم می‌شود که تصمیم عوض شود. فرض کنید برند تصمیم می‌گیرد رنگ اصلی از بنفش تیره به آبی #2e5090 تغییر کند. در حالت بدون توکن، یک نفر باید سی جا را پیدا کند و عوض کند — و تقریباً همیشه دو سه جا از قلم می‌افتد؛ همان‌هایی که ماه‌ها بعد به‌شکل یک دکمهٔ بنفشِ عجیب در گوشهٔ یک صفحهٔ فرعی پیدا می‌شوند. در حالت توکن‌محور، مقدارِ primary-color را یک‌بار عوض می‌کنید و کل سیستم به‌روز می‌شود.

توکن‌ها فقط برای رنگ نیستند. مقیاس تایپوگرافی، اندازهٔ فاصله‌ها، شعاع گوشه‌ها، ضخامت سایه و مدت انیمیشن هم توکن می‌شوند. و درست همین‌جاست که یک فایدهٔ کمتر گفته‌شده ظاهر می‌شود: توکن‌ها تصمیم‌ها را قابل بحث می‌کنند. وقتی فاصله‌ها اسم دارند، بحث تیم از «این یکم بیشتر باز شه» به «این باید space-4 باشه یا space-5؟» تبدیل می‌شود؛ و این دومی، بحثی است که می‌شود آن را تمام کرد.

از توکن تا صفحه: لایه‌های سیستم

یکی از سوءتفاهم‌های رایج این است که سیستم طراحی را فهرستی صاف از چیزها ببینیم. در عمل، این اجزا روی هم سوارند و هر لایه از لایهٔ زیرینش ساخته می‌شود:

در پایین‌ترین لایه توکن‌ها نشسته‌اند: رنگ، مقیاس تایپوگرافی، فاصله و شعاع. لایهٔ بعد کامپوننت‌هاست که از توکن‌ها ساخته می‌شود — دکمه‌ای که رنگش از توکن می‌آید و فاصلهٔ داخلی‌اش از توکن فاصله. لایهٔ سوم الگوهاست: چند کامپوننت که با هم یک مسئلهٔ تکرارشونده را حل می‌کنند، مثل جریان ورود یا فرایند پرداخت. و در بالا صفحه‌ها قرار دارند؛ جایی که الگوها با محتوای واقعی پر می‌شوند.

این نگاه لایه‌ای یک نتیجهٔ عملی مهم دارد: هرچه پایین‌تر تغییر بدهید، اثرش بزرگ‌تر است. عوض‌کردن یک توکن، کل محصول را تکان می‌دهد؛ عوض‌کردن یک صفحه فقط همان صفحه را. به همین دلیل تغییرات لایهٔ توکن باید کند، آگاهانه و با مرور جمعی انجام شود، در حالی که تغییر در لایهٔ صفحه می‌تواند سریع و آزمایشی باشد. تیم‌هایی که این تفاوت سرعت را رعایت نمی‌کنند، یا سیستم را قفل می‌کنند یا هر هفته کل محصول را بی‌ثبات می‌کنند.

سیستم طراحی یا استایل‌گاید؟

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

استایل‌گاید مجموعه‌ای از سبک‌های بصری است که در طراحی محصول به کار می‌روند: رنگ‌ها، قلم‌ها، تصاویر و فاصله‌گذاری. دامنه‌اش باریک و تمرکزش کاملاً بصری است؛ کارش این است که «زبان بصری محصول» را تعریف کند.

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

نمونهٔ کلاسیک سیستم طراحی، متریال دیزاین گوگل و سیستم طراحی اطلسیان است؛ در حالی که راهنمای سبک اطلسیان، نمونه‌ای از یک استایل‌گاید به‌حساب می‌آید. خلاصهٔ یک‌خطی: استایل‌گاید می‌گوید محصول چه شکلی باشد، سیستم طراحی می‌گوید محصول چه شکلی باشد، چطور رفتار کند و با چه اجزایی ساخته شود.

کِی نباید سراغ سیستم طراحی رفت؟

سیستم طراحی همیشه جواب درست نیست و ساختنش هزینهٔ واقعی دارد. در سه موقعیت بهتر است سراغش نروید:

• - پروژه‌های کوچک و یک‌باره: برای یک لندینگ‌پیج یا کمپین کوتاه‌مدت، یک استایل‌گاید ساده یا کتابخانهٔ الگوی کوچک کاملاً کافی است. ساختن سیستم کامل برای چیزی که سه ماه دیگر وجود ندارد، اتلاف است.
• - پروژه‌های هنری و تجربی: جایی که نوآوری و غافلگیری بر یکدستی اولویت دارد، سیستم طراحی می‌تواند دقیقاً همان چیزی را بکشد که ارزش کار است. یک وب‌سایت نمایشگاهی قرار نیست قابل‌پیش‌بینی باشد.
• - تیم‌های کوچک بدون توان نگهداری: این مهم‌ترین مورد است. سیستم طراحی یک محصول زنده است، نه یک فایل. اگر وقت، بودجه و آدمِ نگهداری‌اش را ندارید، چیزی که می‌سازید بعد از شش ماه به یک کتابخانهٔ منسوخ تبدیل می‌شود که همه دورش می‌زنند — و سیستمی که دورش می‌زنند، از نداشتنش بدتر است، چون هم هزینه داده‌اید و هم به آن اعتماد ندارید.

متریال دیزاین: مشهورترین نمونه

گوگل متریال دیزاین را در ۲۵ ژوئن ۲۰۱۴ در کنفرانس Google I/O معرفی کرد؛ پروژه‌ای که نام رمز اولیه‌اش «کاغذ کوانتومی» (Quantum Paper) بود. به گفتهٔ ماتیاس دوآرته، معاون طراحی گوگل، ایدهٔ اصلی این بود که حس کاغذ و قلم به دنیای دیجیتال بیاید: سطح‌هایی با لبه، درز و سایهٔ واقعی.

چیزی که متریال دیزاین را به یک درس خوب تبدیل می‌کند، این است که فقط راهنمای بصری نیست. این سیستم شامل تم رنگی قابل تنظیم، پشتیبانی از فهرست و کارت (ویجت‌هایی مثل RecyclerView و CardView)، مدل ارتفاع و سایه برای نشان‌دادن لایه‌بندی، رابط‌های برنامه‌نویسی انیمیشن برای بازخورد لمسی و گذارها، و تغییرات مربوط به گرافیک برداری و استخراج رنگ است. یعنی از تصمیم بصری تا کد اجرایی، همه‌چیز در یک بسته آمده — و دقیقاً همین چیزی است که یک راهنمای سبک را به یک سیستم طراحی تبدیل می‌کند.

نکتهٔ دیگر، فراگیرشدنش است: گوگل رابط‌های برنامه‌نویسی متریال را در دسترس توسعه‌دهندگان بیرونی گذاشت و نسخه‌هایی برای محیط‌های غیربومی — مثل مجموعهٔ Polymer و پیاده‌سازی جاوااسکریپتی Angular Material — هم شکل گرفت. سیستم طراحی وقتی برنده می‌شود که استفاده از آن از دور زدنش راحت‌تر باشد؛ متریال دیزاین این را با در دسترس گذاشتن کدِ آماده به‌دست آورد.

چطور یک سیستم طراحی بسازیم؟ شش قدم

• - ۱. فرایند فعلی طراحی را تحلیل کنید. قبل از ساختن چیز جدید، ببینید تیم امروز واقعاً چطور کار می‌کند و کجا وقت تلف می‌شود.
• - ۲. الفبای بصری برند را مشخص کنید. کوچک‌ترین واحدهای بصری که هویت شما را می‌سازند کدام‌اند؟
• - ۳. ممیزی رابط انجام دهید. همهٔ صفحه‌ها را جمع کنید و ناهماهنگی‌ها را بیرون بکشید. تقریباً همیشه نتیجه شوکه‌کننده است: هجده سایهٔ متفاوت، یازده اندازهٔ فونت. همین ممیزی، به‌تنهایی، قانع‌کننده‌ترین سند برای گرفتن بودجه از مدیریت است.
• - ۴. قواعد روشن و اصول طراحی تعریف کنید. اصلی که نتوان با آن یک تصمیم مشخص را رد کرد، اصل نیست؛ شعار است.
• - ۵. پالت رنگ و تایپوگرافی را نهایی کنید. این‌ها همان توکن‌های پایه‌اند که بقیه رویشان سوار می‌شوند.
• - ۶. کتابخانهٔ کامپوننت را بسازید و ویژگی‌های سبک را استاندارد کنید. از پرکاربردترین اجزا شروع کنید، نه از کامل‌ترین فهرست.

یک توصیهٔ عملی که در فهرست بالا نیست اما تفاوت میان سیستم‌های زنده و مرده را می‌سازد: سیستم را از دل محصول واقعی دربیاورید، نه در اتاق دربسته. بهترین راه شروع، انتخاب یک جریان پرترافیک — مثلاً ثبت‌نام یا پرداخت — و ساختن همان چند کامپوننتی است که آنجا لازم می‌شود. سیستمی که از روز اول در حال استفاده است، خودش را اصلاح می‌کند؛ سیستمی که شش ماه در خلأ ساخته شده، معمولاً همان روز اول با واقعیت برخورد می‌کند و می‌شکند.

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

جمع‌بندی

• - سیستم طراحی مجموعه‌ای از استانداردها برای مدیریت و مقیاس‌دادن به طراحی است: کامپوننت‌های قابل‌استفادهٔ مجدد، اصول طراحی و راهنماها.
• - محتویاتش از رنگ و فونت خیلی فراتر می‌رود: قواعد تعامل، گرید، معنای آیکن‌ها، لحن محتوا و حتی قاعدهٔ ذخیره‌سازی.
• - هفت فایدهٔ اصلی: یکدستی، کارایی، همکاری بهتر، مقیاس‌پذیری، کنترل کیفیت، فراگیری و تقویت برند.
• - نُه جزء اصلی دارد که مهم‌ترین جزء فنی‌اش توکن‌های طراحی است: نام‌گذاری مقادیر به‌جای تکرار آن‌ها، تا تغییر در یک نقطه همه‌جا اعمال شود.
• - سیستم چهار لایه دارد — توکن، کامپوننت، الگو، صفحه — و هرچه تغییر در لایهٔ پایین‌تر باشد، اثرش گسترده‌تر است.
• - استایل‌گاید زیرمجموعهٔ سیستم طراحی است: اولی زبان بصری را تعریف می‌کند، دومی ظاهر و رفتار و اجزای سازنده را.
• - برای پروژه‌های کوچک و یک‌باره، کارهای تجربی و تیم‌های بدون توان نگهداری، سیستم طراحی کامل توجیه ندارد.
• - ساختنش با شش قدم شروع می‌شود، اما شرط زنده‌ماندنش این است که از دل محصول واقعی بیرون بیاید و مثل یک محصول نگهداری شود.