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