આર્ટિફિશિયલ ઇન્ટેલિજન્સ સાથે ઇન્ટરફેસ ડિઝાઇન અને UI કોડ જનરેશન

નફો:

• હેતુ, ઘટક, ચાર સ્થિતિઓ (લોડિંગ/ખાલી/ભૂલ/પૂર્ણ), ડિઝાઇન સિસ્ટમ અને ઍક્સેસિબિલિટીના ક્રમમાં જેટપેક કમ્પોઝ અને સ્વિફ્ટયુઆઈ માટે મજબૂત ઈન્ટરફેસ કોડ બનાવવાની ક્ષમતા
• યોગ્ય લેબલીંગ, પર્યાપ્ત કોન્ટ્રાસ્ટ અને યોગ્ય સ્પર્શ સાથે શરૂઆતથી જ સુલભતા વ્યાખ્યાયિત કરીને તમામ વપરાશકર્તાઓ માટે ખુલ્લું ઇન્ટરફેસ ઉત્પન્ન કરવાની ક્ષમતા.
• કેન્દ્રીય થીમમાંથી રંગ અને જગ્યા વાંચીને સુસંગત, બહુ-ભાષા અને લાઇટ/ડાર્ક થીમ તૈયાર ઇન્ટરફેસ બનાવવાની ક્ષમતા

મોબાઇલ એપ્લિકેશનની સફળતા મોટાભાગે તેના યુઝર ઇન્ટરફેસ (UI — વપરાશકર્તા જુએ છે અને સ્પર્શે છે તે સ્ક્રીન) અને વપરાશકર્તા અનુભવ (UX — તેનો ઉપયોગ કરવો કેટલો સરળ અને આનંદપ્રદ છે) દ્વારા નક્કી કરવામાં આવે છે. વપરાશકર્તા ખરાબ કોડ જોતો નથી, પરંતુ પ્રથમ સેકન્ડમાં ખરાબ ઇન્ટરફેસ અનુભવે છે. AI ઇન્ટરફેસ વિકાસમાં બે શક્તિશાળી ભૂમિકાઓ ભજવે છે: એક તરફ, તે ડિઝાઇન વિચાર, પ્રવાહ અને ટેક્સ્ટ (UX લેખન) જનરેટ કરે છે; બીજી બાજુ, તે આ ડિઝાઇનને વર્કિંગ ઇન્ટરફેસ કોડમાં સીધી રીતે રૂપાંતરિત કરે છે. આ એકમમાં, અમે આધુનિક ઘોષણાત્મક ઇન્ટરફેસ ટૂલ્સ જેટપેક કમ્પોઝ (એન્ડ્રોઇડ) અને સ્વિફ્ટયુઆઇ (iOS) પર ધ્યાન કેન્દ્રિત કરીને AI સાથે ઝડપી, સુલભ અને સુસંગત ઇન્ટરફેસ કેવી રીતે બનાવવું તે શીખીશું. "ઘોષણાત્મક" નો અર્થ છે કે સ્ક્રીન કેવી રીતે દોરવી તે પગલું દ્વારા સમજાવવાને બદલે, તમે "આ પરિસ્થિતિમાં સ્ક્રીન આ રીતે દેખાવી જોઈએ" તેનું વર્ણન કરો છો; સાધન બાકીનું કરે છે.

ડિઝાઇનથી કોડ સુધી: યોગ્ય ક્રમ

AI ને "સુંદર સ્ક્રીન બનાવવા" કહેવું અસ્પષ્ટ છે કારણ કે "સુંદર" માપી શકાતું નથી. સારી ઇન્ટરફેસ જનરેશન આ ક્રમને અનુસરે છે:

1. હેતુ અને સામગ્રી. સ્ક્રીન શું કરે છે, તે કઈ માહિતી બતાવે છે, વપરાશકર્તા શું કરશે?
2. ઘટકોની સૂચિ. શીર્ષક, સૂચિ, બટન, ફોર્મ ફીલ્ડ જેવા ભાગો.
3. પરિસ્થિતિઓ. લોડ થઈ રહ્યું છે, ખાલી (કોઈ ડેટા નથી), ભૂલ, સંપૂર્ણ - ચાર મૂળભૂત સ્ક્રીન સ્થિતિઓ.
4. ડિઝાઇન સિસ્ટમ. રંગ, ટાઇપોગ્રાફી, અંતરના નિયમો; સામાન્ય રીતે મટિરિયલ 3 (Android) અથવા iOS ના માનવ ઇન્ટરફેસ માર્ગદર્શિકાઓનું પાલન કરે છે.
5. સુલભતા. સ્ક્રીન રીડર લેબલ્સ, પર્યાપ્ત કોન્ટ્રાસ્ટ, ટચ લક્ષ્ય કદ.
6. કોડ. આ બધું કહીને, કમ્પોઝેબલ અથવા સ્વિફ્ટયુઆઈ વ્યુ જનરેશન.

સૌથી વધુ વારંવાર છોડવામાં આવતું પગલું એ ત્રીજું પગલું છે. વિકાસકર્તાઓ ફક્ત "સંપૂર્ણ" સ્થિતિને ધ્યાનમાં લે છે; જ્યારે વાસ્તવિક એપ્લિકેશનમાં વપરાશકર્તા મોટે ભાગે "લોડિંગ" અને "ભૂલ" પરિસ્થિતિઓનો સામનો કરે છે. ચારેય રાજ્યોને AI પર પ્રિન્ટ કરવું એ મજબૂત ઈન્ટરફેસનું રહસ્ય છે.

ટીપ: પ્રોમ્પ્ટના અંતે "લોડિંગ, ખાલી, ભૂલ અને સંપૂર્ણ અલગથી જનરેટ કરો" ઉમેરો. આ એક વાક્ય તમારા ઇન્ટરફેસને વાસ્તવિક દુનિયા માટે તૈયાર બનાવે છે અને QA (ગુણવત્તા પરીક્ષણ) તબક્કામાં ભૂલોની સંખ્યામાં નોંધપાત્ર ઘટાડો કરે છે.

ઍક્સેસિબિલિટી બિન-વાટાઘાટપાત્ર છે

ઍક્સેસિબિલિટી - દ્રશ્ય, શ્રવણ અથવા મોટર વિકલાંગતા ધરાવતા વપરાશકર્તાઓ દ્વારા એપ્લિકેશનનો ઉપયોગ કરવાની ક્ષમતા - એક નૈતિક જવાબદારી અને સ્ટોર અને કાનૂની અપેક્ષા બંને છે. જો ઇચ્છા હોય તો AI સુલભ કોડ બનાવે છે; જો ઇચ્છિત ન હોય તો ટેગ રહિત, લો-કોન્ટ્રાસ્ટ ઇન્ટરફેસ પરત કરે છે. અંગૂઠાના ત્રણ નિયમો: દરેક ઇન્ટરેક્ટિવ ઘટકને સ્ક્રીન રીડર માટે અર્થપૂર્ણ લેબલ આપો (સામગ્રીનું વર્ણન / ઍક્સેસિબિલિટી લેબલ), ટેક્સ્ટ અને પૃષ્ઠભૂમિ વચ્ચે પર્યાપ્ત રંગ વિરોધાભાસ (ઓછામાં ઓછો 4.5:1 ગુણોત્તર), અને ઓછામાં ઓછા 48x48 dp/44x44 pt નું ટચ લક્ષ્ય આપો. AI ને આ બાબતો સ્પષ્ટ રીતે પૂછો.

સાવધાન: AI સુશોભિત ચિહ્નમાં લાંબો સુલભતા ટેગ પણ ઉમેરી શકે છે; આ સ્ક્રીન રીડર વપરાશકર્તાને બિનજરૂરી બકબકથી ડૂબી જાય છે. સંપૂર્ણ સુશોભન તત્વો "સુલભતાથી છુપાયેલા" હોવા જોઈએ (સ્ક્રીન રીડર દ્વારા છોડવાની મંજૂરી છે). ઉત્પાદિત લેબલોની સમીક્ષા કરો: અર્થપૂર્ણ બોલવા દો, સુશોભનને મૌન રહેવા દો.

સુસંગતતા: ડિઝાઇન સિસ્ટમ અને થીમ

વ્યવસાયિક એપ્લિકેશનો રેન્ડમ રંગો અને અંતરનો ઉપયોગ કરતી નથી; ડિઝાઇન સિસ્ટમ (રંગો, ફોન્ટ્સ, અંતર અને ઘટકોનો પ્રમાણભૂત સમૂહ) અનુસરે છે. જો તમે AI ને તમારા થીમના મૂલ્યો (મુખ્ય રંગ, ગૌણ રંગ, ખૂણાની ત્રિજ્યા, ટાઇપોગ્રાફી સ્કેલ) આપો છો, તો બધી સ્ક્રીનો સુસંગત દેખાશે. જો તમે નહીં કરો, તો દરેક સ્ક્રીન વાદળીના અલગ શેડનો ઉપયોગ કરશે અને એપ્લિકેશન અવ્યવસ્થિત દેખાશે. સૌથી કાર્યક્ષમ રીત એ છે કે પહેલા AI ને થીમ/ડિઝાઈન ટોકન્સ ફાઈલ જનરેટ કરવા માટે કહો, પછી બધી સ્ક્રીનને તે થીમ સાથે જોડો.

વિષય

નબળી અભિગમ

મજબૂત અભિગમ

રંગ

દરેક સ્ક્રીનને મેન્યુઅલી કલર કોડ કરો

સેન્ટ્રલ થીમ, થીમ પરથી સ્ક્રીન વાંચવામાં આવે છે

પરિસ્થિતિઓ

માત્ર "સંપૂર્ણ" સ્ક્રીન

લોડ થઈ રહ્યું છે/ખાલી/ભૂલ/પૂર્ણ ચાર સ્થિતિઓ

સુલભતા

પછી ઉમેર્યું

તે શરૂઆતથી જ દાવામાં વ્યાખ્યાયિત થયેલ છે

ટેક્સ્ટ

કોડમાં જડિત

અલગ સ્ત્રોત, બહુ-ભાષા તૈયાર

ત્રણ નાના કેસો

કેસ 1 - ખાલી કેસ સાચવવામાં આવ્યો. ન્યૂઝ એપ ટીમ પાસે AI પ્રિન્ટ વ્યક્તિગત સ્ક્રીન સ્ટેટ્સ હતી. "નિષ્ક્રિય સ્થિતિ" સ્ક્રીન માટે આભાર ("હજી સુધી કોઈ સમાચાર સાચવવામાં આવ્યા નથી"), વપરાશકર્તા પરીક્ષણમાં 70% સહભાગીઓએ એપ્લિકેશનને ખાલી સ્ક્રીન પર છોડી નથી; અગાઉના સંસ્કરણમાં, ખાલી સ્ક્રીન સફેદ રહી હતી અને વપરાશકર્તાઓએ વિચાર્યું હતું કે તે "તૂટેલી" હતી અને છોડી દીધી હતી. એક નાની નકલ રીટેન્શન રેટમાં વધારો કરે છે.

કેસ 2 - કોન્ટ્રાસ્ટ અસ્વીકાર. એક ટીમે એપ સ્ટોર પર આછા ગ્રે, બ્રાન્ડ રંગમાં ટેક્સ્ટ સાથે સ્ક્રીન સાથે અરજી કરી. એપલે નીચા કોન્ટ્રાસ્ટને કારણે સુલભતાના આધાર પર ચેતવણી જારી કરી હતી. જ્યારે AI ને "4.5:1 ઉપર ટેક્સ્ટ-બેકગ્રાઉન્ડ કોન્ટ્રાસ્ટ વધારવા" કહેવામાં આવ્યું, ત્યારે રંગો ઘાટા થઈ ગયા અને સમસ્યા હલ થઈ ગઈ. જો શરૂઆતથી જ વિનંતી કરવામાં આવી હોત તો વિલંબ થયો ન હોત.

કેસ 3 - સુશોભન લેબલ અવાજ. એક દૃષ્ટિહીન પરીક્ષકે અહેવાલ આપ્યો કે દરેક આભૂષણ આઇકોન (“લાઇન,” “ડોટ,” “શેડો”) AI-જનરેટેડ સ્ક્રીન પર મોટેથી વાંચવામાં આવે છે, જે સ્ક્રીનને બિનઉપયોગી બનાવે છે. જ્યારે સુશોભન તત્વો સુલભતાથી છુપાયેલા હતા ત્યારે સ્ક્રીન રીડરનો અનુભવ પ્રવાહી બની ગયો હતો. પાઠ: ઍક્સેસિબિલિટીનો અર્થ થાય છે "સાચા ટૅગ્સ", "ઘણા ટૅગ્સ" નહીં.

નબળા પ્રોમ્પ્ટ / મજબૂત પ્રોમ્પ્ટ

નબળા પ્રોમ્પ્ટ: "પ્રોફાઇલ સ્ક્રીન ડિઝાઇન કરો."

શક્તિશાળી પ્રોમ્પ્ટ: "iOS/SwiftUI માટે વપરાશકર્તા પ્રોફાઇલ સ્ક્રીન જનરેટ કરો. સામગ્રી: અવતાર, નામ, ઇમેઇલ, 'પ્રોફાઇલ સંપાદિત કરો' બટન, સેટિંગ્સ સૂચિ. સ્થિતિઓ: લોડિંગ (હાડપિંજર), ભૂલ (ફરી પ્રયાસ કરો બટન), સંપૂર્ણ. ડિઝાઇન: બિન-સામગ્રી, iOS HIG ને અનુરૂપ; સિસ્ટમના રંગો, ગતિશીલ પ્રકાર. દરેક ઍક્સેસિબિલિટી, ઍક્સેસિબિલિટી છુપાવો. ટચ ટાર્ગેટ મીન 44pt અલગ ફાઇલમાંથી થીમ વેલ્યુ વાંચો, પહેલા કમ્પોનન્ટ ટ્રી દોરો, પછી કોડ નિકાસ કરો."

નકલ કરી શકાય તેવા નમૂનાઓ

સ્ક્રીન જનરેશન ટેમ્પ્લેટ: "[પ્લેટફોર્મ/ટૂલ] માટે [સ્ક્રીન નામ] જનરેટ કરો. સામગ્રી: [તત્વો]. વપરાશકર્તા ક્રિયાઓ: [ક્રિયાઓ]. ચાર સ્થિતિઓ અલગથી જનરેટ કરો: લોડિંગ, ખાલી, ભૂલ, સંપૂર્ણ. ડિઝાઇન સિસ્ટમ: [મટીરિયલ 3 / iOS HIG], થીમ ટોકન્સમાંથી વાંચો. ઍક્સેસિબિલિટી, સ્ટાન્ડર્ડ = 4 > ટચ લેબ, સ્ટાન્ડર્ડ: 5.

થીમ/ડિઝાઇન સિસ્ટમ ટેમ્પલેટ:"મારી એપ્લિકેશન માટે કેન્દ્રીય થીમ વ્યાખ્યા તૈયાર કરો ([SwiftUI માં થીમ /a ડિઝાઇન ટોકન સ્ટ્રક્ચર કંપોઝ કરો]):- પ્રાથમિક રંગ [હેક્સ], સેકન્ડરી [હેક્સ], ભૂલનો રંગ, સપાટીનો રંગ- ટાઇપોગ્રાફી સ્કેલ (શીર્ષક, શરીર, વર્ણન) - અંતર સ્કેલ (4,8,16,24)- A કોર્નર સ્ટાન્ડર્ડ અને ડાર્ક લાઇટ સપોર્ટ."

ઍક્સેસિબિલિટી ઑડિટ નમૂનો:"ઍક્સેસિબિલિટી માટે આ સ્ક્રીન કોડ તપાસો:1) શું ત્યાં કોઈ ટૅગ ન કરેલા ઇન્ટરેક્ટિવ ઘટકો છે? 2) શું કોન્ટ્રાસ્ટ રેશિયો પર્યાપ્ત છે? 3) શું ટચ લક્ષ્યો પૂરતા પ્રમાણમાં મોટા છે? 4) શું સુશોભન તત્વો સ્ક્રીન રીડરથી છુપાયેલા છે? દરેક સમસ્યા માટે સુધારાઓ સૂચવો. [કોડ]"

કોડ ટેમ્પલેટ માટે ડિઝાઇન: "હું નીચેની ડિઝાઇનનું વર્ણન કરું છું: [સ્ક્રીન વર્ણન અથવા સ્ક્રીનશૉટ]. આને [કંપોઝ/SwiftUI] કોડમાં અનુવાદિત કરો. ડિઝાઇનમાં અંતર અને સંરેખણ સાચું રાખો, પરંતુ ચારેય સ્થિતિઓ ઉમેરો."

સામાન્ય ભૂલો

• ફક્ત સંપૂર્ણ પરિસ્થિતિ વિશે વિચારવું. મોટાભાગે વાસ્તવિક વપરાશકર્તા લોડિંગ/એરર સ્ક્રીન જુએ છે.
• કોડમાં રંગ અને જગ્યા એમ્બેડ કરવી. જો થીમ કેન્દ્રિય ન હોય, તો સુસંગતતા ખોવાઈ જાય છે અને જાળવણી મુશ્કેલ બને છે.
• છેલ્લા માટે ઍક્સેસિબિલિટી છોડીને. પાછળથી ઉમેરવું ખર્ચાળ છે; જો શરૂઆતથી વિનંતી કરવામાં આવે તો તે ખર્ચ-મુક્ત છે.
• ઓવરલેબલીંગ. સુશોભન તત્વો વાંચવાથી સ્ક્રીન રીડરના અનુભવમાં પણ ખલેલ પડે છે.
• કોડમાં ટેક્સ્ટ એમ્બેડ કરવું. જ્યારે બહુભાષી આધારની આવશ્યકતા હોય, ત્યારે દરેક સ્ક્રીનને મેન્યુઅલી બદલવી જરૂરી છે; પાઠો અલગ રાખો.
• સ્ક્રીનશોટમાંથી ચોક્કસ નકલની અપેક્ષા. AI ડિઝાઇન આશરે ઉત્પાદન કરે છે. Pixel ચોકસાઇ મેન્યુઅલી સેટ કરેલ છે.

સારાંશમાં

AI ઇન્ટરફેસ ઉત્પાદનમાં શક્તિશાળી છે, પરંતુ તેને માર્ગદર્શનની જરૂર છે. સાચો ક્રમ: હેતુ, ઘટકો, ચાર સ્થિતિઓ (લોડિંગ/ખાલી/ભૂલ/પૂર્ણ), ડિઝાઇન સિસ્ટમ, ઍક્સેસિબિલિટી, પછી કોડ. ઍક્સેસિબિલિટી બિન-વાટાઘાટપાત્ર છે અને તેનો અર્થ છે "સાચું લેબલ", "ઘણા લેબલ્સ" નહીં. સુસંગતતા માટે, કેન્દ્રીય થીમમાંથી રંગ અને અંતર વાંચો, તેને કોડમાં એમ્બેડ કરશો નહીં. મજબૂત ઇચ્છા શરૂઆતથી આ બધું વ્યાખ્યાયિત કરે છે; આમ, ઇન્ટરફેસ વાસ્તવિક દુનિયા, સ્ટોરની મંજૂરી અને બધા વપરાશકર્તાઓ માટે તૈયાર છે.

એપ્લિકેશન કાર્ય

સેટિંગ્સ સ્ક્રીન માટે "સ્ક્રીન જનરેશન ટેમ્પલેટ" નો ઉપયોગ કરીને, કંપોઝ અથવા SwiftUI કોડ માટે AI ને પૂછો અને ચારેય રાજ્યોની વિનંતી કરો. પછી તે જ કોડને "ઍક્સેસિબિલિટી ચેક ટેમ્પલેટ" વડે ચેક કરો. ઓછામાં ઓછા એક સુલભતા સુધારણા શોધો અને ઠીક કરો (ગુમ થયેલ લેબલ, લો કોન્ટ્રાસ્ટ અથવા નાના ટચ લક્ષ્ય) અને નોંધ કરો કે કઈ સ્થિતિ (લોડિંગ/ખાલી/ભૂલ) તમને લાગે છે કે વાસ્તવિક ઉપયોગમાં મોટાભાગે દેખાશે.

ચેકલિસ્ટ

• [ ] મેં પ્રોમ્પ્ટમાં ડિસ્પ્લેનો હેતુ અને ઘટકો સ્પષ્ટ કર્યા છે
• [ ] મારી પાસે ચાર અવસ્થાઓ (લોડિંગ/ખાલી/ભૂલ/પૂર્ણ) અલગથી જનરેટ કરવામાં આવી હતી
• [ ] મેં કેન્દ્રીય થીમ પરથી રંગ અને જગ્યા વાંચી છે, મેં તેને કોડમાં એમ્બેડ કરી નથી.
• [ ] મને શરૂઆતથી જ સુલભતા લેબલ્સ અને કોન્ટ્રાસ્ટ જોઈએ છે
• [ ] મેં ચકાસ્યું કે સુશોભન તત્વો સ્ક્રીન રીડરમાંથી છુપાયેલા છે
• [ ] મેં ગ્રંથોને અલગ રાખ્યા છે, બહુવિધ ભાષાઓ માટે તૈયાર છે