Banner Builder
بنر Normal شامل همه بنرهای In-Ride، Finding، Pick-up، Bottom و اپلیکیشن سفیران تپسی می‌شود.
بک‌گراند
متن عنوان
متن توضیحات
دکمه
متن دکمه
Key Visual
سفارش بده
اندازه واقعی: ۳۲۸×۱۶۴ پیکسل
🖼️
آپلود Key Visual
PNG با پس‌زمینه شفاف
PNG با پس‌زمینه شفاف الزامی است
اندازه 100%
موقعیت X 0px
موقعیت Y 0px
چرخش 0°
روشنایی 100%
کنتراست 100%
می‌توانید تصویر را روی پیش‌نمایش هم drag کنید
Reza Mehrabani Product Graphic Designer
گایدلاین بنرهای تپسی
خلاصه قوانین و الزامات طراحی — برای مشاهده کامل از دکمه‌های زیر استفاده کنید
ساختار متنی بنر
هر بنر از سه بخش تشکیل می‌شود: عنوان (الزامی)، توضیحات (اختیاری) و دکمه (اختیاری). هر بنر چند ورینت دارد؛ عنوان می‌تواند «یک خطی» یا «دو خطی» باشد و توضیحات هم «یک خطی» یا «دو خطی». عنوان و توضیحات با هم باید در فضای بنر جا شوند (یعنی یا عنوان یک خطی + توضیحات دو خطی، یا عنوان دو خطی + توضیحات یک خطی). فونت و سایز متن از پیش تعیین شده‌اند و قابل تغییر نیستند.
جدول زیر حداکثر تعداد کاراکتر مجاز هر فیلد را در هر بنر نشان می‌دهد. علامت «—» یعنی آن حالت برای آن بنر وجود ندارد.
فیلد Normal Top Narrow Square Mini
عنوان — یک خطی۱۵۱۵۲۵۱۵۸
عنوان — دو خطی۳۰۳۰۵۵۳۲—
توضیحات — یک خطی۲۰۲۰۳۰۲۰۹
توضیحات — دو خطی۴۰۴۰۶۵۴۰—
دکمه۱۵۱۵—۵—
نکته دربارهٔ تاپ بنر: چهار ورینت دارد — «با دکمه + عنوان یک خطی + توضیحات»، «با دکمه + عنوان دو خطی (بدون توضیحات)»، «بدون دکمه + عنوان یک خطی» و «بدون دکمه + عنوان دو خطی». در ورینت «با دکمه + عنوان دو خطی»، توضیحات وجود ندارد.
تصویر کلیدی (Key Visual)
فرمتPNG با پس‌زمینه شفاف (Transparent)
ابعاد480×480 px — نسبت ۱:۱
بنرهای معمولی (Normal، Narrow، Square، Mini)
ناحیه ناامنTop: 48px / Right: 48px
کادر ۴۸۰×۴۸۰ پیکسل
ناحیه ناامن — بالا ناحیه ناامن — راست ناحیه امن محل قرارگیری تصویر 48px 48px
تاپ بنر
ناحیه ناامنTop: 48px / Right: 48px / Bottom: 48px
کادر ۴۸۰×۴۸۰ پیکسل
ناحیه ناامن — بالا ناحیه ناامن — پایین ناحیه ناامن — راست ناحیه امن محل قرارگیری تصویر 48px 48px 48px
✕تصویر نباید لبه بالایی یا سمت راست کادر PNG را قطع کند
✕لوگو یا نشان برند نباید نزدیک به لبه‌های کادر ۴۸۰×۴۸۰ قرار گیرد
✕تصویر کلیدی نباید شلوغ یا دارای نقوش بسیار ظریف باشد که در سایز موبایل ناخوانا شوند
چک‌لیست دیزاین کی‌ویژوال
هنگام طراحی تصویر کلیدی، این ۶ معیار را بررسی کنید تا خروجی باکیفیت و هماهنگ با هویت تپسی باشد:
سادگی (Simplicity)
طراحی مینیمال و متمرکز، بدون جزئیات غیرضروری.
وضوح پیام (Clarity of Message)
ایدهٔ اصلی بی‌درنگ و بدون ابهام به مخاطب منتقل می‌شود.
یکپارچگی با برند (Brand Consistency)
رنگ‌ها و سبک بصری کاملاً هم‌راستا با هویت برند باشند.
نور و سایه (Lighting & Shadows)
استفادهٔ ظریف، یکدست و واقع‌گرایانه از نور و سایه (رندر باکیفیت).
ترکیب‌بندی و سلسله‌مراتب (Composition & Hierarchy)
چیدمان شفاف با عناصر متوازن و جریان بصری قوی.
خلاقیت و جذابیت (Creativity & Engagement)
کانسپت تازه، متناسب با زمینه و جذاب برای مخاطب هدف.
رنگ
همهٔ رنگ‌های داخل پالت رنگ بنرها قابل استفاده‌اند؛ اما بسته به نوع بنر محدودیت‌هایی وجود دارد که در ادامه به تفکیک آمده است.
رنگ‌های سمنتیک اپ
قرمز
۵۰۰ · #AB1300
۴۰۰ · #E11900
سبز
۵۰۰ · #03703C
۴۰۰ · #048848
زرد
۵۰۰ · #E49E15
۴۰۰ · #FFC043
۱. تاپ بنر و بنر صفحهٔ پروفایل اپ سفیران
✕رنگ‌های نزدیک یا برابر با رنگ‌های سمنتیک اپ (قرمز، سبز، زرد) برای رنگ بک‌گراند و رنگ دکمه قابل استفاده نیستند.
✕اشباع (Saturation) رنگ بک‌گراند نباید بالا باشد و حداکثر مقدار مجاز آن ۷۰ در سیستم رنگی HSL است؛ چون بک‌گراند تاپ بنر کل فولد اول اپ را تحت تأثیر قرار می‌دهد.
✕در بنر صفحهٔ پروفایل اپ سفیران، علاوه بر حداکثر اشباع ۷۰، مقدار روشنایی (Lightness) رنگ بک‌گراند باید بین ۸۰ تا ۱۰۰ در سیستم رنگی HSL باشد.
✕رنگ‌های تیره برای بک‌گراند مجاز نیستند، مگر آنکه کانسپت بنر آن را ایجاب کند (مثلاً کانسپتی حول محور کهکشان با ویژوالِ مرتبط). در این حالت باید بررسی شود که آیا کانسپت بنر واقعاً به بک‌گراند تیره نیاز دارد یا نه.
۲. سایر بنرها (بنرهای نرمال)
✕دقیقاً همین رنگ‌های سمنتیک اپ (قرمز، سبز، زرد) برای رنگ بک‌گراند و رنگ دکمه قابل استفاده نیستند.
✓سایر رنگ‌های پالت برای بک‌گراند و دکمه قابل استفاده‌اند (با رعایت کنتراست مناسب متن، دکمه و بک‌گراند).
توجه: تصمیم نهایی دربارهٔ اینکه رنگ انتخابی شما هویت بصری اپ تپسی را تحت تأثیر قرار می‌دهد یا نه، با تیم دیزاین تپسی است و این موضوع در تعامل با شما پیش می‌رود تا در صورت نیاز رنگ مناسب‌تری انتخاب شود.
بایدها و نبایدها
✓نام برند یا لوگو/لوگوتایپ حتماً در متن یا ویژوال وجود داشته باشد (به جز ونچرهای تپسی)
✓تصویر کلیدی باید سبک بصری یکدستی با سایر عناصر بنر داشته باشد
✓کنتراست مناسب بین رنگ متن، دکمه و بک‌گراند رعایت شود
✕رنگ قرمز به عنوان رنگ بک‌گراند دکمه استفاده نشود (معنای هشدار برای کاربر دارد)
✕ترکیب استایل‌های بصری ناهماهنگ در تصویر مجاز نیست
✕عدم هماهنگی کنتراست بین رنگ‌های انتخاب‌شده برای متن، دکمه و بک‌گراند
رنگ دکمه CTA
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✕ رنگ قرمز = هشدار برای کاربر
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✓ رنگ دکمه متناسب با بنر
کنتراست متن روی بک‌گراند
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✕ کنتراست ناکافی — متن ناخوانا
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✓ کنتراست مناسب و خوانا
قرارگیری Key Visual
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✕ تصویر از بالا قطع شده
عنوان بنر توضیحات بنر در اینجا
سفارش بده
✓ تصویر کاملاً در محدوده امن
برای مشاهده کامل گایدلاین از دکمه‌های زیر استفاده کنید:
راهنمای استفاده
نحوه کار با Banner Builder و پروسه اکران بنر
راهنمای استفاده از Banner Builder
بنرتب بنر
در این تب بنرهای اصلی تپسی را می‌سازید.
  • نوع بنر را از پنل راست انتخاب کنید: Normal، Narrow، Square، Mini Narrow
  • ساختار عنوان را تعیین کنید: یک‌خطی یا دوخطی
  • متن بنر را در پنل چپ وارد کنید — کنتر کاراکتر به شما نشان می‌دهد کجا هستید
  • تصویر کلیدی PNG با پس‌زمینه شفاف را آپلود کنید
  • پس از آپلود کی‌ویژوال می‌توانید اندازه، موقعیت، چرخش، روشنایی و کنتراست تصویر را تنظیم کنید
  • رنگ‌های بک‌گراند، متن و دکمه از پنل راست قابل تغییر است
پروموتب پرومو
در این تب پروموشن سکشن صفحه اول سوپراپ را پیکربندی می‌کنید.
  • عنوان پروموشن را وارد کنید
  • کارت‌های محصول را اضافه کنید — برای هر کارت می‌توانید تصویر، عنوان، قیمت، بج و زیرعنوان تعریف کنید
  • ورینت کارت (با قیمت یا بدون قیمت) نوع اطلاعات نمایش‌داده‌شده را تعیین می‌کند و برای تمام کارت‌ها به‌صورت یکجا اعمال می‌شود
  • تصویر محصول هر کارت باید نسبت ۱:۱ داشته باشد
  • تصاویر تمام کارت‌های یک پروموشن باید از نظر قاب‌بندی، زاویه و استایل تصویرسازی یکدست و یکپارچه باشند
اینباکستب اینباکس
این تب برای ساخت پیام‌های اینباکس (صندوق پیام) تپسی است.
  • تصویر کلیدی و لوگوی برند را آپلود کنید
  • عنوان و متن توضیحات را وارد کنید — برای جلوگیری از سه‌نقطه شدن عنوان در لیست پیام‌ها، تعداد کاراکتر عنوان را زیر ۳۰ یا حداکثر ۳۵ نگه دارید
  • در صورت نیاز دکمه CTA با لینک و کد تخفیف را فعال کنید
  • پیش‌نمایش کامل صفحه پیام و نمای لیست پیام‌ها در مرکز صفحه نمایش داده می‌شود
خروجیدکمه خروجی
با کلیک روی دکمه «خروجی» در بالای صفحه دو گزینه دارید:
  • خروجی برای بررسی — PNG برای ارسال پیش‌نمایش به تیم تپسی
  • خروجی پکیج نهایی — فایل ZIP شامل تمام اسست‌ها و فایل state پروژه
پروسه اکران
۱
طراحی
بنر را بر اساس گایدلاین تپسی و هویت بصری برند خودتان در Banner Builder بسازید.
۲
ارسال پیش‌نمایش
از طریق گزینه «خروجی برای بررسی» یک PNG تهیه کرده و برای تیم تپسی ارسال کنید.
۳
بررسی و اصلاحات
تیم تپسی بازخورد می‌دهد. اصلاحات را اعمال کنید و در صورت نیاز مجدداً پیش‌نمایش ارسال کنید.
۴
ارسال پکیج نهایی
پس از تأیید، از طریق گزینه «خروجی پکیج نهایی» فایل ZIP را آماده و ارسال کنید.
ویدیو آموزشی
برای آشنایی کامل با نحوه استفاده از Banner Builder ویدیو آموزشی را مشاهده کنید.
مشاهده ویدیو آموزشیبه‌زودی — لینک ویدیو پس از آماده‌شدن اضافه می‌شود
پیشنهاد ورینت مناسب‌تر