تم تاریک
دیزاین سیستم سرخآب Sorkhab
دیزاین سیستم سرخآب، مجموعه‌ای یکپارچه از استانداردها، اجزا (Components) و الگوهای رفتاری (UX Patterns) است که با هدف ایجاد تجربه کاربری منسجم در تمامی محصولات و سرویس‌های آروان‌کلاد طراحی شده است.
البته که سرخآب فراتر از یک کتابخانه UI ساده است. این سیستم زبان مشترکی بین تیم‌های دیزاین و فنی برای سرعت بخشیدن به فرآیند توسعه و حفظ کیفیت بصری و عملکردی محصولات است.
اهداف اصلی
- یکپارچگی (Consistency): ایجاد تجربه بصری و تعاملی واحد در تمامی محصولات.
- سرعت توسعه (Efficiency): کاهش زمان طراحی و پیاده‌سازی با استفاده از اجزای آماده و تست شده.
- مقیاس‌پذیری (Scalability): امکان گسترش محصولات پیچیده بدون از دست رفتن نظم و استانداردهای طراحی.
- دسترس‌پذیری (Accessibility): اطمینان از اینکه تمامی کاربران، با هر سطح از توانایی، می‌توانند به راحتی از سرویس‌ها استفاده کنند.
ارکان دیزاین سیستم
دیزاین سیستم سرخآب از سه لایه اصلی تشکیل شده است:
۱. زیربنا (Foundations)
شامل متغیرهای بنیادین یا همان Design Tokens است که هویت بصری سرخآب را تعریف می‌کنند:
- تایپوگرافی: استفاده از فونت‌های بهینه شده برای خوانایی بالا در پنل‌های مدیریتی.
- پالت رنگی: سیستم رنگی شامل رنگ‌های برند، وضعیت‌ها (Success, Error, Alert) و سطوح خاکستری.
- فاصله‌گذاری (Spacing): سیستم ۸ پیکسلی برای ایجاد نظم در چیدمان.
- سایه‌ها و شعاع‌ها (Shadows & Radius): برای ایجاد عمق و هویت بصری مدرن.
۲. کامپوننت‌ها
اجزای سازنده رابط کاربری که به صورت مستقل توسعه یافته‌اند. این اجزا شامل موارد پایه تا پیچیده هستند:
- پایه: دکمه‌ها، چک‌باکس، آیکون‌ها و ...
- ورودی‌ها: دراپ‌داون، فیلد، و ...
- ناوبری: بردکرامب، منوها، تب‌ها و ...
۳. الگوهای تجربه کاربری
الگوهایی که مشخص می‌کنند کامپوننت‌ها در سناریوهای مختلف چگونه باید در کنار هم قرار بگیرند.
اصول طراحی در سرخآب
در طراحی سرخآب، چند اصل کلیدی به عنوان قطب‌نما عمل می‌کنند:
- وضوح بر زیبایی مقدم است: محصولات آروان ابزارهای کاری هستند، بنابراین انتقال پیام و انجام تسک باید سریع و بدون ابهام باشد.
- پیش‌بینی‌پذیری: رفتار اجزا در تمامی محصولات باید یکسان باشد. اگر دکمه حذف در یک سرویس مودال باز می‌کند، در سرویس دیگر نباید رفتار متفاوتی داشته باشد.
- مدل ذهنی کاربر: الگوها بر اساس تجربه‌های قبلی کاربران در محیط‌های مدیریت ابری بهینه‌سازی شده‌اند.
نحوه استفاده از داکیومنت‌ها
هر داکیومنت در سرخآب شامل بخش‌های زیر است تا نیاز طراحان و توسعه‌دهندگان را به طور همزمان پوشش دهد:
- نمونه زنده: برای تست کامپوننت در مرورگر.
- آناتومی: تشریح اجزای تشکیل‌دهنده.
- مشخصات فنی: اندازه‌ها، فواصل و مقادیر توکن‌ها.
- بایدها و نبایدها: راهنمای استفاده صحیح از منظر UX.
دیزاین سیستم سرخآب یک موجود زنده است که با بازخوردهای تیم‌های محصول همواره در حال بهبود و تکامل است.