| کانال طراحی و رابط‌کاربری |
🎯 ترفند سریع: سیستم فاصله‌گذاری ۴–۸–۱۲ توی UI
یکی از ساده‌ترین راه‌ها برای تمیزتر شدن UI اینه که برای فاصله‌ها (spacing) از یه «سیستم» ثابت استفاده بشه، نه حدس و احساس لحظه‌ای. این کار هم طراحی رو منظم‌تر می‌کنه، هم دستِ دولوپر رو برای پیاده‌سازی راحت‌تر. ✨
ایده‌اش اینه که همه‌ی فاصله‌ها رو از مضرب‌های ۴ یا ۸ انتخاب کنی: مثلاً ۴، ۸، ۱۲، ۱۶، ۲۰، ۲۴ پیکسل. این‌طوری فاصله‌ی بین کارت‌ها، دکمه‌ها، سکشن‌ها و… همه یه ریتم مشخص پیدا می‌کنن و طراحی کمتر شلوغه.
مثال ساده با CSS برای پیاده‌سازی توی Design System:
.spacing-4 { margin: 4px; }
.spacing-8 { margin: 8px; }
.spacing-12 { margin: 12px; }
.spacing-16 { margin: 16px; }
این رویکرد توی Material Design هم پیشنهاد شده و باعث می‌شه در مرور زمان، اضافه کردن کامپوننت‌های جدید بدون به‌هم‌ریختگی بصری انجام بشه. 💡
امروز فقط فاصله‌های صفحه‌ی بعدی رو با این سیستم هماهنگ بشه؛ تفاوت نظم بصریش کاملا قابل حس می‌شه.
منبع: Material Design – Layout
🔖 #Design #طراحی #UI #UX #UI #UX #Spacing #Design_System #Material_Design #Layout
👤 Developix
💎 Channel: @DevelopixDesign
14 · 1.1K ·