سمیکالن – روایتگران داستان تکنولوژی

طراحی وب

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

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

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

منو همبرگر

طراحی ریسپانسیو (Responsive design) چیست؟

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

تا چند سال پیش که خبری از گوشی های هوشمند نبود، دسترسی مردم به صفحات وب با کامپیوتر های شخصی یا لپ تاپ هایشان صورت میگرفت.اما با پیشرفت تکنولوژی، مردم کم کم به استفاده از گوشی های هوشمند برای وب گردی روی آوردند.در ابتدا وقتی مردم با موبایل خود یک وبسایت را باز میکردند، مطالب آن را کاملا به هم ریخته می دیدند.از این رو برنامه نویسان اقدام به ابداع سبک طراحی به نام طراحی واکنشگرا (طراحی ریسپانسیو) یا (Responsive design) کردند.هدف این طراحی این است که صفحات یک وبسایت روی هر نمایشگری، از مانیتور های بزرگ 32 اینچی تا گوشی های هوشمند 5 اینچی، به شکل کاملا ساخت یافته و منظم به کاربر نشان داده شوند و کاربر بتواند بدون اندکی بی نظمی صفحات مورد نظر خودش را مشاهده کند.به وبسایتی که با این اصول طراحی شده است،وبسایت ریسپانسیو ( Responsive website) گفته میشود.

[irp posts=”2790″ name=”FBI درصدد بازکردن قفل یک آیفون دیگر است”]

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

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

1.منوهای عمودی دورانی

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

منو عمودی

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

منو عمودی 2

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

2.منوهای پراکنده در اطراف تصویر

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

منو پراکنده

Proud and Punch نمونه ای از این وبسایت هاست.زمانی که وارد این وبسایت میشوید، میبینید که منوها و لوگوی سایت در عین سادگی در چهار گوش وبسایت قرار گرفته اند.همین سادگی باعث جذایبت این وبسایت شده است.

3.منوهای کشویی

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

منو کشویی

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

4.منوهای عمودی ایستاده

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

منو عمودی ایستاده

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

نتیجه گیری

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