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

سیستم طراحی چیست و با کتابخانهٔ UI چه فرقی دارد

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

چه چیزی تحویل می‌گیرید

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

فرآیند و مراحل انجام کار

1. ممیزی: شمارش عناصر تکراری در محصولات فعلی و ثبت اختلاف‌ها، چون مبنای اولویت‌بندی همین فهرست است.
2. تعریف دامنه: تصمیم که در دور اول کدام عناصر ساخته می‌شوند؛ معمولاً ده عنصر پرتکرار، نه صد عنصر کم‌استفاده.
3. ساخت توکن‌ها: گرفتن مقادیر از هویت بصری برند و تنظیم آن‌ها در مقیاس‌های قابل‌محاسبه.
4. ساخت کامپوننت‌ها: طراحی عناصر در تمام حالت‌ها، همراه با کنترل کیفیت کنتراست و اندازهٔ ناحیهٔ لمس.
5. هم‌سازی با کد: پیاده‌سازی موازی و مقایسهٔ مداوم نسخهٔ طراحی و نسخهٔ اجراشده تا اختلاف معناداری باقی نماند.
6. انتشار و نگهداری: نسخهٔ یک، پایش استفاده، و بازبینی فصلی بر پایهٔ درخواست‌های تیم‌ها و نتایج تست کاربردپذیری.

سیستم طراحی می‌میرد، مگر آن‌که کسی مسئولش باشد

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

پرسش‌های متداول

برای یک محصول کوچک هم سیستم طراحی لازم است؟

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

سیستم طراحی چه قدر زمان می‌برد؟

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

آیا با ابزار مدیریت محتوای فعلی ما کار می‌کند؟

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

برای دریافت برآورد ساخت سیستم طراحی متناسب با تیم و محصولاتتان، با داده پرداز مغزهای متفکر تماس بگیرید.