تصميم Bento Grid: دليل تخطيط واجهة المستخدم لعام 2026

صف المميزات ثلاثي الأعمدة مات. مضى على موته عامان، ومعظم المصممين لم ينقلوا الجثة بعد.

تعرفه جيداً. ثلاثة أعمدة متساوية، كل منها يحتوي أيقونة وعنواناً وفقرة، تتراص فوق بعضها على الجوال. كل موقع SaaS بُني بين 2018 و2023 كان يحمله. كان يروّج لفكرة أن منتجك يملك ثلاث مميزات مستقلة، متساوية الوزن تقريباً، كل منها تستحق 33% من انتباه القارئ بالضبط.

لم يكن ذلك صحيحاً قط. المميزات لا تتساوى أبداً. الانتباه لا يتساوى أبداً. وتوقف القراء عن قراءة تلك الأقسام في نفس الوقت الذي علّمهم فيه TikTok أن كثافة المعلومات ميزة لا عيب.

فازت bento grid لأنها تُقرّ بما لم يُقرّ به صف المميزات قط: بعض الأشياء أكبر من غيرها، والقارئ يجب أن يعرف ذلك بنظرة واحدة.

ما هي 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 هي المثال الأنقى: خلية كبيرة للصورة البصرية للشريحة، وخلايا أصغر لنتائج الأداء وحالات الاستخدام. خلفية داكنة مشتركة، وزوايا مشتركة للحدود، ومساحة داخلية متسقة. كل خلية تستحق مكانها. لاحظ ما لا يفعلونه أبداً: لا يجبرون جميع الخلايا على التساوي في الوزن. الصورة البصرية للشريحة دائماً هي المهيمنة بصرياً.

Linear (linear.app/features). Bento لأدوات المطورين. كل قسم مميزات عبارة عن bento رباعي الأعمدة حيث تأخذ القدرة الرئيسية (مثل تتبع المشكلات) خلية 2x2 وتحصل المميزات الأصغر على 1x1 أو 1x2. نسخة Linear مشهورة بسبب التقشف: لقطات شاشة صافية للمنتج، لا صور مخزنة، وتسميات monospace على الخلايا. تُقرأ كورقة مواصفات، عن قصد.

Vercel (vercel.com). bento الصفحة الرئيسية لـ Vercel هي النسخة الهجينة. بعض الخلايا رسوم توضيحية، وبعضها لقطات شاشة للمنتج، وبعضها نص خالص. تُثبت أنك تستطيع دمج الوسائط داخل bento واحدة دون أن تبدو غير متسقة، شريطة أن تشترك كل خلية في نفس اللغة البصرية (نفس الخلفية، نفس الزاوية، نفس إيقاع المسافات الداخلية).

ثلاث صناعات مختلفة، ثلاثة أنماط مختلفة، نفس النمط الأساسي. النمط ليس موضة. إنه تخطيط لمشكلة تواصل محددة: "نحن نفعل أشياء كثيرة، ها هي بنظرة واحدة، اختر ما يهمك."

حسابات الشبكة (أبسط مما تبدو)

معظم شبكات bento تستخدم إحدى بنيتين أساسيتين.

Bento ثلاثية الأعمدة. مثالية للأقسام الضيقة والشهادات وإبراز المميزات. النمط المعتاد:

• خلية hero واحدة 2x1 (تمتد عبر عمودين، صف واحد)
• خلية 1x1 واحدة (عمود واحد، صف واحد)
• خليتان 1x1 في صف ثانٍ
• خلية 1x2 لشيء يستفيد من الثقل الرأسي

Bento رباعية الأعمدة. أفضل للأقسام الكاملة ذات الاتساع الأكبر. النمط المعتاد:

• خلية hero واحدة 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 على الجوال هو المكان الذي تفشل فيه معظم التطبيقات.

الخطأ: الإبقاء على شكل الشبكة وتصغير كل شيء. عند عرض 390px، تصبح bento رباعية الأعمدة أربعة أعمدة بعرض 90px، وهو ما لا يُجدي. الخلايا لا تستطيع احتواء محتوى حقيقي.

القاعدة: أعِد التدفق، لا تُصغِّر. على الجوال، تنهار bento grid إلى عمود واحد، لكن ترتيب الخلايا يتغير للحفاظ على التسلسل الهرمي.

• تنتقل خلية hero إلى الأعلى (التأثير البصري الأكبر أولاً على الجوال)
• تصبح الخلايا العريضة 2x1 خلايا أحادية العمود بعرض كامل
• تصبح الخلايا الطويلة 1x2 خلايا بارتفاع قياسي، غير ممتدة رأسياً
• يُعاد تحديد الترتيب حسب الأهمية، لا حسب الموضع البصري على سطح المكتب

يجعل CSS Grid هذا سهلاً مع grid-template-areas واستعلامات الوسائط. أو في Tailwind: استخدم بادئات lg: لتطبيق امتدادات bento على الشاشات الكبيرة فقط، واترك المكدّس الافتراضي للجوال يتولى الأمر.

الاختبار: عند 390px، يجب أن تكون كل خلية طويلة بما يكفي لجعل المحتوى بداخلها قابلاً للقراءة دون تكبير أو تمرير أفقي. إذا لم يكن كذلك، فالخلية خاطئة لا نقطة العرض.

إذا أردت المزيد من تحليلات التخطيط، تصفّح بقية أوراق Brainy. وإذا كنت بحاجة إلى صفحة هبوط تتوقف عن خسارة الزوار أمام جدار من صفوف المميزات، وظِّف Brainy وسنُسلِّم تخطيطات حقيقية، ومحتوى حقيقي، وتحويل حقيقي.

متى تكون bento grid الخيار الخاطئ

Bento ليست حلاً شاملاً. استخدامها بشكل خاطئ سيُجبر المحتوى على التحشّر في خلايا كانت تحتاج إلى تنفّس.

تفشل bento عندما:

• محتواك تسلسلي. درس تعليمي خطوة بخطوة، أو تدفق تأهيل، أو دراسة حالة سردية. هذه تحتاج ترتيباً خطياً. bento تُزيل ترتيب القراءة.
• كل عنصر متساوي الوزن. إذا كان لديك ثلاث مميزات متساوية فعلاً، فصف الثلاثة أعمدة لا يزال الصحيح. bento تتطلب تسلسلاً هرمياً داخلياً. تسطيح الأشياء المتساوية في خلايا bento يجعلها تبدو مرتبة بشكل عشوائي.
• كل خلية تحتاج عمقاً. إذا كانت مميزتك تحتاج 200 كلمة للشرح، فلا تناسب خلية bento. اكتبها كقسم لا كحجرة.
• لا تملك أصولاً بصرية قوية. تُقرأ شبكات bento بشكل أفضل عندما تحتوي الخلايا على مرئيات (مخططات، صور المنتج، رسوم توضيحية). الـ bento الكل نصية تبدو كتخطيطات صحف مكتظة.

جدول القرار:

نمط البداية للمصمم

استخدم هذا كخط أساس. حرّر منه، لا تبني من الصفر.

بنية القسم:

1. عنوان بعرض كامل فوق الشبكة (سطر واحد، مؤثر)
2. شبكة 4 أعمدة، 3 إلى 5 صفوف إجمالاً
3. خلية hero واحدة (2x2)، الأصل البصري الأقوى
4. أربع إلى ست خلايا داعمة، أنواع محتوى متنوعة
5. خلية إغلاق اختيارية بعرض كامل لـ CTA أو الإثبات

قواعد محتوى الخلايا:

• جملة واحدة لكل خلية كحد أقصى. إذا احتجت فقرة، فالخلية صغيرة جداً.
• أصل واحد لكل خلية (مخطط، رسم توضيحي، لقطة شاشة، مقياس، شهادة، شعار).
• مساحة داخلية متسقة (عادةً 24-32px).
• زاوية حدود متسقة (عادةً 12-16px).
• استخدام مقيَّد للألوان. معظم الخلايا تشترك في خلفية واحدة. يمكن لخلية أو اثنتين الانعكاس أو استخدام اللون التمييزي.

ترتيب الجوال: خلية hero أولاً، ثم أهم ثلاث خلايا داعمة، ثم البقية.

أطلق قسم bento واحداً في صفحة هبوطك التالية. ستشعر بالفارق.

الأسئلة الشائعة

هل bento grid مجرد موضة؟

لا. الموضة تدوم عاماً أو عامين. شبكات bento مهيمنة على صفحات المنتجات الكبرى منذ 2022 ولا تزال. إنها نمط تخطيط لمشكلة تواصل محددة، وتلك المشكلة لن تختفي.

هل يمكنني استخدام bento grid على مدونة أو موقع محتوى؟

نادراً. bento مخصصة لواجهات المنتجات والتسويق. مقالات المدونات تسلسلية. مركز المقالات أو شبكة المحتوى المميز يمكنها استخدام خلايا غير متساوية على غرار bento، لكن محتوى المقال الكامل لا يجب.

ما الفرق بين bento grid وmasonry؟

Masonry خوارزمية. تُوضَع الخلايا تلقائياً بناءً على ارتفاع المحتوى. Bento تكوينية. تُوضَع الخلايا عن قصد من قِبَل المصمم بناءً على الأهمية. Masonry تعمل لـ Pinterest. Bento تعمل للمنتجات.

هل تعمل شبكات bento للوحات التحكم؟

نعم، عندما تكون لوحة التحكم ذات أوزان غير متساوية للأدوات. مقياس رئيسي واحد، عدة مقاييس ثانوية، ومخطط، وسجل، وتغذية نشاط حديثة. هذا هو شكل bento بالضبط. انظر: عرض المشروع في Linear، ولوحة نشر Vercel.

كم عدد الخلايا التي يجب أن تحتوي bento grid؟

بين أربع وثماني خلايا. أقل من أربع وتتوقف عن أن تُقرأ كشبكة. أكثر من ثمانٍ وتبدأ تُقرأ كجدار. سبعة هو النقطة المثالية الشائعة.

توقف عن بناء صفوف المميزات

تصفّح أي موقع SaaS بُني في السنوات الثلاث الماضية. عُدّ صفوف المميزات ثلاثية الأعمدة التي تراها. عُدّ أقسام bento. الأرقام تتبادل المواقع كل عام.

ثمة سبب. كان صف المميزات تخطيطاً لقصة توقفنا عن روايتها، قصة "ثلاث مميزات متساوية". المنتجات الحديثة لا تملك ثلاث مميزات متساوية. تملك منصة، وقدرة رئيسية، ومجموعة قدرات داعمة، ونقطة إثبات، وCTA ختامية. هذا الشكل يناسب bento. لا يناسب صفاً.

اختر صفحة في موقعك الحالي لا يزال فيها صف مميزات. أعِد تصميم ذلك القسم الواحد كـ bento grid. ضع القدرة الأقوى في خلية hero. ضع الإثبات في خلية داعمة. ضع الميزة التمييزية في سطر واحد في خلية أخرى. أطلقه.

راقب وقت المكوث يرتفع. راقب معدل الارتداد ينخفض. راقب الصفحة تعمل فعلاً.

توقف عن بناء صفوف المميزات.