سیستم طراحی برای تیم‌های کوچک: از توکن شروع کنید
سیستم طراحی فقط مال شرکت‌های بزرگ نیست. یک تیم کوچک با چند توکن، ده جزء پایه و چند قاعده‌ی روشن می‌تواند محصولی یکدست بسازد و سرعت توسعه را بالا ببرد. از کجا شروع کنیم و چه چیزهایی لازم نیست.
وقتی نام «سیستم طراحی» می‌آید، خیلی‌ها یاد مستندات چندصدصفحه‌ای شرکت‌های بزرگ می‌افتند و نتیجه می‌گیرند که برای تیم کوچک زیادی است. بعد شش ماه می‌گذرد و محصول هفت نوع دکمه، دوازده رنگ خاکستری و پنج اندازه‌ی فاصله دارد.
سیستم طراحی برای تیم کوچک لازم‌تر است، چون وقت برای دوباره‌کاری ندارد.
سیستم طراحی یعنی چه
یک مجموعه‌ی مشترک از تصمیم‌ها که یک‌بار گرفته می‌شوند و همه‌جا استفاده می‌شوند. سه لایه دارد:
- توکن‌ها: مقدارهای پایه؛ رنگ، فاصله، اندازه‌ی قلم، گردی گوشه.
- اجزا: دکمه، فیلد، کارت، برچسب.
- الگوها: نحوه‌ی کنار هم گذاشتن اجزا؛ فرم، فهرست، حالت خالی.
از توکن شروع کنید
توکن یعنی به جای نوشتن مقدار خام، به آن نام بدهید. به جای اینکه کد رنگ سبز را در صد جا بنویسید، یک نام تعریف می‌کنید و همه‌جا همان را صدا می‌زنید.
فایده‌اش فوری است:
- تغییر در یک نقطه. اگر رنگ برند عوض شد، یک خط را تغییر می‌دهید.
- حالت تاریک و روشن تقریباً رایگان. فقط مقدار توکن‌ها عوض می‌شود، نه اجزا.
- یکدستی خودکار. وقتی فقط پنج اندازه‌ی فاصله تعریف شده، نمی‌شود ششمی را اختراع کرد.
همین سایت این‌طور ساخته شده است: فقط یک فایل مقدار خام رنگ دارد و همه‌ی اجزا از نام‌ها استفاده می‌کنند. یک آزمون خودکار هم بررسی می‌کند که هیچ جزئی رنگ خام نداشته باشد.
توکن‌های معنایی
بهتر است توکن‌ها بر اساس نقش نام‌گذاری شوند، نه ظاهر. «رنگ متن اصلی» بهتر از «خاکستری تیره» است، چون در حالت تاریک، متن اصلی دیگر تیره نیست.
مجموعه‌ی کوچک اجزا
برای شروع لازم نیست پنجاه جزء بسازید. این فهرست بیشتر محصولات را پوشش می‌دهد:
- دکمه (اصلی، فرعی، پیوند)
- فیلد ورودی و برچسبش
- انتخاب‌گر و کلید
- کارت
- برچسب وضعیت
- پنجره‌ی گفتگو
- پیام خطا و موفقیت
- حالت خالی و حالت بارگذاری
هر جزء را با همه‌ی حالت‌هایش تعریف کنید: عادی، اشاره، فشرده، غیرفعال، خطا و فوکوس. جزئی که فقط حالت عادی‌اش طراحی شده، نصفه است.
قاعده‌هایی که ارزش نوشتن دارند
- مقیاس فاصله. چند مقدار ثابت؛ نه هر عددی که به چشم خوب آمد.
- مقیاس تایپوگرافی. پنج یا شش اندازه، هر کدام با کاربرد مشخص.
- کنتراست. هر جفت رنگ متن و زمینه باید خوانا باشد. این را می‌شود خودکار آزمود.
- یک دکمه‌ی اصلی در هر صفحه. اگر همه‌چیز مهم باشد، هیچ‌چیز مهم نیست.
- حرکت. مدت و نوع انیمیشن‌ها هم توکن دارند، و برای کاربری که حرکت کمتر می‌خواهد خاموش می‌شوند.
دسترس‌پذیری از پایه
اگر دسترس‌پذیری در اجزای پایه ساخته شود، هر صفحه‌ای که با آن‌ها ساخته می‌شود به‌طور پیش‌فرض دسترس‌پذیر است:
- حلقه‌ی فوکوس واضح.
- اندازه‌ی کافی برای هدف‌های لمسی.
- برچسب برای صفحه‌خوان.
- کارکرد کامل با صفحه‌کلید.
درست کردن این‌ها در ده جزء پایه آسان است؛ در دویست صفحه نه.
چندزبانه و راست‌به‌چپ
اگر محصول فارسی است یا روزی دوزبانه می‌شود، سیستم طراحی باید از ابتدا جهت منطقی داشته باشد. اضافه کردنش بعداً یعنی بازبینی تک‌تک اجزا.
چه چیزهایی برای شروع لازم نیست
- سایت مستندات جدا.
- ابزار اختصاصی.
- جزء برای هر حالت خاص.
- نسخه‌بندی پیچیده.
یک صفحه‌ی نمونه که همه‌ی اجزا و حالت‌هایشان را کنار هم نشان می‌دهد کافی است.
نگهداری
- جزء جدید فقط با تکرار. تا چیزی سه بار لازم نشده، آن را به سیستم اضافه نکنید.
- استثنا را ثبت کنید. اگر جایی از قاعده خارج شدید، دلیلش را بنویسید.
- نگهبان خودکار. آزمونی که مقدار خام را در اجزا پیدا کند، بیش از هر سندی جلوی فرسایش را می‌گیرد.
فایده برای کسب‌وکار
- سرعت. صفحه‌ی جدید از قطعه‌های آماده ساخته می‌شود.
- یکدستی. محصول حرفه‌ای‌تر و قابل‌اعتمادتر به نظر می‌رسد.
- هزینه‌ی تغییر کمتر. بازطراحی برند، هفته‌ها نیست؛ چند روز است.
- ورود آسان نیروی جدید.
جمع‌بندی
سیستم طراحی را با توکن شروع کنید، ده جزء پایه بسازید، چند قاعده بنویسید و با یک آزمون خودکار از آن محافظت کنید. همین اندازه، بیشتر فایده را می‌دهد.
مطلب مرتبط: فرم‌های چندمرحله‌ای که رها نمی‌شوند.