کاربرد مگا منو در طراحی سایت

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

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

اجازه دهید به برخی از روندهای ایجاد منو نگاه کنیم و ببینیم که چگونه ساخت منوها ابتدا از منوهای کشویی سنتی شروع شده اند.

سطح عمق دسته ها

ساختار ستونی ارزشمندترین سَبک طراحی برای مگا منو می باشد.

این به شما اجازه می دهد تا "دسته ها" را برای لینک ها و ایجاد لینک های عمیق تر بدون استفاده از منوهای پروازی (fly out ) چندتایی طراحی کنید. یک مگا ناوبر کشویی می تواند کل صفحه را در بر بگیرد بطوریکه شما بطور نرمال میتوانید حداقل 3-4 ستون را در یک منوی کشویی جاسازی نمایید.

به سایت Wayfair که نوع بسیار منحصر به فردی از منوی کشویی را استفاده می کند نگاهی بیندازید. آنها یک لینک برای " departments " دارند جاییکه شما می توانید بوسیله دسته بندی و حتی دسته بندی-فرعی مانند bedrooms را مشاهده کنید.

در کنار این لینک، یک لیست کشویی برای " room ideas" وجود دارد که در آن شما می توانید بر اساس نوع استفاده اطاق (آشپزخانه، غذاخوری، حمام و ...) نمونه ها را مشاهده کنید. این کشوی تصاویر را در درون لینک تصویر جایگذاری نموده است، بنابراین شما از طریق گزینه ها، بررسی بسیار آسان تری خواهید داشت.

خیلی طول نمی کشد تا متوجه شوید که آنها آیتم های ناوبر تفکیک شده در داخل دسته بندی ها هستند. اینها روند مشابهی را دنبال می کنند و فرد جستجو کننده در ناوبر Wayfair تنها نیاز به دو لینک اصلی دارد تا به اینجا برسد!

یکی دیگر از فروشگاه های الکترونیکی به نام puma ، سازه ستونی مشابهی دارد.

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

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

اجرای مشابهی در Lucky Brand، اما با یک چرخش در طراحی وجود دارد.

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

همچنین افکتهای انیمیشنی سایت Lucky دارای لمس زیبا هستند، به طوری که با قطعیت هر چیزی را می توان مورد ملاحظه و بررسی قرار داد.

کشویی های تمام-عرض

این روند در هر سایت استفاده نمی شود، اما این روزها بیشتر از گذشته به چشم می خورد.

مگا منوهای حجیم می توانند تمام عرض صفحه را پیمایش کنند تا جاهای بیشتری برای کاربران دسکتاپ و لپ تاپ ایجاد کنند. کاربران تلفن همراه معمولا منوهای پنهان دارند بنابراین آنها به هر طریق هرگز افکت کامل را نمی بینند.

منو در سایت pluralsight یک نمونه عالی از یک مگامنو با پهنای تمام صفحه است. محتوا یکسان با خود عرض صفحه ثابت باقی می ماند، اما منو تماماً عرض صفحه را می پیماید.

این یک افکت عالی است زیرا که جای بیشتری را در منو ایجاد می کند. یا حداقل توهم بصری جای بیشتر را به مشاهده کننده القاء می کند.

Digital Spy چیزی بسیار مشابه دارد و علاوه بر آن ناوهای آنها همچنین شامل تفکیک دسته است.

در آنجا حتی یک تفکیک بین بین پیوندهای کشویی "معمول" و پیوندهای نسخه ی کوچک شده تصویر وجود دارد که شما را به طور مستقیم به سمت مقالات می برد.

اما در اینجا هم محتوا به اندازه عرض صفحه ثابت می ماند، در حالی که این منو در تمام صفحه گسترش می یابد.

اگر شما بتوانید درست کار کردن با آن را متوجه شوید افکتی خارق العاده است.

شما حتی می توانید سازه ستونی و افکت تمام صفحه را داخل یک طرح ترکیب کنید.

شکل بالا چیزی است که شما در OARS website مشاهده می کنید و این یک مثال جلوه دار از طراحی عالی +UX عالی است

ترکیب تصاویر و متن

اضافه کردن تصاویر بیشتر را هر زمان که امکانش وجود داشته باشد برای تمام وب سایت ها پیشنهاد می کنم. آیتم های بصری به تفکیک تمامی متن هایی که می بینیم بر پایه یک قاعده منظم کمک می کند.

مگا منوها، بهترین کارکرد را در صفحه نمایش بزرگتر دارند، بنابراین با اطمینان خاطر می توان گفت که جا برای تصاویر وجود دارد. Sears website ناوهای خود را درون دسته های چند سطحی با هر مورد دو لینک ها و تصاویر تفکیک می کند.

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

اما شما همچنین می توانید مسیر یک منو کوچکتر مانندکشویی های PlayStationرا دنبال کنید.

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

گزینه های دیگر تکنیک کشویی

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

اما اگر مشتاق به تلاش باشید، همیشه می توانید کمی بیشتر به جلوتر بروید.

سایت The Open دارای نوعی منو است که شناور است به پایین گسترش می یابد، همچنان تا کلیک بعدی شناور می ماند. اما از یک تکنیک دیگر استفاده می کند که بواسطه آن کل صفحه را به پایین میکشد تا جا برای منوی جدید باز کند.

بیشتر مگا منوها در بالای صفحه ظاهر می شود، اما این یکی در حالی که تمام محتوای صفحه را به پایین تر حرکت می دهد، انیمیشن همراه با منو را نیز پایین می آورد.

مطمئنا یک ایده عالی برای هر وب سایت نیست، بلکه منحصر به فرد است. و اگر آن را برای سایت Open کار کند، پس می تواند برای دیگران نیز کار کند.

فقط بستگی به این دارد که آیا شما آن را امتحان کنید و یا خیر و میتوان برخی A/B tests (آزمون های A/B) در خصوص قابلیت استفاده از آن را به کار گرفت.

مثال دیگر در بارۀ سایت Waterworks می باشد جاییکه در آن کشوها ظاهر نخواهند شد مگر اینکه شما کلیک کنید.

باز هم اینها نگاه و احساس درست مشابه منو های مگا ناوبر سنتی است. اما با هدف گذاری بر یک رویداد متفاوت کاربر یعنی کلیک کردن، از روش معمول یعنی شناوری متفاوت می شوند.

آن یک دکمه " close " کوچک در گوشه ی پایین دارد، بنابراین یک راه آسان برای بستن نیز وجود دارد. اما این احتمالا برای هر سایت کار نخواهد کرد، امّا آن برای کشویی های خیلی بلند بسیار ارزشمند خواهد بود.

در حالی که با ایده های مگاناوی در پروژه خودتان به پیش می روید، تمام این روندها را در ذهن داشته باشید.

نتیجه گیری

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

0