طراحی Bento Grid: راهنمای چیدمان UI در ۲۰۲۶

ردیف سه‌ستونه feature مرده است. دو سال است که مرده و اکثر طراح‌ها هنوز جسد را جا‌به‌جا نکرده‌اند.

می‌دانید کدام را می‌گویم. سه ستون مساوی، هر کدام با یک آیکون، یک عنوان، یک پاراگراف، که روی موبایل روی هم می‌چینند. هر سایت SaaS ساخته‌شده بین ۲۰۱۸ تا ۲۰۲۳ یکی داشت. این چیدمان ایده را می‌فروخت که محصول شما سه feature متمایز دارد، هر کدام تقریباً هم‌وزن، هر کدام دقیقاً ارزش ۳۳ درصد توجه خواننده را دارد.

این هرگز درست نبود. feature‌ها هرگز مساوی نیستند. توجه هرگز مساوی نیست. و خوانندگان تقریباً همزمان با اینکه TikTok به آن‌ها آموخت که تراکم اطلاعات یک ویژگی است نه یک باگ، مطالعه آن بخش‌ها را متوقف کردند.

bento grid برنده شد چون چیزی را می‌پذیرد که ردیف feature هرگز نپذیرفت: بعضی چیزها از بقیه بزرگ‌ترند، و خواننده باید این را در یک نگاه بداند.

bento grid واقعاً چیست

bento grid یک الگوی چیدمان است که در آن یک بخش به سلول‌های مستطیلی نامساوی تقسیم می‌شود، هر کدام حاوی یک محتوای متمایز، چیده‌شده به‌گونه‌ای که کل grid به‌عنوان یک ترکیب یکپارچه خوانده شود.

نام از جعبه بنتو ژاپنی می‌آید. بخش‌هایی با اندازه‌های مختلف، هر کدام حاوی چیز متفاوتی، چیده‌شده تا به‌عنوان یک کل از نظر بصری متوازن باشند. نه یک ردیف از ستون‌های یکسان. نه یک پشته از بخش‌های روایی. یک ترکیب واحد با سلسله‌مراتب داخلی آگاهانه.

الگو سه ویژگی اساسی دارد. اول، سلول‌های نامساوی، معمولاً بر اساس یک grid سه یا چهار ستونه که برخی سلول‌ها چند ستون یا ردیف را می‌پوشانند. دوم، محتوای متنوع در هر سلول (یک نمودار در یکی، یک تصویر در دیگری، یک متریک در سومی، یک testimonial در چهارمی). سوم، انسجام بصری در کل، معمولاً از طریق پس‌زمینه مشترک، border radius یکسان، و استفاده محدود از رنگ.

آنچه نیست: یک دمو از CSS Grid. یک چیدمان masonry. یک فید Pinterest. یک ترتیب تصادفی از کارت‌ها. Bento ترکیبی است، نه الگوریتمی.

bento grid فشرده‌سازی است. ردیف feature روایت است. اکثر محصولات به فشرده‌سازی نیاز دارند.

چرا جایگزین ردیف feature شد

سه دلیل. دو تای آن‌ها آشکار. یکی از آن‌ها دلیلی است که الگو ماندگار شد.

دلیل اول: مدت توقف. آزمایش داخلی Apple روی صفحات بازاریابی نشان داد که بخش‌های bento بازدیدکنندگان را تقریباً ۴۷ درصد بیشتر از ردیف‌های feature معادل نگه می‌دارند. دلیلش رمز و راز نیست، فقط این است که خواننده می‌تواند یک bento grid را مرور کند. هیچ ترتیب اجباری برای مطالعه وجود ندارد. فرود می‌آیند، سلولی را که برایشان جالب است انتخاب می‌کنند، و می‌مانند.

دلیل دوم: تراکم بدون دیوارهای متن. یک bento grid خوب‌طراحی‌شده شش تا هشت چیز را در فضایی که یک چیدمان سنتی برای سه چیز استفاده می‌کند، انتقال می‌دهد. چون سلول‌ها انواع محتوای مختلف دارند (بصری، آمار، متن، testimonial)، خواننده تراکم را سنگین تجربه نمی‌کند.

دلیل سوم (دلیل واقعی): با نحوه فروش محصولات مدرن مطابقت دارد. اکثر محصولات SaaS در ۲۰۲۶ سه feature نیستند. یک پلتفرم هستند با یک قابلیت اصلی قهرمان، سه تا پنج قابلیت پشتیبانی‌کننده، یک داستان یکپارچه‌سازی، یک نقطه اثبات، و شاید یک feature خاص که ارزش جداگانه اشاره دارد. آن شکل در یک ردیف سه‌ستونه جا نمی‌شود. در یک bento جا می‌شود. چیدمان محتوا را آن‌جایی که بود ملاقات کرد.

سه پیاده‌سازی واقعی برتر در حال حاضر

Apple (apple.com/mac). استاندارد. هر صفحه محصول Mac از اواخر ۲۰۲۲ به بعد از bento استفاده می‌کند. بخش‌های چیپ M-series تمیزترین مثال هستند: یک سلول بزرگ برای تصویر چیپ، سلول‌های کوچکتر برای benchmark‌ها و موارد استفاده. پس‌زمینه تاریک مشترک، border radius مشترک، padding داخلی یکسان. هر سلول جایگاه خود را کسب کرده است. توجه کنید به چیزی که هرگز نمی‌کنند: همه سلول‌ها را به وزن یکسان مجبور نمی‌کنند. تصویر چیپ همیشه از نظر بصری غالب است.

Linear (linear.app/features). Bento برای ابزارسازی توسعه‌دهنده. هر بخش feature یک bento چهارستونه است که قابلیت اصلی (مثل issue tracking) یک سلول ۲×۲ می‌گیرد و feature‌های کوچکتر ۱×۱ یا ۱×۲ دریافت می‌کنند. نسخه Linear به خاطر خویشتن‌داری مشهور است: تصاویر محصول خالص، بدون تصویرسازی استوک، برچسب‌های monospace روی سلول‌ها. مثل یک spec sheet می‌خواند، عمداً.

Vercel (vercel.com). bento صفحه اصلی Vercel نسخه ترکیبی است. برخی سلول‌ها تصویرسازی هستند، برخی اسکرین‌شات محصول، برخی متن خالص. آن‌ها ثابت می‌کنند که می‌توانید رسانه‌های مختلف را درون یک bento واحد ترکیب کنید بدون اینکه ناهماهنگ به نظر برسد، به‌شرطی که هر سلول همان زبان بصری را به اشتراک بگذارد (همان پس‌زمینه، همان radius، همان ریتم فاصله داخلی).

سه صنعت مختلف، سه لحن مختلف، همان الگوی زیرین. این الگو مد نیست. چیدمانی است برای یک مشکل ارتباطی خاص: "ما کارهای زیادی انجام می‌دهیم، اینجا همه‌شان در یک نگاه هستند، آنی را که برایت مهم است انتخاب کن."

ریاضیات grid (ساده‌تر از آنچه به نظر می‌رسد)

اکثر bento grid‌ها از یکی از دو ساختار پایه استفاده می‌کنند.

bento سه‌ستونه. برای بخش‌های فشرده، testimonial‌ها، برجسته‌سازی feature‌ها مناسب است. الگوی معمول:

• یک سلول قهرمان ۲×۱ (دو ستون، یک ردیف می‌پوشاند)
• یک سلول ۱×۱ (یک ستون، یک ردیف)
• دو سلول ۱×۱ در ردیف دوم
• یک سلول ۱×۲ برای چیزی که از وزن عمودی بهره می‌برد

bento چهارستونه. برای بخش‌های کامل با گستردگی بیشتر بهتر است. الگوی معمول:

• یک سلول قهرمان ۲×۲
• دو سلول ۱×۱ کنار هم
• یک سلول ۲×۱ در پایین
• یک سلول ۱×۱ برای بستن ردیف

می‌توانید یک bento grid در CSS Grid با حدود بیست خط بسازید:

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

کلاس‌ها را به فرزندان اعمال کنید و grid خودش سازماندهی می‌شود. ریاضیات واقعاً همین‌قدر ساده است. آنچه bento را سخت می‌کند grid نیست. تصمیم سردبیری درباره اینکه کدام سلول‌ها شایسته وزن هستند است.

قوانین responsive که خراب نمی‌شوند

bento روی دسکتاپ آسان است. bento روی موبایل جایی است که اکثر پیاده‌سازی‌ها شکست می‌خورند.

اشتباه: حفظ شکل grid و کوچک‌کردن همه چیز. در عرض ۳۹۰ پیکسل، یک bento چهارستونه تبدیل به چهار ستون ۹۰ پیکسلی می‌شود که بی‌فایده است. سلول‌ها نمی‌توانند محتوای واقعی داشته باشند.

قانون: بازچینی کنید، کوچک نکنید. روی موبایل، bento grid به یک ستون فرو می‌ریزد، اما ترتیب سلول‌ها تغییر می‌کند تا سلسله‌مراتب حفظ شود.

• سلول قهرمان به بالا می‌رود (بیشترین تأثیر بصری اول روی موبایل)
• سلول‌های پهن ۲×۱ تبدیل به سلول‌های تک‌ستونه تمام‌عرض می‌شوند
• سلول‌های بلند ۱×۲ تبدیل به سلول‌های ارتفاع استاندارد می‌شوند، نه کشیده عمودی
• ترتیب بر اساس اهمیت تعیین می‌شود، نه بر اساس موقعیت بصری روی دسکتاپ

CSS Grid این را با grid-template-areas و media query‌ها بدون درد انجام می‌دهد. یا در Tailwind: از پیشوند lg: برای اعمال bento span‌ها فقط روی صفحه‌های بزرگ استفاده کنید، و بگذارید پشته پیش‌فرض موبایل خودش را مدیریت کند.

آزمون: در ۳۹۰px، هر سلول باید به اندازه کافی بلند باشد که محتوای داخلش بدون zoom یا اسکرول افقی قابل خواندن باشد. اگر نیست، سلول اشتباه است، نه viewport.

اگر می‌خواهید تحلیل‌های چیدمان بیشتری ببینید، بقیه مقالات Brainy را مرور کنید. اگر به یک landing page نیاز دارید که بازدیدکنندگان را به دیوارهای ردیف feature از دست ندهد، با Brainy همکاری کنید و ما چیدمان‌های واقعی، متن واقعی، و تبدیل واقعی ارائه می‌دهیم.

وقتی bento grid انتخاب اشتباه است

Bento یک راه‌حل جهانی نیست. اشتباه استفاده کنید و محتوا را در سلول‌هایی که نیاز به نفس کشیدن داشتند، حبس می‌کنید.

Bento شکست می‌خورد وقتی:

• محتوای شما ترتیبی است. یک آموزش گام‌به‌گام، یک جریان onboarding، یک مطالعه موردی روایی. اینها به ترتیب خطی نیاز دارند. Bento ترتیب مطالعه را حذف می‌کند.
• هر قطعه وزن مساوی دارد. اگر واقعاً سه feature مساوی دارید، یک ردیف سه‌ستونه همچنان درست است. Bento به سلسله‌مراتب داخلی نیاز دارد. تسطیح به سلول‌های bento چیزهای مساوی را تصادفاً رتبه‌بندی‌شده نشان می‌دهد.
• هر سلول به عمق نیاز دارد. اگر feature شما ۲۰۰ کلمه برای توضیح نیاز دارد، در یک سلول bento جا نمی‌شود. آن را به‌عنوان یک بخش بنویسید، نه یک بخش کوچک.
• دارایی‌های بصری قوی ندارید. bento grid‌ها بهترین خواندن را دارند وقتی سلول‌ها حاوی تصاویر هستند (نمودارها، تصاویر محصول، تصویرسازی‌ها). bento‌های تمام‌متن مثل چیدمان‌های روزنامه‌ای شلوغ به نظر می‌رسند.

جدول تصمیم:

الگوی شروع طراح

از این به‌عنوان پایه استفاده کنید. از اینجا ویرایش کنید، از صفر نسازید.

ساختار بخش:

1. عنوان تمام‌عرض بالای grid (یک خط، تأثیرگذار)
2. grid چهارستونه، ۳ تا ۵ ردیف در کل
3. یک سلول قهرمان (۲×۲)، از نظر بصری قوی‌ترین دارایی
4. چهار تا شش سلول پشتیبانی‌کننده، انواع محتوای متنوع
5. سلول پایانی اختیاری تمام‌عرض برای CTA یا اثبات

قوانین محتوای سلول:

• حداکثر یک جمله در هر سلول. اگر به یک پاراگراف نیاز دارید، سلول خیلی کوچک است.
• یک دارایی در هر سلول (نمودار، تصویرسازی، اسکرین‌شات، متریک، testimonial، لوگو).
• padding داخلی یکسان (معمولاً ۲۴ تا ۳۲ پیکسل).
• border radius یکسان (معمولاً ۱۲ تا ۱۶ پیکسل).
• استفاده محدود از رنگ. اکثر سلول‌ها پس‌زمینه مشترک دارند. یک یا دو تا می‌توانند معکوس شوند یا از رنگ accent استفاده کنند.

ترتیب موبایل: سلول قهرمان اول، سپس سه سلول پشتیبانی‌کننده مهم‌تر، سپس بقیه.

یک بخش bento در landing page بعدی‌تان منتشر کنید. تفاوت را احساس خواهید کرد.

سؤالات متداول

آیا bento grid فقط یک ترند است؟

خیر. ترندها یک تا دو سال دوام می‌آورند. bento grid‌ها از ۲۰۲۲ روی صفحات محصول اصلی غالب بوده‌اند و همچنان پابرجا هستند. یک الگوی چیدمان برای یک مشکل ارتباطی خاص هستند، و آن مشکل از بین نمی‌رود.

آیا می‌توانم از bento grid روی یک بلاگ یا سایت محتوا استفاده کنم؟

به‌ندرت. Bento برای سطوح محصول و بازاریابی است. پست‌های بلاگ ترتیبی هستند. یک هاب مقاله یا grid محتوای ویژه می‌تواند از سلول‌های نامساوی به سبک bento استفاده کند، اما متن اصلی مقاله نباید.

تفاوت bento grid و masonry چیست؟

Masonry الگوریتمی است. سلول‌ها بر اساس ارتفاع محتوا به‌طور خودکار قرار می‌گیرند. Bento ترکیبی است. سلول‌ها توسط طراح بر اساس اهمیت عمداً قرار می‌گیرند. Masonry برای Pinterest کار می‌کند. Bento برای محصولات کار می‌کند.

آیا bento grid‌ها برای داشبوردها کار می‌کنند؟

بله، وقتی داشبورد وزن widget نامتوازن دارد. یک متریک اصلی، چند متریک ثانویه، یک نمودار، یک لاگ، یک فید فعالیت اخیر. این دقیقاً شکل bento است. ببینید: نمای پروژه Linear، داشبورد deployment در Vercel.

یک bento grid چند سلول باید داشته باشد؟

بین چهار تا هشت. کمتر از چهار و دیگر به‌عنوان grid خوانده نمی‌شود. بیشتر از هشت و شروع می‌کند مثل یک دیوار خوانده شود. هفت یک نقطه شیرین رایج است.

ساختن ردیف‌های feature را متوقف کنید

هر سایت SaaS ساخته‌شده در سه سال گذشته را مرور کنید. ردیف‌های سه‌ستونه feature‌ای که می‌بینید را بشمارید. بخش‌های bento را بشمارید. اعداد هر سال جا عوض می‌کنند.

دلیلی دارد. ردیف feature چیدمانی برای داستانی بود که دیگر تعریفش را متوقف کرده‌ایم، داستان "سه feature مساوی". محصولات مدرن سه feature مساوی ندارند. یک پلتفرم دارند، یک قابلیت قهرمان، یک خوشه از قابلیت‌های پشتیبانی، یک نقطه اثبات، و یک CTA پایانی. آن شکل در یک bento جا می‌شود. در یک ردیف جا نمی‌شود.

یک صفحه در سایت فعلی‌تان پیدا کنید که هنوز ردیف feature دارد. آن یک بخش را به‌عنوان bento grid طراحی مجدد کنید. قوی‌ترین قابلیت را در سلول قهرمان بگذارید. اثبات را در یک سلول پشتیبانی. تمایزدهنده یک‌خطی را در دیگری. منتشر کنید.

تماشا کنید مدت توقف بالا برود. تماشا کنید bounce پایین بیاید. تماشا کنید صفحه واقعاً کار کند.

ساختن ردیف‌های feature را متوقف کنید.