طراحی وب واکنش‌گرا چیست؟

چکیده

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

فهرست مطالب

عضویت در خبرنامه

اشتراک گذاری

شرح مطلب

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

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

طراحی تجربهٔ کاربر را می‌توان شامل بهینه‌سازی ساختار جهت همخوانی با دستگاه‌های مختلف دانست. طراحان باید تجربه‌ای باثبات و یکسان در دستگاه‌های مختلف برای کاربر ایجاد کنند. اگر می‌خواهید موتور‌های جستجو وب‌سایت شما را رتبه‌بندی و فهرست گذاری کنند، طراحی واکنش‌گرا از ملزومات است. به‌عنوان‌مثال  Google’s mobile-first indexing وبسایت‌های واکنش‌گرا را در نتیجه جستجو موبایل اولویت می‌دهد.

طبق آمار گوگل، در آمریکا ۹۴% مردم درباره اطلاعات در محله خود جستجو می‌کنند. همچنین، ۷۷% این جستجو در خانه یا محل کار اتفاق می‌افتاد. توجه کنید که در این مکان‌ها به احتمال بالا کامپیوتر وجود دارد؛ اما موبایل مورد استفاده قرار می‌گیرد.

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

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

طراحان برای طراحی وب واکنش‌گرا باید دو معیار اصلی را در نظر بگیرند:

  • نقطه شکست‌ها
  • محتوای بصری

نقطه شکست

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

  • تلفن‌های هوشمند
  • تبلت
  • کامپیوتر

اما برای یک وب‌سایت کاملاً واکنش‌گرا، طراحان باید هر دو حالت چیدمان عمودی و افقی را برای تبلت و موبایل در نظر بگیرند که مجموعاً پنج حالت را شامل می‌شود:

  • موبایل – عمودی
  • موبایل – افقی
  • تبلت – عمودی
  • تبلت – افقی
  • کامپیوتر

محتوای بصری

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

ده اصل برای طراحی وب واکنش‌گرا

  • انعطاف‌پذیری

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

  • اصلاح تصاویر

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

  • از گرافیک‌های برداری عددی استفاده کنید (SVG)

به‌جای گرافیک‌های شطرنجی (raster)، به‌خصوص برای آیکون‌ها و لوگوها، از SVG ‌ها استفاده کنید. بر خلاف تصویر شطرنجی، SVG کیفیت خود را بر اساس اندازه مقصد تصویر و نه پیکسل‌ها، تعیین می‌کند. به همین دلیل تصویر در هر اندازه‌ای باکیفیت مناسب باقی می‌ماند.

  • به نقاط شکست دقت کنید

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

  • استفاده از رابط کاربر کارتی

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

  • اهمیت مینیمالیسم

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

  1. کاهش مطلب باعث ساده شدن عمل مطالعه و درک برای کاربر می‌شود
  2. یک طراحی رابط کاربر مینیمالیست ایجاد یکپارچگی را در دستگاه‌های مختلف با اندازه‌های مختلف راحت‌تر می‌کند.
  3. صفحات وب بامحتوای کمتر، شامل HTML، CSS، و javascript سریع‌تر بارگذاری می‌شوند. در نتیجه تجربه بهتری به کاربر ارائه شده و در سئو وب‌سایت تأثیر مثبت خواهد داشت.
  4. 7.      رویکرد طراحی موبایل محور

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

  • اولویت‌بندی و مخفی‌سازی مناسب مطلب

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

  • فضای مناسب و بزرگ برای دکمه‌ها

قانون فیتس (که در کتاب  Interaction Design Best Practices: Book Iتوضیح داده شده است) بر مساحت بزرگ دکمه‌ها که ارتباط با کاربر را آسان تر می‌کند تاکید دارد. طراحان همچنین باید فضای خالی کافی بین لینک‌ها و دکمه ها در نظر گرفته تا از کلیک ناخواسته کاربر که می تواند تجربه ی ناموفقی شکل دهد، جلوگیری کنند.

  • تحقیق سایت رقبا و پیشروان صنعت

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

نمونه‌های طراحی وب واکنش‌گرا

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

گاردین

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

نمای تلفن هوشمند

نمونه طراحی سایت برای گوشی، روزنامه گاردین

نمای تلفن هوشمند با ارائه تمامی عناصر اصلی به صورت واضح و منظم، جذاب و کامل است.

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

در نسخهٔ موبایل هیچ فضایی هدر داده نشده است. به‌عنوان‌مثال از اخبار آب‌وهوا برای پرکردن فضای کنار تیتر اصلی استفاده شده است.

نمای تبلت

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

نمای کامپیوتر

نمونه طراحی سایت برای کامپیوتر، روزنامه گاردین

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

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

مجله اسمشینگ

این مجله طبق الگو خود تجربه استفاده در موبایل مناسبی برای وب‌سایت خود ایجاد کرده است.

نمای تلفن هوشمند

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

نمای تبلت

نموه طراحی سایت برای تبلت، مجله اسمشینگ

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

نمای کامپیوتر

نمونه طراحی سایت برای کامپیوتر، مجله اسمشینگ

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

لوک اوت

بر خلاف دو مثال اول، لوک اوت یک وب‌سایت بر پایهٔ سرویس است که تمایل به جذب مشتری‌های جدید دارد. این بار اول وب‌سایت را از نمای کامپیوتر برسی می‌کنیم.

 نمای کامپیوتر و تبلت

نمونه طراحی سایت برای کامپیوتر و تبلت، ، لوک اوت

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

لوک اوت به دنبال دریافت بینندهٔ بیشتر است، از همین رو از رنگ‌های جذاب سبز در بخش‌های مختلف استفاده کرده است.

نمای موبایل

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

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

مطالب مشابه

آموزش
بهترین طراحی وب سایت‌ به انتخاب المنتور در آپریل ۲۰۲۲

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

ادامه مطلب »
آموزش
چگونه فایل robots.txt وردپرس خود را برای سئو بهینه کنید؟

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

ادامه مطلب »

با ما تماس بگیرید