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

منوهای کشویی در طراحی سایت به لطف فن آوری جاوااسکریپت و برنامه های CSS3 وارد دنیای مجازی شده اند. اما همه منوهای کشویی وب سایت به طور مشابه ایجاد نمی‌شوند و برخی از استراتژِیهای طراحی سایت UX برای ایجاد آنها بهتر از سایر استراتژی ها کار می‌کنند. در این مطلب فنون طراحی سایت ux برای ایجاد منوهای کشویی پایدار را آموزش خواهیم داد. این منوها شامل کشوهایی در سطوح مختلف و نیز مگا منوها هستند که همه آنها با توجه به اصول طراحی مشابه ایجاد شده اند.

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

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

 

 

 

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

 

 

هدایت منوی تردبرد(Threadbird)، نمونه ای فوق العاده از این تاثیرپذیری است.

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

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

شما می توانید طرحی وب سایت را مشابه در منوی توتس پلاس(TutsPlus) پیدا کنید. در واقع از فلش های رو به پایین برای منوهای کشویی و از فلش های رو به راست برای نمایش منوهای دینامیکی(فلای اوت) سایت استفاده شده است.

 

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

 

 

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

 

ایجاد فاصله با لایه گذاری لینک ها در طراحی منوهای سایت

این واقعا بسیار آزاردهنده است که برخی از طراحان سایت در منوهای خود به سوء استفاده از فضا(navigation) می پردازند.

بیشتر منوهای کشویی وب سایت دارای مقدار جزئی فضا بین لینک ها هستند. اما تفاوت عمده ای بین margine و padding ها وجود دارد.

 

 

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

 

 

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

وب سایت Webdesigner Depot دارای یک منوی کشویی انیمیشنی است و زمانی که با ماوس روی این منوها بروید، با یک منوی کشویی دو ستونی مواجه خواهید شد. چنانچه هر یک از این لینک های شناور را انتخاب کنید، متوجه خواهید شد این لینک ها از padding برای ایجاد فضا استفاده کرده اند.

این به این معناست که شما می توانید در فضای سفید حول متن لینک کلیک کنید تا به طور ساده تری سایت را مرور کنید.

بیشتر منوهای کشویی یکی از این دو نوع هستند: padding برای ایجاد فاصله و یا margine برای ایجاد فاصله.

شما می توانید با معلق ماندن در فضای اطراف لینک ها، موقعیت مکان نمای خود را مشاهده کنید. در اینجا نمونه ای از یک طراحی سایت نمایش می دهیم که از padding استفاده نکرده است.

 

 

طراحی وب سایت اصولی

 

وب سایت Philadelphia Orchestra نمونه ای از یک وب سایت فوق العاده، قابل استفاده و آسان از نظر خواندن می باشد.

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

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

از بین بردن وضعیت های معلق در وب سایت

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

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

شما می توانید وضعیت های معلق را با استفاده از فنون بیشماری همچون تغییرات رنگ فونت، تغییرات رنگ BG، برجستگی متن، هایلایت، سایه ها و یا هر چیز دیگری اعمال کنید. هدف، حفظ لینک اصلی است که به هنگام فعال سازی، به طور مستقیم در نوسان نبوده است.

 

 

اصول طراحی وب سایت

 

 

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

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

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

در وب سایت Comedy Central’s website دقیقا می توانید استایل های مشابه را ببینید اما به جای افکت های سیاه و سفید از افکت های لیموییو سبز استفاده شده است.

 

 

 

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

 

 

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

 

نرم افزار CSS3 در ترکیب با  jQuery می توانند انیمیشن های قدرتمندی ایجاد کنند. منوهای کشویی همچنان در انیمیشن ها باقی می مانند خواه به صورت اسلایدی باشند و خواه از نظر محو شوند.

اما در هر صورت انیمیشن ها هم باید هدفی داشته باشند. طراحان UI/UX  بایستی به صورت عملی از این انیمیشن ها استفاده کنند. درست است که انیمیشن ها باید به نوعی با مطالب زندگی پیوند داشته باشند، اما روند تجارب کاربران را در فرآیندهای مذکورآهسته تر خواهند کرد.

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

 

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

 

 

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

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

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

 

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

 

 

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

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

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

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

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

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

تاریخ :

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

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