خیلی وقتها برای "پر کردن" صفحه وسوسه میشود همهجا متن و کامپوننت بگذاریم، اما درست استفاده کردن از فضای خالی (White Space) باعث میشود رابطکاربری مرتبتر، قابلاسکنتر و حرفهایتر بهنظر برسد. 🧘♂️
نکته کلیدی: فاصلههای عمودی و افقی را آگاهانه و یکنواخت تنظیم کن؛ مثلاً یک سیستم 4px یا 8px. این کار هم در Figma و هم در کد کمک میکند ساختار تمیز داشته باشی.
مثال ساده برای فاصلهگذاری یکنواخت بین آیتمهای لیست:
.list-item {
padding: 8px 16px;
}
.list-item + .list-item {
margin-top: 8px; /* فاصله عمودی ثابت بین آیتمها */
}🔍 چرا مفید است؟
• المانهای مرتبط را با فاصله کمتر، و بخشهای جدا را با فاصله بیشتر از هم قرار بده.
• چشم کاربر راحتتر ساختار را تشخیص میدهد و سریعتر محتوا را اسکن میکند.
برای الهام گرفتن از نمونههای خوب فاصلهگذاری، راهنمای Layout در Material Design عالی است 👇
material.io — Spacing Guidelines
🪄 دفعه بعد که UI را مرور میکنی، فقط با تنظیم فاصلهها سعی کن بدون تغییر رنگ و تایپوگرافی، حس حرفهایبودن را بالا ببری.
🔖 #Design #طراحی #UI #UX #UI #UX #White_Space #Layout #Spacing #Material_Design
👤 Developix
💎 Channel: @DevelopixDesign
