100DaysUI - 002: सिद्धांत में एक रेटिंग विजेट इंटरैक्शन को कैसे प्रोटोटाइप करना है

श्रव्य वेब के लिए डार्क यूआई की विशेषता ible

डार्क ड्रिबल यूआई

100daysUI

हर रोज मैं दो घंटे के भीतर एक नया इंटरफ़ेस तैयार करूँगा और इसके पीछे के विचार को समझाऊंगा, या आपको सिखाऊंगा कि मैंने इसे डिजाइन करते समय क्या सीखा और जिन मुद्दों का सामना किया था उन्हें सूचीबद्ध करता हूं ताकि कोई व्यक्ति उत्तर साझा कर सके।

दिन 2 - डार्क ऑडिबल वेब प्लेयर और प्रिंसिपल ड्राइवर्स का उपयोग करके विजेट को रेटिंग दें

विचार सरल है, मुझे श्रव्य पसंद है, मेरे रेटिना को प्रकाश यूआई के वर्षों से जलाया जाता है और मुझे ड्रैग प्रभाव के आधार पर उन शांत रेटिंग विजेट में से एक की कोशिश करने में खुजली हो रही है। इसलिए इस डिजाइन

कुछ चीजें कोड के साथ आसान होती हैं

तो यहाँ है कैसे इस विजेट सिद्धांत में बनाने के लिए:

भाग 1 - डिजाइन और तैयारी

1. स्केच या अंजीर में, सभी आवश्यक तत्वों को बनाकर अपने रेटिंग विजेट को डिजाइन करें:

  • 5 इमोजीस (या जो भी आपको पसंद हो) पाँच संभावित रेटिंग्स के लिए (yawn, उम्म, अच्छा, बढ़िया, प्यार में) और उन्हें एक दूसरे के ऊपर रखें।

→ इस इंटरैक्शन में ऑर्डर और लेयर नाम मायने नहीं रखते क्योंकि अन्य सभी इमोजीज़ छिपे होंगे लेकिन प्रत्येक मामले में एक और हम एक आर्टबोर्ड के अंदर काम करेंगे। लेकिन एक संगठित फ़ाइल के साथ काम करना आसान होगा। तुम्हारा कॉल।

  • प्रत्येक राज्य के लिए 5 पाठ विवरण। एक दूसरे के ऊपर भी रखा।
  • रेटिंग बार (बैकग्राउंड कर्व्ड आयत और 5 भरण)। केंद्र से मुख्य तराजू की चौड़ाई तो भरते हुए बाईं ओर कूदते रहेंगे क्योंकि हम संभालते हैं। इसके बजाय केवल पांच बनाएं, यह आसान है।
  • रेटिंग बॉक्स पृष्ठभूमि।

2. सभी इमोजीस और टेक्स्ट डिस्क्रिप्शन की अपारदर्शिता को कम करके प्रारंभिक अवस्था (यॉन) में रखें, सिवाय उस राज्य के।

3. आर्टबोर्ड को सिद्धांत में आयात करें।

4. सिद्धांत रूप में, हैंडल को क्लिक करें जिसे आप रेटिंग बदलने के लिए खींच रहे हैं, और इसे क्षैतिज रूप से ड्रैग करने योग्य बना देंगे।

ऐसा करने के लिए नीचे दिए गए स्क्रीनशॉट को देखें।

भाग 2 - इंटरैक्शन डिज़ाइन

  1. अभी भी चयनित परत के साथ, शीर्ष पर "ड्राइवर" पर क्लिक करें।

हम हैंडल की क्षैतिज स्थिति के आधार पर प्रदर्शित रेटिंग चित्रण और पाठ को बदलने जा रहे हैं।

2. सभी इमोजीज और टेक्स्ट लेयर्स को छोड़कर yawn + सभी रेटिंग बार लाल को छोड़कर भरता है और एक कीफ्रेम बनाएं जहां उन सभी में 0% शुद्धता हो।

2. संभाल को नारंगी भरने की लंबाई में ले जाएं, और एक कुंजी को जोड़ें जहां:

  • YAWN की अपारदर्शिता और इसका पाठ 0% है।
  • UMM राज्य की अस्पष्टता और इसका पाठ 100% है।
  • संतरे के भराव की अपारदर्शिता 100% और लाल एक 0% है।

संकट

यदि आप इसे आज़माते हैं, तो आप देखेंगे कि पहले दो राज्यों की अपारदर्शिता एक ही समय में बदल जाएगी, जब आप इस असमान परिणाम को बनाने वाले हैंडल को स्थानांतरित करेंगे in:

ऐसे बिंदु हैं जहां उपयोगकर्ता के बीच एक अंतर-राज्य होगा

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

3. एक मुख्य फ्रेम से पहले JUST पर, सवाल में इमोजी और टेक्स्ट लेयर्स के लिए पिछले कीफ्रेम के समान अस्पष्टता के साथ एक और कीफ्रेम बनाएं। यह सिद्धांत बताता है कि इस बिंदु तक, केवल भरण परत का रंग और लंबाई बदलें। इमोजी और टेक्स्ट को होल्ड करें।

4. इसके बाद, अगले राज्य के साथ कीफ्रेम बनाएं। ऐशे ही:

5. अगले सभी राज्यों के लिए इसे दोहराएं और आपके पास नीचे दिए गए की तरह एक कार्यशील विजेट होगा :)

मुझे आशा है कि आपको यह ट्यूटोरियल अच्छा लगा होगा!

  1. कोई टिप्पणी? क्या आप जानते हैं कि एक बेहतर तरीका है?

2. मैं अमेज़ॅन डिजाइनरों को पहचानने का कोई मतलब नहीं हूं, मैं यहां सिर्फ दिन में सपने देख रहा हूं उन्हें और उनके अद्भुत प्रयासों के लिए बहुत सम्मान!

3. Emjois Roundicons द्वारा हैं।

4. सिद्धांत के ड्राइवरों के बारे में यहां जानें।

यह सभी देखें

मैं ट्रेडमार्क और कॉपीराइट के तहत पंजीकृत किसी शब्द की जांच कैसे करूं? वेबसाइटें विज्ञापनों के साथ पैसे कैसे कमाती हैं? क्या यह तब होता है जब उपयोगकर्ता विज्ञापन देखते हैं या विज्ञापन पर क्लिक करते हैं?मैं अपने पृष्ठ पर आने वाले आगंतुकों की संख्या कैसे बढ़ा सकता हूं? ऐप कैसे पैसे कमाते हैं? मैं एक सरल, 1 पेज की वेबसाइट कैसे बना सकता है जैसे कि themagicemail.com? 14 साल का व्यक्ति कोड कैसे सीख सकता है? कहाँ पे?मैं एक iOS मोबाइल और iPad ऐप डेवलपर हूं। मैं अब ऐप्स को विकसित करने के लिए Objective-C के साथ काम कर रहा हूं लेकिन Apple ने उन्हीं ऐप्स को विकसित करने के लिए स्विफ्ट को बाजार में जारी किया। कब तक उद्देश्य-सी बाजार में जीवित रहेगा? क्या मुझे एक वैकल्पिक प्रोग्रामिंग भाषा सीखने की आवश्यकता है?मैं कंप्यूटर कोड को व्यावहारिक रूप से कैसे सीखूं?