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

صف الميزات المكوّن من ثلاثة أعمدة مات. مات منذ عامين والمصممون في معظمهم لم ينقلوا الجثة بعد.

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

فازت شبكة bento لأنها تعترف بما لم يعترف به صف الميزات قط: بعض الأشياء أكبر من غيرها، والقارئ يجب أن يعرف ذلك للوهلة الأولى. للاطلاع على النمط الأعمق وراء ذلك، راجع التسلسل الهرمي البصري. صفحات Mac من Apple هي أنظف مثال حي على ما يبدو عليه ذلك في الإنتاج الفعلي.

ما هي شبكة bento فعلاً

شبكة bento نمط تخطيط تُقسَّم فيه الصفحة إلى خلايا مستطيلة غير متساوية، كل منها تحمل محتوى مميزاً، مرتبة بحيث تُقرأ الشبكة بأكملها كتكوين موحد.

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

للنمط ثلاث خصائص أساسية. أولاً، خلايا غير متساوية، تُبنى عادةً على شبكة من 3 أو 4 أعمدة مع امتداد بعض الخلايا عبر أعمدة أو صفوف متعددة. ثانياً، محتوى متنوع لكل خلية (مخطط في إحداها، وتوضيح في أخرى، ومقياس في ثالثة، وشهادة في رابعة). ثالثاً، تناسق بصري عبر الكل، عادةً من خلال معالجة خلفية مشتركة، ونصف أقطار حدود متسقة، واستخدام ألوان مقيّد.

ما ليست عليه: عرض توضيحي لـ CSS Grid. تخطيط بنائي (masonry). تغذية Pinterest. ترتيب عشوائي من البطاقات. bento تكوينية لا خوارزمية.

شبكة bento هي ضغط. صف الميزات هو سرد. معظم المنتجات تحتاج إلى ضغط.

لماذا حلّت محل صف الميزات

ثلاثة أسباب. اثنان منها واضحان. وواحد هو السبب الذي جعل النمط يرسخ.

السبب الأول: مدة البقاء. أظهرت الاختبارات الداخلية لـ Apple على صفحات التسويق أن أقسام bento احتجزت الزوار نحو 47% أطول من صفوف الميزات المكافئة. السبب ليس غامضاً، ببساطة يمكن للقارئ تصفح شبكة bento بحرية. لا يوجد ترتيب قراءة إلزامي. يصلون، يختارون الخلية التي تهمهم، ويبقون.

السبب الثاني: الكثافة دون جدران من النص. شبكة bento المصممة جيداً تنقل ستة إلى ثمانية أشياء في المساحة التي يستخدمها التخطيط التقليدي لثلاثة. لأن الخلايا تحمل أنواعاً مختلفة من المحتوى (بصري، إحصاء، نص، شهادة)، لا يشعر القارئ بالكثافة على أنها ثقيلة.

السبب الثالث (الحقيقي): يطابق طريقة بيع المنتجات الحديثة فعلاً. معظم منتجات SaaS في 2026 ليست ثلاث ميزات. إنها منصة بإمكانية رئيسية واحدة، وثلاث إلى خمس إمكانيات داعمة، وقصة تكامل واحدة، ونقطة إثبات واحدة، وربما ميزة محددة تستحق الإشارة بشكل منفصل. هذا الشكل لا يناسب صف الثلاثة أعمدة. يناسب bento. التخطيط لبّى المحتوى حيث كان.

أفضل ثلاثة تطبيقات حقيقية الآن

Apple (apple.com/mac). موضّح أعلاه بالفعل. كل صفحة منتج Mac من أواخر 2022 فصاعداً تستخدم bento. أقسام شريحة سلسلة M هي أنظف نمط: خلية مهيمنة واحدة للصورة البصرية للشريحة، وخلايا أصغر للمعايير وحالات الاستخدام. خلفية داكنة مشتركة، نصف قطر زاوية مشترك، حشو داخلي متسق. الشريحة مهيمنة بصرياً دائماً. هذا هو الاختيار التحريري، لا الشبكة.

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

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

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

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

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

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

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

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

• خلية رئيسية 2×2 واحدة
• خليتان 1×1 مكدستان بجانبها
• خلية 2×1 واحدة عبر الأسفل
• خلية 1×1 واحدة لإغلاق الصف

يمكنك بناء شبكة bento في 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 إلى عمود واحد، لكن ترتيب الخلايا يتغير للحفاظ على التسلسل الهرمي.

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

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

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

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

متى تكون شبكة bento الخيار الخاطئ

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

bento تفشل حين:

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

جدول القرار:

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

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

هيكل القسم:

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

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

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

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

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

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

هل شبكة bento مجرد صيحة عابرة؟

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

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

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

ما الفرق بين شبكة bento والتخطيط البنائي (masonry)؟

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

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

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

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

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

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

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

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

اختر صفحة على موقعك الحالي لا تزال تحتوي على صف ميزات. أعد تصميم ذلك القسم الواحد كشبكة bento. ضع الإمكانية الأقوى في الخلية الرئيسية. ضع الإثبات في خلية داعمة. ضع المُميِّز المكوّن من سطر واحد في أخرى. اشحنه.

راقب مدة البقاء ترتفع. راقب معدل الارتداد ينخفض. راقب الصفحة تؤدي عملها فعلاً.

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