کتاب آموزش برنامه نویسی Ext JS
برای اولین بار در ایران
Ext JS
در مورد Ext JS بیشتر بدانید
خرید کتاب
چالش ها و راه حل ها برای Navigation در طراحی ریسپانسیو
دسته بندی ها :Html و Css
۷ شهریور ۱۳۹۳
1142 بازدید
طراحی ریسپانسیو

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

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

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

محتوا

هنگام ساختار بندی منوی ریسپانسیو خود و محتوای آن، ابتدا این کار را برای وب سایت موبایل انجام دهید (Mobile First). طراحی همراه با محدودیت به شما این امکان را می دهد که محتوای وب سایت خود را مجددا بررسی کنید و مشخص کنید که چه چیزهای لازم و چه چیزهایی اضافه است. این کار بر کل وب سایت شما اعمال می شود اما navigation مورد توجه بیشتری قرار می گیرد. اگر یکی از آیتم های مربوط به navigation در وب سایت موبایل عمل نکند، آیا اصلا ارزش دارد که در وب سایت یا navigation اولیه قرار گیرد؟ طراحی وب سایت های ریسپانسیو باعث می شود که ما به صورت متمرکز تر فکر کنیم و یک تجربه ی آنلاین قابل اعتماد و کارآمد ایجاد کنیم.

طراحی

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

طراحی responsive

طراحی responsive

 

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

پیاده سازی

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

راه حل ها

فریم ورک های CSS

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

http://getbootstrap.com/components/#navbar

نسخه ی ۳ از فریم ورک بوت استرپ به صورت پیش فرض یک navigation ارائه می دهد که در صفحه نمایش موبایل به صورت collapse شده و قابل باز شدن است و همچنان که عرض viewport افزایش یابد، به صورت افقی تبدیل می شود.

http://foundation.zurb.com/docs/components/topbar.html

فریم ورک Foundation 5 یک navigation خارج از صفحه ارائه می دهد و هنگامی که navigation فعال شود به درون viewport وارد می شود. این یک navigation قدیمی قابل collapse شدن با نوار ثابت navigation است.

طراحی واکنش گرا

طراحی واکنش گرا

پلاگین ها

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

  • ResponsiveNav

http://responsive-nav.com

این مورد برای navigation های ساده مناسب است و پیاده سازی آن هم آسان است. این پلاگین کوچک جاوا اسکریپتی از رویداد های لمسی و انتقالات CSS برای بهترین تجربه ی ممکن استفاده می کند.

  • FlexNav

http://jasonweaver.name/lab/flexiblenavigation/

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

طراحی واکنش گرا

طراحی واکنش گرا

 

  • Sidr

http://www.berriart.com/sidr/

پلاگینی قدرتمند که هر دو اسلاید چپ و راست در منو را مدیریت می کند، این پلاگین همچنین رویداد های لمسی را در گوشی های موبایل مدیریت می کند.

طراحی واکنش گرا

طراحی واکنش گرا

راه حل سفارشی

ایجاد یک راه حل سفارشی همواره گزینه ی خوبی بوده است و شما نیازی ندارید که از یک برنامه نویس دیگر بخواهید که روشی را به شما ارائه دهد. این کار ساده تر از چیزی است که فکر کنید که بستگی به پیچیدگی navigation شما دارد.

نتیجه گیری

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




نظراتتان را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *