دکمهها شاخص بصری اصلی برای اقدامات کاربر هستند.
اصول
عملگرا : دکمهها باید به وضوح نشان دهند که عملی را انجام میدهند.
بازخورد واضح : ظاهر دکمه باید در حالتهای مختلف تعامل (هاور، فشار دادن، فوکوس) به طور واضح تغییر کند تا بازخورد فوری ارائه دهد.
سازگار : همه دکمهها باید یک زبان بصری اصلی را به اشتراک بگذارند تا فوراً قابل تشخیص باشند.
انعطافپذیر : کامپوننت دکمه باید بتواند تغییرات رایج، مانند آیکونها و اندازههای مختلف را بدون از دست دادن ثبات، در خود جای دهد.
کاربرد و قرارگیری
یک دکمه باید نزدیک به محتوای مرتبط خود قرار گیرد. آنها میتوانند به تنهایی یا با سایر اجزا، مانند کارتها و لیستها، قرار گیرند.
انجام دهید
نکن
انجام دهید
نکن
دکمههای آیکون
دکمههای آیکون برای کاهش تراکم محتوا در دسترس هستند. زمانی از دکمههای آیکون استفاده کنید که آیکون به وضوح عملی را نشان میدهد، در غیر این صورت یک برچسب دکمه قرار دهید.
انجام دهید
نکن
قابل تغییر
برای اکشنهایی با حالتهای بولی، مانند مورد علاقه، برای هر نوع دکمه، یک نوع دکمهی تغییر وضعیت (toggle) در دسترس است. جابجایی آیکونها بین حالتهای تغییر وضعیت، تعامل را قابل مشاهده و واکنشگرا میکند.
انجام دهید
نکن
آناتومی
دکمهها از یک برچسب و یک آیکون اختیاری در ابتدا یا انتهای صفحه تشکیل شدهاند.
دکمههای آیکونی فقط از یک آیکون قابل تشخیص تشکیل شدهاند.
هر دو یک نوع قابل تغییر دارند.
پیشفرض
۱. استراحت
۲. متمرکز
۳. فشرده شده
۴. معلول
۵. معلول و متمرکز
بزرگ
۱. استراحت
۲. متمرکز
۳. فشرده شده
۴. معلول
۵. معلول و متمرکز
آیکون
۱. استراحت
۲. متمرکز
۳. فشرده شده
۴. معلول
۵. معلول و متمرکز
آیکون
۱. استراحت
۲. متمرکز
۳. فشرده شده
۴. معلول
۵. معلول و متمرکز
سفارشیسازی
دکمهها دارای استایل پیشفرض و بزرگ هستند. اندازه بزرگ میتواند به تأکید بر اهمیت کمک کند.
میتوان از آیکونها برای تأکید، وضوح و تشخیص بیشتر دکمه در موقعیت انتهایی یا ابتدایی استفاده کرد.
پیشفرض
| خواص | سفارشیسازی | پیشفرضها |
|---|---|---|
| شکل | بله | بزرگ، دایره |
| بالشتک | بله | ۱۶ نقطه در اینچ، ۸ نقطه در اینچ |
| مرز | بله | پیشفرض، ۲ dp، #۶۰۶۴۶۰ |
| متن | بله | بدن کوچک |
| نماد پیشرو | بله | ۳۲ دیپی |
| آیکون دنبالهدار | بله | ۳۲ دیپی |
| اندازه | بله | حداقل ارتفاع ۴۸ dp |
| عمق | بله | 0 |
| گپ | بله | بین برچسب و آیکون: خیلی کوچک |
بزرگ
| خواص | سفارشیسازی | پیشفرضها |
|---|---|---|
| شکل | بله | بزرگ، دایره |
| بالشتک | بله | ۱۶ نقطه در اینچ، ۱۶ نقطه در اینچ |
| مرز | بله | ۲ دیپی، #۶۰۶۴۶۰ |
| متن | بله | بدن کوچک |
| نماد پیشرو | بله | ۳۲ دیپی |
| آیکون دنبالهدار | بله | ۳۲ دیپی |
| اندازه | بله | حداقل ارتفاع ۷۲ نقطه در اینچ مربع |
| عمق | بله | 0 |
| گپ | بله | بین برچسب و آیکون: خیلی کوچک |
آیکون
| خواص | سفارشیسازی | پیشفرضها |
|---|---|---|
| شکل | بله | بزرگ، دایره |
| بالشتک | بله | کوچک، کوچک |
| مرز | بله | پیشفرض |
| آیکون | بله | پیشفرض = 32 dp، روی سطح |
| اندازه | بله | حداقل ارتفاع ۴۸ dp |
| عمق | بله | 0 |
قابل تغییر
| خواص | سفارشیسازی | پیشفرضها |
|---|---|---|
| انتخاب شده | بله | بولی |
| گوشههای پیشفرض | بله | ۱۶ نقطه در اینچ، ۸ نقطه در اینچ |
| گوشههای انتخابشده | بله | فوکوس پیشفرض |
| رنگ سطح انتخاب شده | بله | طرح کلی |
| تمام املاک دیگر | بله | همانند دکمهها |
آیکون قابل تغییر
| خواص | سفارشیسازی | پیشفرضها |
|---|---|---|
| انتخاب شده | بله | بولی |
| گوشههای پیشفرض | بله | ۱۰۰ نقطه در اینچ |
| گوشههای انتخابشده | بله | 20 نقطه در اینچ |
| رنگ سطح انتخاب شده | بله | طرح کلی |
| تمام املاک دیگر | بله | همانند دکمهها |