فضا در طراحی رابط‌ کاربری

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

فضای احاطه‌شده

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

فضای اشغال‌شده

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

فضای داخلی

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

بازنشر