(UI Buttons):
دکمهها یکی از مهمترین اجزای رابط کاربری هستن؛ چون کاربر از طریق اونها عمل اصلی رو انجام میده ؛ از «خرید» گرفته تا «ثبت» یا «رفتن به مرحلهی بعد».
برای اینکه دکمههات تأثیرگذار و کاربردی باشن، چند اصل طلایی وجود داره :
۱. فضای خالی (Padding)
دکمه باید نفس بکشه!
متن داخل دکمه رو توی یه فضای مناسب قرار بده تا نه فشرده بهنظر بیاد، نه خیلی بزرگ.
حداقل ۱۶ پیکسل از چپ و راست فاصله بده.
۲. رنگ؛ زبان پنهان طراحی
رنگ، اولین چیزیه که چشم کاربر میبینه.
* رنگهای روشن و پرکنتراست مثل آبی یا سبز برای اقدامات مثبت عالیان.
* قرمز معمولاً برای هشدار یا حذف استفاده میشه.
* حتماً کنتراست با پسزمینه رو رعایت کن تا دکمه برای همه (حتی افراد کمبینا) قابل مشاهده باشه.
نسبت کنتراست پیشنهادی:
* 4.5:1 برای متن عادی
* 3:1 برای متن بزرگتر
۳. ثبات در طراحی
دکمهها باید در کل محصولت ثابت و هماهنگ باشن ؛ از رنگ و فونت گرفته تا گوشههای گرد یا آیکونها.
ثبات باعث میشه کاربر راحتتر مسیر رو پیدا کنه و تجربهی کاربری یکدستتری داشته باشه.
۴. سلسلهمراتب دکمهها
همهی دکمهها به یه اندازه مهم نیستن:
* دکمهی اصلی (Primary): مثل «ثبت» یا «خرید» — باید برجستهتر باشه.
* دکمهی فرعی (Secondary): مثل «لغو» یا «بازگشت» — ملایمتر و کمتر توی چشم.
مثلاً در فرمها:
✅ دکمهی «ارسال» پررنگ
دکمهی «لغو» کمرنگ یا فقط با حاشیه
۵. فونت و خوانایی
متن دکمه باید ساده، خوانا و سریع قابل فهم باشه.
از فونتهای فانتزی یا خیلی باریک پرهیز کن.
حداقل اندازهی فونت: ۱۶ پیکسل
۶. اندازه و محدوده لمس (Touch Area)
بهویژه در موبایل، دکمه باید بهاندازهی کافی بزرگ باشه تا بهراحتی لمس بشه طبق تحقیقات MIT Touch Lab:
حداقل اندازهی مناسب دکمه بین ۴۵ تا ۵۷ پیکسله.
نکته :
اگه نمیدونی کدوم طرح دکمه بهتر جواب میده، A/B Testing انجام بده.
دو نسخه از دکمههات (مثلاً یکی سبز و یکی آبی) رو امتحان کن و ببین کدوم نرخ کلیک بیشتری داره.
طراحی یه دکمهی خوب یعنی:
قابل دیدن
قابل فهم
قابل کلیک
