طراحی شبکهای بنتو: راهنمای ۲۰۲۶ برای طرحبندیها، فاصلهگذاری و زمان عدم استفاده از آنها
یک راهنمای قطعی برای طراحی شبکهای بنتو در سال ۲۰۲۶. آناتومی، منطق اندازهگذاری، قوانین فاصلهگذاری، رفتار واکنشگرا، بررسیهای واقعی Apple، Linear، Vercel، Stripe، Arc، Apple Vision Pro و Figma، و مواردی که طرحبندیهای بنتو به درک مطلب آسیب میرسانند.
یک شبکه بنتو بخشی متشکل از سلولهایی با اندازههای مختلف است که هر کدام یک محتوای مستقل را در خود جای میدهند و به گونهای مرتب شدهاند که اندازه سلولها خودشان موارد مهم را رتبهبندی کنند. سلول به واحد معنا تبدیل میشود و چشم قبل از خواندن یک کلمه، اهمیت را از روی اندازه میخواند.
بیشتر شبکههای بنتو در وب در سال ۲۰۲۶ تزئینی هستند. سلولها اندازه یکسانی دارند، محتوا برای تناسب با آنها اصلاح شده است و طرحبندی مانند یک دیوار کارتی خوانده میشود. موارد خوب برعکس هستند. اندازه سلولها با محتوای داخل آنها تعیین میشود، ناودانها و لایهها ریتم را حفظ میکنند و جمع شدن واکنشگرا در موبایل خوانا باقی میماند. این راهنما شامل آناتومی، منطق اندازه، فاصلهگذاری، تناسب محتوا، واکنشگرایی، هفت مورد از موارد زیر است: (Apple، Linear، Vercel، Stripe، Arc، Apple Vision Pro، Figma) و مواردی که بنتو به صفحه آسیب میرساند.
طراحی شبکه بنتو، تعریف عملی
یک شبکه بنتو یک ترکیب عمدی است که در آن هر سلول یک قطعه محتوای مستقل را در خود جای میدهد و اندازه سلول از آنچه درون آن است، به دست میآید.
سه ویژگی آن را از یک شبکه کارتی جدا میکند. سلولها با نسبتهای عمدی اندازهگذاری میشوند. سلولها انواع محتوای مختلفی را در خود جای میدهند، نه اینکه یک الگوی یکسان تکرار شود. طرحبندی به عنوان یک ترکیب واحد خوانده میشود. هر یک از این سه مورد را بردارید، یک دیوار کارتی خواهید داشت.
این الگو به دلیل حل یک مشکل واقعی محبوب شد. ردیف ویژگیها، سه یا چهار ستون از کارتهای آیکون-تیتر-پاراگراف یکسان، تا سال ۲۰۲۳ به کمهزینهترین طرحبندی در وب تبدیل شده بود. بنتو به طراحان راهی برای ارائه چندین ویژگی بدون الگوی جیغ خود بخش ارائه داد.
آناتومی یک شبکه بنتو
هر طرح بنتو از چهار بخش ساخته شده است: سلول لنگر، سلولهای پشتیبان، ناودان و حاشیه اطراف. هر یک را اشتباه بنویسید، شبکه فرو میریزد.
سلول لنگر بزرگترین است، معمولاً در سمت چپ یا بالا سمت چپ قرار میگیرد و قویترین محتوا را حمل میکند. ابتدا فرود میآید و بقیه را قاب میکند. یک بنتو بدون لنگر واضح به عنوان یک ردیف کارت مسطح خوانده میشود. سلولهای پشتیبان ترکیب را با محتوای ثانویه پر میکنند و در اولین خواندن به لنگر وابسته هستند. ناودان ساختاری است و به چشم میگوید که اینها سلولهای جداگانهای از یک ترکیب هستند. حاشیه اطراف، کادر مرزی است که به بخش اجازه میدهد به عنوان یک واحد مجزا خوانده شود.
لنگر رتبه را تعیین میکند. سلولهای پشتیبان جزئیات را پر میکنند. ریتم ناودان واحدها را بدون شکستن ترکیب از هم جدا میکند. حاشیه اطراف، کل را قاب میکند.
اندازه سلولها بر اساس محتوا است، نه تزئینات
بزرگترین اشتباهی که تیمها مرتکب میشوند، اندازه سلولها برای پر کردن بوم است، نه اندازه سلولها برای متناسب شدن با آنچه در آن قرار دارند.
سلولی که یک عدد با یک عنوان تک خطی را در خود جای میدهد، نیازی نیست که هم اندازه سلولی باشد که یک اسکرین شات و سه جمله را در خود جای میدهد. اگر آنها را برابر کنید، یکی خالی به نظر میرسد در حالی که دیگری تنگ به نظر میرسد. شبکه، تزئین کننده است، نه برقرار کننده ارتباط.
ترتیب را برعکس کنید. تصمیم بگیرید که چه محتوایی به بخش تعلق دارد، لنگر را انتخاب کنید، قطعات ثانویه را انتخاب کنید، سپس هر سلول را طوری اندازه دهید که محتوا با فضای تنفس مناسب و نه بیشتر متناسب باشد. هر سلول باید تقریباً بیست تا سی درصد فضای خالی داخلی داشته باشد. کمتر باعث میشود احساس پر بودن کند. بیشتر باعث میشود خالی به نظر برسد.
تمیزترین شبکهها از نسبتها استفاده میکنند. لنگر تقریباً دو برابر مساحت بزرگترین سلول پشتیبان است. این نسبت، سلسله مراتب بصری را که بقیه صفحه استفاده میکند، منعکس میکند و در بخش فشرده میشود.
سلول لنگر، متن خوانده شده را حمل میکند
هر بنتو یک لنگر دارد و اکثر شبکههای ضعیف به آن متعهد نمیشوند. لنگر با اختلاف اندازه، در حالت ایدهآل دو برابر مساحت سلول بعدی، و با تراکم محتوا برنده میشود. لنگر جایی است که قویترین متن، مهمترین تصویر بصری یا تعامل با بالاترین ریسک در آن قرار دارد. اگر لنگر یک تصویر عمومی باشد در حالی که یک سلول پشتیبان، تیتر اصلی را در خود جای داده باشد، مسیر خواندن شکسته میشود.
صفحه محصول مک Apple لنگرهایی با یک عکس محصول فشرده و یک تیتر پررنگ دارد. Linear در صفحه ویژگیها برعکس عمل میکند، یک لنگر پر از متن با تیتر فشرده و یک قطعه رابط کاربری، سلولهای پشتیبان پراکندهتر. همان اصل، شکل محتوای متفاوت.
اشکال: دو لنگر. طراحان به یک پنل چپ و یک پنل راست با مساحت مساوی تقسیم میشوند و آن را بنتو مینامند. این یک قهرمان دو ستونی است. لحظهای که بخش دو ادعای مساوی برای اولین خواندن داشته باشد، بنتو از کار میافتد.
قوانین فاصلهگذاری که از فروپاشی شبکه جلوگیری میکنند
شبکههای بنتو بیشتر در فاصلهگذاری شکست میخورند تا در اندازه، زیرا ناودان و لایه داخلی دو کار متفاوت هستند و اکثر تیمها با آنها به عنوان یک واحد رفتار میکنند.
ناودان به چشم میگوید که یک سلول کجا تمام میشود و سلول بعدی کجا شروع میشود. خیلی تنگ، یک بلوک. خیلی بزرگ، جدا. از ناودانی تقریباً نصف لایه داخلی استفاده کنید. لایه داخلی به چشم میگوید که محتوای اتاق چقدر باید نفس بکشد. حاشیه اطراف، بعد سوم است، فضای تنفس عمودی حداقل ۱.۵ برابر ناودان، بنابراین بخش به عنوان یک واحد گسسته خوانده میشود.
یک اشکال رایج. تیمها برای هر سه از یک مقدار یکسان استفاده میکنند. شبکه ریتم را از دست میدهد. تمایز قائل شدن بین این سه، حتی کمی، آن را بازیابی میکند.
قوانین تناسب محتوا، آنچه در واقع به یک سلول تعلق دارد
یک سلول بنتو فقط به اندازه واحد محتوایی که در خود جای میدهد خوب است. اکثر سلولها به این دلیل شکست میخورند که محتوا به جای اینکه سلول در اطراف محتوا شکل بگیرد، به سلول فشار داده شده است.
یک سلول بنتو یک ظرف تک ایدهای است. یک ادعا، یک ویژگی، یک عدد، یک اسکرینشات، یک توصیف. محتوای خوب: یک ویژگی واحد با یک تیتر تک خطی و پیشنمایش رابط کاربری، یک معیار واحد با عنوان، یک توصیف واحد با انتساب. محتوای بد: یک پاراگراف طولانی، یک مقایسه ستونی، یک فرآیند چند مرحلهای، یک جدول قیمتگذاری با ردیفهای همتراز.
قانون تصمیمگیری. اگر محتوای داخل سلول بتواند بدون از دست دادن معنی برداشته شود و در یک پاراگراف در هر جای دیگری قرار گیرد، سلول کار خود را انجام میدهد. اگر به زمینه اطراف نیاز داشته باشد، بنتو آن را تکهتکه میکند.
رفتار واکنشگرا، آزمون واقعی
بنتویی که در ۱۴۴۰ عالی به نظر میرسد و در ۷۶۸ میشکند، یک پوستر رومیزی است، نه یک طرحبندی، و فروپاشی واکنشگرا جایی است که اکثر شبکههای تولید بیسروصدا میمیرند.
چالش این است که سلولها یکنواخت نیستند. یک ردیف ویژگی به طور تمیز فرو میرود. یک بنتو باید تصمیم بگیرد که با سلولهایی با عرض و ارتفاع مختلف چه کند. اگر قوانین را اشتباه بگیرید، موبایل به صورت انبوهی از کادرهای ناهماهنگ خوانده میشود.
راهنما. ابتدا دسکتاپ را تعریف کنید. در تبلت (۷۶۸ تا ۱۰۲۴)، به دو ستون تقسیم کنید که لنگر هر دو را در بر میگیرد. در موبایل (زیر ۷۶۸)، تک ستون، هر سلول تمام عرض و روی هم قرار گرفته، ابتدا لنگر قرار دهید و سلولها را به ترتیب اولویت پشتیبانی کنید. فاصله داخلی و حاشیه را در هر نقطه شکست تنظیم کنید تا سلولها متناسب به نظر برسند، نه اینکه فقط کوچک شوند.
اشکالی که باید از آن اجتناب کرد: سلولهایی با محتوایی که از تغییر عرض جان سالم به در نمیبرند. یک اینفوگرافیک افقی در یک سلول دسکتاپ، در یک ستون موبایل غیرقابل خواندن میشود. محتوا را برای هر دو شکل برنامهریزی کنید، نه فقط برای یکی.
هفت صفحه محصول واقعی، حاشیهنویسی شده
این چارچوب فقط در صورتی اهمیت دارد که از تماس با صفحات ارسال شده جان سالم به در ببرد. هفت پیادهسازی بنتو در حال حاضر در حال تولید هستند. هیچکدام کامل نیستند. همه بالاتر از خط پایه صفحه فرود SaaS هستند.
Apple، بنتو به عنوان تئاتر محصول
صفحات محصول Apple از بنتو به عنوان تئاتر اسکرول-محور استفاده میکنند. سلولهای لنگر بسیار بزرگ هستند، اغلب یک عکس محصول واحد در مقیاس تقریباً کامل، با نسبت سه یا چهار برابر سلولهای پشتیبان. فاصلهگذاری سخاوتمندانه. هر سلول یک ویژگی را در خود جای میدهد، هرگز دو ویژگی. بازدیدکننده با خواندن صفحه به ترتیبی که Apple میخواست، صفحه را ترک میکند. نکته منفی: نمایشهای پر حرکت میتوانند در اتصالات کند، افت کیفیت ایجاد کنند و رتبه را مسطح کنند.
Linear، بنتو به عنوان تراکم توسعهدهنده
Linear یکی از متراکمترین شبکههای بنتو را در وب ارائه میدهد و آن را از طریق تایپوگرافی بیرحمانه و لنگری که همیشه برنده است، قابل خواندن نگه میدارد. لنگر در سمت چپ در دو برابر مساحت بزرگترین سلول پشتیبان، دو ستون از سه سلول کوچکتر در سمت راست، ناودانهای تنگ، پدینگ داخلی پهنتر. هر سلول یک ویژگی را با یک تیتر تنگ و قطعه رابط کاربری دارد. سیستم تایپ، رتبه را به خود اختصاص میدهد. تایپوگرافی ضعیفتر، الگو را از بین میبرد.
Vercel، بنتو به عنوان رقصپردازی حرکت
Vercel از بنتو به عنوان صحنهای برای حرکت استفاده میکند. هر سلول با یک آشکارسازی کوچک، اسکرول را پاداش میدهد و شبکه، داستانی از ساخت و ارسال را روایت میکند. یک لنگر واضح با بزرگنمایی ۱.۵ برابر با چهار تا شش سلول پشتیبان. آنها با هم روایتی در مورد گردش کار توسعهدهنده میسازند. نکتهی اشتباه: حرکت میتواند کاربرانی را که ترجیحات حرکت کاهشیافته دارند، بیش از حد لازم تحت تأثیر قرار دهد.
Stripe، بنتو به عنوان مهار
Stripe بخشهای بنتو، آرامترین بخشهای لیست هستند، به همین دلیل است که برای مخاطبی که به طراحی پر سر و صدا بیاعتماد است، مناسب هستند. لنگر به علاوهی دو یا سه سلول پشتیبان. نسبتها واضح اما نه چشمگیر. فاصلهگذاری ویرایشی. هر سلول یک ادعا را با یک نمونه کد فشرده یا یک تصویر واحد در خود جای داده است. این الگو به عنوان اعتماد به نفس بدون تزئین خوانده میشود.
آیا بنتویی میخواهید که به جای تزئین صفحه، آن را فشرده کند؟ استخدام ⟦برند ۰⟧. UXBrainy، طراحی صفحه فرود را با طرحبندیهای بنتو که سلول به سلول مهندسی شدهاند، ارائه میدهد. AppBrainy رابط کاربری محصول را با همان نظم ارائه میدهد.
Arc، بنتو به عنوان شخصیت
Arc از بنتو به عنوان وسیلهای برای شخصیت برند استفاده میکند. سلولها شکل، رنگ و حرکت را تغییر میدهند تا بازیگوشی محصول را بیان کنند. گوشههای گرد، شیبها، ارتفاعهای متنوع، نسبتهای آزاد. Arc قوانین را زیر پا میگذارد و کار میکند زیرا برند از طریق موقعیتیابی، همان غریزه پشت طراحی وب وحشیانه خوب، اجازه کسب شده، نه قرض گرفته شده، را خریداری کرده است.
Apple Vision Pro، بنتو به عنوان پیشنمایش فضایی
Vision Pro جاهطلبانهترین بنتو در وب است زیرا باید یک محصول سهبعدی را از طریق سلولهای دوبعدی پیشنهاد دهد. سلولهای لنگر از ویدیو برای القای عمق فضایی استفاده میکنند. نسبتهای دراماتیک، فاصلهگذاری سینمایی. محتوای ویدیو کار فضایی را انجام میدهد و اندازه سلول هر لحظه فریمها را تنظیم میکند. این قویترین استدلال است که محتوای مناسب میتواند طرحبندی را فراتر از آنچه شکل سلول به تنهایی میتواند انجام دهد، ارتقا دهد.
Figma، بنتو به عنوان تراکم ویژگی
Figma ویژگیهای موازی بیشتری نسبت به هر همتای دیگری مدیریت میکند و از تراکم جان سالم به در میبرد زیرا سیستم تایپ و ریتم سلول بار را تحمل میکنند. شش یا هفت سلول در هر بخش، یک لنگر واضح، نسبتهای فشرده، ناودانهای تنگ، پدینگ داخلی سخاوتمندانه. هر سلول یک ویژگی را با یک قطعه رابط کاربری و یک عنوان تنگ در خود جای میدهد. سیستم تایپوگرافی Figma به اندازه کافی قوی است که رتبه را در بسیاری از سلولهای کوچک حفظ کند. یک سیستم تایپ ضعیفتر با افزایش تعداد سلولها رتبه را از دست میدهد.
چه زمانی از شبکه بنتو استفاده نکنیم
بنتو طرحبندی اشتباهی برای هر محتوایی است که باید به ترتیب خوانده شود، با جزئیات مقایسه شود یا برای یک تصمیم واحد بررسی شود. اکثر صفحات بدون بررسی به سراغ آن میروند.
مواردی که بنتو صفحه را خراب میکند:
-
سرمقاله طولانی. بنتو مسیر خواندن را تکهتکه میکند.
-
محتوای مقایسهای. جداول قیمتگذاری، مقایسه ویژگیها، لیستهای قبل و بعد. سلولها برای خواندن بین سلولی تراز نشدهاند.
-
فرآیندهای گام به گام. یک دستورالعمل به یک ترتیب واضح نیاز دارد. سلولهای بنتو به ایدههای موازی اشاره دارند، نه مراحل.
-
صفحات تک تصمیمی. اگر صفحه برای سوق دادن بازدیدکننده به سمت یک فراخوان عمل (CTA) وجود دارد، بنتو تمرکز را بین سلولها تقسیم میکند.
-
صفحات کممحتوا. با تنها یک یا دو ایده، یک پنل قهرمان واحد صادقانهتر از بنتو با سلولهای پشتیبان خالی است.
بنتو برای ایدههای موازی با توالی مشابه است که بازدیدکننده میتواند به هر ترتیبی آنها را بررسی کند. برای صفحات توالی، مقایسه، تصمیمگیری یا تک ادعا، از آن صرف نظر کنید.
چک لیست تناسب با بنتو قبل از ارسال
قبل از ارسال طرحبندی به بنتو، این را اجرا کنید:
-
تطبیق با لنگر. یک سلول به وضوح بزرگترین سلول است که حداقل 1.5 برابر سلول بعدی است؟
-
تناسب با محتوای سلول. آیا هر سلول میتواند به تنهایی به عنوان یک ظرف یک ایدهای باشد؟
-
وابستگی متوالی. آیا بازدیدکننده باید سلولها را به ترتیب بخواند؟ اگر بله، بنتو اشتباه است.
-
مقایسه بین سلولی. آیا سلولها باید ردیف به ردیف مقایسه شوند؟ اگر بله، از جدول استفاده کنید.
-
نسبت پدینگ داخلی. آیا پدینگ داخلی تقریباً دو برابر ناودان است؟
-
حاشیه اطراف. حداقل 1.5 برابر ناودان به عنوان فضای تنفس در بالا و پایین؟
-
طرح واکنشگرا. آیا هر سلول در دسکتاپ، تبلت، موبایل شکل برنامهریزی شدهای دارد؟
-
لنگر در موبایل. آیا لنگر در حالت لنگر باقی میماند (سلول اول، تمام عرض)؟
-
تراکم محتوا. تقریباً بیست تا سی درصد فضای خالی داخلی در هر سلول؟
۱۰. تعداد بخشها. بیش از سه بخش بنتو در صفحه؟ صفحه در حال تبدیل شدن به یک گالری بنتو است.
صفحهای که این ده بررسی را پشت سر بگذارد، یک بخش بنتو دارد که طرحبندی آن را به دست میآورد.
سوالات متداول
شبکه بنتو در طراحی وب چیست؟
شبکه بنتو بخشی است که از سلولهایی با اندازههای مختلف تشکیل شده است و هر کدام یک محتوای مستقل را در خود جای میدهند و اندازه سلولها موارد مهم را رتبهبندی میکنند. نام این شبکه از جعبه بنتو ژاپنی گرفته شده است که غذاهای مختلف با اندازههای مختلف را در یک سینی قرار میدهد. این شبکه اغلب برای بخشهای ویژگیهای محصول، خلاصه قابلیتها و دیوارهای نظرات استفاده میشود.
چه زمانی باید از شبکه بنتو استفاده کنید؟
وقتی چندین ایده موازی با سبک مشابه دارید که بازدیدکننده میتواند به هر ترتیبی آنها را مرور کند، از آن استفاده کنید. این شبکه برای ویژگیهای محصول، خلاصه قابلیتها و دیوارهای نظرات کاربرد دارد. برای خواندن متوالی، مقایسه بین سلولی، فرآیندهای گام به گام و صفحاتی که فقط یک یا دو ایده دارند، از آن صرف نظر کنید.
چگونه اندازه سلولها را در یک شبکه بنتو تعیین میکنید؟
اندازه را از محتوا به سمت داخل تنظیم کنید. لنگر را انتخاب کنید، قطعات ثانویه را انتخاب کنید، سپس هر سلول را طوری اندازه دهید که محتوا تقریباً با بیست تا سی درصد فضای خالی داخلی جا شود. لنگر باید حداقل دو برابر مساحت بزرگترین سلول پشتیبان باشد.
فاصله مناسب ناودان برای یک شبکه بنتو چقدر است؟
از ناودانی تقریباً به اندازه نصف پدینگ داخلی استفاده کنید. اگر سلولها ۳۲ پیکسل پدینگ دارند، از ۱۶ پیکسل ناودان استفاده کنید. نسبت آن بیشتر از مقدار مطلق اهمیت دارد.
یک شبکه بنتو در موبایل چگونه رفتار میکند؟
در تبلت به دو ستون و در موبایل به یک ستون واحد تبدیل میشود، ابتدا لنگر، سلولهای پشتیبان بر اساس اولویت مرتب میشوند. مقادیر پدینگ داخلی و ناودان در هر نقطه شکست مقیاس میشوند تا سلولها متناسب به نظر برسند. سلولهایی که محتوایی دارند که نمیتوانند از تغییر عرض جان سالم به در ببرند، باید برای شکل موبایل دوباره طراحی شوند.
تفاوت بین شبکه بنتو و شبکه کارت چیست؟
شبکه کارت یکنواخت است، هر کارت اندازه و نوع محتوای یکسانی دارد. بنتو یک ترکیب عمدی است که در آن سلولها با نسبتهای مختلف اندازهگذاری شدهاند و انواع محتوای مختلف را در خود جای میدهند. بنتو از طریق اندازه به سلسله مراتب اشاره دارد، شبکه کارت از طریق یکنواختی به موازی بودن اشاره دارد.
الگوی پشت شبکههای بنتو که پابرجا میمانند
یک شبکه بنتو که در سال ۲۰۲۶ دوام میآورد، شبکهای پر از سلولهای هوشمند نیست. این شبکهای است که در آن هر سلول فشردهسازی عمدی یک ایده است.
برندهایی که پابرجا میمانند، Apple، Linear، Stripe، Figma، یک رشته مشترک دارند. سلولها فقط زمانی کوچک هستند که محتوا کوچک باشد. سلولها فقط زمانی بزرگ هستند که محتوا بزرگ باشد. ناودان ثابت است، لایه داخلی ثابت است، جمع شدن واکنشگرا برنامهریزی شده است. هیچ چیز تصادفی نیست، زیرا الگوی بنتو، تصادفات را سختتر از هر طرحبندی دیگری در وب مجازات میکند.
برندهایی که قدیمی میشوند، با این الگو به عنوان یک سبک بصری بدرفتاری میکنند. آنها ابتدا اشکال سلولی را انتخاب کردند، سپس پرسیدند که چه محتوایی ممکن است مناسب باشد. سلولها در نهایت محتوایی را که برای آن ساخته نشدهاند و قطعات فروپاشی واکنشگرا در موبایل را در خود نگه میدارند. این شبکهها در طول سال آینده بیسروصدا بخش به بخش دوباره طراحی میشوند.
نظم این است که از محتوا شروع کنید. تصمیم بگیرید که آن بخش برای برقراری ارتباط به چه چیزی نیاز دارد، لنگر را انتخاب کنید، موازیها را انتخاب کنید، سپس اندازه سلولها را در اطراف آن تصمیمات قرار دهید. با آن به عنوان یکی از هستههای خود اصول طراحی وب رفتار کنید، همانطور که با سلسله مراتب و نوع رفتار میکنید، و بخشهای بنتو که ارسال میکنید سال آینده نیز درست به نظر خواهند رسید.
اگر بنتویی میخواهید که به جای تزئین صفحه، آن را فشرده کند، استخدام ⟦برند ۰⟧. UXBrainy سایتهای بازاریابی و صفحات فرود را با طرحبندیهای بنتو که سلول به سلول مهندسی شدهاند، ارسال میکند. AppBrainy رابط کاربری محصول را با همین نظم ارسال میکند.
Want a bento section that compresses the page instead of decorating it? Brainy ships landing pages, web design, and product UI through UXBrainy and AppBrainy, with bento layouts engineered cell by cell.
Get Started
