የበይነገጽ ዲዛይን እና የዩአይ ኮድ ማመንጨት ከአርቴፊሻል ኢንተለጀንስ ጋር — በሞባይል መተግበሪያ ልማት ውስጥ አርቲፊሻል ኢንተለጀንስ

ትርፍ፡

ለ Jetpack Compose እና SwiftUI እንደ ዓላማ፣ አካል፣ አራት ግዛቶች (መጫኛ/ባዶ/ስህተት/ሙሉ)፣ የንድፍ ስርዓት እና ተደራሽነት ጠንካራ የበይነገጽ ኮድ የማምረት ችሎታ።
ተደራሽነትን ከመጀመሪያው ጀምሮ በትክክለኛ መለያ፣ በቂ ንፅፅር እና ተገቢ ንክኪ በመለየት ለሁሉም ተጠቃሚዎች ክፍት የሆነ በይነገጽ የማምረት ችሎታ።
ከማዕከላዊ ጭብጥ ቀለም እና ቦታን በማንበብ ወጥ ፣ ባለብዙ ቋንቋ እና ቀላል / ጨለማ ገጽታ ዝግጁ በይነገጾችን የመፍጠር ችሎታ።

የሞባይል መተግበሪያ ስኬት በአብዛኛው የሚወሰነው በተጠቃሚው በይነገጹ (UI — ተጠቃሚው በሚያያቸው እና በሚነካቸው ስክሪኖች) እና የተጠቃሚ ተሞክሮ (UX — አጠቃቀሙ ምን ያህል ለስላሳ እና አስደሳች እንደሆነ) ነው። ተጠቃሚው መጥፎውን ኮድ አይመለከትም, ነገር ግን በመጀመሪያው ሰከንድ ውስጥ መጥፎውን በይነገጽ ይሰማዋል. AI በይነገጽ ልማት ውስጥ ሁለት ኃይለኛ ሚናዎችን ይጫወታል: በአንድ በኩል, የንድፍ ሃሳብ, ፍሰት እና ጽሑፍ (UX መጻፍ) ያመነጫል; በሌላ በኩል, ይህንን ንድፍ በቀጥታ ወደ የስራ በይነገጽ ኮድ ይለውጠዋል. በዚህ ክፍል በዘመናዊ ገላጭ በይነገጽ መሳሪያዎች Jetpack Compose (Android) እና SwiftUI (iOS) ላይ በማተኮር ከ AI ጋር ፈጣን፣ ተደራሽ እና ወጥነት ያለው በይነገጾችን እንዴት ማምረት እንደምንችል እንማራለን። "መግለጫ" ማለት ማያ ገጹን እንዴት እንደሚሳል ደረጃ በደረጃ ከማብራራት ይልቅ "ስክሪኑ በዚህ ሁኔታ ውስጥ እንደዚህ መሆን አለበት" ብለው ይገልጻሉ; መሣሪያው የቀረውን ይሠራል.

ከንድፍ ወደ ኮድ: ትክክለኛው ቅደም ተከተል

AI "ቆንጆ ስክሪን እንዲሰራ" መንገር ግልጽ ያልሆነ ነው ምክንያቱም "ቆንጆ" ሊለካ አይችልም. ጥሩ በይነገጽ ማመንጨት ይህንን ቅደም ተከተል ይከተላል

ዓላማ እና ይዘት. ስክሪኑ ምን ያደርጋል፣ ምን መረጃ ያሳያል፣ ተጠቃሚው ምን ያደርጋል?
የአካል ክፍሎች ዝርዝር። እንደ ርዕስ፣ ዝርዝር፣ አዝራር፣ የቅጽ መስክ ያሉ ክፍሎች።
ሁኔታዎች. በመጫን ላይ ፣ ባዶ (ምንም ውሂብ የለም) ፣ ስህተት ፣ ሙሉ - አራቱ መሰረታዊ የስክሪን ግዛቶች።
የንድፍ ስርዓት. ቀለም, የፊደል አጻጻፍ, የቦታ ደንቦች; በአጠቃላይ የቁስ 3 (አንድሮይድ) ወይም የአይኦኤስን የሰዎች በይነገጽ መመሪያዎችን ማክበር።
ተደራሽነት። የማያ ገጽ አንባቢ መለያዎች፣ በቂ ንፅፅር፣ የንክኪ ዒላማ መጠን።
ኮድ ይህን ሁሉ ከተናገረ በኋላ፣ Composable ወይም SwiftUI View generation።

በጣም በተደጋጋሚ የተዘለለ እርምጃ ሦስተኛው ነው. ገንቢዎች "ሙሉ" ሁኔታን ብቻ ግምት ውስጥ ያስገባሉ; በእውነተኛ አፕሊኬሽን ውስጥ ተጠቃሚው በአብዛኛው "መጫን" እና "ስህተት" ሁኔታዎችን ያጋጥመዋል. ሁሉንም አራቱን ግዛቶች ወደ AI ማተም የጠንካራ በይነገጽ ምስጢር ነው።

ጠቃሚ ምክር: በጥያቄው መጨረሻ ላይ "መጫን, ባዶ, ስህተት እና ሙሉ ለሙሉ ማመንጨት" ያክሉ. ይህ ነጠላ ዓረፍተ ነገር የእርስዎን በይነገጽ ለገሃዱ ዓለም ዝግጁ ያደርገዋል እና በ QA (የጥራት ሙከራ) ደረጃ ውስጥ ያሉትን ስህተቶች ብዛት በእጅጉ ይቀንሳል።

ተደራሽነት ለድርድር የማይቀርብ ነው።

ተደራሽነት - የማየት፣ የመስማት ወይም የሞተር እክል ባለባቸው ተጠቃሚዎች መተግበሪያን የመጠቀም ችሎታ - ሁለቱም የስነምግባር ሃላፊነት እና መደብር እና ህጋዊ ጥበቃ ነው። AI ከተፈለገ ተደራሽ ኮድ ያወጣል; ካልተፈለገ መለያ የሌለው ዝቅተኛ ንፅፅር ይመልሳል። ሶስት የአውራ ጣት ህጎች፡- ለእያንዳንዱ መስተጋብራዊ አካል ለስክሪኑ አንባቢ ትርጉም ያለው መለያ ይስጡ (የይዘት መግለጫ/ተደራሽነት መለያ)፣ በፅሁፍ እና ከበስተጀርባ በቂ የቀለም ንፅፅር (ቢያንስ 4.5፡1 ጥምርታ) እና ቢያንስ 48x48 dp/44x44 pt. እነዚህን ነገሮች በግልጽ AIን ይጠይቁ።

ጥንቃቄ፡ AI እንዲሁም ረጅም የተደራሽነት መለያ ወደ ጌጣጌጥ አዶ ማከል ይችላል። ይህ የስክሪን አንባቢ ተጠቃሚን አላስፈላጊ ጭውውት ያጨናንቀዋል። በትክክል የሚያጌጡ ክፍሎች "ከተደራሽነት የተደበቁ" መሆን አለባቸው (በስክሪን አንባቢ እንዲዘለል ተፈቅዶለታል)። የተሰሩትን መለያዎች ይገምግሙ፡ ትርጉም ያለው ይናገር፣ ጌጥ ዝም ይበል።

ወጥነት: የንድፍ ስርዓት እና ጭብጥ

ሙያዊ አፕሊኬሽኖች የዘፈቀደ ቀለሞችን እና ክፍተቶችን አይጠቀሙም; የንድፍ ስርዓት (መደበኛ የቀለም ስብስብ, ቅርጸ ቁምፊዎች, ክፍተት እና ክፍሎች) ይከተላል. የእርስዎን ጭብጥ እሴቶች (ዋና ቀለም ፣ ሁለተኛ ቀለም ፣ የማዕዘን ራዲየስ ፣ የፊደል አጻጻፍ ሚዛን) ከሰጡ ሁሉም ማያ ገጾች ወጥነት ባለው መልኩ ይወጣሉ። ካላደረጉት እያንዳንዱ ስክሪን የተለየ ሰማያዊ ጥላ ይጠቀማል እና መተግበሪያው የተዝረከረከ ይመስላል። በጣም ቀልጣፋው መንገድ በመጀመሪያ AI የገጽታ/ንድፍ ማስመሰያ ፋይል እንዲያመነጭ መጠየቅ እና ከዚያ ሁሉንም ማያ ገጾች ከዚያ ጭብጥ ጋር ማሰር ነው።

ርዕሰ ጉዳይ

ደካማ አቀራረብ

ጠንካራ አቀራረብ

ቀለም

ለእያንዳንዱ ማያ ገጽ በእጅ ቀለም ኮድ

ማዕከላዊ ጭብጥ፣ ከጭብጡ የተነበቡ ማያ ገጾች

ሁኔታዎች

"ሙሉ" ማያ ገጽ ብቻ

መጫን/ባዶ/ስህተት/ሙሉ አራት ግዛቶች

ተደራሽነት

በኋላ ተጨምሯል።

ከመጀመሪያው ጀምሮ በይገባኛል ጥያቄ ውስጥ ይገለጻል

ጽሑፍ

በኮድ ውስጥ የተካተተ

የተለየ ምንጭ፣ ባለብዙ ቋንቋ ዝግጁ

ሶስት ጥቃቅን ጉዳዮች

ጉዳይ 1 - ባዶ መያዣ ተቀምጧል. የዜና መተግበሪያ ቡድን የ AI ህትመት ግላዊ ስክሪን ነበረው። ለ "ስራ ፈት ሁኔታ" ማያ ("ገና ምንም ዜና አልተቀመጠም") ምስጋና ይግባውና በተጠቃሚ ሙከራ ውስጥ 70% ተሳታፊዎች መተግበሪያውን በባዶ ስክሪን ላይ አልተዉም; በቀደመው ስሪት ባዶው ስክሪን ነጭ ሆኖ ቆይቷል እና ተጠቃሚዎች "የተሰበረ" ብለው አስበው ወጥተዋል። ትንሽ ቅጂ የማቆየት መጠን ጨምሯል።

ጉዳይ 2 - ንፅፅር አለመቀበል. አንድ ቡድን አፕ ስቶር ላይ ስክሪኖች በብርሃን ግራጫ፣ የምርት ስም አመልክተዋል። አፕል በዝቅተኛ ንፅፅር ምክንያት በተደራሽነት ምክንያቶች ላይ ማስጠንቀቂያ ሰጥቷል። AI "ከ 4.5: 1 በላይ ያለውን የፅሁፍ ዳራ ንፅፅር እንዲጨምር" ሲነገራቸው, ቀለሞቹ ጨለማ ሆኑ እና ችግሩ ተፈቷል. ከመጀመሪያው የተጠየቀ ቢሆን ኖሮ ምንም መዘግየት አይኖርም ነበር.

ጉዳይ 3 - የጌጣጌጥ መለያ ድምጽ. ማየት የተሳነው ሞካሪ እንደዘገበው እያንዳንዱ የጌጣጌጥ አዶ ("መስመር""ነጥብ""ጥላ") በአይ-ፈጠራው ስክሪን ላይ ጮክ ብሎ ይነበባል፣ ይህም ማያ ገጹ ከጥቅም ውጪ እንዲሆን አድርጎታል። የጌጣጌጥ አካላት ከተደራሽነት በተደበቁበት ጊዜ የስክሪን አንባቢው ልምድ ፈሳሽ ሆነ። ትምህርት፡ ተደራሽነት ማለት “ትክክለኛዎቹ መለያዎች” ማለት እንጂ “ብዙ መለያዎች” ማለት አይደለም።

ደካማ ጥያቄ / ጠንካራ ጥያቄ

ደካማ ጥያቄ፡ "የመገለጫ ስክሪን ንድፍ።"

ኃይለኛ ጥያቄ፡ "የተጠቃሚ መገለጫ ስክሪን ለ iOS/SwiftUI ፍጠር። ይዘት፡ አምሳያ፣ ስም፣ ኢሜይል፣ 'መገለጫ አርትዕ' አዝራር፣ የቅንጅቶች ዝርዝር የተለየ ፋይል፣ በስክሪኑ ላይ የቀለም ኮድ አታስቀምጡ።

ሊገለበጡ የሚችሉ አብነቶች

የስክሪን ማመንጨት አብነት፡ "(የማያ ስም] ለ [መድረክ/መሳሪያ) ፍጠር። ይዘት፡ [ንጥረ ነገሮች]። የተጠቃሚ እርምጃዎች፡ [ድርጊት]። አራት ግዛቶችን ለየብቻ ፍጠር፡ መጫን፣ ባዶ፣ ስህተት፣ ሙሉ

ገጽታ/ንድፍ የስርዓት አብነት፡ "ለእኔ መተግበሪያ ማዕከላዊ ጭብጥ ፍቺን አምርት ([ጭብጥ ፃፍ / የንድፍ ማስመሰያ መዋቅር በSwiftUI]): ቀዳሚ ቀለም [ሄክስ]፣ ሁለተኛ ደረጃ [ሄክስ]፣ የስህተት ቀለም፣ የገጽታ ቀለም- የጽሕፈት ልኬት (ርዕስ፣ አካል፣ መግለጫ)- የቦታ ልኬት (4,8,16,24)- የማዕዘን ራዲየስ ደረጃን ይደግፉ ብርሃን እና ጨለማውን ይጨምሩ።"

የተደራሽነት ኦዲት አብነት፡"ተደራሽነት ይህንን ስክሪን ኮድ ይመልከቱ፡1) ምንም መለያ ያልተሰጣቸው በይነተገናኝ አካላት አሉ?2) የንፅፅር ሬሾዎች በቂ ናቸው?3) የንክኪ ኢላማዎች በቂ ናቸው?4) የጌጣጌጥ አካላት ከማያ ገጹ አንባቢ ተደብቀዋል? ለእያንዳንዱ እትም ማስተካከያዎችን ጠቁም። [ኮድ]"

አብነት ወደ ኮድ ንድፍ፡ "የሚከተለውን ንድፍ እገልጻለሁ፡ [የማሳያ መግለጫ ወይም ቅጽበታዊ ገጽ እይታ]። ይህንን ወደ [Compose/SwiftUI] ኮድ መተርጎም። ክፍተት እና አሰላለፍ ከንድፍ ጋር ትክክል እንደሆነ አቆይ፣ ነገር ግን አራቱንም ግዛቶች አክል።"

የተለመዱ ስህተቶች

ስለ ሙሉ ሁኔታው ማሰብ ብቻ ነው. ብዙ ጊዜ እውነተኛው ተጠቃሚ የመጫኛ/የስህተት ስክሪን ያያል::
በኮድ ውስጥ ቀለም እና ቦታን መክተት። ጭብጡ ማዕከላዊ ካልሆነ, ወጥነት ይጠፋል እና ጥገና አስቸጋሪ ይሆናል.
ተደራሽነትን ለመጨረሻ ጊዜ በመተው ላይ። በኋላ ላይ መጨመር ውድ ነው; ከመጀመሪያው ከተጠየቀ ከክፍያ ነጻ ነው.
ተደራራቢ። የጌጣጌጥ ክፍሎች መነበብ የስክሪን አንባቢን ልምድ ያበላሻል።
በኮድ ውስጥ ጽሑፍን መክተት። የብዙ ቋንቋ ድጋፍ በሚያስፈልግበት ጊዜ እያንዳንዱን ማያ ገጽ በእጅ መለወጥ አስፈላጊ ነው; ጽሑፎችን ለየብቻ ያስቀምጡ።
ከቅጽበታዊ ገጽ እይታው ትክክለኛውን ቅጂ በመጠበቅ ላይ። AI ንድፍ በግምት ያስገኛል. የፒክሰል ትክክለኛነት በእጅ ተዘጋጅቷል።

በማጠቃለያው

AI በይነገጽ ምርት ውስጥ ኃይለኛ ነው, ግን መመሪያ ያስፈልገዋል. ትክክለኛው ቅደም ተከተል: ዓላማ, አካላት, አራት ግዛቶች (መጫን / ባዶ / ስህተት / ሙሉ), የንድፍ ስርዓት, ተደራሽነት, ከዚያም ኮድ. ተደራሽነት ለድርድር የማይቀርብ ሲሆን ትርጉሙም "ትክክለኛው መለያ" እንጂ "ብዙ መለያዎች" ማለት አይደለም። ለ ወጥነት፣ ቀለም እና ክፍተት ከማዕከላዊ ጭብጥ አንብብ፣ በኮድ ውስጥ አታስቀምጠው። ጠንካራው ፈቃድ ይህን ሁሉ ከመጀመሪያው ይገልፃል; ስለዚህ, በይነገጹ ለእውነተኛው ዓለም, ለመደብር ማጽደቅ እና ለሁሉም ተጠቃሚዎች ዝግጁ ነው.

የመተግበሪያ ተግባር

ለቅንጅቶች ስክሪን "የማያ ትውልድ አብነት" በመጠቀም AI ለ Compose ወይም SwiftUI ኮድ ይጠይቁ እና አራቱንም ግዛቶች ይጠይቁ። ከዚያ ተመሳሳይ ኮድ በ "የተደራሽነት ማረጋገጫ አብነት" ያረጋግጡ። ቢያንስ አንድ የተደራሽነት ማሻሻያ (የጎደለ መለያ፣ ዝቅተኛ ንፅፅር ወይም ትንሽ የንክኪ ዒላማ) ፈልጉ እና ያስተካክሉ እና የትኛው ሁኔታ (የመጫኛ/ባዶ/ስህተት) በእውነተኛ አገልግሎት ላይ በብዛት ይታያል ብለው ያስባሉ።

የማረጋገጫ ዝርዝር

[ ] የማሳያውን ዓላማ እና አካላት በጥያቄው ውስጥ ግልፅ አድርጌአለሁ።
[] አራቱ ግዛቶች (መጫኛ/ባዶ/ስህተት/ሙሉ) በተናጠል እንዲፈጠሩ አድርጌ ነበር።
[ ] ቀለሙን እና ቦታውን ከማዕከላዊው ጭብጥ እንዲነበብ አድርጌያለሁ, በኮዱ ውስጥ አላስገባሁትም.
[ ] የተደራሽነት መለያዎችን እና ንፅፅርን ከመጀመሪያው እፈልግ ነበር።
[] የጌጣጌጥ ክፍሎች ከማያ ገጹ አንባቢ እንደተደበቁ አረጋግጣለሁ።
[ ] ጽሑፎቹን ለብዙ ቋንቋዎች ተዘጋጅተው እንዲለያዩ አድርጌያቸዋለሁ