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

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

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

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

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

زمینه : تولید کننده انواع لوازم التحریر

تاریخ : سال 1395

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

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