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

رتبه این آیتم
رتبه 5 در 1 رای از 1 تا 5


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

 

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

 

مزایای طراحی سایت روان:

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

 

معایب طراحی سایت روان:

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

 

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

 

مزایا:

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

 

  • نیازی به min-width یا max-width وجود نداره، هرچند که هر مرورگری اون رو پشتیبانی نمی کنه.

 

  • حتی اگه وب سایتی برای سازگاری با کوچکترین رزولوشن صفحه نمایش 800 × 600 طراحی شده باشد، محتوای آن هنوز هم به اندازه کافی و با رزولوشن بزرگتر گسترده و به راحتی قابل خواندن است.

 

معایب:

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

 

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

 

  • طرح های عرض ثابت معمولا کارایی پایین تری دارن.

 

تفاوت طراحی سایت روان و ثابت:
طراحی روان و طراحی ثابت(Fixed) قطعا تفاوت های بسیاری دارن که ما برخی از تفاوت های ظاهری اون ها رو در زیر توضیح می دهیم.

  • تفاوت Layout در طراحی سایت روان و ثابت:

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

 

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

 

طراحی elastic:
اگه هنوز نتونستید تصمیم بگیرد که از کدام طرح بندی استفاده کنید طراحی الاستیک یا نیمه منعطف گزینه ی خوبی است. طرح بندی الاستیک اگه به درستی استفاده بشه می تونه مزایای هر دو نوع دیگر( ثابت و روان) رو به ارمغان بیاورد. این طراحی از لحاظ ظاهری شبیه طراحی روان است که اکثر مواقع تشخیص اون ها از همدیگه سخت میشه.  البته این روش هم مثل دو روش ذکر شده مزایا و معایبی داره که با هم بررسی می کنیم:

 

مزایا:

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

 

 

معایب:

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

 

  • بسته به ویژگی های طرح، برخی از طرح های الاستیک ممکن است نیاز به برگه های تکمیلی داشته باشن.

 

 

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

 


نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین. پروفایل شرکت در گوگل پلاس

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

يک نظر بدهيد

موارد ستاره دار الزامی هستند

info [ at ] joomir.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد