دکمه

دکمه‌ توپُر (Filled)، توخالی (Outlined)، متنی (Inlined)

یکی از مهم‌ترین کامپوننت‌های تعاملی دکمه‌ها هستند که کاربران برای کُنش انجام‌دادن از آن استفاده می‌کنند. دکمه‌ها میان کاربر، سیستم و مسیر پیشِ ‌روی کاربران واسطه‌اند. واکنش دکمه‌ها در فشرده‌شدن باید واضح و دقیق احساس شود و به‌راحتی با یک لمس یا کلیک عمل کنند. نتیجهٔ عمل دکمه‌ها باید به‌سرعت دیده شود.

دموی تعاملی

کاربرد

دکمه‌ها باید در جایی قرار بگیرند که کاربر به‌راحتی آن‌ها را پیدا کند یا جایی باشند که کاربر انتظار دارد آنجا دکمه ببیند. دکمه‌ها می‌توانند در این‌ مکان‌ها باشند:

• انتهای فرم‌ها
• دیالوگ‌های مُدال
• دیالوگ‌ها
• منوهای کناری و راهبری
• نوار ابزارها

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

اولویت‌های کاربرد

• دکمهٔ با درجهٔ اهمیت بالا (High-emphasis): برای تأکید و نمایش اهمیت کنش اصلی، باید در چیدمان هر صفحهٔ رابط کاربر از دکمه‌ای با درجهٔ اهمیت بالا استفاده شود. این دکمه یکتا است و در صورت همراهی با دکمه‌هایی با درجهٔ اهمیت متوسط یا پایین، باید متمایز و برجسته باشد.
• دکمه‌های با درجهٔ اهمیت متوسط (Medium-emphasis) و درجهٔ اهمیت پایین (Low-emphasis): در هر صفحهٔ رابط کاربر برای کنش‌هایی که نسبت به کنش اصلی اهمیت کمتری دارند، با توجه به درجهٔ تأکید و اهمیت آن کنش، ازین دکمه‌ها استفاده می‌شود. دکمهٔ با درجهٔ اهمیت پایین یا متوسط باید علاوه بر متمایز‌ بودن از دکمهٔ با درجهٔ اهمیت بالا، اولویت سایر کنش‌های صفحه را نیز مشخص کند. مهم است زمانی که دکمه‌هایی با درجهٔ اهمیت متفاوت کنار هم قرار می‌گیرند، هیچ‌کدام با وضعیت غیرفعال دکمهٔ مجاورش اشتباه گرفته نشود.

دکمه با آیکون

آیکون‌ها می‌توانند ابتدا یا انتهای دکمه قرار بگیرند.

• دکمه با آیکون ابتدایی: همهٔ دکمه‌ها می‌توانند آیکون ابتدایی داشته باشند تا کنش مربوط به خودشان را واضح‌تر ابراز کنند. توصیه می‌کنیم در صورت امکان از آیکون‌های SVG و یا از آیکونْ فونتِ طراحی‌شده با قواعد سنّت استفاده کنید.
• دکمه با آیکون انتهایی: هنگامی که کنش دکمه در جهت مشخصی از رابط کاربر اعمال می‌شود، می توان از آیکون‌هایی که این جهت را برای پیش‌آگاهی کاربر نمایش می‌دهند، استفاده کرد. به عنوان مثال دکمه‌هایی که با فشردن آن‌ها منوهای کشویی در جهتی مشخص باز می‌شوند.

دکمه آیکون

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

انواع

دکمهٔ توپُر (Filled)

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

دکمهٔ توخالی (Outlined)

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

دکمهٔ متنی (Inlined)

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

آناتومی

اینجا می‌توانید ابعاد دکمه‌ها، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون را در موقعیت‌های نرمال و آیکون (ابتدایی/انتهایی)، در دو مقیاس متفاوت، ببینید.

رفتار

در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.

نگارش

• از علائم نگارشی در متن دکمه‌ها استفاده نکنید.
• برای متن هر دکمه می‌توانید حداکثر ۴ کلمه بنویسید.