منتشرشده：2026-09-28
کلیدواژهها：Nano Banana Pro, Nano Banana, وبسایت رسمی Nano Banana, لندینگپیج SaaS, Hero لندینگ, nanobanana prompts
تیمهایی که سایت محصول B2B، ابزارهای توسعهدهنده یا SaaS گردشکار AI میسازند میدانند: قبل از اینکه بازدیدکننده به قیمتها اسکرول کند، آنچه معمولاً تصمیم میگیرد «میخواهد ادامه بدهد یا نه» این است که آیا Hero بالای صفحه حرفهای به نظر میرسد و تصویرسازیهای قابلیت مثل یک سیستم طراحی واحد حس میشوند. اگر Hero، کارتهای قابلیت و نوار اثبات اجتماعی در دمای رنگ یا مقیاس لوگو ناسازگار باشند، بازدیدکننده فکر میکند سه شرکت مختلف صفحه را چسباندهاند. بسیاری از تیمها Hero را به طراح میسپارند، هنر قابلیت را از کتابخانه آیکون میگیرند و Pitch Deck را برای نوار مزایا برش میزنند — همتراز کردن سه زنجیره دارایی اغلب چند روز میسوزاند و صفحه اول موبایل همچنان به «نیمه محصول» برش میخورد.
این راهنما با موضوعات گذشته «اسلاید Pitch Deck»، «کیت بصری وبینار»، «هدر Newsletter ایمیل» و «اسکرینشات App Store ASO» فرق دارد. فقط یک کار را حل میکند: چگونه از وبسایت رسمی Nano Banana از طریق اپ ساخت Nano Banana وارد اپ ساخت شوید، سپس با Nano Banana / Nano Banana Pro در نیمروز یک کیت بصری لندینگپیج SaaS آماده لانچ تحویل دهید — پوشش صفحه Hero، کارتهای تصویرسازی قابلیت و نوار مزایا / اثبات اجتماعی بدون برونسپاری سه زنجیره بصری جدا.
بهدست میآورید: جدول برنامهریزی کیت ۸ دارایی، چکلیست کامل مواد، گردشکار چهارمرحلهای، سه قالب کامل پرامپت انگلیسی (جاینگهدار قابل تعویض)، راهنمای نسبت بالای صفحه و بخشها، سه تحلیل موردی، جدول دامها و توصیه انتخاب Nano Banana در برابر Nano Banana Pro. هیچ بدنه پرامپتی کوتاه نشده — اسکریپت seed بلوکهای انگلیسی کامل را تزریق میکند تا بتوانید بچسبانید و صفحه Hero، کارت قابلیت و نوار مزایا را بفرستید.
۱. چرا از Nano Banana / Nano Banana Pro برای بصریهای لندینگ استفاده کنیم؟
برونسپاری سنتی Hero، کارت قابلیت و نوار مزایا را بین فروشندگان مختلف میشکند؛ سبک کتابخانههای آیکون از بخش به بخش میپرد. در گردشکار وبسایت رسمی Nano Banana، Nano Banana برای کاوش سریع حجم و ترکیببندی ایدهآل است، در حالی که Nano Banana Pro رنگ برند، هویت محصول/UI و ناحیه امن تیتر را برای نهاییها قفل میکند. قبل از خرج اعتبار روی لانچ، ماتریس قابلیت زیر را مقایسه کنید:
| قابلیت | مخلوط برونسپاری سنتی | Nano Banana / Nano Banana Pro |
|---|---|---|
| ترکیببندی Hero بالای صفحه | یک بازبینی یک روز منتظر میماند | زبان طبیعی برای امتحان سریع ۵ جهت؛ Pro رنگ برند و محصول/UI را پایدارتر قفل میکند |
| فضای منفی تصویرسازی قابلیت | سبک کتابخانه آیکون تصادفی میپرد | اسکچ کارت تمیز؛ Pro ناحیه امن تیتر کوتاه را برای اورلی بخش روشنتر میکند |
| وحدت سری | Hero، قابلیت و نوار مزایا هر کدام راه خود را میروند | یک اسکلت پرامپت را بازاستفاده کنید؛ گردشکار همان حساب در کل کیت منسجم میماند |
| ایمنی برش موبایل | فقط بعد از خروجی متوجه بریدگی چهره/محصول میشوید | ناحیه امن و لنگر ترکیببندی ثابت؛ نهاییهای Pro کنتراست مناسب صفحه اول را نگه میدارند |
| ورود و منحنی یادگیری | ابزارهای پراکنده | راهنما + موارد روی وبسایت رسمی Nano Banana؛ صفحات ستون Pro انتخاب را توضیح میدهند |
یک جمله: با Nano Banana ترکیببندی و حجم را کاوش کنید؛ با Nano Banana Pro رنگ برند، هویت محصول/UI و ناحیه امن تیتر را برای نهایی قفل کنید. برای تصمیم و نقاط ورود، از صفحات محصول Nano Banana و Nano Banana Pro روی سایت رسمی شروع کنید؛ اعتبار و پلنها در صفحه قیمتگذاری است. بصری لندینگ SaaS «یک هیرو بهعلاوه آیکون تصادفی» نیست — یک سیستم بصری محصول قابل استفاده مجدد برای Hero، قابلیت و اثبات اجتماعی است.
۲. برنامه کیت بصری لندینگپیج SaaS (۸ دارایی پیشنهادی)
قبل از ریختن تصویرسازی استوک در Figma، «کار بصری هر بخش» را در جدول تعریف کنید — اعتبار را ذخیره میکند و Hero، ردیف قابلیت و نوار اثبات اجتماعی را مثل یک محصول حس میدهد:
| # | نوع بصری | هدف | مدل پیشنهادی |
|---|---|---|---|
| 1 | صفحه Hero | بصری اصلی پشت H1 + CTA بالای صفحه | Nano Banana Pro |
| 2 | کلوزآپ محصول / UI | اثبات «این محصول واقعی است» | Nano Banana Pro |
| 3 | تصویرسازی قابلیت A | استعاره اتوماسیون / کارایی | Nano Banana / Pro |
| 4 | تصویرسازی قابلیت B | استعاره همکاری / گردشکار | Nano Banana / Pro |
| 5 | تصویرسازی قابلیت C | استعاره تحلیل / امنیت | Nano Banana Pro |
| 6 | نوار مزایا / اثبات اجتماعی | پسزمینه برای نقلقول یا دیوار لوگو | Nano Banana Pro |
| 7 | صحنه قبل / بعد | نشان دادن «قبل از استفاده در برابر بعد» | Nano Banana Pro |
| 8 | فضای CTA پایین صفحه | بستن تبدیل بدون دزدیدن دکمه | Nano Banana Pro |
نکته سایت رسمی: روی وبسایت رسمی Nano Banana ابتدا Showcase و راهنمای پرامپت را باز کنید — موارد «clean commercial illustration / product Hero» را نشانک کنید، سپس وارد اپ ساخت Nano Banana شوید. سریعتر از اختراع ظاهر لندینگ از صفر است. این کیت برای Hero لندینگ SaaS، کارت تصویرسازی قابلیت و نوار مزایا / اثبات اجتماعی ساخته شده، نه وبینار، هدر Newsletter ایمیل یا اسلاید Pitch Deck.
۳. چکلیست آمادهسازی دارایی (چه چیزی تعیین میکند کل سایت «مثل یک محصول» باشد)
قبل از باز کردن اپ ساخت، موارد زیر را آماده کنید. رد کردن این مرحله دلیل شماره ۱ است که Hero، کارت قابلیت و نوار مزایا مثل سه آژانس چسباندهشده به نظر برسند:
- مرجع برند (الزامی): سیلوئت واضح لوگو؛ رنگ اصلی و فرعی بهصورت نام انگلیسی یا hex
- مرجع محصول یا UI (قویاً توصیهشده): اسکرینشات UI واقعی یا محصول فیزیکی بهعنوان Image 1 — بخواهید «متن رابط را به برچسب درهم بازطراحی نکن»
- تن دسته: B2B productivity / developer tools / AI workflow — فقط یکی را انتخاب کنید و در توضیح سبک بنویسید
- فهرست بخشها: Hero، ۳ کارت قابلیت، نوار مزایا، CTA پایین — قبل از تولید تعداد را قفل کنید
- نسبت ابعاد و ناحیه امن: ۱۶:۹ برای Hero؛ ۱:۱ برای کارت قابلیت؛ حدود ۴۰٪ فضای منفی تمیز برای تیترها رزرو کنید
- محدودیتهای منفی: no watermark, no fake pricing, no melted UI text, no random stock faces
لازم نیست اول دکمهها را در فایل طراحی بکشید. Nano Banana Pro میتواند فقط از روی توضیح، ناحیه امن تیتر و CTA بگذارد؛ پسزمینه هرچه تمیزتر باشد، اورلی کپی واقعی بعدی پایدارتر است. این چکلیست را «بریف یک محصول» برای کل کیت لندینگ بدانید.
۴. گردشکار چهارمرحلهای (از سایت رسمی تا آماده لانچ)
گام ۱: ورود به ساخت از وبسایت رسمی Nano Banana
- اپ ساخت Nano Banana را از وبسایت رسمی Nano Banana باز کنید
- برای Hero، کلوزآپ محصول و نوار مزایا اولویت را به Nano Banana Pro بدهید؛ برای کاوش خالص استعاره از Nano Banana استفاده کنید
- تصویر برند یا محصول/UI را بهعنوان Image 1 آپلود کنید
گام ۲: انتخاب قالبها به ترتیب کیت
اسکریپت seed سه اسکلت پرامپت انگلیسی آماده کپی را در زیر تزریق میکند (stub کوتاه نسازید — بلوکهای کامل را برای صفحه Hero، کارت قابلیت و نوار مزایا بچسبانید):
- قالب A: صفحه Hero لندینگ (۱۶:۹، ناحیه امن تیتر بزرگ)
- قالب B: مربع تصویرسازی قابلیت (۱:۱، یک استعاره قابلیت)
- قالب C: نوار مزایا / اثبات اجتماعی (۱۶:۹، فضای منفی پهن)
گام ۳: پس از تولید «بررسی لانچ» اجرا کنید
- پس از برش صفحه اول موبایل، هنوز محصول و رنگ برند را میشناسید؟
- ناحیه امن تیتر و CTA بهاندازه کافی بزرگ است — پر از بافت پیچیده نیست؟
- لبههای UI / محصول سالماند و برچسبها ذوب نشدهاند؟
- Hero، کارت قابلیت و نوار مزایا یک دمای رنگ و زبان ترکیببندی دارند؟
- قیمت جعلی، لوگوی مشتری جعلی یا واترمارک؟
گام ۴: تکرار با پیگیری کوتاه + خروجی بر اساس بخش
با تویکهای کوتاه گفتوگویی تکرار کنید، سپس Hero و نوار مزایا را در ۱۶:۹ و کارت قابلیت را در ۱:۱ خروجی بگیرید و کپی و دکمه واقعی را در لندینگ روی هم بگذارید. پیگیریهای رایج:
- “enlarge headline safe zone”
- “keep brand purple”
- “simplify UI chrome”
- “simpler background, larger headline zone”
- “preserve UI label legibility”
پس از نهایی، Hero و نوار مزایا را در ۱۶:۹ و کارت قابلیت را در ۱:۱ خروجی بگیرید، سپس کپی و دکمه واقعی را در لندینگ ترکیب کنید — هرگز قیمت جعلی را در صفحه نپزید. برای الگوهای شکست و رفع، از صفحه Failures و بلاگ common-failures روی وبسایت رسمی Nano Banana استفاده کنید — اعتبار را با یادگیری دوباره همان اشتباهات لندینگ نسوزانید.
۵. قالب پرامپت A: صفحه Hero لندینگ
Subject: SaaS landing-page hero background, 16:9. Preserve brand identity from Image 1 100% — logo silhouette, primary colors, and product/UI shape if present. Do not invent a different brand.
Composition: Product, UI frame, or abstract brand motif on the 【left third / right third】. Leave a large clean headline-safe zone on the opposite side (about 40% width) for H1 + subhead + CTA overlay later — no baked-in garbled text, no fake buttons with melted labels.
Style: 【B2B productivity / developer tools / AI workflow SaaS】; premium modern landing-page look; high contrast for above-the-fold readability on desktop and mobile.
Lighting: Soft studio key, gentle rim, subtle screen glow if UI is shown; avoid muddy midtones and neon overload.
Negative constraints: no watermark, no fake pricing numbers, no unreadable micro-UI text, no random stock faces, no cluttered dashboard spam.
Output: 16:9, 4K, Nano Banana Pro SaaS landing hero plate.
نحوه استفاده
- لوگو یا مرجع محصول/UI را بهعنوان Image 1 آپلود کنید
- بلوک انگلیسی کامل را بچسبانید، تن دسته و سمت ناحیه امن را پر کنید
- اگر پسزمینه شلوغ است، با “simpler background, larger headline zone” ادامه دهید
- قبل از قفل، یکبار در عرض دسکتاپ و یکبار در عرض گوشی صفحه اول را پیشنمایش کنید
۶. قالب پرامپت B: مربع تصویرسازی قابلیت
Layout: Square SaaS feature illustration card, 1:1. Preserve brand accent from Image 1 as a quiet motif only. Communicate ONE feature metaphor — 【automation / collaboration / analytics / security】 — without baking long paragraphs.
Composition: One clear visual metaphor centered or left-weighted. Keep 40–50% calm negative space for a short feature title overlay later. Motif stays simple and icon-like, not a full comic scene.
Style: Minimal product-marketing illustration, Nano Banana Pro clean commercial plate, section-grid friendly.
Lighting: Even, low-drama; readable as a small card in a 3-column features row.
Negative constraints: no fake charts with readable numbers, no melted labels, no watermark, no stock photo collage, no unrelated mascot spam.
Output: 1:1, 4K, Nano Banana or Nano Banana Pro SaaS feature illustration.
نکته یادگیری: کارت قابلیت یک استعاره دارد، نه کل فهرست قابلیت پختهشده در تصویر. تیتر و بولت واقعی را در لایه کپی صفحه بگذارید. اگر فقط تست سریع جهت میخواهید، با Nano Banana شروع کنید، سپس برای صفحه نهایی به Nano Banana Pro بروید. برای مهارت فضای منفی در چیدمانهای اطلاعاتی، راهنمای پوستر/اینفوگرافیک روی وبسایت رسمی Nano Banana را ببینید.
۷. قالب پرامپت C: نوار مزایا / اثبات اجتماعی
Benefit strip / social proof backdrop for a SaaS landing page, 16:9 wide or 3:1 crop-friendly.
Identity: If a logo is uploaded as Image 1, preserve brand colors and silhouette 100%. Do not invent competitor logos. If a product shot is uploaded, preserve the SKU/UI 100%.
Composition: Soft brand-color gradient or quiet abstract geometry with a wide calm center band for future quote/logo-row overlay. Keep edges quiet so the strip can sit under a testimonials section.
Style: Consistent with the hero palette 【brand primary + charcoal/white】 so hero, feature cards, and benefit strip feel like one design system.
Lighting: Soft even wash, no harsh vignette that hides overlay text later.
Negative constraints: no fake customer logos, no watermark, no dense isometric city, no garbled testimonial text baked in.
Output: 16:9, 4K, Nano Banana Pro SaaS benefit-strip plate.
نکته یادگیری: بخش اثبات اجتماعی به صفحه آرام نیاز دارد — لوگوی مشتری و متن نقلقول واقعی را از داراییهای خودتان روی هم بگذارید. لوگوی جعلی اعتماد را میکشد و ریسک انطباق میسازد. برای اسکلت پرامپت بیشتر، مجموعه prompt-pack روی وبسایت رسمی Nano Banana را ببینید. هرگاه نوار باید با پالت Hero برای نهاییها همخوان باشد، Nano Banana Pro را ترجیح دهید.
۸. توصیههای نسبت ابعاد، بالای صفحه و خروجی
| مورد استفاده | نسبت پیشنهادی | یادداشت |
|---|---|---|
| Hero دسکتاپ | ۱۶:۹ | حدود ۴۰٪ فضای منفی برای ناحیه تیتر |
| برش Hero موبایل | ناحیه امن را مراقب باشید | سوژه محصول را از لبه سخت دور نگه دارید |
| کارت قابلیت سهستونه | ۱:۱ | همان جهت نور و پالت |
| صفحه نوار مزایا / دیوار لوگو | ۱۶:۹ یا برشپذیر ۳:۱ | نوار مرکزی آرام و پهن برای اورلی |
| فضای CTA پایین | ۱۶:۹ | با دکمه یا فرم رقابت نکنید |
حتی پس از خروجی، در بریکپوینت هدف پیشنمایش کنید. بسیاری از مشکلات «روی دسکتاپ پریمیوم، روی موبایل فقط یک بلوک رنگ» از بستهبندی ناحیه امن و کنتراست میآیند — نه از خود ۴K. ناحیه تیتر را تمیز نگه دارید تا H1 و CTA بالای صفحه خوانا بمانند.
۹. سه تحلیل موردی (ساختار را کپی کنید)
مورد ۱: لندینگ ابزار بهرهوری B2B
- هدف: Hero بنفش برند را به خاطر بسپارد؛ سه کارت قابلیت یک زبان داشته باشند؛ نوار مزایا جا برای نقلقول مشتری بگذارد
- رویکرد: قالب A (محصول راست، ناحیه تیتر چپ) → B×۳ (اتوماسیون / همکاری / گزارش) → C (نوار پهن گرادیان ذغالی)
- نتیجه: بالای صفحه و بخش قابلیت مثل یک سیستم طراحی واحد حس میشوند
- یادگیری: هرگز قیمت جعلی را روی Hero نپزید؛ قیمتها را در بلوک قیمتگذاری بگذارید
مورد ۲: صفحه اصلی مستندات ابزار توسعهدهنده
- هدف: اسکرینشات UI خوانا بماند، نه درهم؛ تن «مهندسی قابل اعتماد»
- رویکرد: رابط را روی کلوزآپ محصول با Nano Banana Pro قفل کنید؛ کارت قابلیت کمتزئین با فضای منفی بیشتر
- نتیجه: بازدیدکنندگان فنی گفتند «مثل SaaS سایت قالب به نظر نمیرسد»
- یادگیری: سایتهای توسعهدهنده باید از نئون اغراقشده و درخشش علمیتخیلی بپرهیزند
مورد ۳: بازطراحی محصول گردشکار AI
- هدف: سایت قدیم و جدید از نظر بصری پیوسته بمانند، اما واضح ارتقا یافته باشند
- رویکرد: رنگ اصلی و نسبت ناحیه امن را ثابت کنید؛ فقط عناصر استعاره و ریزتنظیم نور را عوض کنید
- نتیجه: کاربران بازگشتی هنوز برند را میشناسند؛ بازدیدکنندگان جدید لانچ تازهتری حس میکنند
- یادگیری: هر بار فقط یک کلاس متغیر را عوض کنید تا سری پایدار بماند
۱۰. اشتباهات رایج و نحوه اجتناب
| اشتباه | پیامد | رفع |
|---|---|---|
| پر کردن Hero با اعداد داشبورد جعلی | غیرقابلاعتماد و سخت برای نگهداری | Hero = فقط بصری اصلی + ناحیه تیتر |
| ناحیه امن تیتر پر از بافت | اورلی H1 / CTA شلوغ و بههمریخته میشود | “larger clean headline-safe zone” |
| کارتهای قابلیت سبک مشترک ندارند | کل سایت مثل کلاژ حس میشود | پالت و توضیح ترکیببندی را قفل کنید |
| متن UI ذوب میشود | محصول جعلی حس میشود | “preserve UI label legibility” + Nano Banana Pro |
| نوار مزایا لوگوی مشتری جعلی میسازد | ریسک انطباق و اعتماد | فقط صفحه را بسازید؛ لوگوی واقعی را روی هم بگذارید |
| نهایی کردن Hero فقط با استاندارد | لبههای محصول نرم میشوند | Hero و کلوزآپ محصول را به Nano Banana Pro ببرید |
برای اجتناب سیستماتیک، Failures و آزمایشهای Lab را روی وبسایت رسمی Nano Banana بررسی کنید. اعتماد لندینگ وقتی سریعترین میمیرد که قیمت جعلی، برچسب UI ذوبشده یا کلاژ سبکهای قابلیت نامرتبط ظاهر شود — قبل از انتشار آنها را توقف سخت بدانید.
۱۱. Nano Banana در برابر Nano Banana Pro: برای لندینگ چگونه انتخاب کنیم؟
| وظیفه | انتخاب بهتر |
|---|---|
| امتحان سریع ۵ ترکیب Hero | Nano Banana |
| نهایی Hero + قفل رنگ برند و UI | Nano Banana Pro |
| کاوش استعاره کارت قابلیت | Nano Banana / Pro |
| صفحه آرام نوار مزایا | Nano Banana Pro |
| ورود یادگیری و توضیح محصول | صفحات ستون و بلاگ وبسایت رسمی Nano Banana |
جزئیات انتخاب در مقاله تفاوت Nano Banana vs Pro و بررسی سایت رسمی روی {{SITE_LINK}} هم هست. قاعده سرانگشتی برای لندینگ SaaS: حجم را روی استاندارد کاوش کنید، هویت محصول/UI و ناحیه امن تیتر را روی Pro قفل کنید، سپس کپی واقعی را آفلاین ترکیب کنید — وقتی آماده تولید هستید {{APP_LINK}} را باز کنید.
۱۲. شروع سریع در سه گام (امروز پیشنویس صفحه اول را بفرستید)
- وبسایت رسمی Nano Banana را باز کنید → وارد اپ ساخت Nano Banana شوید → تصویر برند یا محصول/UI را آپلود کنید → Nano Banana Pro را انتخاب کنید
- قالب A (Hero) → B (کارت قابلیت) → C (نوار مزایا) را بهترتیب اجرا کنید؛ یک بررسی لانچ برای هر دارایی
- ۱۶:۹ و ۱:۱ را خروجی بگیرید، در پیشنویس لندینگ بگذارید و کپی واقعی را روی هم بگذارید؛ برای اعتبار، راهنمای آزمایش رایگان و قیمتگذاری سایت رسمی را ببینید
جمعبندی
لندینگپیج SaaS درباره «یک تصویر هیرو» نیست — یک سیستم بصری محصول قابل استفاده مجدد است. Hero، تصویرسازی قابلیت و نوار مزایا را جدا کنید؛ با Nano Banana کاوش کنید، با Nano Banana Pro نهایی کنید، و به راهنماها، موارد و توضیحات قیمت روی وبسایت رسمی Nano Banana تکیه کنید. میتوانید کیفیت بصری مرتبط با تبدیل بالای صفحه را بدون افزودن خط لوله برونسپاری دیگر پایدار کنید.
گام بعد: جفتهای قبل/بعد تأییدشده در Showcase را ببینید، بستههای قالب Resources را برای نشانک اسکلت پرامپت دانلود کنید، سپس امروز با این گردشکار لندینگ شروع کنید — اپ ساخت Nano Banana را باز کنید و صفحه Hero، کارت قابلیت و نوار مزایا را بفرستید.