बटन

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

सिद्धांत

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

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

एक जैसा: सभी बटन एक जैसी विज़ुअल भाषा में होने चाहिए, ताकि उन्हें तुरंत पहचाना जा सके.

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

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

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

check_circle

यह करें

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

cancel

ऐसा न करें

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

check_circle

यह करें

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

cancel

ऐसा न करें

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

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

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

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