1396/10/10

منو در وب سایت های مدرن و روندهای طراحی آن

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

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

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

 

نمایش دسته بندی های چند سطحی در زیرمنو طراحی سایت سایت

 

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

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

 

طراحی زیرمنو سایت

 

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

در مجاورت این لینک، یک منوی کشویی برای " ایده های سازماندهی اتاق ها" وجود دارد که می توانید بر اساس نوع اتاق، آن ها را به اجرا دربیاورید. این منوهای کشویی دارای تصاویری در مجاورت هر لینک هستند که به مرور زمان باعث می شود بسیار آسانتر گزینه های موردنظر خود را انتخاب کنید.

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

 

طراحی مگامنو

 

Puma، یکی دیگر از وب سایت های تجارت الکترونیکی نیز دارای ساختار ستونی مشابهی می باشد.

اما دسته بندی های این وب سایت بر اساس اطلاعات مردم شناسی و آیتم های محتلف است و در داخل هر یک از منوهای کشویی، می توانید ستون هایی را برای هر یک از انواع آیتم ها بیابید( مثلا در خصوص مواد غذایی، البسه، خدمات ورزشی و غیره)

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

 

طراحی منوهای کشویی در سایت های مدرن

 

طراحی منو در سایت های مدرن

 

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

افکت مشابه در سایت luckybrand  نمونه ای ویژه در این باره بوده و همه ویژگی های مذکور را در بر دارد.

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

 

طراحی منوهای کشویی تمام صفحه

 

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

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

 

طراحی ساب منو برای سایت

 

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

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

اگر در حال پیمایش های بزرگ برای مانیتورهای بزرگ تر هستید، چرا همه راه حل ها را استفاده نمی کنید؟

Digital Spy دارای نقاطی کاملا مشابه بوده و پیمایش در این وب سایت شامل دسته هایی برای مجزا سازی می باشد.

 

طراحی منوهای تمام صفحه

 

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

اما باز هم محتوا، در اندازه ثابتی باقی مانده و منوها در سرتاسر صفحه گسترده می گردند.

 

طراحی منو های مدرن

 

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

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

 

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

 

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

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

 

طراحی مگا منو

 

برخی از دسته های بالاتر دارای تصاویری برای آشپزخانه، تخت خواب ها و حتی اثاثیه منزل می باشند. اما دسته های حساس تر، شامل  لینک هایی مستقیم به لوازم رومیزی و یا لوازم دکوری هستند.

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

همچنین می توانید سراغ منوهایی کوچک تر همچون منوهای کشویی سایت playstation بروید.

 

طراحی منوهای تصویری در سایت

 

پیمایش در آن ها به صورت ترکیب تصاویر و متون بوده و بسیاری از آن ها دارای برچسب هایی برای صفحات منفرد می باشند.

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

 

تکنیک های  جایگزین منوهای کشویی

 

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

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

 

طراحی زیرمنو کشویی

 

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

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

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

برای این که به نتیجه بهتری دست یابید، توصیه می کنیم از آزمون A/B استفاده کنید.

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

 

طراحی سایت مدرن

 

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

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

همه این روندها را به هنگام اجرای پروژه های طراحی مگا منوها مد نظر بگیرید.

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

 

نظرات کاربران

اولین کسی باشید که در این مورد نظر می دهید

ثبت نظر

نام شما (*) :
ایمیل (*) :
نظر (*) :
کلمات کلیدی
طراحی UX طراحی سایت
  • طراحی سایت آونگ
  • طراح سایت کورسیر
  • طراحی سایت گروه صنعتی گلبافت
  • طراحی سایت بانک مهر
  • طراحی سایت  مبلمان اداری و منزل ایستا
  • طراحی سایت هولستن
  • سی دلی مالتی مدیا طرفه نگار
  • طراحی سایت مبلمان اداری جلیس
  • طراحی وب سایت مایکروتل پلاس
  • طراحی وب سایت هواپیمایی کاسپین
  • طراحی وب سایت هواپیمایی ماهان
  • طراحی وب سایت مکسیدر
  • طراحی وب سایت فرما
  • طراحی وب سایت ماشین3
  • طراحی وب سایت پیشگامان کویر آسیا
  • طراحی وب سایت هوندا
  • طراحی وب سایت پارسیان دیزل
  • طراحی وب سایت نان سحر
  • طراحی وب سایت بوژنه
  • طراحی وب سایت باشگاه فولاد خوزستان
  • طراحی وب سایت باشگاه مشتریان برج میلاد
  • طراحی سایت سازمان بورس و اوراق بهادار
  • طراحی سایت خانه عکاسان افرنگ
  • طراحی وب سایت نوشابه پرسپولیس
  • سی دی سازمان بهینه سازی مصرف سوخت
certificates
  • seo
  • multimedia
  • design
  • host and domain
  • programming
books

عضویت در خبرنامه

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

پروژه ها ی برگزیده طراحی سایت

نمونه کار مرتبط

زمینه : رادیاتور خودرو

تاریخ : سال 1393

اخبار و مقالات

برگزیده ها
طراحی سایت، اولین و مهم‌ترین قدم در راه ایجاد یک کسب و کار آنلاین است. حتی اگر تجارت شما آنلاین نیز نباشد، برند شما نمی‌تواند به موفقیت چشمگیری برسد. در واقع به همین دلیل است که گفته می‌شود شما بدون یک وب‌سایت، نمی‌توانید حرف خاصی برای گفتن داشته باشید. در این میان، وب‌سایت‌های وردپرسی هم قدرتمند و هم ساده هستند. سریع ساخته می‌شوند و استفاده از آن‌ها حتی برای یک فرد مبتدی نیز امکان‌پذیر است. با این حال، اقدامات خاصی وجود دارد که باید در این راستا ...
برای ساخت کسب‌وکارتان باید حتما به فکر طراحی وب‌سایت باشید. تهیه وب‌سایت برای یک بیزینس فقط به‌منظور اطلاع‌رسانی نیست بلکه مثلا با آن می‌توانید محصولات یا خدماتتان را به کاربران معرفی کنید یا اطلاعات تماس خود را برای مخاطبان قرار دهید. مخاطب می‌تواند از این اطلاعات تماس برای دریافت خدمات پس از فروش هم استفاده کند. بنابراین یک وب‌سایت می‌تواند برای شما نقش یک بنر یا بیلبورد را ایفا کند که هزینه تبلیغاتی کمتری هم نسبت به سایر انواع تبلیغات دارد؛ اما ...
سئو و بهینه سازی سایت یکی از مهمترین المان های طراحی سایت ها است که به شما کمک می کند با حضور در رتبه های برتر گوگل، ترافیک بیشتری را روانه وب سایت خود کنید. اینکه شما بتوانید تبدیل به یک سئوکار حرفه ای بشوید کمی دشوار است چرا که بیش از یک میلیون وب سایت در سراسر اینترنت وجود دارد و شما باید از میان آنها، بهترین هارا انتخاب کنید. در کل روش های بسیار زیادی وجود دارند که به شما در کسب رتبه های برتر گوگل کمک کنند و می توانید با استفاده از آنها به رتبه های اول گوگل دست پیدا ...
آیا شما هم میخواهید گوگل آنالتیکس را برای وب سایت خود راه اندازی کنید؟ پس بریم شروع کنیم. بسیاری از افراد می گویند که گوگل آنالتیکس یک ابزار بسیار عالی و قدرتمند است که شما می توانید با استفاده از آن اطلاعات زیادی درباره وب سایت خودتان، ازجمله: میزان بازدید کننده، میانگین زمانی که کاربران در سایت شما بوده اند، بررسی کمپین های تبلیغاتی و ... را مورد بررسی قرار دهید. اما چگونه این کار را انجام دهید؟ ما در این آموزش قصد داریم تا به صورت قدم به قدم گوگل آنالیتکس را به شما آموزش بدهیم و این آموزش از ...
مطئن شوید که آیا وبسایت فروشگاهی شما با محتوای درگیرکننده (اینگیجینگ) پر شده است؟ تولید محتوا با کیفیت به برگ برنده طراحی سایت های اینترنتی و استارت‌آپ‌ها تبدیل شده است. اما هر نوع تولید محتوا نیز نمی‌تواند برای ما مفید محسوب شود. حتی امکان دارد بابت برخی محتواهای بی‌کیفیت دچار جریمه یا پنالتی گوگل نیز شویم. یکی از شاخصه‌های مهم برای یک محتوا باکیفیت، میزان درگیرکننده بودن آن یا به اصطلاح میزان اینگیجینگ محتوا است. یعنی مخاطب تا چه اندازه با محتوا تولیدی ارتباط ...
مدیران دیجیتال مارکتینگ کسب‌وکارهای آنلاین به دنبال روش‌هایی هستند تا بتوانند رتبه طراحی سایت خود را بهبود داده و ترافیک آن را بالا ببرند. آنها با تولید محتوا و توجه به اصول سئو سایت این کار را انجام می‌دهد. اما در برخی موارد ممکن است این تلاش‌ها نه تنها نتیجه مطلوب را در پی نداشته باشد، بلکه باعث ایجاد برخی کارکردهای منفی نیز شود. گوگل برای بهبود تجربه کاربران خود دائما الگوریتم‌های خود را بروزرسانی می‌کند. با افزایش محبوبیت گوگل بازاریابان به درستی دریافتند ...