«ایران موبیکس» یک پلتفرم جامع و مدرن در حوزه تجارت برونمرزی، لجستیک و واردات است. هدف ما خلق یک تجربه کاربری (UX) روان، شفاف و بهشدت قابل اعتماد برای تجار و کاربران عادی است. ما به یک طراحی ویترینی لوکس، خیرهکننده و در عین حال کاملاً کاربردی نیاز داریم.
ستایل بصری و زبان طراحی (Visual Language)
ترند طراحی: تمرکز اصلی ما روی زیباییشناسی Liquid Glass (گلسمورفیسم پیشرفته) است. از پسزمینههای یکدست و خشک پرهیز کنید. المانها (بهویژه کارتها، فرمها و نویگیشن) باید روی پنلهای شیشهای نیمهشفاف با افکتهای Background Blur، بردرهای ظریفِ شیشهای و سایههای چندلایه (Drop Shadows) طراحی شوند.
*پالت رنگی (Light & Dark Mode): پلتفرم باید دارای دو تم کامل باشد.
رنگهای اصلی: بنفش (بهعنوان رنگ پایه و پسزمینه در حالت دارک، و رنگ متن در حالت لایت) و طلایی لوکس (بهعنوان رنگ Accent، دکمهها و هایلایتها).
نکته برای دیزاینر: حتماً Color Variableهای فیگما را بر اساس استانداردهای متغیرهای Light و Dark تنظیم کنید.
تایپوگرافی و Layout: زبان پیشفرض پلتفرم فارسی و ساختار کاملاً RTL (راستبهچپ) است. استفاده از فونتهای خوانا و مدرن (مثل یکانبخ یا وزیرمتن) الزامی است.
۲. استانداردهای فنی و توسعه (Technical Constraints)
برای جلوگیری از دوبارهکاری در تیم فرانتاند، دیزاین سیستم در فیگما باید با ساختار زیر همسو باشد:
Mobile-First Design: طراحیها باید ابتدا برای صفحات موبایل (با ارگونومی انگشت شست و منوهای در دسترس) اتود زده شوند و سپس به نسخههای تبلت و دسکتاپ گسترش یابند.
TailwindCSS Logic: سیستم Spacing (فاصلهها)، Gridها و تایپوگرافی در فیگما باید منطبق بر مقادیر استاندارد Tailwind (مثل ضرایب ۴ و ۸ پیکسل) باشد.
Shadcn UI: کامپوننتهای پایه (مثل Input، Button، Select، Dialog و...) قرار است توسط کتابخانه Shadcn پیادهسازی شوند. لطفاً در طراحی کامپوننتهای پایه، از ساختار مینیمال و استاندارد این کتابخانه الهام بگیرید و آنها را با تم گلسمورفیسم پروژه شخصیسازی کنید.
۳. انیمیشنها و تعاملات (Animations & Micro-interactions)
پویایی (Motion) بخش جداییناپذیر این پروژه است. ما انتظار داریم صفحات استاتیک نباشند. لطفاً در فیگما علاوه بر صفحات اصلی، Storyboard انیمیشنها یا پروتوتایپهای تعاملی را برای موارد زیر آماده کنید:
انیمیشنهای Scroll-Jacking (سبک وبسایتهای Apple): ما بخشهایی داریم (مثل معرفی خدمات یا مراحل کار) که کاربر با اسکرول کردن به پایین، صفحه برایش قفل (Pin) میشود و محتوا به صورت اسلایدرهای تمامصفحهِ افقی یا عمودی تغییر میکند. طراح باید Stateهای مختلف این اسکرولها را به دقت طراحی کند.
نمایش محتوا (Text Reveals): نحوه ظاهر شدن تیترها و کارتهای آماری هنگام رسیدن کاربر به آن بخش (Scroll Trigger) باید با جزئیات در پروتوتایپ مشخص شود (مثلاً ظاهر شدن نرمِ لایههای شیشهای).
*میکرواینترکشنها: هاور (Hover) دکمهها، باز شدن منوی همبرگری موبایل و تغییر حالت بین تم لایت و دارک باید نرم و جذاب طراحی شوند.
خروجی مورد انتظار: یک فایل فیگمای منظم شامل Design System کامل (Variables, Components, Auto-layouts)، صفحات طراحی شده با رویکرد Mobile-First، و پروتوتایپهای نمایشدهنده جریان انیمیشنهای اسکرول.