لوگوی توپُر دیزاین سیستم سنّت

دکمه

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

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

دموی تعاملی

پیش‌نمایش کامپوننت که انواع آن‌ها و تفاوت‌های نمایشی و تعاملی هر کدام را نشان می‌دهد.

متن دکمه
گزینه‌ها
استایل‌ها
وضعیت‌ها

کاربرد

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

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

درجهٔ اهمیت دکمه در رابط کاربر، انتخاب نوع و شکل ظاهری آن را مشخص می‌کند.

دکمه با آیکون

دکمه آیکون

انواع

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

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

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

آناتومی

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

رفتار

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

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

درست

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

نادرست

لیبل دکمه‌ها نباید به‌قدری طولانی باشد که به دوخط یا بیشتر شکسته شود.

نادرست

با توجه به فضای موجود در چیدمان صفحه، زمانی که می‌توان دو دکمه را کنار هم قرار داد از قرار دادن آن‌ها روی هم پرهیز کنید.

نادرست

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

درست

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

درست

در دکمه‌ها برای متمایز‌کردن و اولویت‌بندی کنش‌هایی با درجهٔ اهمیت متفاوت از الگویی مناسب استفاده کنید. الگوی مناسب ترکیبی از یک دکمهٔ توپُر در کنار یک دکمهٔ توخالی یا متنی است.

نادرست

از دو دکمهٔ توپُر با رنگ زمینهٔ یکسان در کنار هم استفاده نکنید.

نگارش

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