आर्टिफिशियल इंटेलिजेंस के साथ इंटरफ़ेस डिज़ाइन और यूआई कोड जनरेशन

लाभ:

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

किसी मोबाइल ऐप की सफलता काफी हद तक उसके यूजर इंटरफेस (यूआई - वह स्क्रीन जो उपयोगकर्ता देखता है और छूता है) और उपयोगकर्ता अनुभव (यूएक्स - इसका उपयोग करने में कितना सहज और आनंददायक है) द्वारा निर्धारित होती है। उपयोगकर्ता को ख़राब कोड नहीं दिखता, लेकिन पहले सेकंड में ख़राब इंटरफ़ेस महसूस होता है। इंटरफ़ेस विकास में AI दो शक्तिशाली भूमिकाएँ निभाता है: एक ओर, यह डिज़ाइन विचार, प्रवाह और पाठ (UX लेखन) उत्पन्न करता है; दूसरी ओर, यह सीधे इस डिज़ाइन को वर्किंग इंटरफ़ेस कोड में परिवर्तित करता है। इस इकाई में, हम सीखेंगे कि आधुनिक घोषणात्मक इंटरफ़ेस टूल जेटपैक कंपोज़ (एंड्रॉइड) और स्विफ्टयूआई (आईओएस) पर ध्यान केंद्रित करते हुए एआई के साथ तेज़, सुलभ और सुसंगत इंटरफेस कैसे तैयार किया जाए। "घोषणात्मक" का अर्थ है कि चरण दर चरण यह समझाने के बजाय कि स्क्रीन कैसे खींचनी है, आप वर्णन करते हैं कि "इस स्थिति में स्क्रीन इस तरह दिखनी चाहिए"; उपकरण बाकी काम करता है.

डिज़ाइन से कोड तक: सही क्रम

एआई को "सुंदर स्क्रीन बनाने" के लिए कहना अस्पष्ट है क्योंकि "सुंदर" को मापा नहीं जा सकता। अच्छा इंटरफ़ेस जनरेशन इस क्रम का पालन करता है:

1. उद्देश्य और सामग्री. स्क्रीन क्या करती है, यह क्या जानकारी दिखाती है, उपयोगकर्ता क्या करेगा?
2. घटक सूची. शीर्षक, सूची, बटन, फॉर्म फ़ील्ड जैसे भाग।
3. परिस्थितियाँ। लोड हो रहा है, खाली (कोई डेटा नहीं), त्रुटि, पूर्ण - चार बुनियादी स्क्रीन स्थितियाँ।
4. डिज़ाइन प्रणाली. रंग, टाइपोग्राफी, रिक्ति नियम; आम तौर पर सामग्री 3 (एंड्रॉइड) या आईओएस के मानव इंटरफ़ेस दिशानिर्देशों का अनुपालन।
5. अभिगम्यता. स्क्रीन रीडर लेबल, पर्याप्त कंट्रास्ट, स्पर्श लक्ष्य आकार।
6. कोड. यह सब कहने के बाद, कंपोज़ेबल या स्विफ्टयूआई व्यू पीढ़ी।

सबसे अधिक बार छोड़ा गया चरण तीसरा है। डेवलपर्स केवल "पूर्ण" स्थिति पर विचार करते हैं; जबकि वास्तविक एप्लिकेशन में उपयोगकर्ता को अधिकतर "लोडिंग" और "त्रुटि" स्थितियों का सामना करना पड़ता है। सभी चार स्थितियों को एआई पर प्रिंट करना एक मजबूत इंटरफ़ेस का रहस्य है।

टिप: प्रॉम्प्ट के अंत में "जेनरेट लोडिंग, एम्प्टी, एरर और फुल अलग-अलग" जोड़ें। यह एकल वाक्य आपके इंटरफ़ेस को वास्तविक दुनिया के लिए तैयार करता है और QA (गुणवत्ता परीक्षण) चरण में त्रुटियों की संख्या को काफी कम कर देता है।

अभिगम्यता पर समझौता नहीं किया जा सकता

अभिगम्यता - दृश्य, श्रवण या मोटर विकलांगता वाले उपयोगकर्ताओं द्वारा एप्लिकेशन का उपयोग करने की क्षमता - एक नैतिक जिम्मेदारी और स्टोर और कानूनी अपेक्षा दोनों है। यदि वांछित हो तो एआई सुलभ कोड तैयार करता है; यदि वांछित नहीं है तो टैग रहित, कम-कंट्रास्ट इंटरफ़ेस लौटाता है। तीन सामान्य नियम: प्रत्येक इंटरैक्टिव तत्व को स्क्रीन रीडर के लिए एक सार्थक लेबल दें (कंटेंट डिस्क्रिप्शन/एक्सेसिबिलिटी लेबल), टेक्स्ट और बैकग्राउंड के बीच पर्याप्त रंग कंट्रास्ट (कम से कम 4.5:1 अनुपात), और कम से कम 48x48 डीपी/44x44 पीटी का स्पर्श लक्ष्य दें। एआई से ये बातें स्पष्ट रूप से पूछें।

सावधानी: एआई सजावटी आइकन में एक लंबा एक्सेसिबिलिटी टैग भी जोड़ सकता है; यह स्क्रीन रीडर उपयोगकर्ता को अनावश्यक बकबक से अभिभूत कर देता है। विशुद्ध रूप से सजावटी तत्वों को "पहुँच से छिपाया जाना चाहिए" (स्क्रीन रीडर द्वारा छोड़े जाने की अनुमति)। उत्पादित लेबलों की समीक्षा करें: सार्थक को बोलने दें, सजावटी को चुप रहने दें।

संगति: डिज़ाइन प्रणाली और थीम

व्यावसायिक अनुप्रयोग यादृच्छिक रंगों और रिक्ति का उपयोग नहीं करते हैं; एक डिज़ाइन प्रणाली (रंगों, फ़ॉन्ट, रिक्ति और घटकों का मानक सेट) का अनुसरण करता है। यदि आप एआई को अपना थीम मान (मुख्य रंग, द्वितीयक रंग, कोने का त्रिज्या, टाइपोग्राफी स्केल) देते हैं, तो सभी स्क्रीन एक समान आएंगी। यदि आप ऐसा नहीं करते हैं, तो प्रत्येक स्क्रीन नीले रंग की एक अलग छाया का उपयोग करेगी और ऐप अव्यवस्थित दिखाई देगा। सबसे कारगर तरीका यह है कि पहले एआई से एक थीम/डिज़ाइन टोकन फ़ाइल तैयार करने के लिए कहें, फिर सभी स्क्रीन को उस थीम से बांध दें।

विषय

ख़राब दृष्टिकोण

मजबूत दृष्टिकोण

रंग

प्रत्येक स्क्रीन को मैन्युअल रूप से रंग कोड दें

केंद्रीय थीम, स्क्रीन थीम से पढ़ी जाती है

स्थितियाँ

केवल "पूर्ण" स्क्रीन

लोड हो रहा है/खाली/त्रुटि/पूर्ण चार अवस्थाएँ

अभिगम्यता

बाद में जोड़ा गया

इसे दावे में शुरू से ही परिभाषित किया गया है

पाठ

कोड में एम्बेडेड

अलग स्रोत, बहुभाषी तैयार

तीन मिनी मामले

केस 1 - खाली केस सहेजा गया। एक समाचार ऐप टीम के पास एआई प्रिंट व्यक्तिगत स्क्रीन स्थिति थी। "निष्क्रिय स्थिति" स्क्रीन ("अभी तक कोई समाचार सहेजा नहीं गया") के लिए धन्यवाद, उपयोगकर्ता परीक्षण में 70% प्रतिभागियों ने ऐप को खाली स्क्रीन पर नहीं छोड़ा; पिछले संस्करण में, रिक्त स्क्रीन सफ़ेद बनी रही और उपयोगकर्ताओं ने सोचा कि यह "टूटी हुई" है और चले गए। एक छोटी प्रति ने अवधारण दर बढ़ा दी।

केस 2 - कंट्रास्ट अस्वीकृति। एक टीम ने ब्रांड रंग हल्के भूरे रंग में टेक्स्ट वाली स्क्रीन के साथ ऐप स्टोर पर आवेदन किया। Apple ने कम कंट्रास्ट के कारण एक्सेसिबिलिटी के आधार पर चेतावनी जारी की। जब AI को "टेक्स्ट-बैकग्राउंड कंट्रास्ट को 4.5:1 से ऊपर बढ़ाने" के लिए कहा गया, तो रंग गहरे हो गए और समस्या हल हो गई। यदि शुरू से ही अनुरोध किया गया होता तो इतनी देरी नहीं होती.

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

कमजोर संकेत/मजबूत संकेत

कमज़ोर संकेत: "प्रोफ़ाइल स्क्रीन डिज़ाइन करें।"

शक्तिशाली संकेत: "आईओएस/स्विफ्टयूआई के लिए उपयोगकर्ता प्रोफ़ाइल स्क्रीन जेनरेट करें। सामग्री: अवतार, नाम, ईमेल, 'प्रोफ़ाइल संपादित करें' बटन, सेटिंग्स सूची। स्थिति: लोडिंग (कंकाल), त्रुटि (पुनः प्रयास बटन), पूर्ण। डिज़ाइन: गैर-सामग्री, आईओएस एचआईजी के अनुरूप; सिस्टम रंग, गतिशील प्रकार। पहुंच: प्रत्येक तत्व तक पहुंच लेबल, सजावटी आइकन छिपे हुए, लक्ष्य न्यूनतम 44pt स्पर्श करें। एक अलग फ़ाइल से थीम मान पढ़ें, स्क्रीन पर रंग कोड एम्बेड न करें। पहले घटक वृक्ष बनाएं, फिर कोड निर्यात करें।"

कॉपी करने योग्य टेम्पलेट

स्क्रीन जेनरेशन टेम्प्लेट: "[प्लेटफ़ॉर्म/टूल] के लिए [स्क्रीन नाम] जेनरेट करें। सामग्री: [तत्व]। उपयोगकर्ता क्रियाएँ: [क्रियाएँ]। अलग-अलग चार स्थितियाँ उत्पन्न करें: लोड हो रहा है, खाली, त्रुटि, पूर्ण। डिज़ाइन प्रणाली: [सामग्री 3 / आईओएस एचआईजी], थीम टोकन से पढ़ें। पहुंच क्षमता: लेबल, कंट्रास्ट >=4.5:1, स्पर्श लक्ष्य मानक।"

थीम/डिज़ाइन सिस्टम टेम्पलेट:"मेरे ऐप के लिए एक केंद्रीय थीम परिभाषा तैयार करें ([थीम लिखें/स्विफ्टयूआई में एक डिज़ाइन टोकन संरचना]): - प्राथमिक रंग [हेक्स], द्वितीयक [हेक्स], त्रुटि रंग, सतह का रंग - टाइपोग्राफी स्केल (शीर्षक, मुख्य भाग, विवरण) - स्पेसिंग स्केल (4,8,16,24) - कॉर्नर त्रिज्या मानक प्रकाश और गहरे थीम समर्थन जोड़ें।"

एक्सेसिबिलिटी ऑडिट टेम्प्लेट:"एक्सेसिबिलिटी के लिए इस स्क्रीन कोड की जांच करें:1) क्या कोई अचिह्नित इंटरैक्टिव तत्व हैं?2) क्या कंट्रास्ट अनुपात पर्याप्त हैं?3) क्या स्पर्श लक्ष्य पर्याप्त बड़े हैं?4) क्या सजावटी तत्व स्क्रीन रीडर से छिपे हुए हैं? प्रत्येक मुद्दे के लिए समाधान सुझाएं। [कोड]"

डिज़ाइन टू कोड टेम्प्लेट: "मैं निम्नलिखित डिज़ाइन का वर्णन करता हूं: [स्क्रीन विवरण या स्क्रीनशॉट]। इसे [कम्पोज़/स्विफ्टयूआई] कोड में अनुवाद करें। डिज़ाइन के अनुसार रिक्ति और संरेखण सही रखें, लेकिन सभी चार स्थितियां जोड़ें।"

सामान्य गलतियाँ

• अभी पूरी स्थिति के बारे में सोच रहा हूं. अधिकांश समय वास्तविक उपयोगकर्ता लोडिंग/त्रुटि स्क्रीन देखता है।
• कोड में रंग और स्थान एम्बेड करना। यदि विषय केंद्रीय नहीं है, तो निरंतरता खो जाती है और रखरखाव मुश्किल हो जाता है।
• अंत में पहुंच को छोड़ रहा हूँ। इसे बाद में जोड़ना महंगा है; यदि प्रारंभ से अनुरोध किया जाए तो यह निःशुल्क है।
• ओवरलेबलिंग। सजावटी तत्वों को पढ़ने से स्क्रीन रीडर अनुभव भी बाधित होता है।
• कोड में टेक्स्ट एम्बेड करना. जब बहुभाषी समर्थन की आवश्यकता होती है, तो प्रत्येक स्क्रीन को मैन्युअल रूप से बदलना आवश्यक होता है; पाठों को अलग रखें.
• स्क्रीनशॉट से सटीक प्रतिलिपि की अपेक्षा है. एआई डिज़ाइन लगभग उत्पादन करता है। पिक्सेल परिशुद्धता मैन्युअल रूप से सेट की जाती है।

सारांश

इंटरफ़ेस उत्पादन में AI शक्तिशाली है, लेकिन इसके लिए मार्गदर्शन की आवश्यकता होती है। सही क्रम: उद्देश्य, घटक, चार अवस्थाएँ (लोडिंग/खाली/त्रुटि/पूर्ण), डिज़ाइन प्रणाली, पहुँच क्षमता, फिर कोड। अभिगम्यता पर समझौता नहीं किया जा सकता है और इसका अर्थ है "सही लेबल", न कि "बहुत अधिक लेबल"। एकरूपता के लिए, केंद्रीय थीम से रंग और रिक्ति पढ़ें, इसे कोड में एम्बेड न करें। दृढ़ इच्छाशक्ति शुरू से ही यह सब परिभाषित करती है; इस प्रकार, इंटरफ़ेस वास्तविक दुनिया, स्टोर अनुमोदन और सभी उपयोगकर्ताओं के लिए तैयार है।

आवेदन कार्य

सेटिंग स्क्रीन के लिए "स्क्रीन जेनरेशन टेम्प्लेट" का उपयोग करके, AI से कंपोज़ या स्विफ्टयूआई कोड मांगें और सभी चार स्थितियों का अनुरोध करें। फिर उसी कोड को "एक्सेसिबिलिटी चेक टेम्प्लेट" से जांचें। कम से कम एक एक्सेसिबिलिटी सुधार (लापता लेबल, कम कंट्रास्ट, या छोटा स्पर्श लक्ष्य) ढूंढें और ठीक करें और ध्यान दें कि कौन सी स्थिति (लोडिंग/खाली/त्रुटि) आपको लगता है कि वास्तविक उपयोग में सबसे अधिक बार दिखाई देगी।

चेकलिस्ट

• [ ] मैंने प्रॉम्प्ट में डिस्प्ले के उद्देश्य और घटकों को स्पष्ट कर दिया है
• [ ] मेरे पास चार स्थितियां (लोडिंग/खाली/त्रुटि/पूर्ण) अलग-अलग उत्पन्न हुईं
• [ ] मैंने रंग और स्थान को केंद्रीय विषय से पढ़ा, मैंने इसे कोड में एम्बेड नहीं किया।
• [ ] मैं शुरू से ही एक्सेसिबिलिटी लेबल और कंट्रास्ट चाहता था
• [ ] मैंने सत्यापित किया कि सजावटी तत्व स्क्रीन रीडर से छिपे हुए हैं
• [ ] मैंने पाठों को अलग-अलग रखा, कई भाषाओं के लिए तैयार