साफ-सुथरे सपाट-डिज़ाइन वाले बटन को स्टाइल करें ताकि वे खर्च दिखाए, और 'अच्छी तरह से डिज़ाइन किए गए' देखें

Question

मैंने हाल ही में एक छोटे सीएसएस ढांचे की शुरुआत की। ( http://mincss.com अगर किसी की दिलचस्पी है) तो मैंने जल्दी से कुछ बटनों के लिए एक प्रारंभिक डिजाइन तैयार किया। UX StackExchange (और बहुत अच्छी प्रतिक्रिया प्राप्त करने) पर प्रतिक्रिया मांगने के बाद, मुझे उन्हें सुधारने के लिए अतिरिक्त सलाह के लिए यहाँ आने की सिफारिश की गई थी।

UXStackExchange की प्रतिक्रिया के बाद वे अभी जैसे दिखते हैं, वैसा ही है। मैंने काली सीमा को हटा दिया, एक 3px "छाया" जोड़ा, और 1px बेवल को हटा दिया:

मैं फ्लैट-डिज़ाइन लुक के लिए जा रहा हूं।

मेरे 3 शेष प्रश्न हैं:

• क्या ये बटन पर्याप्त खर्च दिखाते हैं? (यह फ्लैट डिजाइन के साथ एक समस्या लगती है)
• क्या आप एक छोटी ढाल जोड़ने का सुझाव देंगे?
• क्या वे अच्छी तरह से डिज़ाइन किए गए दिखते हैं? (व्यक्तिपरक मैं जानता हूं, लेकिन मैं यह पूछने का बेहतर तरीका नहीं सोच सकता)

मैं इन बटनों पर किसी भी प्रतिक्रिया का सहर्ष स्वागत (और शायद उपयोग करूँगा) करूँगा।

Comments

यदि आप छाया को रखना चाहते हैं, तो इसे एक वास्तविक अल्फा छाया बनाने पर विचार करें। अल्फा नहीं तो RGBA (0,0,0, .2) जैसा कुछ।

— DA01

Answer 1

मुझे लगता है कि एक बहुत ही सूक्ष्म ढाल निश्चित रूप से बटन के सौंदर्यशास्त्र में सुधार करेगा। चूंकि विंडोज 8 "मेट्रो" शैली इस शैली का एक बड़ा प्रस्तावक है, इसलिए मैं इसका उपयोग एक उदाहरण के रूप में करूंगा:

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

Comments

यहाँ पहले है: i.imgur.com/LVVVWd8.png और इसके बाद: i.imgur.com/jDb07Y2.png आपको क्या लगता है? (यह पृष्ठभूमि है: -webkit-gradient (रैखिक, बाएं केंद्र, दाएँ केंद्र, (rgb (44, 175, 73)) से, (rgb (53, 206, 86)))

— Owen Versteeg

Answer 2

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

यह आवश्यक रूप से कुछ ऐसा नहीं है जो केवल बटन पर निर्भर करता है, बल्कि आपके UI के बाकी तत्वों पर भी निर्भर करता है। यदि आप फ्लैट बटन का उपयोग कर रहे हैं, तो मेरा सुझाव है कि आप हर जगह समान आकार / शैलियों से बचें। आपको एक दृश्य शब्दावली बनाए रखने की आवश्यकता है ताकि लोग इन तत्वों को तुरंत बटन के रूप में पहचान सकें और कुछ और नहीं।

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

मैं ग्रेडिएंट्स के साथ बहुत सावधान रहूंगा । इसलिए नहीं कि वे खराब हैं, बल्कि इसलिए कि मौजूदा सुपर सरल फ्लैट प्रवृत्ति में, वे अच्छी तरह से फिट नहीं होते हैं। खासकर यदि आपके द्वारा उपयोग किए जाने वाले रंग या शेड बहुत अलग हैं। एक छोटा ढाल वास्तव में अच्छा लग सकता है, लेकिन इसे छोटे, मुश्किल से ध्यान देने योग्य होना चाहिए।

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

Comments

मैंने आपके रंग छाया का विचार लिया: i.imgur.com/525NqBJ.png मैं मानता हूं कि किसी भी ढाल को छोटा होना चाहिए; मुझे नहीं लगता कि मैं एक जोड़ूंगा। बटनों पर गोल कोनों से आप क्या समझते हैं? आपको कैसे लगता है कि मुझे सूचनाएं बदलनी चाहिए? धन्यवाद!

— ओवेन वर्स्टीग

@OwenVersteeg अच्छी लग रही है! मुझे वे पसंद हैं। गोल कोनों भी आम तौर पर अच्छे लगते हैं, आपको उन्हें अन्य तत्वों के साथ जोड़ने पर विचार करने की आवश्यकता हो सकती है (इनपुट्स, शायद?)। सूचनाओं के बारे में, एक ही रंग की एक गहरा छाया के साथ 1px सीमा के बारे में कैसे? कुछ इस

— यिसेला

Answer 3

जबकि मैं ऐसे न्यूनतम बटन बनाने का सम्मान कर सकता हूं, जिन पर आपको वास्तव में विचार करने की आवश्यकता है कि क्या / कैसे उन्हें विभिन्न वेबसाइटों पर वेब पर लागू किया जा सकता है, जैसा कि आप एक रूपरेखा बना रहे हैं। यदि आप बटन प्रदान कर रहे हैं, तो आपको यह सुनिश्चित करने की आवश्यकता है कि कोई अन्य चीज़ जैसे टेबल, फॉर्म इत्यादि का उपयोग कर सकता है (जो मुझे यकीन है कि आप अभी भी काम कर रहे हैं)।

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

अब जहां तक ​​ये वास्तविक बटन हैं, मैं एक सीमा के साथ खेलूंगा, क्योंकि यह घटक को घेरने में मदद करता है और बहुत सारे बटन के लिए एक सीमा बहुत आम है। मैंने वेबसाइट देखी और मुझे होवर / क्लिक स्टेट्स पसंद हैं और मुझे लगता है कि आपने उन लोगों के साथ अच्छा किया।

यदि आप ग्रेडिएंट्स को पेश करना चाहते हैं, तो सुसंगत रहें और सुनिश्चित करें कि आप उन्हें अन्य तत्वों पर भी उपयोग करते हैं, अन्यथा आपके पास प्रतिस्पर्धा की गहराई होगी, जो बस विचलित करने वाली होगी।

Comments

मैंने बूटस्ट्रैप (कठिन नहीं की तरह) देखा है और मैंने इससे पहले कुछ साइटें बनाई हैं। बूटस्ट्रैप के साथ मेरी समस्या यह है कि यह एक विनम्र ढाँचा है - कई टन किलोबाइट - और यह इन दिनों बहुत आम है। मैंने प्रपत्र (पृष्ठ पर नीचे) और साथ ही तालिकाएँ बनाई हैं। जब मैंने UX StackExchange पर पूछा तो ज्यादातर लोगों ने कहा कि सीमा को खोदो, दिलचस्प रूप से - जो मैंने किया। मुझे नहीं लगता कि मैं ग्रेडिएंट का परिचय दूंगा। आप इन सीमाओं को कैसे पसंद करते हैं? i.imgur.com/OlOy5pN.png

— ओवेन

Answer 4

बटन अच्छे दिखते हैं, हालांकि सामान्य सपाट शैली में जिस तरह के बटन दिखाई देते हैं और महसूस करते हैं वह एक बार ऐसा होता है, जहां छाया वाला भाग रखा जाता है, मुख्य तत्व (बटन) के नीचे एक छोटी सी पट्टी होती है और यह ज्यादातर गहरे रंग की होती है बटन का रंग।