नमस्कार प्रिय हब्रदुग! आज एक बटन बनाने के एक हजार से अधिक तरीके हैं; उनके सार को समझने के लिए, आपको केवल साइट dribbble.com पर काम को देखने के लिए थोड़ा समय बिताने की आवश्यकता है। इनमें से अधिकांश उदाहरण एक-दूसरे से बहुत मिलते-जुलते हैं, लेकिन समय-समय पर ऐसे बटन भी बनते हैं, जिनमें से सृजन पर अधिक ध्यान, समय और प्रयास खर्च होता है।

अद्भुत CSS3 विकल्पों का उपयोग करके, हम बहुत प्रयास किए बिना (पुराने ब्राउज़रों को ध्यान में रखते हुए) सुरुचिपूर्ण और स्टाइलिश बटन बना सकते हैं। चाहे आप सीएसएस में सीधे एक बटन बनाते हैं या इसे बनाने के लिए विशेष उपकरणों का उपयोग करते हैं, आपको हमेशा ध्यान से सोचना चाहिए कि वेबसाइट के संदर्भ में आपका बटन कैसा दिखेगा।

आप हमेशा बटन के एक तैयार-निर्मित सेट को डाउनलोड कर सकते हैं जो कुछ बहुत ही दयालु व्यक्ति ने नेटवर्क पर पोस्ट किया है। लेकिन क्यों नहीं बैठते हैं और इस तथ्य के बारे में सोचते हैं कि आप अपने खुद के कुछ और अधिक मूल बना सकते हैं। मैं आपके सामने 10 सरल बिंदु प्रस्तुत करता हूं जिन्हें मैं हमेशा एक बटन बनाते समय ध्यान में रखता हूं। फ़ोटोशॉप में किस लेयर स्टाइल का उपयोग करना है, इसके बारे में मैं विचार साझा नहीं करने जा रहा हूं, लेकिन मैं आपको उन मूल सिद्धांतों के बारे में बताऊंगा जो आपकी परियोजनाओं में आपकी मदद करेंगे।

1. ब्रांड अनुपालन

यह महत्वपूर्ण है कि आपके बटन आपके संदर्भ में फिट हों। यह रंग और ग्राफिक शैली दोनों की एक स्मार्ट पसंद, साथ ही साथ बटन बनाते समय लोगो डिजाइन का उपयोग कर सकता है। आपके लोगो में एक आकृति हो सकती है जिसे आप प्रभावी ढंग से उपयोग कर सकते हैं।

आकार, रंग, बनावट, पैटर्न और फ़ॉन्ट रचनात्मकता के लिए एक बड़ा क्षेत्र प्रदान करते हैं।

यदि इंटरफ़ेस मुख्य रूप से सपाट रंगों का उपयोग करता है, तो बड़े चमकदार बटन एक ला Apple सबसे अच्छा विकल्प नहीं है। यदि संभव हो, तो इंटरफ़ेस बनाते समय लोगो डिज़ाइन का उपयोग करें, उचित आकार, रंग और सजावट के अन्य रूपों का उपयोग करें।

2. सामग्री अनुपालन

याद रखें कि आपको केवल लोगो पर ही नहीं, बल्कि संपूर्ण इंटरफेस पर भी निर्माण करना होगा। ऐसा होता है कि बटन बटन हो सकते हैं, उदाहरण के लिए, केवल स्मार्टफोन या वेब एप्लिकेशन पर, लेकिन शायद वेबसाइट पर वे एक प्रतिस्थापन के साथ आ सकते हैं।

3. क्या इसके विपरीत पर्याप्त है?

ऐप्पल की शैली से प्रेरित इंटरफ़ेस की इतनी बड़ी संख्या के साथ, बटन यूआई तत्वों के बाकी हिस्सों के बीच खो सकते हैं, अपना उद्देश्य खो देते हैं। रंगों, आकारों, पैडिंग और फोंट के साथ प्रयोग करने का प्रयास करें ताकि बटन इंटरफ़ेस में बाहर खड़े रहें।

महत्वपूर्ण बटन कंट्रास्ट की जरूरत है।

4. गोल या आकार के बटन?

यदि इंटरफ़ेस में गोल कोनों के साथ बहुत सारे बटन हैं, तो शायद आपको उनका आकार बदलना चाहिए, उन्हें बनाना चाहिए, उदाहरण के लिए, गोल। यह कंट्रास्ट देगा, जो उपयोगकर्ताओं का ध्यान आकर्षित करेगा और उन्हें एक बटन दबाने के लिए बुलाएगा।

5. हम मामूली तत्वों को छिपाते हैं

आपको हमेशा याद रखना चाहिए कि माध्यमिक तत्वों को पूरे इंटरफ़ेस से बाहर नहीं खड़ा होना चाहिए। उदाहरण के लिए, मेनू आइटम, नियंत्रक या विभिन्न स्लाइडर्स एक ही कोण (एक ही त्रिज्या के) के साथ हो सकते हैं, लेकिन विभिन्न छाया, सीमाओं, ग्रेडिएंट्स आदि के साथ।

6. स्ट्रोक और सीमा

ज्यादातर बटन में बॉर्डर या स्ट्रोक जैसा कुछ होता है। यदि बटन पृष्ठभूमि की तुलना में गहरा है, तो स्ट्रोक का रंग बटन के रंग से अधिक गहरा होना चाहिए। यदि इसके विपरीत, अर्थात्। पृष्ठभूमि अंधेरा है, तो स्ट्रोक पृष्ठभूमि की तुलना में गहरा होना चाहिए। मेरी राय में, यह नियम सबसे महत्वपूर्ण है जब यह सीमाओं और स्ट्रोक की बात आती है।

7. धुंधली छाया से सावधान रहें।

लंबे समय तक मैं छायावाद के कानून द्वारा निर्देशित हूं। यह कानून कहता है कि कोई भी छाया सबसे प्रभावी रूप से तब काम करती है जब कोई तत्व उसकी पृष्ठभूमि से हल्का होता है। यदि तत्व अपनी पृष्ठभूमि की तुलना में गहरा है, तो छाया का सावधानीपूर्वक उपयोग किया जाना चाहिए।

8. आपकी मदद करने के लिए प्रतीक

छोटे आइकन (उदाहरण के लिए, तीर) का उपयोग उपयोगकर्ता को यह अनुमान लगाने में मदद करेगा कि बटन पर क्लिक करने के बाद क्या होगा।
उदाहरण के लिए, दायां तीर का अर्थ यह हो सकता है कि उपयोगकर्ता आगे बढ़ेगा या पृष्ठ को पूरी तरह से छोड़ देगा। नीचे तीर - एक पॉप-अप मेनू दिखाई देगा।

9. प्राथमिक, द्वितीयक और तृतीयक तत्वों को याद रखें

यदि आप कई अलग-अलग कार्यों के साथ एक इंटरफ़ेस बना रहे हैं, तो प्राथमिक, द्वितीयक और तृतीयक शैलियों को परिभाषित करते हुए, एक निश्चित दृश्य भाषा स्थापित करना महत्वपूर्ण है।
प्राथमिक बटन के पीछे सबसे मजबूत रंगों को संरक्षित करें, और कमजोर लोगों का उपयोग करें क्योंकि बटन कम महत्वपूर्ण हो जाते हैं। इसके अलावा, बटन के दृश्य वजन को कम करने के लिए बटन का आकार, खाली स्थान, पाठ का आकार और उभरा स्तर को कम करने के बारे में मत भूलना।

बटन शैलियों की एक किस्म आपके हाथों में खेल सकती है

10. बटन की स्थिति को इंगित करें

कुछ के लिए, यह स्पष्ट प्रतीत होगा, लेकिन बटन की वर्तमान स्थिति को हमेशा इंगित करना उचित है। उपयोगकर्ता इस बात का अंदाज़ा लगाना पसंद करेगा कि वर्तमान में बटन किस स्तर पर है। इसे सीएसएस विकल्पों जैसे कि छाया, सीमा और ग्रेडिएंट के साथ पूरा किया जा सकता है।

निष्कर्ष

तैयार यूआई तत्वों का उपयोग करने में कुछ भी गलत नहीं है, क्योंकि यह स्पष्ट है कि यह बहुत समय बचाता है। यह भी संभव है कि आप एकदम सही आइटम खोजें जो आपको 100% (और बिल्कुल मुफ्त) पर सूट करे। फिर भी, मेरा मानना है कि यह बटन बनाने के बुनियादी नियमों को याद रखने के लायक है जो एक सफल और प्रभावी इंटरफ़ेस की कुंजी बन जाएगा।

पुनश्च
खुशी के साथ मैं स्थानांतरण पर एक व्यक्तिगत टिप्पणी स्वीकार करूंगा। धन्यवाद!

UPD बटन में प्रयुक्त फ़ॉन्ट को DIN 1451 कहा जाता है

एक सफल बटन के सुनहरे नियम