۵ اشتباه رایج در طراحی UI
طراحی UI خوب، تفاوت بین یه سایت معمولی و یه سایت حرفهای هست. این ۵ اشتباه رو از طراحیت حذف کن و تفاوت رو ببین.
اشتباه اول: استفاده از فونتهای زیاد
استفاده از ۳-۴ فونت مختلف توی یه صفحه، طراحی رو شلوغ و آماتور میکنه.
چرا این اشتباهه؟
چشم انسان به ثبات بصری نیاز داره. وقتی چند فونت مختلف توی یه صفحه میبینه، ذهنش درگیر پردازش میشه و تجربه کاربری ضعیف میشه.
راهحل
- حداکثر ۲ فونت استفاده کن
- یکی برای تیترها (Bold)
- یکی برای متن (Regular)
- میتونی از یه فونت با وزنهای مختلف هم استفاده کنی
مثال:
- تیتر: Vazirmatn Bold
- متن: Vazirmatn Regular
اشتباه دوم: فاصلههای نامنظم
اگه فاصلهها توی صفحه تصادفی باشن، طراحی بینظم به نظر میرسه.
چرا این اشتباهه؟
فاصلههای منظم، ریتم بصری ایجاد میکنن. چشم کاربر راحتتر توی صفحه حرکت میکنه.
راهحل
یه مقیاس فاصله تعریف کن:
- ۴ پیکسل (xs)
- ۸ پیکسل (sm)
- ۱۶ پیکسل (md)
- ۲۴ پیکسل (lg)
- ۳۲ پیکسل (xl)
- ۴۸ پیکسل (2xl)
همه جا از همین مقیاس استفاده کن.
اشتباه سوم: کنتراست کم
متن خاکستری روشن روی پسزمینه سفید، خوندن رو سخت میکنه.
چرا این اشتباهه؟
- برای کاربران مسن یا افرادی که مشکل بینایی دارن، غیرقابل استفاده میشه
- SEO ضعیف میشه (Google به دسترسیپذیری اهمیت میده)
- تجربه کاربری ضعیف میشه
راهحل
- کنتراست بالای ۴.۵:۱ برای متن عادی
- کنتراست بالای ۳:۱ برای متنهای بزرگ
- از ابزار WebAIM Contrast Checker استفاده کن
اشتباه چهارم: انیمیشنهای اضافه
انیمیشنهای بیهدف، کاربر رو گیج میکنن و سرعت سایت رو پایین میارن.
چرا این اشتباهه؟
- سایت رو کند میکنه
- کاربر رو حواسپرت میکنه
- ممکنه باعث سرگیجه بشه
راهحل
هر انیمیشن باید یه هدف داشته باشه:
- راهنمایی کاربر — نشون دادن مسیر حرکت
- بازخورد — تأییدیه بعد از کلیک
- جلب توجه — فقط جایی که لازمه
قانون طلایی: اگه انیمیشن رو حذف کنی و هیچ فرقی نکنه، پس اضافیه.
اشتباه پنجم: بیتوجهی به موبایل
بیش از ۷۰٪ کاربران از موبایل استفاده میکنن.
چرا این اشتباهه؟
- نیمی از کاربرانت رو از دست میدی
- Google سایتهایی که موبایلفرندلی نیستن رو پایینتر رتبه میده
- تجربه کاربری ضعیف
راهحل
- همیشه Mobile-first طراحی کن
- اول برای موبایل طراحی کن، بعد برای دسکتاپ
- تست کن روی اندازههای مختلف
- از font-size مناسب استفاده کن (حداقل ۱۶px)
چکلیست نهایی
قبل از تحویل پروژه، اینا رو چک کن:
- حداکثر ۲ فونت در کل پروژه
- فاصلهها بر اساس مقیاس منظم
- کنتراست رنگها طبق WCAG AA
- انیمیشنها فقط در صورت نیاز
- طراحی موبایلفرندلی
نتیجه
طراحی UI خوب، سادگی + ثبات + توجه به جزئیات هست. این ۵ اشتباه رو از طراحیت حذف کن و تفاوت رو ببین.
یادت باشه: کاربر نهایی، طراحی رو نمیبینه — اون تجربه رو میبینه.