منظور از Layout در طراحی سایت چیست؟

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

layout در طراحی سایت چیست؟
Layout در طراحی سایت چه انواعی دارد؟
قوانین طراحی چیدمان سایت چیست؟
چطور تشخیص بدهیم کدام چیدمان برای کدام سایت مناسب تر است؟

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

طراحی سایت پارالاکس چیست و چطور وبسایت را جذاب تر می‌کند؟

Table of Contents

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

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

قوانین چیدمان یا Layout در طراحی سایت

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

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

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI می توانید از خدمات طراحی ui تاس استفاده کنید

انواع layout یا چیدمان در طراحی سایت

ممکن است در منابع مختلف دسته‌بندی های مختلفی را مشاهده کنید. اما ما بر اساس آن چه برای طراحان کاربردی تر است سه دسته بندی زیر را برای چیدمان سایت تعریف کرده ایم:

1. Layout های ثابت

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

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

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

2. چیدمان‌های نسبی

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

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

از این روش با عنوان چیدمان سیال یا الاستیک هم یاد می‌شود. چرا که این طور به نظر می‌رسد که کش می‌آید یا جمع می‌شود. در این چیدمان واحد نسبت ها بر حسب درصد یا “EM” تعریف می‌شود. “EM” واحد اندازه‌گیری ارتفاع قلم است و خب فونت‌ها هم مثل تمام عناصر دیگر در ابعاد جدید تغییر می‌کنند. کارکرد واحد درصد هم که مشخص است. یعنی اگر ستونی ۶۰ درصد صفحه را اشغال کرده است در تمام ابعاد و نسخه‌ها همان ۶۰ درصد را اشغال می‌کند.

3. چیدمان مشروط

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

ممکن است حتی برندها و دستگاه‌هایی وجود داشته باشند که برای شما کاملا ناشناخته اند و حتی روحتان هم از ابعاد صفحه آن ها خبر نداشته باشد. در این شرایط که تعداد کاربران موبایلی و تبلتی شما بسیار زیاد است و دستگاه ها تنوع زیادی دارند می‌توانید از چیدمان مشروط کمک بگیرید. یعنی شرط‌هایی تعیین کنید. مثلا اگر ابعاد صفحه مرورگر به ترتیب XXXX بود از ورژن A استفاده کن و در صورت YYYY تا ZZZ از ورژن B. این طراحی به تخصص کمی بالاتری نیاز دارد.

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

استفاده از ابزار DreamWeaver برای طراحی چیدمان سایت

از آن جایی که layout ها حین طراحی ممکن است کمی سردرگمی ایجاد کنند، نرم افزاری طراحی شده که خروجی کار در آن به صورت همانی نمایش داده می‌شود. یعنی می‌توانید خروجی طراحی‌تان را در آن واحد هنگام کار ببینید. این ابزار به خصوص برای مبتدیان طراحی گزینه مناسبی است و در آن می‌توان از زبان‌های برنامه نویسی HTML ، HTML5 ، CSS ، PHP ، Javascript و jQuery استفاده کرد. در این ابزار تا نسخه CS4 تنها دو متد معرفی شده و واحدهای آن تعریف شده‌اند.

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

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

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

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

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

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

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

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

جمع بندی

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