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

مقدمه

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

ناوبری می تواند در وب سایت های مختلف متفاوت باشد. هیچ دستورالعملی برای سازماندهی آن وجود ندارد.

در این مقاله می خواهیم تجارب خود را در مورد نوار ناوبری به اشتراک بگذاریم.  در اینجا مطالبی را در مورد اینکه چگونه به سرعت به ناوبری جذاب دسترسی پیدا کنیم را می گوئیم.

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

نوار منو سایت چیست؟

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

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

• مخاطبان هدف شما چه کسانی هستند و هدف آنها در وب سایت شما چیست؟
• کدام اطلاعات و ماژول ها باید در وب سایت شما قرار بگیرند؟
• چگونه می توانیم اطلاعات را به ترتیب اهمیت برای کاربران گروه بندی کنیم؟
• چگونه می خواهید ماژول های عملکردی یا اطلاعاتی را در ساختار درختی سازماندهی کنید؟

چگونه یک نوار منو ثابت ایجاد کنیم؟

نوار ناوبری ثابت همچنین نوار ناوبری "چسبنده" نیز نامیده می شود. نوار منو شامل یک ناوبری و همچنین دکمه های رسانه های اجتماعی و جعبه جستجو است.

در زیر می خواهیم از طریق آموزش یک تکنیک ساده در css  ، چگونگی اجرای یک نوار ناوبری ثابت را بگوئیم.

ایجاد یک نوار ناوبری ثابت

 در زیر یک روش پیاده سازی ساده برای نوار منو ثابت را می گوئیم که در آن فقط نیاز به کد html  و css  دارید.

Html

در html فقط به یک کد ساده نیاز دارد تا بتواند نوار منو ناوبری را به صورت ثابت نگه دارد. با اجراء کد زیر در html نوار ناوبری در سطح ثابت نگه داشته می شود.

<nav class="fixed-nav-bar">

  <!-- Fixed navigation bar content -->

</nav>

عنصر nav یک عنصر بلاک لول است که ما می توانیم یک خط css  را به آن اضافه کنیم. قبل از آن ما عنصر html خود را ویژگی فیکس ناوبری به آن دادیم تا بتوانیم قانون سبک را به آن اعمال کنیم.  سه ویژگی سه بعدی ( طول و عرض و ارتفاع) متغیر هستند که شما می توانید استایل های خود را با توجه به آنچه که می خواهید تغییر دهید. حال می خواهیم در مورد ویژگی های Css توضیح دهیم.

; position: fixed

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

; top: 0

; left: 0

; right: 0

با قرار دادن این کد ها می توانید حلشیه را تنظیم کنید.

توجه داشته باشید

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

روش هایی برای داشتن منو ناوبری بهتر

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

برنامه ریزی ناوبری

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

بهترین روش برای سازماندهی محتوا چیست؟ چطور می توان عناصر را نام گذاری و جایگرین کرد؟

شما باید سلسله مراتب که در آن اطلاعات نمایش داده می شود را به خوبی رعایت کنید:

1. با محتوا کار کنید.
2. سپس با ساختار کار کنید.
3. پس از آن ویژگی های منو ناوبری ، نوع و طرح را بیاموزید.

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

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

روند طراحی نوار ناوبری

تعدادی از نوار منو های محبوب وجود دارد که شما می توانید در طراحی نوار منو خود به کار ببرید. شما کدام یک را ترجیح می دهید؟

افقی و یا عمودی

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

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

Mega Drop-Downs (مگا منو کشویی)

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

نوار منو ثابت

نوار منو ثابت همراه با اسکورول وب سایت به سمت پائین ، حرکت می کند. معمولا این نوع ناوبری در سایت هایی استفاده می شود  که نیاز به دکمه های تماس فوری و دسترسی سریع به منو داشته باشند.

ناوبری طراحی ریسپانسیو

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

لوگو لینک داده شده به صفحه اصلی

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

اولیه و ثانویه

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

زبان های کاربر پسندانه

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

برای مثال، اگر شما برای یک مغازه، کلمه "market place"  را برچسب گذاری کنید، ممکن است این یک نام آشنا برای هر کسی نباشد و تجربه کاربرپسندانه وب سایت شما را به خطر بیاندازد.

اگر می خواهید ببینید که چه چیز برای نوار منو ناوبری شما بهتر عمل می کند می توانید از برخی از تست های A/B  استفاده می کنید.  در اغلب موارد بهتر است که نوار منو را طوری طراحی کنید که برای استفاده کاربران ساده و آسان باشد.

ناوبری اولیه

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

لوگو را به صفحه لینک دهید

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

ناوبری ریسپانسیو

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

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

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

ناوبری ثابت (چسبنده)

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

چه زمانی از مگامنوها استفاده کنید؟

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

نتیجه گیری

ناوبری منو، بخش جدایی ناپذیر و مهم از طراحی وب است. همیشه باید در طراحی نوار منو و ناوبری بسیار دقت کنید.