آنچه درباره‌ی سیستم فضاسازی در طراحی UI نمی‌دانید!

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

• سیستم فضاسازی در طراحی UI چیست؟
• واحدهای فضاسازی در طراحی UI کدامند؟
• چطور قوانین برای ایجاد ارتباط بین عناصر طراحی بسازیم؟

Table of Contents

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

۴ تکنیک در طراحی حرفه‌ای UI دکمه‌ها 

سیستم فضاسازی در طراحی UI چیست؟

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

گرچه تنوع بسیاری در تعیین جزییات سیستم فضاسازی وجود دارد اما سیستم “شبکه 8pt” یکی از محبوب‌ترین‌ها در بین طراحان است.

کاربرد سیستم فضاسازی در طراحی UI چیست؟

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

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

چطور سیستم فضاسازی در طراحی UI را شروع کنیم؟

اول از همه بایستی مبنا را انتخاب کنید. انتخاب مبنا به شما امکان می‌دهد در سیستم فضاسازی مقیاس اندازه داشته باشید. مبناهای مختلفی مثل ، 5pt ، 6pt ، 8pt ، 10pt  وجود دارند و شما می‌توانید مناسب‌ترین آن برای خود را انتخاب کنید. تا زمانی که بدانید هرکدام از این سیستم‌ها چه چیزی را تشدید و چه چیزی را کمرنگ تر می‌کنند، پاسخ اشتباهی وجود ندارد. هر چیزی که برای هدف شما مناسب است، می‌تواند انتخاب درست باشد.

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

هنگام ساخت سیستم فضایی خود درمورد نیازهای خود منطقی باشید. و این موارد را همواره در نظر بگیرید:

نیازهای کاربر

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

تعداد متغییرها

انتخاب یک واحد پایه کوچکتر مانند 4pt ، 5pt یا 6pt می تواند متغیرهای زیادی را در سیستم شما باز کند. تشخیص تفاوت‌ها در مقیاس 12pt و 16pt تشخیص اختلاف لایه‌ها برای چشم چندان ساده نیست. درحالی که در مبنای 8pt از لحاظ بصری تعادلی خوبی وجود دارد و تعداد متغییرها منطقی است.

اعداد فرد

تعریف یک عدد فرد در مبنا مثل 5pt  می‌تواند کار با عناصر را بدون تقسیم پیکسلی دشوارتر کند. به طور مثال اگر آیکون و متن را در دکمه‌ای با ارتفاع ۲۵ پیکسل قراردهیم، می‌تواند پیکسل‌های تار و مبهی برای برخی ایجاد کند. پیکسل‌های تصاویر در مقیاس 1.5x در موبایل و دسکتاپ باعث تاری می‌شود.

چطور یک سیستم فضاسازی طراحی را اجرا کنیم؟

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

عنصر در اولویت

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

محتوا در اولویت

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

Border داخلی باشد یا خارجی؟

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

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

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

جمع بندی

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