دقیق در انتخاب
نام قطعه، کد فنی، برند و خودروهای سازگار باید در نزدیکی هم دیده شوند. سازگاری محصول از عکس تزئینی مهم‌تر است.
savaniroo · DESIGN SYSTEM / 2026
قطعهٔ درست،
قطعهٔ درست،
مسیر روشن.
سیستم طراحی savaniroo برای تجربه‌ای ساده، دقیق و قابل اعتماد در خرید آنلاین لوازم یدکی خودرو. این راهنما زبان بصری و رفتاری محصول را از اولین جستجو تا انتخاب قطعه تعریف می‌کند.
راهنمای طراحی فروشگاهراست‌به‌چپ و فارسی‌محورریسپانسیو
PRECISION IN EVERY DETAILجهت بصری پیشنهادیفنی، دقیق، انسانی
01 / وضوحاطلاعات قبل از تزئین
02 / سازگاریخودرو و قطعه در یک نگاه
03 / اطمیناننمایش شفاف وضعیت کالا
04 / سرعتتصمیم‌گیری با قدم‌های کمتر
استراتژی تجربه
سه اصل راهنما / ۰۱
در فروش قطعه، زیبایی زمانی اثرگذار است که کاربر بتواند قطعهٔ مناسب خودروی خود را با اطمینان پیدا کند.
ساده در مسیر
دو مسیر روشن برای شروع: جستجوی مستقیم قطعه و انتخاب خودرو. فیلترها به ترتیب نیاز واقعی خریدار نمایش داده شوند.
شفاف در اعتماد
موجودی، قیمت، روش تماس، هزینهٔ ارسال و شرایط خرید فقط با اطلاعات تأییدشده نمایش داده شوند؛ بدون ادعای ساختگی.
دارایی رسمی برند
لوگو و کاربرد آن / ۰۲
نسخه‌های این بخش از فایل‌های اصلی SVG لوگو گرفته شده‌اند. تناسب، شکل و رنگ نشان در کاربردهای رابط حفظ می‌شود.
نسخهٔ اصلی روی زمینهٔ روشن
SVG-1 · ORIGINAL VECTOR
SVG-1 · ORIGINAL VECTORنسخهٔ روشن روی سبز اصلیSVG-4 · ORIGINAL VECTOR
SVG-4 · ORIGINAL VECTORچیدمان ۱ · SVG-1
چیدمان ۲ · SVG-2
چیدمان ۳ · SVG-3قاعدهٔ کاربرد: برای پس‌زمینهٔ روشن از نسخه‌های ۱ تا ۳ و برای زمینهٔ تیره از نسخه‌های ۴ تا ۶ همان چیدمان استفاده شود. به لوگو سایه، گرادیان یا رنگ تازه اضافه نشود. حداقل حریم خالی پیرامون نشان برابر ارتفاع حرف S در لوگوتایپ در نظر گرفته شود.
هویت بصری
رنگ‌های رابط / ۰۳
پالت رابط بر پایهٔ سبز و نارنجی پیشنهادی برند شکل گرفته است. رنگ‌های تعبیه‌شده در لوگو اندکی متفاوت‌اند و در نمایش خود نشان حفظ می‌شوند.
PRIMARY / STRUCTURE
سبز اصلی
#1D5141
برای هدر، دکمهٔ اصلی، تیترهای شاخص و سطوح پررنگ. حس تخصص، ثبات و اطمینان.
ACCENT / MOMENTUM
نارنجی اصلی
#EC6608
برای تأکید محدود، اقدام مهم، نشانگر فعال و جزئیات انرژی‌بخش. متن روی این رنگ باید تیره باشد.
رنگ‌های تعبیه‌شده در فایل لوگو:
#145041#F5833Cپیش از پیاده‌سازی نهایی، یک منبع رنگ واحد برای کل برند تأیید شود.رنگ‌های پشتیبان
نسبت استفاده
تقریباً ۷۰٪ سطوح خنثی، ۲۵٪ سبز و ۵٪ نارنجی. نارنجی برای هدایت نگاه باشد، نه پس‌زمینهٔ ممتد صفحه.
قانون خوانایی
نارنجی اصلی روی سفید برای متن معمولی کافی نیست. برای لینک متنی از #B84400 استفاده کنید؛ روی نارنجی اصلی، متن تیره قرار دهید.
صدای بصری
تایپوگرافی / ۰۴
یک خانوادهٔ خوانا برای فارسی، وزن‌های محدود و سلسله‌مراتب واضح؛ با پشتیبانی درست از اعداد و کدهای فنی لاتین.
DANA PRO · FANUM · RTL FIRST
قطعهٔ درست
دانا پرو فونت اصلی رابط برای متن فارسی، فرم‌ها، قیمت و داده‌های محصول است. نسخهٔ FaNum اعداد فارسی را در متن و قیمت حفظ می‌کند؛ کدهای فنی لاتین جدا و چپ‌به‌راست نمایش داده می‌شوند.
تیتر ۹۰۰ / ۱٫۲متن ۴۰۰–۵۰۰ / ۱٫۸دکمه ۸۰۰حداقل متن بدنه ۱۴px
تیتر اصلی48–88 / 900
تیتر بخش32–48 / 800–900
عنوان کارت18–22 / 700
متن توضیحی و محصول14–16 / 400–500
SKU 206-TU5-04کد فنی / چپ‌به‌راست
وزن‌های ۴۰۰ تا ۹۰۰ برای بدنه، ناوبری، فرم‌ها، قیمت و تیترها تعریف شده‌اند. تعداد وزن‌های بارگذاری‌شده در صفحات نهایی بر اساس نیاز همان صفحه انتخاب شود.
قیمت و متن فارسی با ارقام فارسی نمایش داده شوند. شناسهٔ قطعه، کد کالا و شماره‌های فنی در جهت چپ‌به‌راست و با فاصله‌گذاری ثابت از متن فارسی قرار بگیرند.
قواعد ساخت
مقیاس و ساختار / ۰۵
مقیاس ۴ پیکسلی، لبه‌های دقیق، برش‌های محدود و شبکهٔ منظم به رابط شخصیت فنی می‌دهند و مرور اطلاعات قطعات را آسان نگه می‌دارند.
فاصله‌ها
پایهٔ ۴px؛ فاصله‌های اصلی ۸، ۱۲، ۱۶، ۲۴، ۳۲ و ۴۸ پیکسل.
لبه‌ها و برش
سطوح اصلی تخت هستند؛ ۲ تا ۶px نرمی برای کنترل‌ها و یک برش زاویه‌دار برای پنل‌های شاخص.
026cut
شبکه
عرض محتوا تا ۱۳۲۰px؛ دسکتاپ ۱۲ ستون، تبلت ۶ ستون، موبایل ۴ ستون.
کتابخانهٔ رابط
اجزای پایه / ۰۶
نمونه‌های زیر حالت‌های اصلی را نشان می‌دهند. هر جزء باید در صفحه‌کلید، موبایل و حالت خطا نیز قابل استفاده باشد.
دکمه‌ها
BUTTONSاقدام اصلی هر ناحیه فقط یک دکمهٔ پررنگ داشته باشد؛ ارتفاع کنترل‌ها دست‌کم ۴۴px.
ورودی و جستجو
INPUTSدر جستجوی واقعی، نام قطعه، برند، مدل خودرو و کد فنی پشتیبانی شوند.
برچسب فیلد همیشه بیرون ورودی دیده شود؛ متن نمونه جای برچسب را نگیرد.
فیلتر و وضعیت
CHIPS & BADGESموجودموجودی محدودناموجودسازگار با خودرو
وضعیت فقط با رنگ منتقل نشود؛ متن و در صورت نیاز آیکن نیز همراه آن باشد.
تب‌های اطلاعات
TABSاطلاعات فنی و کد کالا با ساختار قابل اسکن نمایش داده می‌شوند.
فهرست خودروهای سازگار، همراه با مدل و سال ساخت، از دادهٔ تأییدشده خوانده شود.
در صورت تردید، مسیر تماس با پشتیبانی برای بررسی سازگاری در دسترس باشد.
الگوهای ویژهٔ فروشگاه
از خودرو تا قطعه / ۰۷
خریدار باید بتواند هم با انتخاب خودرو و هم با جستجوی نام یا کد قطعه به محصول مناسب برسد. این دو مسیر در savaniroo مکمل هم هستند.
اول خودرو را بشناسیم
کاربر با انتخاب خودرو، فقط قطعات مرتبط را می‌بیند. پیش از نهایی کردن سازگاری، تیپ و سال ساخت نیز باید بررسی شود.
خودروی شما چیست؟
این انتخابگر فقط نمونهٔ رفتاری است. فهرست نهایی خودروها پس از مشخص شدن کاتالوگ کالا تکمیل می‌شود.
اطلاعات مهم، پیش از کلیک
نام، کد فنی، برند، سازگاری، موجودی و قیمت باید در سلسله‌مراتبی ثابت در کارت محصول قرار بگیرند.
موجود
لنت ترمز جلو — نمونهٔ نمایشی
برند نمونه · کد فنی SN-2048
پژو ۲۰۶تیپ ۵نیازمند بررسی سال ساخت
۱٬۴۸۰٬۰۰۰ تومان
نام، وضعیت و قیمت این کارت صرفاً برای نمایش طراحی هستند و به کالای واقعی اشاره ندارند.
01شروع
جستجوی قطعه یا انتخاب خودرو
02تطبیق
مدل، تیپ، سال و کد فنی
03مقایسه
برند، مشخصات و قیمت
04تصمیم
موجودی و اقدام خرید روشن
معماری اطلاعات
دسته‌بندی قطعات / ۰۸
۱۸ دستهٔ اولیه در پنج گروه برای منوی فروشگاه سازمان‌دهی شده‌اند. این ساختار با موجودی واقعی و جزئیات کاتالوگ تکمیل می‌شود.
موتور و سرویس
از قطعات داخلی موتور تا مواد مصرفی و خروجی اگزوز.
سیلندر و سرسیلندرسیستم سوخت‌رسانیسیستم خنک‌کاریسیستم روغن‌کاریقطعات مصرفیسیستم اگزوز
شاسی و بدنه
قطعات حرکت، توقف و بدنه در یک مسیر قابل فهم.
سیستم تعلیقسیستم ترمزقطعات جلوقطعات عقبقطعات جانبیشیشه‌ها
برق و الکترونیک
با مسیر جداگانه برای روشنایی، حسگر و راه‌اندازی.
سیستم روشناییسنسورهاباتری و استارت
انتقال قدرت
قطعاتی که کارکردشان باید با مدل خودرو تطبیق داده شود.
کیت کلاچگیربکس
تهویه و آسایش
مسیر روشن برای قطعات سرمایش و گرمایش کابین.
کولر و بخاری
رسم‌الخط عنوان‌ها برای منوی دیجیتال یکدست شده است. نام ریزدسته‌ها پس از تطبیق با کاتالوگ کالا نهایی شود.
دارایی‌های کمپین
بنرهای صفحهٔ اصلی / ۰۹
دو مسیر تصویری برای بنر اصلی فروشگاه در نظر گرفته شده است. ترکیب تصویر و متن برای دسکتاپ قابل بررسی است و نسخهٔ موبایل به چیدمان اختصاصی نیاز دارد.
کیفیت تجربه
دسترس‌پذیری / ۱۰
خوانایی و تعامل‌پذیری بخشی از هویت برند هستند؛ به‌ویژه در صفحه‌هایی که داده‌های فنی و شماره‌قطعه زیاد دارند.
چک‌لیست اجرایی
- متن معمولی حداقل کنتراست ۴٫۵:۱ و متن درشت حداقل ۳:۱ داشته باشد.
- حالت فوکوس واضح برای دکمه، فیلتر، انتخابگر خودرو و فرم حفظ شود.
- جهت راست‌به‌چپ برای فارسی و جهت چپ‌به‌راست برای کد فنی، URL و شماره تلفن تنظیم شود.
- ناحیهٔ لمس کنترل‌ها دست‌کم ۴۴×۴۴ پیکسل و فاصلهٔ کافی میان اقدام‌ها باشد.
- حرکت‌های تزئینی با تنظیم کاهش حرکت سیستم متوقف یا کوتاه شوند.
نمونهٔ کنتراست رنگ
سفید روی سبز اصلی9.11:1
متن تیره روی نارنجی اصلی4.99:1
نارنجی تیره روی سفید5.43:1
نسبت‌ها برای جفت‌رنگ‌های نشان‌داده‌شده محاسبه شده‌اند؛ در ترکیب‌های دیگر دوباره بررسی شوند.
تحویل به تیم اجرا
قواعد استفاده / ۱۱
این نسخه، نقطهٔ شروع منسجم برای طراحی صفحه‌های فروشگاه است. ساختار دسته‌بندی با ورود کاتالوگ واقعی و تأیید رنگ‌های نهایی تکمیل می‌شود.
نمونهٔ توکن‌ها / CSSCOPY READY
:root {
--brand-green: #1D5141;
--brand-orange: #EC6608;
--action-text: #17231E;
--surface: #FFFFFF;
--canvas: #F7F6F2;
--text-primary: #17231E;
--text-secondary: #5C6C65;
--border: #DCE3DF;
--radius-control: 2px;
--radius-card: 6px;
--space-unit: 4px;
}لحن نوشتار
روشن، دقیق و کمک‌کننده. نام فنی و سازگاری کالا بدون عبارت‌های مبهم یا ادعای تأییدنشده نوشته شود.
عکاسی محصول
پس‌زمینهٔ روشن، زاویهٔ ثابت، نمایش جزئیات قطعه و تصویر بسته‌بندی در صورت نیاز؛ عکس واقعی بر تصویرسازی تزئینی اولویت دارد.
ریزتعامل‌ها
زمان پیشنهادی ۱۵۰ تا ۲۲۰ میلی‌ثانیه، حرکت کم و هدفمند؛ تغییر حالت‌ها باید سریع و قابل پیش‌بینی باشد.
اولویت موبایل
جستجو و انتخاب خودرو زود دیده شوند؛ فیلترها به صورت قابل باز و بسته شدن و دکمهٔ خرید با دسترسی آسان ارائه شوند.