AI በመጠቀም ጥሩ መልክ ያለው መተግበሪያ እንዴት መንደፍ እንደሚቻል

ከ AI ጥሩ መልክ ያለው መተግበሪያ ለማግኘት «ጥሩ መልክ ይስጠው» ከማለት ይልቅ ዲዛይነር የሚፈልገውን ነገር ይስጡት፦ የሚወዷቸውን ሁለት ወይም ሦስት ማጣቀሻዎች፣ የተሰየመ የንድፍ አቅጣጫ እና ለፊደል፣ ቀለምና ክፍተት ግልጽ ህጎች። ከዚያ አንድ ገጽ ይገንቡ፣ ትክክል እስኪሆን ያስተካክሉት፣ እና AI ተመሳሳዩን ስርዓት በሌሎቹ ገጾች ላይ እንዲተገብር ያድርጉ። አብዛኛው «የ AI መልክ» የሚመጣው ግልጽ ባልሆኑ ጥያቄዎች ላይ አማካይ መልስ ሲሰጥ ነው፤ የተወሰነ ግብዓት ደግሞ የተወሰነ ንድፍ ይሰጣል።

ለምን AI ንድፎች ተራ ይመስላሉ

AI «ዘመናዊ፣ ንጹህ የ SaaS ዳሽቦርድ» ብለው ከጠየቁት፣ ያየውን የእያንዳንዱን ዳሽቦርድ ስታቲስቲካዊ መሃል ይሰጥዎታል፦ ተመሳሳይ ሳንስ-ሴሪፍ ፊደል፣ ከሐምራዊ ወደ ሰማያዊ የሚለወጥ ቅልመት፣ ለስላሳ ጥላ ያላቸው ክብ ካርዶች፣ በክበብ ውስጥ የተቀመጡ አዶዎች እና መሃል ላይ «የሥራዎ ፍሰት ቀላል ሆኗል» የሚል ዋና ክፍል። ከእነዚህ ምርጫዎች ውስጥ አንዳቸውም ስህተት አይደሉም። ችግሩ ግን አንዳቸውም ለምርትዎ የተመረጡ አለመሆናቸው ነው።

ጥሩ ንድፍ በአብዛኛው ውሳኔዎች ናቸው። ሥራዎ መተግበሪያውን ባህሪ የሚሰጡ ጥቂት ውሳኔዎችን ማድረግ ነው፤ ቀሪዎቹን ሺዎች ትናንሽ ውሳኔዎች ደግሞ AI በወጥነት እንዲያደርግ ይተዉት።

ደረጃ 1፡ ከመጠየቅዎ በፊት ማጣቀሻዎችን ይሰብስቡ

ለምርትዎ መልክ የሚስማሙ ከሁለት እስከ አራት ማጣቀሻዎችን ለመሰብሰብ ሃያ ደቂቃ ይስጡ፤ መተግበሪያዎች ወይም ድረ-ገጾች ሊሆኑ ይችላሉ። ጥሩ ምንጮች ታዳሚዎችዎ አስቀድመው የሚጠቀሙባቸው ምርቶች፣ የንድፍ ጋለሪዎች እና ተዛማጅ መስኮች ኩባንያዎች ድረ-ገጾች ናቸው።

ለእያንዳንዱ ማጣቀሻ የሚወዱትን ምን እንደሆነ በቀላል ቃላት ይጻፉ፦

• «ብዙ ነጭ ክፍተት፣ ይዘት ጠባብ ዓምድ ውስጥ፣ ከትልልቅ ቁጥሮች በላይ ትናንሽ ግራጫ መለያዎች።»
• «ቀጫጭን መስመሮች ያሏቸው ጥቅጥቅ ሰንጠረዦች፣ የጥላ ካርድ የሌለ፣ ለድርጊቶች አንድ ዋና ቀለም።»
• «ትልልቅ ሰሪፍ ርዕሶች፣ ሞቅ ያለ ነጭ-ያልሆነ ዳራ፣ ከምስል ይልቅ ፎቶግራፍ።»

ከዚያ መግለጫዎቹን ለ AI ያስረክቡ፤ መሳሪያዎ ምስሎችን የሚቀበል ከሆነ ስክሪንሾቶቹን ያያይዙ። ከምርት ይልቅ ከባህሪያቱ ያነሳሱ፦ የሌላ ኩባንያን አቀማመጥ፣ ብራንድ ወይም ጽሑፍ በሙሉ መቅዳት ሕጋዊ እና የታማኝነት ስጋት ነው።

ደረጃ 2፡ የንድፍ አቅጣጫ ይምረጡ እና ይሰይሙ

አቅጣጫ ማለት የመልክና ስሜቱ አጭር መግለጫ ነው። ለ AI ለእያንዳንዱ ውሳኔ ማጣሪያ ይሰጠዋል። በደንብ የሚሠሩ አንዳንዶች፦

በመጀመሪያው ጥያቄ ውስጥ መተግበሪያው ለማን እንደሆነ ጋር አብሮ ያስገቡት፦

ለገለልተኛ የዮጋ ስቱዲዮ የቦታ ማስያዣ መተግበሪያ ገንባ። የንድፍ አቅጣጫ፦ ረጋ ያለና አነስተኛ፣ እንደታተመ የስቱዲዮ መርሃ ግብር። ሞቅ ያለ ነጭ-ያልሆነ ዳራ፣ ወደ ጥቁር የቀረበ ጽሑፍ፣ ለአዝራሮችና ለተመረጡ ሁኔታዎች አንድ ደብዘዝ ያለ የሳር-አረንጓዴ አክሰንት። ለርዕሶች ሰሪፍ፣ ለዋና ጽሑፍ ንጹህ ሳንስ-ሴሪፍ። ለጋስ ክፍተት፣ ቅልመት የለም፣ ጥላ የለም፣ ኢሞጂ የለም። በመጀመሪያ ለሞባይል።

ደረጃ 3፡ ህጎቹን ይወስኑ — ፊደል፣ ቀለምና ክፍተት

እነዚህ ሦስቱ አብዛኛውን የእይታ ጥራት ይይዛሉ። በግልጽ መግለጻቸው ልታደርጉት የምትችሉት ትልቁ ማሻሻያ ነው።

ፊደል

• አንድ ወይም ሁለት የፊደል ቅርጾች። የርዕስ ፊደልና የዋና ጽሑፍ ፊደል፣ ወይም በብዙ ውፍረቶች አንድ ቤተሰብ።
• የፊደል መጠን ስብስብ። በጥቂት መጠኖች ብቻ ተመሳሳይ ማድረግ፣ ለምሳሌ 14፣ 16፣ 20፣ 28 እና 40 px፤ እያንዳንዱ ክፍል በፈለገው መጠን አይምረጥ።
• ለማንበብ ቀላል ዋና ጽሑፍ። በድረ-ገጽ ላይ ወደ 16 px አካባቢ፣ የመስመር ከፍታ ወደ 1.5 አካባቢ፣ ለረዥም ጽሑፍ የመስመር ርዝመት ከ60 እስከ 75 ቁምፊዎች።
• ተዋረድ በውፍረትና በመጠን፣ በቀለም አይደለም። ርዕሶች ወፍራምና ትልቅ፤ ተጨማሪ ጽሑፍ ትንሽና ለስላሳ ግራጫ።

ቀለም

• በአብዛኛው ገለልተኛ ቀለሞች። ዳራዎች፣ ወለሎች፣ ድንበሮችና የጽሑፍ ግራጫዎች ብዙውን ሥራ ይሠራሉ።
• ለድርጊቶችና ለተመረጡ ሁኔታዎች አንድ አክሰንት ቀለም። ሁለተኛ የሚጠቀሙት ግልጽ ሥራ ሲኖረው ብቻ ነው።
• የትርጉም ቀለሞች ለስኬት፣ ለማስጠንቀቂያና ለስህተት፤ ለእነዚያ ብቻ ይጠቀሙባቸው።
• ንፅፅር። WCAG 2 ለተለመደ ዋና ጽሑፍ ቢያንስ 4.5:1 እና ለትልቅ ጽሑፍ 3:1 የንፅፅር ጥምርታ ይፈልጋል። በነጭ ላይ ቀላል ግራጫ ጽሑፍ ብዙ ጊዜ አይሳካም፤ AI እንዲፈትሽ ይጠይቁት።
• የሌሊት ሁነታ፣ ከፈለጉ፣ ያለ ዓላማ ከመገልበጥ ይልቅ በግልጽ ይንደፉት።

ክፍተትና አቀማመጥ

• የክፍተት ስኬል እንደ 4፣ 8፣ 12፣ 16፣ 24፣ 32፣ 48፣ 64 px። ሁሉም በእሱ ላይ ይስተካከላል።
• አሰላለፍ። ጠርዞች ይሰለፋሉ፤ ይዘት በፍርግርግ ላይ ወይም በወጥ ከፍተኛ ስፋት ዓምድ ውስጥ ይቀመጣል።
• ቅርበት። ተዛማጅ ነገሮች ተቀራርበው፣ ያልተዛመዱ ደግሞ ይርቃሉ። ይህ አንድ ሕግ አብዛኛውን የተጨናነቁ ገጾችን ያስተካክላል።
• ያነሱ መያዣዎች። ሁሉም ነገር ካርድ አያስፈልገውም። ድንበሮች፣ መስመሮች እና ነጭ ክፍተት ይዘትን በጸጥታ ሊያደራጁ ይችላሉ።

ስርዓቱን አንድ ጊዜ የሚያዘጋጅ ጥያቄ፦

ተጨማሪ ገጾችን ከመገንባትዎ በፊት ትንሽ የንድፍ ስርዓት አዘጋጅ እና በሁሉም ቦታ ተጠቀምበት፦ የፊደል ስኬል 14/16/20/28/40 px፣ የዋና ጽሑፍ የመስመር ከፍታ 1.5፣ የክፍተት ስኬል 4/8/12/16/24/32/48 px፣ ከነጭ-ቅርብ እስከ ጥቁር-ቅርብ ገለልተኛ ቀለሞች፣ ለዋና ድርጊቶች ብቻ አንድ አክሰንት ቀለም (#3F6B5A)፣ ቀይ ለስህተቶች ብቻ። አዝራሮች፣ ግብዓቶችና ካርዶች አንድ ዓይነት የጠርዝ ክብነት ይጋሩ። ሁሉም ጽሑፍ የWCAG AA ንፅፅር ማሟላቱን ፈትሽ።

በኮድ-ተኮር ገንቢ ውስጥ ይህ ብዙ ጊዜ የዲዛይን ቶከኖች ይሆናል፤ CSS ተለዋዋጮች ወይም የTailwind ገጽታ። ይህም ማለት ወደፊት ለውጦች በአንድ ቦታ ይደረጋሉ ማለት ነው።

ደረጃ 4፡ መጀመሪያ አንድ ገጽ በትክክል ይገንቡ

አሥራ ሁለት ገጾችን ወዲያውኑ አትፍጠሩ ከዚያ ሁሉንም ለማስተካከል አትሞክሩ። ተጠቃሚዎች በብዛት የሚያዩትን ገጽ ይምረጡ — ብዙ ጊዜ ዳሽቦርዱ ወይም ዋናው ዝርዝር — እና ትክክል እስኪሆን ድረስ ይድገሙት። ከዚያ፦

ዳሽቦርዱን ለሌሎቹ ገጾች ሁሉ ማጣቀሻ አድርገው ይጠቀሙ፦ ተመሳሳይ ራስጌ፣ ክፍተት፣ የፊደል መጠኖች፣ የአዝራር ቅጦችና የሰንጠረዥ ቅጥ። የቅንብሮችና የቀጠሮዎች ገጾችን ከእሱ ጋር እንዲመሳሰሉ ያዘምኑ።

የተጠናቀቀ ማጣቀሻ ገጽ ጣዕምዎን ከማንኛውም ቅጽል በበለጠ ይገልጻል።

ደረጃ 5፡ በትናንሽና ግልጽ ጥያቄዎች ይድገሙ

ለ AI የሚሰጡት ግብረ-መልስ ለጁኒየር ዲዛይነር ከሚሰጥ ጋር ይመሳሰላል፦ የተወሰነ፣ በአንድ ጊዜ አንድ ክፍል፣ እና ምን እንደሚቀር ግልጽ።

ሁልጊዜ የሚቆየውን ጨምሩ — «ሁሉም መንገዶች፣ ጽሑፍና ባህሪያት እንዳሉ ይቆዩ» — ስለዚህ የእይታ ለውጡ ተግባራትን በጸጥታ እንዳያስወግድ። እና ለቀጣዩ ጥያቄ ከመሄድዎ በፊት እያንዳንዱን ለውጥ በስልክ መጠን ስክሪን ላይ ይፈትሹ፤ ለትናንሽ ስክሪኖች ጥሩ ምን እንደሚመስል ለማየት ለሞባይል ተስማሚ የድረ-ገጽ መተግበሪያ እንዴት እንደሚገነባ ይመልከቱ።

ደረጃ 6፡ ጥሩን ከተራ የሚለዩ ዝርዝሮች

አወቃቀሩ ትክክል ከሆነ በኋላ እነዚህ ትናንሽ ነገሮች መተግበሪያን ተጠናቅቆ እንዲመስል ያደርጋሉ፦

• ባዶ ሁኔታዎች። ምንም ውሂብ የሌለው አዲስ ተጠቃሚ የሚያየው፦ አጭር ማብራሪያና አንድ ግልጽ ድርጊት፣ ባዶ ሰንጠረዥ አይደለም።
• የመጫኛ ሁኔታዎች። ከይዘቱ ቅርጽ ጋር የሚመሳሰሉ አጽሞች፣ በየቦታው ተሽከርካሪ ሳይሆን።
• የስህተት ሁኔታዎች። ስህተቱን ከሚያመጣው መስክ ቀጥሎ ግልጽ ቋንቋ ያለው መልዕክት።
• ሲያንዣብቡ፣ ሲያተኩሩ እና ሲጫኑ ያሉ ሁኔታዎች በእያንዳንዱ ሊነካ በሚችል ነገር ላይ — የትኩረት ቀለበቶች ለቁልፍ ሰሌዳ ተጠቃሚዎች ይጠቅማሉ።
• እውነተኛ ይዘት። «Lorem ipsum» እና «John Doe»ን በእውነተኛ ጽሑፍና ውሂብ ይተኩ፤ ቦታ ያዥ ይዘት የአቀማመጥ ችግሮችን ይደብቃል።
• ከአንድ ስብስብ የመጡ አዶዎች፣ በአንድ ወይም ሁለት መጠኖች፣ ወጥ የሆነ የመስመር ውፍረት ያላቸው።
• ዓላማ ያላቸው ምስሎች። የምርትዎ፣ የቦታዎ ወይም የሰዎችዎ እውነተኛ ፎቶዎች ከአጠቃላይ የክምችት ምስል ይበልጣሉ። የክምችት ወይም የተፈጠሩ ምስሎችን ከተጠቀሙ ወጥ ዘይቤ ይያዙ።
• ጽሑፍ። አጭር፣ ግልጽ መለያዎች («ክፍል ያዝ»፣ «ይላክ» አይደለም) ከማንኛውም የቀለም ምርጫ በላይ የተገነዘበውን ጥራት ያሻሽላሉ።

የተለመዱ ስህተቶች

• ሁሉንም በአንድ ጥያቄ ድጋሚ መንደፍ። ትላልቅ ድጋሚ ጽሑፎች ወደ ኋላ መመለስ ያመጣሉ። ገጽ በገጽ ይሂዱ።
• በጣም ብዙ የአክሰንት ቀለሞች። ሁሉ ነገር ከደመቀ ምንም አይደመቅም።
• ሁሉን ማዕከል ማድረግ። መሃል ላይ የተቀመጠ ጽሑፍ ከርዕስ ባሻገር ለማንበብ ያስቸግራል፤ አብዛኛውን ይዘት ወደ ግራ አሰልፉ።
• ትንሽ፣ ዝቅተኛ ንፅፅር ያለው ጽሑፍ በትልቅ ሞኒተር ላይ የሚያምር የሚመስል ግን በፀሐይ ብርሃን በስልክ ላይ የማይነበብ።
• ተዋረድን ከማስቀደም ጌጥ። ቅልመቶችና ጥላዎች በጣም አስፈላጊው ድርጊት የማይታይበትን ገጽ ሊያስተካክሉ አይችሉም።
• ዋና ገጹን ችላ ማለት። ለብዙ ምርቶች የመጀመሪያው ግንዛቤ ነው፤ ልወጣ የሚያመጣ ዋና ገጽ እንዴት እንደሚገነባ ይመልከቱ።

ከዲዛይን ውጪ ያሉ ተጨማሪ የጥያቄ ቅጦች ከፈለጉ፣ ለ AI መተግበሪያ ገንቢዎች ጥያቄዎችን እንዴት መጻፍ እንደሚቻል ያንብቡ። ሥራዎ ራሱ ምርቱ ከሆነ — የንድፍ ወይም የፎቶግራፍ ፖርትፎሊዮ — ፖርትፎሊዮ ድረ-ገጽ እንዴት እንደሚገነባ በአቀራረብ ላይ ጠለቅ ብሎ ይሄዳል።

በ Mythex መንደፍ

በ Mythex ንድፉን በውይይት ውስጥ ይገልጻሉ፣ በቀጥታ ቅድመ-እይታ ውስጥ ያዩታል፣ እና ከሚቀጥለው ለውጥ በፊት የስልክ መጠኑን ፍሬም ይፈትሹታል። ሰነዶቹ ለዚህ አጭር ቅጦች አሏቸው፦ ንድፍና UI ጥያቄዎች ምን እንደሚቀየር እና ምን እንደሚቆይ ለመግለጽ፣ እና UIዎን እንደገና ዲዛይን ማድረግ ባህሪያትን ሳያጡ ገጽ በገጽ ለማደስ። Mythex በውይይት ውስጥ የክምችት ፎቶዎችን መፈለግ ወይም ምስል መፍጠርም ይችላል — ዋና ምስል፣ ዳራ፣ የማጋሪያ ምስል — እና ሲጠይቁ በመተግበሪያው ውስጥ ያስቀምጠዋል። ሂደት ከተሳሳተ ከእሱ በፊት ወዳለው የማረጋገጫ ነጥብ ይመለሱ። ከምንም ከመጀመር የነባር ንድፍ ቢወዱ አብነቶችን ይመልከቱ።

ጥያቄዎች