معرفی انواع دکمه های رابط کاربری + سبک های رایج

دکمه‌ها یکی از مهم‌ترین و همه‌جا حاضرترین عناصر تعاملی تو هر رابط کاربری هستن. اونا می‌تونن شکل‌ها و اندازه‌های مختلفی داشته باشن و برای فرم‌ها، فراخوان‌ها (call to action)، فرم‌های ثبت‌نام، لینک‌های ورود و جاهای دیگه تو یه وب‌سایت یا برنامه استفاده می‌شن.

بر اساس نحوه تعامل مورد انتظار کاربرا با اونا، ۳ دسته اصلی دکمه وجود داره: اصلی، فرعی و درجه سوم. سلسله مراتب بصری، موارد استفاده مختلف برنامه رو تعریف می‌کنه و طراحان باید درک کاملی از زمان استفاده از این تغییرات داشته باشن.

دکمه اصلی (Primary button)

دکمه‌های اصلی چیزی رو که رابط کاربری از کاربرا می‌خواد یا انتظار داره انجام بدن، برجسته می‌کنن. اونا باید از بقیه رابط کاربری و دکمه‌های دیگه، مخصوصاً اونایی که نزدیک هستن، متمایز باشن. دکمه‌های اصلی معمولاً به عنوان فراخوان‌ها مثل دکمه‌های «ارسال» تو فرم‌ها پیدا می‌شن.

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

دکمه فرعی (Secondary button)

دکمه‌های فرعی جایگزین‌هایی برای دکمه‌های اصلی هستن. اگه دکمه «ارسال» اصلی باشه، دکمه «لغو» فرعی خواهد بود. دکمه‌های فرعی باید استایل ملایم‌تری داشته باشن و به دکمه‌های اصلی اجازه بدن تو طراحی مرکز توجه باشن.

اگرچه دکمه‌های فرعی باید کمتر برجسته باشن، مطمئن بشین که کاربرا می‌تونن حالت‌های مختلف اونا (فعال، غیرفعال، شناور، متمرکز و غیره) رو تشخیص بدن.

دکمه درجه سوم (Tertiary button)

دکمه‌های درجه سوم برای کارهای کمتر انجام شده هستن — اونایی که بعیده کاربرا انجام بدن. بنابراین، اونا نباید اصلاً جلب توجه کنن. در واقع، ممکنه بخواین دکمه‌های درجه سوم رو دور از دکمه‌های دیگه تو یه رابط کاربری قرار بدین تا از انتخاب تصادفی اونا توسط کاربرا جلوگیری کنین.

دکمه آیکون (Icon button)

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

از جنبه دسترسی‌پذیری، دکمه‌های فقط آیکون برای کاربرانی که از فناوری‌های کمکی استفاده می‌کنن، به اندازه کافی معنادار نیستن. راه‌های مختلفی برای دسترسی‌پذیرتر کردن این دکمه‌ها وجود داره. به عنوان مثال، می‌تونین آیکون رو با متن همراه کنین یا نام دکمه رو تو عنصر <button> تعریف کنین.

دکمه متن (Text button)

در مقابل دکمه‌های فقط آیکون، دکمه‌های متن فقط شامل متن هستن و هیچ آیکونی ندارن. اونا همچنین شامل حاشیه یا رنگ پرکننده نیستن. دکمه‌های فقط متن وزن بصری بسیار کمتری دارن، بنابراین توصیه می‌شه فقط برای کارهای کم اهمیت‌تر از اونا استفاده کنین.

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

دکمه خطی (Outlined button)

دکمه‌های خطی که به عنوان دکمه‌های شبح هم شناخته می‌شن، فقط شامل یه حاشیه و یه برچسب متن هستن. اونا وزن بصری بیشتری نسبت به دکمه‌های فقط متن دارن اما خیلی برجسته نیستن. دکمه‌های خطی به عنوان دکمه‌های فرعی یا درجه سوم عالی هستن، اما از نظر بصری به اندازه کافی برجسته نیستن که یه عمل اصلی رو نشون بدن.

دکمه برجسته (Raised button)

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

دکمه تخت (Flat button)

در مقابل دکمه‌های برجسته، دکمه‌های تخت رو داریم. اونا از سایه‌ها یا استایل‌های دیگه برای تقلید از ارتفاع یا حجم استفاده نمی‌کنن، اما همچنان به لطف شکل و رنگشون شبیه دکمه به نظر می‌رسن.

از اونجایی که اونا ظاهر و حس مشخص دکمه‌های برجسته رو ندارن، این خطر وجود داره که توسط کاربرا دیده نشن. مطمئن بشین که اونا رو از سایر عناصر رابط کاربری متمایز کنین تا کاربرا گیج نشن.

دکمه‌ی تقسیم شده (Split button)

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

تنها چیزی که دکمه‌های تقسیم شده رو از دکمه‌های منوی معمولی متمایز می‌کنه، یه نوع جداکننده بصری بین عملکرد اصلی دکمه و عملکرد لیست کشوییه. این از فرض کاربرا مبنی بر اینکه کل دکمه لیست کشویی رو نشون می‌ده، جلوگیری می‌کنه. نکته‌ی حرفه‌ای! تعداد انتخاب‌ها رو محدود کنین تا از فلج شدن انتخاب جلوگیری کنین. اون رو برای دسکتاپ تو محدوده ۱۰-۱۲ گزینه و حتی کمتر برای موبایل نگه دارین.

دکمه‌ی ضامن (Toggle button)

اگه می‌خواین چند عملکرد (معمولاً ۲ یا ۳) رو تو یه دکمه واحد گروه‌بندی کنین در حالی که همه اونا رو قابل مشاهده نگه دارین، دکمه‌های ضامن جواب هستن. اونا همیشه تو گروه‌ها زندگی می‌کنن و یه ظرف واحد رو به اشتراک می‌ذارن. تو هر گروه، فقط یه دکمه می‌تونه همزمان انتخاب بشه. نکته‌ی حرفه‌ای! مطمئن بشین که به وضوح نشون می‌دین کدوم گزینه با استفاده از رنگ‌ها یا پوشش‌ها انتخاب شده.

دکمه‌ی منو (Menu button)

اگه نیاز دارین که اقدامات مشابه با اهمیت مساوی رو گروه‌بندی کنین، اما نمی‌خواین اونا رو کنار هم با یه دکمه ضامن نشون بدین، استفاده از یه دکمه منو رو در نظر بگیرین. دکمه‌های منو به سادگی وقتی روشون کلیک/لمس بشه، یه لیست از اقدامات رو باز می‌کنن. اونا یه گزینه عالی برای صرفه‌جویی در فضا هنگام گروه‌بندی اقدامات مرتبط هستن.

دکمه‌ی شناور (Floating action button)

دکمه‌های شناور (FABs) در ابتدا توسط دستورالعمل‌های طراحی متریال گوگل محبوب شدن. اونا دکمه‌های اصلی ثابت و سازگار رو فراهم می‌کنن. به طور کلی، اونا دایره‌ای یا مربعی با گوشه‌های گرد، فقط آیکون، دکمه‌های برجسته ثابت به لبه یا گوشه صفحه هستن. احتمالاً اونا رو تو برنامه‌های گوگل دیدین، مثل دکمه «اضافه کردن رویداد» با علامت مثبت تو تقویم گوگل. شما باید فقط از یه FAB در هر صفحه برای اقدامات اصلی سازنده مانند ایجاد، اضافه کردن یا اشتراک‌گذاری استفاده کنین.

بریم سراغ انواع سبک های دکمه

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

دونستن نحوه قالب‌بندی دکمه‌هاتون برای به حداکثر رسوندن تأثیری که می‌خواین داشته باشن، بهتون اجازه می‌ده دکمه‌هایی رو ایجاد کنین که دقیقاً محرک‌های روانی درست رو بین کاربراتون تحریک کنن. و یکی از اولین ملاحظات، شکل و اندازه دکمه‌هاتونه.

دکمه با گوشه‌های تیز (Sharp-corner button)

دکمه‌های گوشه تیز — اونایی که شعاع گوشه صفر دارن — به طرح‌های شما ظاهری جدی و پیچیده می‌دن. اونا نسبت به دکمه‌هایی با گوشه‌های گرد، محکم‌تر و قابل اعتمادتر به نظر می‌رسن.

طبق اثر روانی بوبا/کیکی، بیش از ۹۵ درصد از مردم اشیاء لبه‌دار و دندانه‌دار رو با کلماتی مثل «کیکی» که نیازی به باز شدن زیاد لب‌ها ندارن، مرتبط می‌دونن. در مقابل، کلماتی که مردم با لب‌های باز و گرد تلفظ می‌کنن، مثل «بوبا»، با اشکال با خطوط منحنی مرتبط هستن. مهم‌تر از اون، اشکال تیز حس سفت و سخت‌تر و شدیدتری دارن، در حالی که اشکال با لبه‌های نرم حس دوستانه‌تر و راحت‌تری دارن. دکمه‌های گوشه تیز می‌تونن یه راه‌حل خوب برای وب‌سایت یه شرکت بیمه باشن، اما ممکنه برای سایتی که پتو، لباس و هدیه برای نوزادان می‌فروشه، خیلی خشن به نظر برسن.

دکمه گرد (Rounded button)

دکمه‌های گرد از شعاع گوشه‌ای بزرگتر از صفر استفاده می‌کنن و به اونا شکل صاف‌تر و ظاهری غیررسمی‌تر می‌دن. شعاع‌های مختلف، شخصیت‌های مختلفی رو منتقل می‌کنن و شکل‌های گردتر بازیگوش‌تر هستن. علاوه بر این، شکل‌های گرد ایمن‌تر به نظر می‌رسن و دوست‌داشتنی‌تر هستن.

طی یه مطالعه که توسط عصب‌شناسان مؤسسه ذهن/مغز Zanvyl Krieger در دانشگاه جانز هاپکینز انجام شد، به بازدیدکنندگان موزه هنر والترز در بالتیمور یه سری تصاویر انتزاعی نشون داده شد. بعد از اون، از اونا خواسته شد که به شکل‌های مورد علاقه‌شون و شکل‌هایی که کمتر از همه دوست داشتن رأی بدن. اکثر بازدیدکنندگان شکل‌هایی با منحنی‌های ملایم رو به شکل‌هایی با نقاط تیز ترجیح دادن. دکمه‌های گرد به شما کمک می‌کنن شخصیت دوستانه برندتون رو معرفی کنین و ایمنی و اعتماد رو تضمین کنین.

دکمه کپسولی (Pill button)

دکمه‌های کپسولی مثل پسرعموهای خوشحال تو خانواده دکمه‌ها هستن — حداکثر گرد شدن، اونا شکل یه قرص فیزیکی رو تقلید می‌کنن. این شکل یه حس بازیگوش و دوستانه رو القا می‌کنه و اون رو به یه انتخاب مناسب برای رابط‌های کاربری راحت‌تر و غیررسمی‌تر تبدیل می‌کنه.

اما ساختن یه دکمه کپسولی عالی چیزی بیشتر از گرد کردن گوشه‌هاست:

• شعاع گوشه خودتون رو نصف ارتفاع دکمه تنظیم کنین تا به اون ظاهر کپسولی خاص برسین.
• برچسب رو نادیده نگیرین؛ به فضا برای نفس کشیدن نیاز داره.
• padding افقی دکمه رو افزایش بدین تا مطمئن بشین که برچسب متن شما به راحتی داخل دکمه قرار می‌گیره و خوانایی و قابلیت لمس رو افزایش می‌ده.

دکمه کشویی (Dropdown button)

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

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

دکمه شناور (Floating action button (FAB))

دکمه‌های شناور (یا FABs) روی محتوا شناور هستن. اونا به کاربرا کمک می‌کنن که یه عمل رو با یه کلیک بدون ترک صفحه اصلی برنامه انجام بدن.

برای اینکه FABها تا حد امکان مفید باشن، اونا رو به محبوب‌ترین و مورد نیازترین عملکرد برنامه خودتون، مانند اضافه کردن یه پست یا تصویر یا نوشتن یه ایمیل، وصل کنین. گفته می‌شه، اونا هرگز نباید برای اقدامات مخرب مانند حذف، خروج از سیستم و غیره استفاده بشن.

دکمه‌ی برند (Branded button)

دکمه‌های برند، دکمه‌هایی با طراحی سفارشی هستن که لوگو، طرح رنگ یا سایر عناصر متمایز یه شرکت رو در خودشون جای می‌دن. اینا معمولاً تو محیط‌های دیجیتال، مانند وب‌سایت‌ها یا برنامه‌ها، دیده می‌شن، جایی که ممکنه نیاز داشته باشین به سایر سرویس‌های برند لینک بدین یا با اونا ادغام بشین. به دکمه‌های «ورود با گوگل» یا «دانلود از اپ استور» فکر کنین.

برای گنجوندن دکمه‌های برند تو طراحی خودتون:

• همیشه با دستورالعمل‌های برند مشورت کنین: این تضمین می‌کنه که از رنگ، لوگو و سایر دارایی‌های صحیح استفاده می‌کنین.
• اونا رو با دقت قرار بدین: معمولاً دکمه‌های برند جایی می‌رن که عمل مرتبط انجام می‌شه، مانند بخش ورود یا پرداخت. وسوسه کننده است که این دکمه‌ها رو برای مطابقت بهتر با طراحی خودتون تغییر بدین، اما در برابر این وسوسه مقاومت کنین. انحراف از ظاهر تثبیت شده می‌تونه کاربرا رو گیج کنه و حتی ممکنه دستورالعمل‌های استفاده تعیین شده توسط برند رو نقض کنه. نقش اصلی یه دکمه برند ایجاد اعتماد و تحریک عمله، بنابراین حفظ ظاهر اصلیشون برای تعامل کاربر حیاتیه.

دکمه سفارشی (Custom button)

دکمه‌های با شکل سفارشی می‌تونن یه حس منحصر به فرد به طراحی شما اضافه کنن در حالی که روی عملکرد تأکید می‌کنن. به عنوان مثال، یه دکمه «بعدی» به شکل فلش — به طور شهودی کاربرا رو به جلو هدایت می‌کنه. با این حال، با احتیاط قدم بردارین.

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