طراحی ریسپانسیو چیست؟ | چطور سایت واکنشگرا طراحی کنیم؟

می‌خواهم یکی از موثرترین و قطعی‌ترین راه ها برای خرد کردن اعصاب بازدیدکنندگان سایت و رفت بی‌برگشت آن‌ها را به شما یاد بدهم. فقط کافیست تمرکز طراحی سایت‌تان را روی یک دستگاه خاص بگذارید و سایر دستگاه‌های کاربران را در نظر نگیرید. تا وقتی که در نتایج جستجو ظاهر شدید، و عنوان و توضیحاتتان توجه کاربران را جلب کرد، خودشان را بکشند و Rotate و zoom out  بکنند اما سایت شما به هیچ صراطی مستقیم نشود! به این ترتیب می‌توانید مطمئن باشید که این کاربران، در نتایج هر جستجویی شما را ببینند پا به فرار می‌گذارند. اگر این سرنوشتی نیست که برای سایت‌تان بخواهید بایستی با مفهوم طراحی ریسپانسیو آشنا بشوید. تا انتهای مطلب همراه آژانس دیجیتال مارکتینگ تاس باشید و بخوانید:

• طراحی ریسپانسیو چیست؟
• چرا باید از طراحی ریسپانسیو استفاده کنیم؟
• چطور با استفاده از شبکه Grid ریسپانسیو طراحی کنیم؟

Table of Contents

پیشنهاد می کنیم مطالعه کنید:

بایدها و نبایدهای طراحی سایت

طراحی ریسپانسیو چیست؟

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

چرا باید از طراحی ریسپانسیو استفاده کنیم؟

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

دلیل دیگری که باید به طراحی ریسپانسیو اهمیت بدهیم این است که گوگل به سایت هایی که رضایت کاربران را اولویت قرار می‌دهند و به کاربران احترام می گذارند، ارزش بیشتری می دهد. یعنی ریسپانسیو بودن سایت به طور مستقیم در سئو تاثیرگذار است.

چطور از شبکه یا Grid در طراحی ریسپانسیو استفاده کنیم؟

پیش از آن که به این سوال پاسه دهیم لازم است با اجزای اصلی شبکه آشنا شویم:

شبکه از سه جز اصلی به نام های ستون، شیار و حاشیه تشکیل می‌شود. اجازه بدهید هر یک را به طور مجزا بررسی کنیم:

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

شیارها
به فضای عمودی بین ستون‌ها، شیار گفته می‌شود. شیارها هم مثل ستون ها برای نظم بخشی به مطالب استفاده شده و با مقادیر ثابت نشان داده می‌شوند.

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

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

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

ساختار ستون‌ها در طراحی ریسپانسیو

به تعداد ستونهایی که برای تشکیل شبکه استفاده می شود ساختار ستونی گفته می شود. رایج‌ترین ساختارهای ستونی برای طراحی ریسپانسیو، بر اساس اعداد 8 ، 12 ، 16 و 20 صورت می‌گیرد. این بستگی به نیاز طراحی شما دارد که کدام ساختار ستون را برای پروژه خود انتخاب کنید. در ایم کیان ساختار 12 ستونی پرکاربردترین است. چرا که  می تواند تجزیه شود تا محتوا در کانتینرهای اصلی 4–4–4 یا 3–3–3–3 تراز شود.

نقطه شکست

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

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

رفتار شبکه ای

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

شبکه های ثابت

یک شبکه ثابت دارای ستون‌هایی با عرض ثابت و حاشیه های انعطاف پذیر است. عرض محتوا در شبکه ثابت عرض محتوا در نقاط شکست تغییری نمی‌کند و فضای خالی با حاشیه انعطاف پذیر پر می‌شود.

شبکه های سیال یا تمام عرض

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

شبکه های ترکیبی

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

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

چگونه می توان شبکه طرح بندی را در ابزار نمونه سازی تنظیم کرد؟

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

نمای دسکتاپ

هرگز توصیه نمی‌شود که در رزولوشن‌های بالا مثل  1440×900, 1600×900, 1920×1080 طراحی کنید. مگر این که هدف خاصی داشته باشید و دقیقا بدانید چه کار دارید می‌کنید. کمترین رزولوشنی که برای صفحه انتخاب می‌کنید می‌تواند 1280×800 باشد. چرا که در هر دو طراحی سیال و ثابت می‌تواند با صفحه‌های بزرگتر سازگار شود. اما روش برعکس این نتیجه نمی‌دهد. پس بیایید همین اندازه را معیار قرار بدهیم.

طرح شبکه با عرض ثابت

برای راه اندازی شبکه ای با عرض ثابت ، از مقدار عددی ثابت برای شیارها و ستون ها استفاده می کنیم. ما اندازه های 74 پیکسل برای عرض ستون ها،  32 پیکسل پهنای شیار و حاشیه های جانبی 16 پیکسل را در هر طرف توصیه می کنیم.

ستون هایی با عرض 74 پیکسل و شیارهای با عرض 32 پیکسل، عرض محتوا 1240 پیکسل را می‌سازند (به استثنای حاشیه های جانبی 16 پیکسل از هر طرف یعنی 1272 پیکسل) . به این ترتیب از حداکثر اندازه صفحه نمایش موجود استفاده می‌شود.

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

تنظیم شبکه طرح سیال

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

نمای موبایل

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

نمای تبلت

روش تنظیم شبکه برای تبلت کاملا شبیه به همان چیزی است که در قسمت موبایل توضیح داده شد. توصیه ما برای  عرض شیارها ۳۲ پیکسل و عرض حاشیه ۱۶ پیکسل در هر طرف است. ما می‌توانیم صفحه رابط کاربری تبلت را در اندازه 768×1024 طراحی کنیم. این بار می‌توانید هر دوستون را ادغام کرده و ۶ ستون قطور برای تنظیم بهتر شبکه ایجاد کنید.

تغییرات چیدمان

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

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

طرح یک ستونی

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

چیدمان دو ستونی

طرح دو ستونی دارای دو کانتینر در سطح صفحه است. به طور کلی ، یک کانتینر در سطح صفحه در مقایسه با دیگری وزن ستون بیشتری دارد. در یک طرح دو ستونی، ستون ها در 9-3 یا 8-4 کانتینر اصلی برای ایجاد عرض محتوای اصلی توزیع می شوند. رابط‌های کاربری که در صفحه، یک اسلایدبار طراحی می‌کنند نمونه‌هایی از چیدمان دوستونی هستند که همه دیده‌اید.

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

طرح سه ستونی دارای سه ظرف در سطح صفحه است. یک کانتینر در سطح صفحه در مقایسه با دو کانتینر سطح دیگر ، وزن ستون بیشتری دارد. در یک طرح سه ستونی ، ستون ها در 3-6-3 یا 2-8-2 کانتینر اصلی توزیع می شوند تا عرض محتوای اصلی را ایجاد کنند. رابط های دارای دو اسلایدبار می توانند نمونه ای از طرح سه ستونی باشند.

طرح اسلایدبار با عرض ثابت

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

طراحی ریسپانسیو با استفاده از شبکه

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

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

شما می توانید از خدمات طراحی سایت شرکتی تاس استفاده کنید

جمع بندی

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