گرایش‌های پرطرفدار منوی ناوبری ثابت در طراحی وب‌سایت

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

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

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

نوار ناوبری با قابلیت تغییر اندازه خودکار (Auto-Resizing Navbar)

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

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

برای مثال به وب‌سایت Fandango Media Group سر بزنید و سبک ناوبری ثابت آن‌ را ببینید.

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

مقاله مرتبط: منوی سایت ؛ افقی یا عمودی

همچنین بهتر است جستارهای رایج رسانه‌ای هم روی صفحه‌های کوچک دچار تغییر در اندازه شوند. این امر ضروری نیست، اما می‌تواند تجربه کاربری را بهبود ببخشد.

متناوباً می‌توانید تنها لینک‌ها را کوچک کنید یا لوگو را در قالب دیگری تغییر دهید. این مورد را می‌توانید در وب‌سایت Tweed Barbers مشاهده کنید.

به‌محض آنکه صفحه را از هدر بالا اسکرول کردید و پایین آمدید، اندازه لوگو تغییر می‌کند و کوچک‌تر می‌شود.

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

ناوبری ثابت عمودی

همه ما به‌خوبی با منوی ناوبری ثابت افقی آشنا هستیم. این نوع نوارهای ناوبری به‌صورت پیش‌فرض رایج‌ترین نوع طراحی منو در وب‌سایت‌ها به شمار می‌روند.

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

وب‌سایت نمونه کارهای Jorge Rigabert نمونه بارزی از طراحی منوی ناوبری ثابت عمودی و البته طولانی است.

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

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

نمونه دیگر در این مورد وب‌سایت Michael Ngo است.

طراحی این وب‌سایت کمی ساده‌تر است و از آیکون‌های رایج و ساده برای بهبود سبک ناوبری استفاده می‌کند. رویکرد طراحی وب‌سایت پیش‌ رو ساده ‌گرایانه به نظر می‌رسد که مخصوصاً برای وب‌سایت‌های نمونه کار هم بسیار مناسب است.

البته همواره می‌توانید حرفه‌ای‌تر ظاهر شوید و کاری مانند وب‌سایت Roman Kirichik آماده کنید.

این منوی ناوبری تقریباً نیمی از صفحه را به خودش اختصاص داده است؛ اما وقتی صفحه را به پایین اسکرول می‌کنید، به‌آرامی خودش را به منوی کوچک‌تری در کنار صفحه تغییر می‌دهد.

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

هدف اصلی این است که تلاش کنید همه لینک‌ها در منوی ناوبری به‌آسانی قابل‌استفاده باشند؛ به‌راحتی دیده شوند و البته فضای زیادی را هم اشغال نکنند.

اگر بتوانید این اهداف تحقق ببخشید، پس می‌توانید منوی ناوبری ثابت عمودی را در هر وب‌سایتی پیاده کنید.

استفاده از Drop Shadow در منوی ریزشی

اگر از کاربران فعال وب هستید، احتمالاً تابه‌حال افکت Drop Shadow را دیده‌اید.

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

وب‌سایت Grain & Mortar از سایه ریزشی ساده‌روی منوی ناوبری ثابت خود استفاده می‌کند.

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

در ادامه نمونه واضح‌تری از استفاده از این نوع گرایش را درKarma با افکت واضح سایه ریزشی مشاهده کنید.

هیچ سبک بی‌نقصی برای استفاده از سایه ریزشی روی منوی ناوبری ثابت وجود ندارد و البته لازم نیست شما روی همه منوهای ثابت خود الزاماً از این افکت استفاده کنید.

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

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

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

مقاله مرتبط: گرایش‌های پرطرفدار طراحی مگا منو در وب‌سایت‌های مدرن

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

برای مثال به وب‌سایت Search Engine Journal توجه کنید که لوگویشان در قسمت بالای هر صفحه از مقاله‌های وب‌سایت همچنان ثابت باقی می‌ماند.

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

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

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

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

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

نتیجه‌گیری

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

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