लाभ:
- उद्देश्य, कम्पोनेन्ट, चार राज्यहरू (लोडिङ/खाली/त्रुटि/पूर्ण), डिजाइन प्रणाली र पहुँचको क्रममा जेटप्याक कम्पोज र SwiftUI का लागि बलियो इन्टरफेस कोड उत्पादन गर्ने क्षमता
- सही लेबलिङ, पर्याप्त कन्ट्रास्ट र उपयुक्त टचको साथ सुरुदेखि नै पहुँच परिभाषित गरेर सबै प्रयोगकर्ताहरूको लागि खुला रहेको इन्टरफेस उत्पादन गर्ने क्षमता।
- केन्द्रीय विषयवस्तुबाट रङ र ठाउँ पढेर सुसंगत, बहु-भाषा र हल्का/गाढा विषयवस्तु तयार इन्टरफेसहरू सिर्जना गर्ने क्षमता
मोबाइल एपको सफलता धेरै हदसम्म यसको प्रयोगकर्ता इन्टरफेस (UI — प्रयोगकर्ताले देख्ने र छुने स्क्रिनहरू) र प्रयोगकर्ता अनुभव (UX — प्रयोग गर्न कति सहज र रमाइलो छ) द्वारा निर्धारण गरिन्छ। प्रयोगकर्ताले खराब कोड देख्दैन, तर पहिलो सेकेन्डमा खराब इन्टरफेस महसुस गर्दछ। AI ले इन्टरफेस विकासमा दुई शक्तिशाली भूमिका खेल्छ: एकातिर, यसले डिजाइन विचार, प्रवाह र पाठ (UX लेखन) उत्पन्न गर्दछ; अर्कोतर्फ, यसले सीधै यस डिजाइनलाई काम गर्ने इन्टरफेस कोडमा रूपान्तरण गर्दछ। यस एकाईमा, हामी आधुनिक घोषणात्मक इन्टरफेस उपकरणहरू Jetpack Compose (Android) र SwiftUI (iOS) मा केन्द्रित हुँदै AI सँग द्रुत, पहुँचयोग्य र एकरूप इन्टरफेसहरू कसरी उत्पादन गर्ने भनेर सिक्नेछौं। "घोषणात्मक" भनेको स्क्रिन कसरी कोर्ने भनेर चरण-दर-चरण व्याख्या गर्नुको सट्टा, तपाईंले "यस अवस्थामा स्क्रिन कस्तो देखिनु पर्छ" भनेर वर्णन गर्नुहुन्छ; उपकरणले बाँकी गर्छ।
डिजाइन देखि कोड सम्म: सही अर्डर
AI लाई "सुन्दर स्क्रिन बनाउन" भन्नु अस्पष्ट छ किनभने "सुन्दर" मापन गर्न सकिँदैन। राम्रो इन्टरफेस जेनेरेसनले यो क्रम पछ्याउँछ:
- उद्देश्य र सामग्री। स्क्रिनले के गर्छ, यसले के जानकारी देखाउँछ, प्रयोगकर्ताले के गर्नेछ?
- घटक सूची। शीर्षक, सूची, बटन, फारम क्षेत्र जस्ता भागहरू।
- परिस्थितिहरू। लोड हुँदै, खाली (कुनै डाटा छैन), त्रुटि, पूर्ण - चार आधारभूत स्क्रिन अवस्थाहरू।
- डिजाइन प्रणाली। रंग, टाइपोग्राफी, स्पेसिंग नियम; सामान्यतया मटेरियल ३ (एन्ड्रोइड) वा iOS को मानव इन्टरफेस दिशानिर्देशहरूको पालना गर्दै।
- पहुँच। स्क्रिन रिडर लेबलहरू, पर्याप्त कन्ट्रास्ट, टच लक्ष्य आकार।
- कोड। यो सबै भनिसकेपछि, कम्पोजेबल वा SwiftUI भ्यू जेनेरेसन।
प्रायः छोडिने चरण तेस्रो हो। विकासकर्ताहरूले मात्र "पूर्ण" अवस्थालाई विचार गर्छन्; जबकि वास्तविक अनुप्रयोगमा प्रयोगकर्ताले प्रायः "लोडिङ" र "त्रुटि" अवस्थाहरूको सामना गर्दछ। एआईमा सबै चार राज्यहरू छाप्नु भनेको बलियो इन्टरफेसको रहस्य हो।
सुझाव: प्रम्प्टको अन्त्यमा "लोडिङ, खाली, त्रुटि, र पूर्ण छुट्टै उत्पन्न गर्नुहोस्" थप्नुहोस्। यो एकल वाक्यले तपाईंको इन्टरफेसलाई वास्तविक संसारको लागि तयार बनाउँछ र QA (गुणस्तर परीक्षण) चरणमा त्रुटिहरूको संख्यालाई उल्लेखनीय रूपमा कम गर्छ।
पहुँच अपरिवर्तनीय छ
पहुँच - दृश्य, श्रवण वा मोटर असक्षमता भएका प्रयोगकर्ताहरूद्वारा अनुप्रयोग प्रयोग गर्ने क्षमता - नैतिक जिम्मेवारी र भण्डार र कानुनी अपेक्षा दुवै हो। यदि चाहियो भने एआईले पहुँचयोग्य कोड उत्पादन गर्दछ; नचाहेको खण्डमा ट्यागरहित, कम कन्ट्रास्ट इन्टरफेस फर्काउँछ। थम्बका तीन नियमहरू: प्रत्येक अन्तरक्रियात्मक तत्वलाई स्क्रिन रिडरको लागि अर्थपूर्ण लेबल दिनुहोस् (सामग्री विवरण / पहुँचलेबल), पाठ र पृष्ठभूमि (कम्तिमा 4.5:1 अनुपात) बीचको पर्याप्त रङ कन्ट्रास्ट, र कम्तिमा 48x48 dp/44x44 pt को टच लक्ष्य। AI लाई यी कुराहरू स्पष्ट रूपमा सोध्नुहोस्।
सावधानी: AI ले सजावटी आइकनमा लामो पहुँच ट्याग पनि थप्न सक्छ; यसले स्क्रिन रिडर प्रयोगकर्तालाई अनावश्यक बकबकले ओतप्रोत गर्छ। विशुद्ध रूपमा सजावटी तत्वहरू "पहुँचबाट लुकाइएको" हुनुपर्छ (स्क्रिन रिडरले छोड्न अनुमति दिएको छ)। उत्पादन गरिएका लेबलहरूको समीक्षा गर्नुहोस्: अर्थपूर्णलाई बोल्न दिनुहोस्, सजावटीलाई मौन रहन दिनुहोस्।
स्थिरता: डिजाइन प्रणाली र विषयवस्तु
व्यावसायिक अनुप्रयोगहरूले अनियमित रंगहरू र स्पेसिङ प्रयोग गर्दैनन्; डिजाइन प्रणाली (रङ, फन्ट, स्पेसिङ, र घटकहरूको मानक सेट) पछ्याउँछ। यदि तपाईंले AI लाई आफ्नो विषयवस्तु मानहरू दिनुभयो भने (मुख्य रङ, माध्यमिक रंग, कुनाको त्रिज्या, टाइपोग्राफी स्केल), सबै स्क्रिनहरू एकरूप हुनेछन्। यदि तपाईंले गर्नुभएन भने, प्रत्येक स्क्रिनले नीलोको फरक छाया प्रयोग गर्नेछ र एप अव्यवस्थित देखिनेछ। सबैभन्दा प्रभावकारी तरिका भनेको पहिले एआईलाई थिम/डिजाइन टोकन फाइल जेनेरेट गर्न सोध्नु हो, त्यसपछि सबै स्क्रिनहरूलाई त्यो थिममा बाँध्नुहोस्।
विषय
गरीब दृष्टिकोण
बलियो दृष्टिकोण
रङ
प्रत्येक स्क्रिनलाई म्यानुअल रूपमा रंग कोड गर्नुहोस्
केन्द्रीय विषयवस्तु, स्क्रिनहरू विषयवस्तुबाट पढिन्छ
परिस्थितिहरू
केवल "पूर्ण" स्क्रिन
लोड हुँदै/खाली/त्रुटि/पूरा चार अवस्थाहरू
पहुँच
पछि थपियो
यो सुरुदेखि नै दावीमा परिभाषित गरिएको छ
पाठ
कोड मा सम्मिलित
अलग स्रोत, बहु-भाषा तयार
तीन मिनी केसहरू
केस १ - खाली केस बचत गरियो। एउटा न्यूज एप टोलीसँग एआई प्रिन्ट व्यक्तिगत स्क्रिन अवस्था थियो। "निष्क्रिय स्थिति" स्क्रिन ("अहिलेसम्म कुनै समाचार सुरक्षित गरिएको छैन") को लागी धन्यवाद, प्रयोगकर्ता परीक्षणमा 70% सहभागीहरूले खाली स्क्रिनमा एप छोडेनन्; अघिल्लो संस्करणमा, खाली स्क्रिन सेतो रह्यो र प्रयोगकर्ताहरूले सोचे कि यो "ब्रेक" र छोडियो। एउटा सानो प्रतिलिपि प्रतिधारण दर बढ्यो।
केस २ - कन्ट्रास्ट अस्वीकार। एउटा टोलीले एप स्टोरमा हल्का खैरो, ब्रान्डको रङमा टेक्स्ट भएको स्क्रिनसहित आवेदन दियो। एप्पलले कम कन्ट्रास्टको कारण पहुँचयोग्यता आधारमा चेतावनी जारी गर्यो। जब AI लाई "4.5:1 माथि पाठ-पृष्ठभूमि कन्ट्रास्ट बढाउन" भनियो, रङहरू गाढा भए र समस्या समाधान भयो। सुरुदेखि नै अनुरोध गरेको भए ढिलाइ हुने थिएन ।
केस 3 - सजावटी लेबल शोर। एक दृष्टिविहीन परीक्षकले रिपोर्ट गरे कि हरेक गहना आइकन ("लाइन," "डट," "छाया") AI-उत्पन्न स्क्रिनमा ठूलो स्वरमा पढिएको थियो, जसले स्क्रिनलाई प्रयोग गर्न नसक्ने बनायो। स्क्रिन रिडर अनुभव तरल भयो जब सजावटी तत्वहरू पहुँचबाट लुकेका थिए। पाठ: पहुँचको अर्थ "सही ट्यागहरू", "धेरै ट्यागहरू" होइन।
कमजोर प्रम्प्ट / बलियो प्रम्प्ट
कमजोर प्रम्प्ट: "प्रोफाइल स्क्रिन डिजाइन गर्नुहोस्।"
शक्तिशाली प्रम्प्ट: "iOS/SwiftUI का लागि प्रयोगकर्ता प्रोफाइल स्क्रिन उत्पन्न गर्नुहोस्। सामग्री: अवतार, नाम, इमेल, 'प्रोफाइल सम्पादन गर्नुहोस्' बटन, सेटिङ्हरूको सूची। स्थितिहरू: लोडिङ (कङ्काल), त्रुटि (पुन: प्रयास बटन), पूर्ण। डिजाइन: गैर-सामग्री, iOS HIG अनुरूप; प्रणाली रंगहरू, गतिशील प्रकार। पहुँच योग्यता, पहुँचको लागि छुपाएका प्रत्येक प्रकार, उपलब्धता। टच टारगेट मिन 44pt एक अलग फाइलबाट विषयवस्तु मानहरू पढ्नुहोस्, स्क्रिनमा रंग कोड इम्बेड नगर्नुहोस्, त्यसपछि कोड निर्यात गर्नुहोस्।
प्रतिलिपि गर्न मिल्ने टेम्प्लेटहरू
स्क्रिन जेनेरेसन टेम्प्लेट: "[प्लेटफर्म/उपकरण] को लागि [स्क्रिन नाम] उत्पन्न गर्नुहोस्। सामग्री: [तत्वहरू]। प्रयोगकर्ता कार्यहरू: [कार्यहरू]। चार अवस्थाहरू अलग-अलग उत्पन्न गर्नुहोस्: लोडिङ, खाली, त्रुटि, पूर्ण। डिजाइन प्रणाली: [सामग्री 3 / iOS HIG], विषयवस्तु टोकनहरूबाट पढ्नुहोस्। पहुँचयोग्यता: ल्याब = 1 > टच ल्याब।
विषयवस्तु/डिजाइन प्रणाली टेम्प्लेट: "मेरो एपको लागि केन्द्रीय विषयवस्तु परिभाषा उत्पादन गर्नुहोस् ([विषयवस्तु / एक डिजाइन टोकन संरचना SwiftUI मा रचना गर्नुहोस्]):- प्राथमिक रङ [हेक्स], माध्यमिक [हेक्स], त्रुटि रङ, सतहको रंग- टाइपोग्राफी स्केल (शीर्षक, शरीर, विवरण)- स्पेसिङ स्केल (4,8,16,24)-ए कोर्नर लाइट समर्थन गर्नुहोस्।
पहुँच अडिट टेम्प्लेट: "पहुँचको लागि यो स्क्रिन कोड जाँच गर्नुहोस्: 1) त्यहाँ कुनै पनि ट्याग नगरिएका अन्तरक्रियात्मक तत्वहरू छन्? 2) के कन्ट्रास्ट अनुपातहरू पर्याप्त छन्? 3) के टच लक्ष्यहरू पर्याप्त ठूला छन्? 4) के सजावटी तत्वहरू स्क्रिन रिडरबाट लुकेका छन्? प्रत्येक मुद्दाको लागि समाधानहरू सुझाव दिनुहोस्। [कोड]"
कोड टेम्प्लेटमा डिजाइन गर्नुहोस्: "म निम्न डिजाइनको वर्णन गर्छु: [स्क्रिन विवरण वा स्क्रिनसट]। यसलाई [कम्पोज/स्विफ्टयूआई] कोडमा अनुवाद गर्नुहोस्। डिजाईनमा स्पेसिङ र अलाइनमेन्ट सही राख्नुहोस्, तर सबै चार अवस्थाहरू थप्नुहोस्।"
सामान्य गल्तीहरू
- पूर्ण अवस्थाको बारेमा मात्र सोच्नुहोस्। अधिकांश समय वास्तविक प्रयोगकर्ताले लोडिङ/त्रुटि स्क्रिन देख्छ।
- कोडमा रंग र ठाउँ इम्बेड गर्दै। यदि विषयवस्तु केन्द्रिय छैन भने, स्थिरता हराउँछ र मर्मत गर्न गाह्रो हुन्छ।
- अन्तिमका लागि पहुँच छोड्दै। यसलाई पछि थप्नु महँगो छ; यदि सुरुबाट अनुरोध गरियो भने यो लागत-मुक्त छ।
- ओभरलेबलिङ। सजावटी तत्वहरू पढ्नुले पनि स्क्रिन रिडर अनुभवलाई बाधा पुर्याउँछ।
- कोडमा पाठ इम्बेड गर्दै। जब बहुभाषी समर्थन आवश्यक छ, यो म्यानुअल रूपमा प्रत्येक स्क्रिन परिवर्तन गर्न आवश्यक छ; पाठहरू अलग राख्नुहोस्।
- स्क्रिनसटबाट सही प्रतिलिपिको अपेक्षा गर्दै। एआई डिजाइन लगभग उत्पादन गर्दछ। पिक्सेल परिशुद्धता म्यानुअल रूपमा सेट गरिएको छ।
संक्षेपमा
AI इन्टरफेस उत्पादनमा शक्तिशाली छ, तर यसलाई मार्गदर्शन चाहिन्छ। सही क्रम: उद्देश्य, कम्पोनेन्टहरू, चार अवस्थाहरू (लोडिङ/खाली/त्रुटि/पूर्ण), डिजाइन प्रणाली, पहुँच, त्यसपछि कोड। पहुँच योग्य छैन र यसको अर्थ "सही लेबल" हो, "धेरै लेबलहरू" होइन। स्थिरताको लागि, केन्द्रीय विषयवस्तुबाट रङ र स्पेसिङ पढ्नुहोस्, कोडमा इम्बेड नगर्नुहोस्। बलियो इच्छाले यो सबै सुरुदेखि परिभाषित गर्दछ; यसरी, इन्टरफेस वास्तविक संसार, स्टोर अनुमोदन र सबै प्रयोगकर्ताहरूको लागि तयार छ।
आवेदन कार्य
सेटिङ स्क्रिनको लागि "स्क्रिन जेनेरेशन टेम्प्लेट" प्रयोग गरेर, कम्पोज वा SwiftUI कोडको लागि AI लाई सोध्नुहोस् र सबै चार राज्यहरू अनुरोध गर्नुहोस्। त्यसपछि उही कोड "पहुँच जाँच टेम्प्लेट" सँग जाँच गर्नुहोस्। कम्तिमा एउटा पहुँच सुधार (लेबल छुटेको, कम कन्ट्रास्ट, वा सानो टच लक्ष्य) खोज्नुहोस् र समाधान गर्नुहोस् र कुन स्थिति (लोडिङ/खाली/त्रुटि) तपाईंले वास्तविक प्रयोगमा प्रायजसो देखा पर्नेछ भन्ने कुरालाई ध्यान दिनुहोस्।
चेकलिस्ट
- [] मैले प्रम्प्टमा प्रदर्शनको उद्देश्य र कम्पोनेन्टहरू स्पष्ट पारेको छु
- [ ] मसँग चार राज्यहरू (लोडिङ/खाली/त्रुटि/पूर्ण) अलग-अलग उत्पन्न भएको थियो।
- [ ] मैले केन्द्रीय विषयवस्तुबाट रङ र स्पेस पढेको छु, मैले कोडमा इम्बेड गरेको छैन।
- [ ] म सुरुदेखि नै पहुँच लेबल र कन्ट्रास्ट चाहन्थें
- [ ] मैले सजावटका तत्वहरू स्क्रिन रिडरबाट लुकेका छन् भनी प्रमाणित गरें
- [ ] मैले पाठहरू अलग राखें, धेरै भाषाहरूको लागि तयार