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

۱) سیستم طراحی چیست

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

۲) چرا به آن نیاز دارید

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

۳) لایهٔ پایه: توکن‌ها

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

۴) کتابخانهٔ اجزا

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

۵) دستورالعملِ کاربرد

اجزا بدون راهنما، گیج‌کننده می‌مانند. برای هر جزء بنویسید کِی، کجا و چگونه استفاده شود و کجا استفاده نشود. این قواعد، تصمیم‌گیری را برای تیم سریع و یکسان می‌کنند و از سلیقه‌ورزیِ پرهزینه می‌کاهند.

۶) ثباتِ بصری و برند

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

۷) دسترس‌پذیری، از درون

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

۸) سرعت تیم

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

۹) کاهش بدهیِ فنی

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

۱۰) زبان مشترک طراحی و توسعه

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

۱۱) مقیاس‌پذیری

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

۱۲) حاکمیت و مالکیت

سیستمِ بی‌صاحب، زود فرو می‌پاشد. یک تیمِ کوچک را مالکِ سیستم کنید، مسیر پیشنهادِ تغییر را روشن بگذارید و تصمیم‌ها را مستند نمایید. حاکمیتِ شفاف، از هرج‌ومرجِ «هرکس هرچه خواست» جلوگیری می‌کند.

۱۳) زنده نگه‌داشتن

سیستم طراحی، مجسمه نیست؛ باغ است. با بازخوردِ تست کاربردپذیری و یافتهٔ پژوهش کاربر، اجزا را اصلاح و نسخه‌بندی کنید. رهاشدنِ سیستم، یعنی همان روزِ اول که بی‌نظمی را رها می‌کردید.

۱۴) مستندسازیِ قابل‌دسترس

ارزشِ سیستم، در دسترس‌بودنِ اوست. یک مستندِ زنده بسازید که همهٔ اجزا، توکن‌ها و قواعد را نشان دهد و نمونهٔ اجرا را هم بگذارد. مستندِ قدیمی یا گم‌شده، عملاً سیستمی در کار نیست.

۱۵) تدریجی بسازید

لازم نیست از روز اول، سیستمی کامل داشته باشید. با چند جزءِ پرکاربرد و توکن‌های پایه شروع کنید و آرام بزرگ کنید. پیروزیِ زود و کوچک، تیم را با سیستم آشتی می‌دهد؛ کمال‌گراییِ اولیه، قاتلِ شروع است. بهتر است از دردی واقعیِ تیم شروع کنید؛ همان جزئی که بارها دست‌ساز و ناهمگون ساخته شده. وقتی اولین جزءِ مشترک، کارِ همه را راه بیندازد، مقاومتِ تیم در هم می‌شکند و سیستم خودش آرام آرام رشد می‌کند.

۱۶) بازگشتِ سرمایه

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

سؤالات متداول

برای محصول کوچک هم لازم است؟ نه به‌شکلِ سنگین؛ اما حتی یک دستهٔ کوچکِ اجزا و توکن، نظمِ لازم را می‌دهد.

فرقش با کتابخانهٔ اجزا چیست؟ کتابخانهٔ اجزا، بخشی از سیستم است؛ سیستم، علاوه بر اجزا، توکن‌ها، قواعد و حاکمیت را هم دارد.

از کجا شروع کنم؟ از پرتکرارترین اجزا و بنیادی‌ترین توکن‌ها؛ همان‌جا که بیشترین دردِ ناهمگونی را حس می‌کنید.

برای ساخت سیستم طراحیِ محصولتان، پروژهٔ خود را برای ما تعریف کنید و نمونه‌کارها را در پورتفولیو ببینید.