چیدمان را مانند معماری یک محصول دیجیتال در نظر بگیرید. همانطور که برای طراحی یک ساختمان از قوانین و دستورالعملهای مشخصی پیروی میکنید، در سازماندهی عناصر درون یک شبکه نیز باید قواعد خاصی را رعایت کنید. اگر عناصر چیدمان شما مشکلاتی در استفاده ایجاد کنند، تجربه کاربری کلی را خراب خواهند کرد.
اصول طراحی مانند ترازبندی، فضای خالی، نزدیکی، تناسب و … به شما کمک میکنند تا محتوا را به گونهای سازماندهی کنید که کاربران بهراحتی در آن پیمایش کرده و اهداف خود را محقق کنند.
فاصله گذاری (Spacing)
فاصله گذاری مجموعهای از قوانین است که مشخص میکند چگونه اجزاء در یک رابط کاربری باید مرتب شوند. این شامل مقادیر قابل اندازهگیری است که فاصلهها را داخل و خارج از اجزاء تعریف میکند. زمانی که فاصله گذاری به طور منظم و هماهنگ انجام شود، به حفظ طرحی تمیز و سازماندهی شده کمک میکند و ناوبری آسانتر برای کاربران فراهم میآورد.
فاصله گذاری در طراحی: فاصله گذاری در طراحی فاصلههای بین مهمترین اجزاء (برای مثال، فاصله بین نوار بالایی و محتوا، یا نوار کناری و محتوا) و خود صفحه را تعریف میکند. دستورالعملهای طراحی متریال توصیه میکنند که اجزاء را به 8dp تنظیم کرده و اندازهها را در افزایشی از 8dp تنظیم کنید تا ریتم بصری هماهنگ و یکسانی در سراسر صفحهها ایجاد شود.
فاصله گذاری در اجزاء: فاصله گذاری در اجزاء روابط فضایی درون یک جزء خاص را تعریف میکند، مانند فاصله بین آیکون و برچسب یک دکمه. اگر این فاصلهها را به طور یکسان در تمام دکمههای صفحه خود رعایت نکنید، ممکن است به طور ناخودآگاه برای کاربران ناهماهنگ و نامنظم به نظر برسد. حفظ تناسب در اینجا تعادل را در اجزاء رابط کاربری ایجاد میکند، بنابراین وقت بگذارید و قوانینی برای استفاده یکسان از آنها در سراسر محصول ایجاد کنید.
نکته حرفهای! برای هماهنگسازی اجزاء کوچک مانند آیکونها یا تایپوگرافی درون اجزاء از شبکه 4dp استفاده کنید.
حاشیهها (Margins)
حاشیهها فضاهایی هستند که بین المانها قرار دارند. این فضا میتواند اطراف یک دکمه، بین ستونها یا بین یک تصویر و متن اطراف آن باشد. حاشیهها از اجزای اصلی فاصلهبندی در طراحی لایهبندی هستند.
حاشیهها همچنین فضای خالی (یا فضای منفی) را در صفحه ایجاد میکنند. این فضا را میتوان به عنوان فضایی برای تنفس در نظر گرفت که به حذف شلوغی بصری کمک میکند. فضای خالی همچنین به حفظ تعادل و ریتم در صفحه بین المانها کمک میکند.
پدینگ (Padding)
مارژین (Margin) به فاصلهای گفته میشود که در اطراف یک عنصر در طراحی قرار میگیرد و فضای بیرونی آن را مشخص میکند. این فاصله معمولاً بین لبههای یک عنصر و سایر عناصر یا لبههای صفحه است. برای مثال، فاصلهای که بین یک دکمه و متن اطراف آن قرار دارد، مارژین محسوب میشود.
مارژین کمک میکند تا عناصر از هم فاصله بگیرند و طراحی شلوغ نشود، همچنین باعث میشود که عناصر صفحه بهخوبی مرتب و منظم نمایش داده شوند.
خطوط راهنما (Keylines)
خطوط راهنما خطوطی فرضی هستند که به مرتبسازی عناصر خارج از گرید طراحی کمک میکنند. این خطوط همچنین به طراحان این امکان را میدهند که فاصله عناصر را از لبه صفحه مشخص کنند.
خطوط راهنما برای حفظ تعادل محتوا بسیار مهم هستند، به ویژه در کنار هم قرار گرفتن انواع مختلفی از عناصر، مانند عکس پروفایل و متنی که در کنار آن قرار دارد.
چپچین کردن (Left alignment)
چپچین کردن به این معناست که عناصر طراحی با حاشیه یا فضای کناری سمت چپ هم راستا شوند، که باعث ایجاد لبهای صاف در آن سمت میشود. این روش بهویژه در زبانهایی که از چپ به راست خوانده میشوند رایج است، زیرا با جریان طبیعی خواندن ما هماهنگ است. این کار به کاربران کمک میکند تا محتوای صفحه را سریعتر و راحتتر اسکن کنند.
چه در حال کار با متن، تصاویر یا دیگر عناصر گرافیکی باشید، چپچین کردن ظاهری مرتب و منظم ایجاد میکند که خوانایی را بهبود میبخشد. این شیوه اغلب برای بلوکهای طولانی متن مانند مقالات یا پستهای وبلاگ استفاده میشود، اما برای زمینههای مختلف طراحی نیز مناسب است. بنابراین، اگر شک دارید، چپچین کردن یک گزینه قوی و کاربرپسند است.
نکته حرفهای! برای بلوکهای بزرگ متن از چپچین کردن استفاده کنید تا خوانایی بیشتر شود.
راست چین کردن (Right alignment)
راستچین کردن به معنای چسباندن عناصر به حاشیه سمت راست یا مرز راست عنصر والد است. این روش در طراحیها کمتر استفاده میشود، بهویژه در زبانهایی که از چپ به راست خوانده میشوند، زیرا با ایجاد نقاط شروع نامنظم برای خطوط متن، جریان طبیعی خواندن را مختل میکند.
با این حال، راستچین کردن در موارد خاصی کاربرد دارد، مانند زمانی که با دادههای عددی، یادداشتهای جانبی یا اقدامات ثانویه کار میکنید تا این موارد برجسته شوند یا در طرحهای خاص جای بگیرند. فقط هنگام استفاده از آن برای بخشهای پر از متن باید احتیاط کنید؛ چرا که گزینه مناسبی برای خوانایی نیست.
مرکزچین کردن (Center alignment)
مرکزچین کردن یعنی قرار دادن عناصر در وسط صفحه یا بخش. این روش معمولاً برای عناوینی مثل سرصفحهها یا برچسبهای دکمهها به کار میرود.
اما مرکزچین کردن برای متنهای طولانی یا بیش از سه خط معمولاً مناسب نیست، چون باعث میشود نقطه شروع هر خط متفاوت باشد و این میتواند خواندن را سخت کند. برای متون بلندتر بهتر است از چپچین استفاده کنید تا خوانایی بهتری داشته باشد.
بالاچین کردن (Top alignment)
بالاچین کردن یعنی همراستا کردن لبههای بالای عناصر در یک خط افقی نامرئی. این روش برای زمانی که با عناصری با ارتفاعهای متفاوت کار میکنید بسیار مفید است. با همراستا کردن عناصر در بالا، نقطه شروع ثابتی برای چشمهای کاربر فراهم میشود که فرایند اسکن محتوا را سادهتر کرده و فهم آن را بهبود میبخشد.
برای مثال، این روش در منوهای ناوبری وب یا پستهای وبلاگ چندرسانهای رایج است. در یک منوی ناوبری، آیکونها و متنها ممکن است اندازههای مختلفی داشته باشند، اما از همان خط بالایی شروع میکنند تا اسکن محتوا آسانتر شود. در پستهای وبلاگ چندرسانهای که شامل متن، تصویر و ویدیو هستند، بالاچین کردن کمک میکند تا جریان محتوای منظم و قابل فهم ایجاد شود.
پایینچین کردن (Bottom alignment)
عناصر پایینچین شده به طور مستقیم در برابر یک خط افقی نامرئی قرار میگیرند و ظاهری ثابت و ریشهدار ایجاد میکنند. این نوع چینش بهویژه زمانی مفید است که با عناصر با ارتفاعات مختلف سر و کار دارید و میخواهید یک خط پایه بصری ایجاد کنید.
برای مثال، در یک گالری تصاویر، ممکن است عنوان تصاویر یا اطلاعات عکاس در پایینچین قرار گیرند تا یکنواختی حفظ شود، صرف نظر از ابعاد عکسها.
بهطور مشابه، در فوتر وبسایتها، اطلاعات حق تکثیر اغلب پایینچین میشود تا حضور کماهمیت اما ثابت خود را نشان دهد. این روش برای حفظ یک ظاهر تمیز و منظم مفید است و به کاربران کمک میکند تا به راحتی محتوای صفحه را مرور کنند.
ابعاد (Dimensions)
ابعاد به اندازه هر عنصر اشاره دارد. رابطهای کاربری تنها با اشکال دو بعدی کار دارند که شامل دو بعد (عرض و ارتفاع) هستند. اشکال سهبعدی بخشی از طراحی ۳D هستند و میتوانند در سه بعد (عرض، ارتفاع و عمق) اندازهگیری شوند. تعریف ابعاد از ابتدا کمک میکند تا در طراحی یکپارچگی حفظ شود.
نسبت ابعاد (Aspect ratio)
نسبت ابعاد به تناسب بین عرض و ارتفاع یک عنصر اشاره دارد. این موضوع بهویژه در محتوای تولیدشده توسط کاربران اهمیت دارد، زیرا افراد تصاویر با اندازههای مختلفی آپلود میکنند و نمایش منظم آنها، هماهنگی بصری را حفظ میکند. به عنوان مثال، عکسهای پروفایل در شبکههای اجتماعی معمولاً به تصاویر مربعی یا دایرهای محدود میشوند که کاربران را مجبور به تغییر اندازه یا برش میکند.
رایجترین نسبتهای ابعاد برای تصاویر 16:9 و 4:3 هستند، اگرچه تصاویر مربعی 1:1 به لطف پلتفرمهایی مانند اینستاگرام محبوبیت زیادی پیدا کردهاند.
چیدمان ثابت (Fixed layouts)
چیدمانهای ثابت دارای یک قاب و اجزایی با عرضهای مشخص (بر حسب پیکسل) هستند که با تغییر وضوح صفحه تنظیم نمیشوند. این نوع چیدمان زمانی مفید است که شناخت دقیقی از مخاطبان هدف خود داشته باشید و اطمینان داشته باشید که از چه اندازه مرورگری استفاده میکنند. همچنین، پیادهسازی و سفارشیسازی این چیدمانها به دلیل عرض ثابت عناصر بسیار سادهتر است.
اما چیدمانهای ثابت معمولاً تجربه کاربری ضعیفی ایجاد میکنند، زیرا:
- گروهی از کاربران از طراحیهای بسیار عریض و نیاز به پیمایش افقی شکایت میکنند.
- گروه دیگری از کاربران از فضای خالی زیاد در دو طرف چیدمان ناراضی هستند.
طرحبندی انعطافپذیر (Fluid layouts)
طرحبندیهای سیال به طور طبیعی با تغییر اندازه مرورگر کشیده یا جمع میشوند. چه عرض آن تعیین شده باشد یا نه، این طرحبندیها فضای نمایشگر کاربر را پر میکنند، بدون توجه به اینکه صفحه نمایش بزرگ باشد یا کوچک. در عین حال، متنها و تصاویر اندازه خود را حفظ میکنند. بهخاطر انعطافپذیریاش، اسکرول افقی تنها در صفحهنمایشهای بسیار باریک یا سایتهایی با محتوای عرض ثابت بزرگ ظاهر میشود.
با طرحبندیهای سیال، کاربران بیشتر احتمال دارد که تمام محتوای موجود را بدون نیاز به اسکرول عمودی یا افقی مشاهده کنند.
بهترین شیوههای استفاده از طرحبندیهای سیال شامل:
- استفاده از واحدهای درصدی به جای پیکسلها برای تنظیم انعطافپذیرتر عناصر
- تعیین عرضهای حداقل و حداکثر برای جلوگیری از تغییرات ناخواسته در طرحبندی
- استفاده از تصاویر SVG که به طور صاف بدون افت کیفیت مقیاس میشوند
