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

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

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