Kaptain Kitty
دسته ها :Html و Css
انتشار :۱۱ شهریور ۱۳۹۳
بازدید :1119 بار

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

الگوی طراحی چیست؟

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

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

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

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

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

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

گالری های ریسپانیو

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

وقتی که اندازه ی صفحه نمایش را تغییر می دهید، باید حواشی، padding و مرزها را برای هر یک از تصاویر در نظر داشته باشید. در برخی از کامپیوترها تصاویر فضایی منفی اشتغال می کنند. تصویر زیر این انطباق ها را نشان می دهد:

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

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

 

Progress Bar های ریسپانسیو

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

طراحی responsive

طراحی responsive

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

طراحی responsive

طراحی responsive

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

طراحی responsive

طراحی responsive

این progress bar ها اطلاعی از این که چند مرحله باقی مانده است نمی دهند اما حداقل کاربر می داند که یک مرحله قبل از مرحله ی جاری و یک مرحله بعد از مرحله ی جاری وجود دارد.

جداول ریسپانسیو

ریسپانسیو ساخت جداول کار دشواری است. مشکل این است که جداول باید بسیار گسترده و دارای ستون های زیاد باشند اما گوشی های موبایل (به ویژه هنگام استفاده در حالت پورتره) بسیار باریک هستند. خوشبختانه راه حل های زیادی در طی سال های گذشته ایجاد شده است. دو راه حل وجود دارد که کمی از بقیه محبوب تر است.

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

طراحی responsive

طراحی responsive

اگرچه این روش خیلی جالب است اما این راه حل برای اکثر موارد مناسب نیست. اگر نیاز به نمایش کامل داده در یک جدول دارید، جدول ریسپانسیو Zurb بهترین راه حل موجود است.

 

برچسب‌ها, , , ,

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

در این مقاله می خواهیم نگاهی داشته باشیم به مبحث JavaScript Templating یا همان مدیریت و ایجاد تمپلیت در وبسایت توسط جاوااسکریپت. در وحله ی اول بهتر است ببینیم تمپلیت های جاوااسکریپت چه معنایی دارند، چه زمانی باید از آنها استفاده کنیم و اینکه چگونه می توان آنها را پیاده سازی نمود. خوب است بدانید که موتورهای […]

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه