செயற்கை நுண்ணறிவுடன் இடைமுக வடிவமைப்பு மற்றும் UI குறியீடு உருவாக்கம்

ஆதாயங்கள்:

• ஜெட்பேக் கம்போஸ் மற்றும் ஸ்விஃப்ட்யூஐக்கான வலுவான இடைமுகக் குறியீட்டை நோக்கம், கூறு, நான்கு நிலைகள் (ஏற்றுதல்/காலி/பிழை/முழு), வடிவமைப்பு அமைப்பு மற்றும் அணுகல் ஆகியவற்றின் வரிசையில் உருவாக்கும் திறன்
• தொடக்கத்திலிருந்தே அணுகல்தன்மையை வரையறுத்து, சரியான லேபிளிங், போதுமான மாறுபாடு மற்றும் பொருத்தமான தொடுதலுடன் அனைத்து பயனர்களுக்கும் திறந்திருக்கும் இடைமுகத்தை உருவாக்கும் திறன்.
• மைய கருப்பொருளிலிருந்து வண்ணம் மற்றும் இடத்தைப் படிப்பதன் மூலம் நிலையான, பல மொழி மற்றும் ஒளி/இருண்ட தீம் தயார் இடைமுகங்களை உருவாக்கும் திறன்

ஒரு மொபைல் பயன்பாட்டின் வெற்றியானது அதன் பயனர் இடைமுகம் (UI — பயனர் பார்க்கும் மற்றும் தொடும் திரைகள்) மற்றும் பயனர் அனுபவம் (UX - அதைப் பயன்படுத்துவது எவ்வளவு மென்மையாகவும் சுவாரஸ்யமாகவும் இருக்கிறது) ஆகியவற்றால் தீர்மானிக்கப்படுகிறது. பயனர் மோசமான குறியீட்டைப் பார்க்கவில்லை, ஆனால் முதல் வினாடியில் மோசமான இடைமுகத்தை உணர்கிறார். இடைமுக வளர்ச்சியில் AI இரண்டு சக்திவாய்ந்த பாத்திரங்களை வகிக்கிறது: ஒருபுறம், இது வடிவமைப்பு யோசனை, ஓட்டம் மற்றும் உரை (UX எழுத்து) ஆகியவற்றை உருவாக்குகிறது; மறுபுறம், இது நேரடியாக இந்த வடிவமைப்பை பணி இடைமுகக் குறியீடாக மாற்றுகிறது. இந்த யூனிட்டில், நவீன அறிவிப்பு இடைமுகக் கருவிகளான Jetpack Compose (Android) மற்றும் SwiftUI (iOS) ஆகியவற்றில் கவனம் செலுத்தி, AI உடன் வேகமான, அணுகக்கூடிய மற்றும் சீரான இடைமுகங்களை எவ்வாறு உருவாக்குவது என்பதைக் கற்றுக்கொள்வோம். "அறிவிப்பு" என்றால், திரையை எப்படி வரைய வேண்டும் என்பதை படிப்படியாக விளக்குவதற்குப் பதிலாக, "இந்தச் சூழ்நிலையில் திரை இப்படித்தான் இருக்க வேண்டும்" என்று விவரிக்கிறீர்கள்; கருவி மீதமுள்ளவற்றைச் செய்கிறது.

வடிவமைப்பிலிருந்து குறியீடு வரை: சரியான வரிசை

AIக்கு "அழகான திரையை உருவாக்கு" என்று சொல்வது தெளிவற்றது, ஏனெனில் "அழகானது" என்பதை அளவிட முடியாது. நல்ல இடைமுக உருவாக்கம் இந்த வரிசையைப் பின்பற்றுகிறது:

1. நோக்கம் மற்றும் உள்ளடக்கம். திரை என்ன செய்கிறது, என்ன தகவலைக் காட்டுகிறது, பயனர் என்ன செய்வார்?
2. கூறு பட்டியல். தலைப்பு, பட்டியல், பொத்தான், படிவப் புலம் போன்ற பகுதிகள்.
3. சூழ்நிலைகள். ஏற்றுதல், வெற்று (தரவு இல்லை), பிழை, முழு - நான்கு அடிப்படை திரை நிலைகள்.
4. வடிவமைப்பு அமைப்பு. நிறம், அச்சுக்கலை, இடைவெளி விதிகள்; பொதுவாக மெட்டீரியல் 3 (Android) அல்லது iOS இன் மனித இடைமுக வழிகாட்டுதல்களுடன் இணங்குகிறது.
5. அணுகல். ஸ்கிரீன் ரீடர் லேபிள்கள், போதுமான மாறுபாடு, தொடு இலக்கு அளவு.
6. குறியீடு. இதையெல்லாம் சொல்லிவிட்டு, Composable அல்லது SwiftUI View தலைமுறை.

மிகவும் அடிக்கடி தவிர்க்கப்படும் படி மூன்றாவது ஒன்றாகும். டெவலப்பர்கள் "முழு" நிலையை மட்டுமே கருதுகின்றனர்; உண்மையான பயன்பாட்டில் பயனர் பெரும்பாலும் "ஏற்றுதல்" மற்றும் "பிழை" சூழ்நிலைகளை எதிர்கொள்கிறார். நான்கு நிலைகளையும் AI க்கு அச்சிடுவது ஒரு வலுவான இடைமுகத்தின் ரகசியம்.

உதவிக்குறிப்பு: கட்டளையின் முடிவில் "ஏற்றுதல், காலி, பிழை மற்றும் முழுமை தனித்தனியாக உருவாக்கு" என்பதைச் சேர்க்கவும். இந்த ஒற்றை வாக்கியம் உங்கள் இடைமுகத்தை நிஜ உலகத்திற்கு தயார்படுத்துகிறது மற்றும் QA (தர சோதனை) கட்டத்தில் உள்ள பிழைகளின் எண்ணிக்கையை கணிசமாக குறைக்கிறது.

அணுகல் என்பது பேரம் பேச முடியாதது

அணுகல் - பார்வை, செவித்திறன் அல்லது மோட்டார் குறைபாடுகள் உள்ள பயனர்களால் பயன்பாட்டைப் பயன்படுத்துவதற்கான திறன் - ஒரு நெறிமுறை பொறுப்பு மற்றும் ஒரு கடை மற்றும் சட்ட எதிர்பார்ப்பு. AI விரும்பினால் அணுகக்கூடிய குறியீட்டை உருவாக்குகிறது; விரும்பவில்லை என்றால், டேக்லெஸ், குறைந்த-கான்ட்ராஸ்ட் இடைமுகத்தை வழங்கும். மூன்று கட்டைவிரல் விதிகள்: ஒவ்வொரு ஊடாடும் உறுப்புக்கும் ஸ்கிரீன் ரீடருக்கான அர்த்தமுள்ள லேபிளை வழங்கவும் (உள்ளடக்க விளக்கம் / அணுகல் லேபிள்), உரை மற்றும் பின்னணிக்கு இடையே போதுமான வண்ண வேறுபாடு (குறைந்தது 4.5:1 விகிதம்), மற்றும் குறைந்தபட்சம் 48x48 dp/44x44 pt என்ற தொடு இலக்கு. AI யிடம் இந்த விஷயங்களை வெளிப்படையாகக் கேளுங்கள்.

எச்சரிக்கை: AI ஆனது அலங்கார ஐகானில் நீண்ட அணுகல்தன்மை குறிச்சொல்லையும் சேர்க்கலாம்; இது ஸ்க்ரீன் ரீடர் பயனரை தேவையில்லாத அரட்டையில் மூழ்கடிக்கிறது. முற்றிலும் அலங்கார கூறுகள் "அணுகல்நிலையிலிருந்து மறைக்கப்பட வேண்டும்" (ஸ்கிரீன் ரீடரால் தவிர்க்கப்பட அனுமதிக்கப்படுகிறது). தயாரிக்கப்பட்ட லேபிள்களை மதிப்பாய்வு செய்யவும்: அர்த்தமுள்ளவை பேசட்டும், அலங்காரமானது அமைதியாக இருக்கட்டும்.

நிலைத்தன்மை: வடிவமைப்பு அமைப்பு மற்றும் தீம்

தொழில்முறை பயன்பாடுகள் சீரற்ற வண்ணங்கள் மற்றும் இடைவெளிகளைப் பயன்படுத்துவதில்லை; ஒரு வடிவமைப்பு அமைப்பைப் பின்பற்றுகிறது (வண்ணங்களின் நிலையான தொகுப்பு, எழுத்துருக்கள், இடைவெளி மற்றும் கூறுகள்). AI க்கு உங்கள் தீம் மதிப்புகளை (முக்கிய நிறம், இரண்டாம் நிலை நிறம், மூலை ஆரம், அச்சுக்கலை அளவு) கொடுத்தால், எல்லா திரைகளும் சீராக வெளிவரும். இல்லையெனில், ஒவ்வொரு திரையும் வெவ்வேறு நீல நிற நிழலைப் பயன்படுத்தும், மேலும் பயன்பாடு இரைச்சலாகத் தோன்றும். தீம்/டிசைன் டோக்கன்கள் கோப்பை உருவாக்க AI யிடம் முதலில் கேட்பது மிகவும் திறமையான வழி, பின்னர் அனைத்து திரைகளையும் அந்த தீமுடன் இணைக்க வேண்டும்.

பொருள்

மோசமான அணுகுமுறை

வலுவான அணுகுமுறை

நிறம்

ஒவ்வொரு திரைக்கும் கைமுறையாக வண்ணக் குறியீடு

மைய தீம், தீமிலிருந்து படிக்கப்படும் திரைகள்

சூழ்நிலைகள்

"முழு" திரை மட்டுமே

ஏற்றுதல்/காலி/பிழை/முழு நான்கு நிலைகள்

அணுகல்

பின்னர் சேர்க்கப்பட்டது

இது ஆரம்பத்தில் இருந்தே கோரிக்கையில் வரையறுக்கப்பட்டுள்ளது

உரை

குறியீட்டில் உட்பொதிக்கப்பட்டது

தனி ஆதாரம், பல மொழி தயார்

மூன்று சிறிய வழக்குகள்

வழக்கு 1 - வெற்று வழக்கு சேமிக்கப்பட்டது. ஒரு செய்தி பயன்பாட்டுக் குழு AI பிரிண்ட் தனிப்பட்ட திரை நிலைகளைக் கொண்டிருந்தது. "செயலற்ற நிலை" திரைக்கு நன்றி ("இன்னும் செய்திகள் சேமிக்கப்படவில்லை"), பயனர் சோதனையில் பங்கேற்பாளர்களில் 70% பேர் பயன்பாட்டை வெற்றுத் திரையில் விடவில்லை; முந்தைய பதிப்பில், வெற்றுத் திரை வெண்மையாகவே இருந்தது மற்றும் பயனர்கள் அது "உடைந்ததாக" கருதி வெளியேறினர். ஒரு சிறிய நகல் தக்கவைப்பு விகிதத்தை அதிகரித்தது.

வழக்கு 2 - மாறுபாடு நிராகரிப்பு. ஒரு குழு ஆப் ஸ்டோருக்கு லைட் கிரே, பிராண்ட் நிறத்தில் உரையுடன் கூடிய திரைகளுடன் விண்ணப்பித்தது. குறைந்த மாறுபாடு காரணமாக ஆப்பிள் அணுகல் அடிப்படையில் ஒரு எச்சரிக்கையை வெளியிட்டது. "4.5:1 க்கு மேல் உரை-பின்னணி மாறுபாட்டை அதிகரிக்க" AI யிடம் கூறப்பட்டபோது, ​​வண்ணங்கள் இருண்டதாக மாறியது மற்றும் சிக்கல் தீர்க்கப்பட்டது. ஆரம்பத்திலிருந்தே கோரிக்கை விடுத்திருந்தால் தாமதம் ஏற்பட்டிருக்காது.

வழக்கு 3 - அலங்கார லேபிள் சத்தம். AI-உருவாக்கப்பட்ட திரையில் ஒவ்வொரு ஆபரண ஐகானும் ("கோடு," "புள்ளி," "நிழல்") சத்தமாக வாசிக்கப்பட்டதால், திரையைப் பயன்படுத்த முடியாததாக மாற்றியதாக பார்வையற்ற சோதனையாளர் தெரிவித்தார். அலங்கார கூறுகள் அணுகக்கூடிய தன்மையிலிருந்து மறைக்கப்பட்டபோது திரை வாசிப்பு அனுபவம் திரவமாக மாறியது. பாடம்: அணுகல்தன்மை என்பது "சரியான குறிச்சொற்கள்," "அதிகமான குறிச்சொற்கள்" அல்ல.

பலவீனமான வரியில் / வலுவான வரியில்

பலவீனமான வரியில்: "சுயவிவரத் திரையை வடிவமைக்கவும்."

சக்திவாய்ந்த அறிவுறுத்தல்: "iOS/SwiftUI க்கு பயனர் சுயவிவரத் திரையை உருவாக்கவும். உள்ளடக்கம்: அவதார், பெயர், மின்னஞ்சல், 'சுயவிவரத்தைத் திருத்து' பொத்தான், அமைப்புகள் பட்டியல். நிலைகள்: ஏற்றுதல் (எலும்புக்கூடு), பிழை (மீண்டும் முயற்சி பொத்தான்), முழுமை. வடிவமைப்பு: பொருள் அல்லாதது, iOS HIGக்கு இணங்குகிறது; அமைப்பு நிறங்கள், அணுகல் வகை, மறைந்திருக்கும் உறுப்புகள், அணுகல் வகை, மறைந்திருக்கும் ஒவ்வொரு உறுப்புக்கும் அணுகல்தன்மை ஐகான். min 44pt. ஒரு தனி கோப்பிலிருந்து தீம் மதிப்புகளைப் படிக்கவும், முதலில் கூறு மரத்தை வரையவும், பின்னர் குறியீட்டை ஏற்றுமதி செய்யவும்.

நகலெடுக்கக்கூடிய வார்ப்புருக்கள்

திரை உருவாக்க டெம்ப்ளேட்: "[தளம்/கருவி]க்கு [திரை பெயரை] உருவாக்கவும். உள்ளடக்கம்: [உறுப்புகள்]. பயனர் செயல்கள்: [செயல்கள்]. நான்கு நிலைகளை தனித்தனியாக உருவாக்கவும்: ஏற்றுதல், வெறுமை, பிழை, முழு. வடிவமைப்பு அமைப்பு: [மெட்டீரியல் 3 / iOS HIG], தீம் டோக்கன்களிலிருந்து படிக்கவும். அணுகல்தன்மை: =4 டச்.

தீம்/வடிவமைப்பு அமைப்பு டெம்ப்ளேட்:"எனது பயன்பாட்டிற்கான மைய தீம் வரையறையை உருவாக்கவும் ([ஸ்விஃப்ட்யூஐயில் தீம் / வடிவமைப்பு டோக்கன் அமைப்பு]):- முதன்மை நிறம் [ஹெக்ஸ்], இரண்டாம் நிலை [ஹெக்ஸ்], பிழை நிறம், மேற்பரப்பு நிறம்- அச்சுக்கலை அளவுகோல் (தலைப்பு, உடல், விளக்கம்)- இடைவெளி அளவு (4,8, 16, 24 க்கு ஆதரவான லைட் ஸ்கேல்).

அணுகல்தன்மை தணிக்கை டெம்ப்ளேட்:"அணுகல்தன்மைக்கு இந்தத் திரைக் குறியீட்டைச் சரிபார்க்கவும்:1) குறியிடப்படாத ஊடாடும் கூறுகள் ஏதேனும் உள்ளதா?2) மாறுபாடு விகிதங்கள் போதுமானதா?3) தொடு இலக்குகள் போதுமான அளவு உள்ளதா?4) ஸ்கிரீன் ரீடரில் இருந்து அலங்கார கூறுகள் மறைக்கப்பட்டுள்ளதா?ஒவ்வொரு சிக்கலுக்கும் திருத்தங்களைப் பரிந்துரைக்கவும். [குறியீடு]"

குறியீட்டு டெம்ப்ளேட்டிற்கு வடிவமைக்கவும்: "நான் பின்வரும் வடிவமைப்பை விவரிக்கிறேன்: [திரை விளக்கம் அல்லது ஸ்கிரீன்ஷாட்]. இதை [Compose/SwiftUI] குறியீடாக மொழிபெயர்க்கவும். வடிவமைப்பிற்கு சரியான இடைவெளி மற்றும் சீரமைப்பை வைத்திருங்கள், ஆனால் நான்கு நிலைகளையும் சேர்க்கவும்."

பொதுவான தவறுகள்

• முழு நிலையைப் பற்றி மட்டுமே சிந்திக்க வேண்டும். பெரும்பாலான நேரங்களில் உண்மையான பயனர் ஏற்றுதல்/பிழை திரையைப் பார்க்கிறார்.
• குறியீட்டில் நிறம் மற்றும் இடத்தை உட்பொதித்தல். தீம் மையமாக இல்லாவிட்டால், நிலைத்தன்மை இழக்கப்பட்டு, பராமரிப்பு கடினமாகிறது.
• அணுகலை கடைசியாக விட்டுவிடுகிறேன். பின்னர் சேர்ப்பது விலை அதிகம்; ஆரம்பத்திலிருந்தே கோரப்பட்டால் அது கட்டணமில்லாது.
• மேலெழுதுதல். அலங்காரக் கூறுகளைப் படிப்பது ஸ்கிரீன் ரீடர் அனுபவத்தையும் சீர்குலைக்கிறது.
• குறியீட்டில் உரையை உட்பொதித்தல். பன்மொழி ஆதரவு தேவைப்படும்போது, ​​ஒவ்வொரு திரையையும் கைமுறையாக மாற்றுவது அவசியம்; உரைகளை தனித்தனியாக வைத்திருங்கள்.
• ஸ்கிரீன்ஷாட்டில் இருந்து சரியான நகலை எதிர்பார்க்கிறோம். AI வடிவமைப்பு தோராயமாக உற்பத்தி செய்கிறது. பிக்சல் துல்லியம் கைமுறையாக அமைக்கப்பட்டுள்ளது.

சுருக்கமாக

இடைமுகம் தயாரிப்பில் AI சக்தி வாய்ந்தது, ஆனால் அதற்கு வழிகாட்டுதல் தேவைப்படுகிறது. சரியான வரிசை: நோக்கம், கூறுகள், நான்கு நிலைகள் (ஏற்றுதல்/காலி/பிழை/முழு), வடிவமைப்பு அமைப்பு, அணுகல்தன்மை, பின்னர் குறியீடு. அணுகல் என்பது பேச்சுவார்த்தைக்குட்பட்டது அல்ல, இதன் பொருள் "சரியான லேபிள்", "அதிகமான லேபிள்கள்" அல்ல. நிலைத்தன்மைக்கு, மையக் கருப்பொருளிலிருந்து வண்ணம் மற்றும் இடைவெளியைப் படிக்கவும், அதை குறியீட்டில் உட்பொதிக்க வேண்டாம். வலிமையான விருப்பம் இதையெல்லாம் ஆரம்பத்தில் இருந்தே வரையறுக்கிறது; எனவே, இடைமுகம் உண்மையான உலகம், அங்காடி ஒப்புதல் மற்றும் அனைத்து பயனர்களுக்கும் தயாராக உள்ளது.

விண்ணப்ப பணி

அமைப்புகள் திரைக்கான "திரை உருவாக்க டெம்ப்ளேட்டை" பயன்படுத்தி, AI யிடம் Compose அல்லது SwiftUI குறியீட்டைக் கேட்டு நான்கு மாநிலங்களையும் கோரவும். பின்னர் அதே குறியீட்டை "அணுகல் சோதனை டெம்ப்ளேட்" மூலம் சரிபார்க்கவும். குறைந்தபட்சம் ஒரு அணுகல்தன்மை மேம்பாட்டைக் கண்டுபிடித்து சரிசெய்யவும் (காணாமல் போன லேபிள், குறைந்த மாறுபாடு அல்லது சிறிய தொடு இலக்கு) மேலும் உண்மையான பயன்பாட்டில் எந்த நிலை (ஏற்றுதல்/வெற்று/பிழை) அடிக்கடி தோன்றும் என்று நீங்கள் நினைக்கிறீர்கள் என்பதைக் கவனியுங்கள்.

சரிபார்ப்பு பட்டியல்

• [ ] காட்சியின் நோக்கம் மற்றும் கூறுகளை நான் வரியில் தெளிவாக்கினேன்
• [ ] நான் நான்கு நிலைகளை (ஏற்றுதல்/காலி/பிழை/முழு) தனித்தனியாக உருவாக்கினேன்
• [ ] நான் வண்ணத்தையும் இடத்தையும் மையக் கருப்பொருளிலிருந்து படிக்கச் செய்தேன், குறியீட்டில் அதை உட்பொதிக்கவில்லை.
• [ ] நான் ஆரம்பத்திலிருந்தே அணுகல்தன்மை லேபிள்களையும் மாறுபாட்டையும் விரும்பினேன்
• [ ] ஸ்கிரீன் ரீடரில் இருந்து அலங்கார கூறுகள் மறைக்கப்பட்டுள்ளன என்பதை நான் சரிபார்த்தேன்
• [ ] நான் உரைகளை தனித்தனியாக வைத்திருந்தேன், பல மொழிகளுக்கு தயாராக இருந்தேன்