बटन

बटन, उपयोगकर्ता की कार्रवाइयों के लिए मुख्य विज़ुअल इंडिकेटर होते हैं.

सिद्धांत

ऐक्शन ओरिएंटेड: बटन से साफ़ तौर पर पता चलना चाहिए कि वे किसी ऐक्शन को ट्रिगर करते हैं.

साफ़ तौर पर दिखने वाला फ़ीडबैक: बटन की बनावट, इंटरैक्शन की अलग-अलग स्थितियों (होवर करना, दबाना, फ़ोकस करना) में साफ़ तौर पर बदलनी चाहिए, ताकि तुरंत फ़ीडबैक मिल सके.

एक जैसे: सभी बटन एक जैसे दिखने चाहिए, ताकि उन्हें तुरंत पहचाना जा सके.

लचीला: बटन कॉम्पोनेंट में सामान्य बदलाव किए जा सकते हैं. जैसे, आइकॉन और अलग-अलग साइज़ शामिल करना. हालांकि, ऐसा करते समय बटन की स्टाइल में कोई बदलाव नहीं होना चाहिए.

इस्तेमाल और प्लेसमेंट

बटन को उससे जुड़े कॉन्टेंट के आस-पास रखा जाना चाहिए. इन्हें अकेले या कार्ड और सूचियों जैसे अन्य कॉम्पोनेंट के साथ रखा जा सकता है.

check_circle

यह करें

कम काम की कार्रवाइयों को दिखाने के लिए, प्रोग्रेसिव डिसक्लोज़र का इस्तेमाल करें.

cancel

ऐसा न करें

बहुत सारे बटन दिखाकर, उपयोगकर्ता को परेशान करना. इसके बजाय, बटन ग्रुप का इस्तेमाल करें.

check_circle

यह करें

कार्रवाई करने के लिए, बटन का इस्तेमाल करें. इसके अलावा, किसी स्टैटिक एलिमेंट के लिए टाइटल चिप का इस्तेमाल करें.

cancel

ऐसा न करें

बटन का इस्तेमाल, सजावट के लिए स्थिर एलिमेंट के तौर पर किया जाता है.

आइकॉन बटन

कॉन्टेंट की डेंसिटी कम करने के लिए, आइकॉन बटन उपलब्ध हैं. जब आइकॉन से किसी कार्रवाई के बारे में साफ़ तौर पर पता चलता हो, तब आइकॉन बटन का इस्तेमाल करें. ऐसा न होने पर, बटन का लेबल शामिल करें.

check_circle

यह करें

ज़्यादातर लोगों को पता हो कि आइकॉन बटन का इस्तेमाल किस कार्रवाई के लिए किया जाता है.

cancel

ऐसा न करें

बहुत कम इस्तेमाल की जाने वाली कार्रवाइयों के लिए, आइकॉन बटन का इस्तेमाल करें.

टॉगल किया जा सकता है

बूलियन स्टेट वाली कार्रवाइयों के लिए, जैसे कि पसंदीदा के तौर पर मार्क करना, हर बटन टाइप के लिए टॉगल वैरिएंट उपलब्ध होता है. टॉगल की स्थितियों के बीच आइकॉन बदलने से, इंटरैक्शन को एक नज़र में देखा जा सकता है और यह तेज़ी से काम करता है.

check_circle

यह करें

अगर किसी कार्रवाई के लिए बूलियन विकल्प मौजूद हैं, तो टॉगल बटन का इस्तेमाल करें. जैसे, शुरू/बंद करो.

cancel

ऐसा न करें

बाइनरी कार्रवाइयों के लिए, टॉगल बटन का इस्तेमाल करें.

शरीर-रचना विज्ञान

बटन में एक लेबल और आइकॉन होता है. आइकॉन, लेबल से पहले या बाद में हो सकता है.

आइकॉन बटन में सिर्फ़ एक आइकॉन होता है.

दोनों में टॉगल करने लायक वैरिएंट होता है.

पसंद के मुताबिक बनाएं

बटन में डिफ़ॉल्ट और लार्ज स्टाइल शामिल होती है. बड़े साइज़ से, किसी चीज़ की अहमियत को हाइलाइट किया जा सकता है.

आइकॉन का इस्तेमाल, बटन पर ज़्यादा ज़ोर देने, उसे ज़्यादा साफ़ तौर पर दिखाने, और उसे पहचानने में मदद करने के लिए किया जा सकता है. आइकॉन को बटन के आगे या पीछे रखा जा सकता है.