اطلاعات عمومی

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

بیایید باهم نگاهی به برخی از مگامنوهای باب روز بیاندازیم و ببینیم چگونه طراحان منوهای ابشاری مرسوم را به یک مرحله جلوتر پیش می برند.

دسته بندی های تو در تو

ساختارهای ستونی مناسب ترین استایل در طراحی سایت برای مگامنوها می باشند. این ساختارها به شما اجازه می دهند تا برای لینک های مختلف دسته بندی تعیین کنید و لینک های پیچیده تری بدون استفاده از چندین منوی flyout ایجاد کنید. یک مگامنوی ابشاری تمام صفحه را اشغال میکند بنابراین معمولا می توان حداقل 3 الی 4 ستون در یک منوی ابشاری جای داد.

سایت Wayfair

نگاهی به طراحی سایت Wayfair که از یک منوی ابشاری بسیار خاص استفاده می کند، بیاندازید. در این وب سایت یک لینک برای بخش مختلف وجود دارد که به وسیله ی ان شما می توانید بر اساس دسته بندی های مختلف و حتی دسته بندی های زیر مجموعه (برای مثال اتاق خواب ها > میزهای کنار تخت) جست و جو کنید. در کنار این لینک یک منوی ابشاری دیگر به نام ایده های اتاق وجود دارد که به شما اجازه می دهد بر اساس اتاق های مختلف جست و جو کنید.در این طراحی سایت ، این منو شامل عکس هایی در کنار لینک هایش می باشد که زمان جست و جو را بسیار کم تر کرده است. طولی نمی کشد تا متوجه شوید انها جست و جو و راهیابی کردن را به وسیله ی دسته بندی هایی که از یک روند پیروی می کنند، ساده تر کرده اند. همان طور که مشاهده می کنید منوی اصلی Wayfair تنها شامل 2 لینک اصلی برای استفاده می باشد.

سایت puma

فروشگاه الکترونیکی Puma نیز از لحاظ طراحی سایت ، ساختار ستونی مشابهی دارد. با این تفاوت که این وب سایت دسته بندی ها را بر اساس ایتم ها و طبقه بندی مردم از نظر سن و جنسیت تقسیم کرده است. سپس درون هر مگامنو ستون هایی برای انواع ایتم ها (برای مثال محصولات، لباس ها، ورزشی و غیره) وجود دارد. توجه کنید که هر ستون عنوان مخصوص به خود را دارد که انها از بقیه ی لینک ها جدا می کند. تمام اینها یک ساختار ستونی واقعی را می سازد زیرا شما می توانید ابتدا نگاه مختصری به عناوین ستون ها بیاندازید و سپس لینک های زیر مجموعه را جست و جو کنید.

سایت lucky brand

شما می توانید ساختار مشابهی را در وب سایت Lucky Brand با تغییر اندکی در طراحی سایت مشاهده کنید. برای نوشته های تمام ستون های این وب سایت از یک رنگ یکسان اما با تایپوگرافی متفاوت استفاده شده است. این طراحی جست و جوی سریع را کمی مشکل تر می کند، اما با این وجود هنوز کارامد می باشد. افکت های انیمیشن این وب سایت به خوبی طراحی شده اند بنابراین به انها نیز توجه کنید.

اگر شما در مورد طبقه بندی مگامنوها گیج شده اید، به شما پیشنهاد می کنم ابتدا لینک های خود را به صورت دسته بندی های پیچیده تری مرتب کنید.

 

منبع : https://whitewolfteam.com/blog/web-design/mega-navigation-menu/