طراحی Bento Grid: راهنمای جامع چیدمان رابط کاربری در 2026

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

همانی که می‌شناسید. سه ستون مساوی، هر کدام با یک آیکون، یک تیتر، یک پاراگراف، روی موبایل به صورت عمودی چیده شده. هر سایت SaaS ساخته‌شده بین 2018 تا 2023 یکی داشت. یک دروغ می‌فروخت: که محصولتان سه ویژگی دارد که هر کدام دقیقاً 33% توجه را می‌طلبند. توجه هرگز مساوی نبوده، و خوانندگان از همان سالی که TikTok به آن‌ها آموخت که تراکم یک ویژگی است نه یک نقص، خواندن آن بخش‌ها را متوقف کردند.

Bento grid برنده شد چون چیزی را می‌پذیرد که ردیف ویژگی‌ها هرگز نپذیرفت: برخی چیزها از بقیه بزرگ‌ترند، و خواننده باید این را در یک نگاه بفهمد. برای الگوی عمیق‌تر پشت این موضوع، سلسله مراتب بصری را ببینید. صفحات Mac سایت Apple بهترین نمونه زنده از آن چیزی است که در محصول نهایی به نظر می‌رسد.

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

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

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

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

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

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

چرا جایگزین ردیف ویژگی‌ها شد

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

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

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

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

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

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

Linear (linear.app/features). Bento برای ابزارهای توسعه‌دهنده. صفحه ویژگی‌ها یک پشته از bento های 4 ستونه است که قابلیت اصلی (ردیابی مسائل، برنامه‌ریزی، ساخت) یک سلول 2x2 را اشغال می‌کند و ویژگی‌های کوچک‌تر 1x1 یا 1x2 می‌گیرند. نسخه Linear به خاطر خویشتن‌داری مشهور است: فقط اسکرین‌شات‌های محصول، بدون تصویر استوک، برچسب‌های monospace. عمداً مثل یک برگه مشخصات به نظر می‌رسد.

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

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

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

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

Bento سه‌ستونه. برای بخش‌های فشرده، توصیفنامه‌ها، ویژگی‌های برجسته مناسب است. الگوی معمول:

• یک سلول قهرمان 2x1 (2 ستون، 1 ردیف)
• یک سلول 1x1 (1 ستون، 1 ردیف)
• دو سلول 1x1 در ردیف دوم
• یک سلول 1x2 برای چیزی که از وزن عمودی بهره می‌برد

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

• یک سلول قهرمان 2x2
• دو سلول 1x1 کنار آن چیده شده
• یک سلول 2x1 در پایین
• یک سلول 1x1 برای بستن ردیف

می‌توانید یک 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; }

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

قوانین واکنش‌گرا که از هم نمی‌پاشند

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

اشتباه: نگه داشتن شکل شبکه و کوچک کردن همه چیز. در عرض 390 پیکسل، یک bento چهارستونه به چهار ستون 90 پیکسلی تبدیل می‌شود که بی‌فایده است. سلول‌ها نمی‌توانند محتوای واقعی نگه دارند.

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

• سلول قهرمان به بالا می‌رود (بزرگ‌ترین تأثیر بصری اول روی موبایل)
• سلول‌های عریض 2x1 به سلول‌های تک‌ستونه عرض کامل تبدیل می‌شوند
• سلول‌های بلند 1x2 به سلول‌های ارتفاع استاندارد تبدیل می‌شوند، نه کشیده عمودی
• ترتیب بر اساس اهمیت تصمیم‌گیری مجدد می‌شود، نه موقعیت بصری در دسکتاپ

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

آزمون: در 390 پیکسل، هر سلول باید به قدری بلند باشد که محتوای داخل آن بدون زوم یا اسکرول افقی قابل خواندن باشد. اگر نیست، سلول اشتباه است، نه viewport.

اگر می‌خواهید بیشتر تحلیل‌های چیدمان ببینید، بقیه Brainy Papers را مرور کنید. اگر به یک صفحه فرود نیاز دارید که از دست دادن بازدیدکنندگان به یک دیوار از ردیف ویژگی‌ها را متوقف کند، Brainy را استخدام کنید تا چیدمان‌های واقعی، متن واقعی، و تبدیل واقعی دریافت کنید.

چه زمانی bento grid انتخاب اشتباه است

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

Bento زمانی شکست می‌خورد که:

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

جدول تصمیم:

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

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

ساختار بخش:

1. تیتر عرض کامل بالای شبکه (یک خط، ضربه‌دار)
2. شبکه 4 ستونه، 3 تا 5 ردیف در مجموع
3. یک سلول قهرمان (2x2)، قوی‌ترین دارایی بصری
4. چهار تا شش سلول پشتیبانی، انواع محتوای متنوع
5. یک سلول اختیاری عرض کامل در انتها برای CTA یا اثبات

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

• حداکثر یک جمله در هر سلول. اگر به پاراگراف نیاز دارید، سلول خیلی کوچک است.
• یک دارایی در هر سلول (نمودار، تصویرسازی، اسکرین‌شات، متریک، توصیفنامه، لوگو).
• padding داخلی یکسان (معمولاً 24 تا 32 پیکسل).
• شعاع گوشه یکسان (معمولاً 12 تا 16 پیکسل).
• استفاده محدود از رنگ. اکثر سلول‌ها پس‌زمینه مشترک دارند. یکی دو تا می‌توانند معکوس شوند یا از رنگ تأکیدی استفاده کنند.

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

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

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

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

نه. ترندها یک تا دو سال دوام می‌آورند. Bento grid ها از سال 2022 در صفحات محصول اصلی غالب بوده‌اند و هنوز هستند. آن‌ها یک الگوی چیدمان برای یک مسئله ارتباطی خاص هستند، و آن مسئله از بین نمی‌رود.

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

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

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

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

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

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

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

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

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

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

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

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

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

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