Jinsi ya Kubuni App Nzuri Kwa Kutumia AI

Ili kupata app nzuri kutoka kwa AI, acha kuomba "ifanye ionekane nzuri" na anza kumpa kile ambacho mbunifu angehitaji: mifano miwili au mitatu unayoipenda, mwelekeo wa muundo ulio na jina, na kanuni madhubuti za herufi, rangi na nafasi. Kisha jenga skrini moja, uirekebishe mpaka iwe sawa, na mwambie AI atumie mfumo uleule kila mahali pengine. Sehemu kubwa ya "mwonekano wa AI" hutokana na maagizo yasiyo wazi yanayozaa majibu ya wastani; maelezo mahususi yanazaa muundo mahususi.

Kwa nini miundo ya AI huonekana ya kawaida

Ukimwomba AI "dashibodi ya kisasa, safi ya SaaS", atakupa wastani wa dashibodi zote alizowahi kuona: fonti ile ile ya sans-serif, gradient ya zambarau hadi bluu, kadi zenye kivuli laini, aikoni za duara kama emoji, na hero ya katikati inayosema "Kazi yako, imerahisishwa". Hakuna chaguo moja lenye kosa. Tatizo ni kwamba hakuna lililochaguliwa kwa ajili ya bidhaa yako.

Muundo mzuri ni maamuzi kwa kiasi kikubwa. Kazi yako ni kufanya maamuzi machache yanayoipa app tabia, na kumruhusu AI afanye maelfu ya madogo kwa uthabiti.

Hatua ya 1: Kusanya mifano kabla ya kuomba

Tumia dakika ishirini kukusanya mifano miwili hadi minne — app au tovuti ambazo mwonekano wake unafaa bidhaa yako. Vyanzo vizuri ni bidhaa ambazo hadhira yako tayari inazitumia, mikusanyiko ya muundo, na tovuti za kampuni za sekta zinazokaribiana.

Kwa kila moja, andika unachopenda kwa maneno rahisi:

• "Nafasi nyingi nyeupe, maudhui kwenye safu nyembamba, lebo ndogo za kijivu juu ya namba kubwa."
• "Jedwali zenye msongamano na mistari myembamba, bila vivuli vya kadi, rangi moja ya lafudhi kwa vitendo."
• "Vichwa vikubwa vya serif, mandharinyuma ya rangi ya krimu, picha badala ya michoro."

Kisha pitisha maelezo hayo kwa AI, na ambatisha picha za skrini ikiwa zana yako inakubali picha. Chukua msukumo kutoka kwa sifa, si bidhaa yenyewe: kunakili mpangilio, chapa au maandishi ya kampuni nyingine kwa ukamilifu ni hatari ya kisheria na pia inaharibu uaminifu wako.

Hatua ya 2: Chagua mwelekeo wa muundo na uupe jina

Mwelekeo ni maelezo mafupi ya hisia ya bidhaa. Unatoa kichujio kwa AI kwa kila uamuzi anaofanya. Baadhi yanayofanya kazi vizuri:

Weka hilo kwenye ombi lako la kwanza, pamoja na app hii ni kwa ajili ya nani:

Jenga app ya kuweka miadi kwa studio huru ya yoga. Mwelekeo wa muundo: tulivu na rahisi, kama ratiba iliyochapishwa ya studio. Mandharinyuma ya krimu, maandishi karibu meusi, lafudhi moja ya kijani-sage iliyofifia kwa vitufe na hali zilizochaguliwa. Serif kwa vichwa, sans-serif safi kwa maandishi ya kawaida. Nafasi pana, bila gradient, bila vivuli, bila emoji. Mobile-first.

Hatua ya 3: Weka kanuni — herufi, rangi na nafasi

Hivi vitatu vinabeba ubora mwingi wa kuona. Kuwa wazi kuhusu hivi ni uboreshaji mmoja mkubwa unaoweza kufanya.

Herufi

• Aina moja au mbili za herufi. Fonti ya vichwa na fonti ya maandishi, au familia moja katika uzito kadhaa.
• Kipimo cha ukubwa wa herufi. Ukubwa kadhaa unaotumika kwa uthabiti — kwa mfano 14, 16, 20, 28 na 40 px — badala ya kila kipengele kuchagua chake.
• Maandishi ya kusomeka. Takriban 16 px kwenye wavuti, urefu wa mstari wa karibu 1.5, na urefu wa mstari wa herufi 60–75 kwa maandishi marefu.
• Umuhimu kupitia uzito na ukubwa, si rangi. Vichwa vinene na vikubwa zaidi; maandishi ya pili madogo na ya kijivu laini zaidi.

Rangi

• Hasa rangi zisizo na upande. Mandharinyuma, nyuso, mipaka na vivuli vya kijivu vya maandishi ndivyo vinavyofanya kazi nyingi.
• Rangi moja ya lafudhi kwa vitendo na hali zilizochaguliwa. Ya pili tu ikiwa ina kazi wazi.
• Rangi za maana kwa mafanikio, onyo na hitilafu — na zitumike kwa hizo tu.
• Utofauti. WCAG 2 inataka uwiano wa utofauti wa angalau 4.5:1 kwa maandishi ya kawaida na 3:1 kwa maandishi makubwa. Maandishi ya kijivu chepesi juu ya nyeupe mara nyingi hayakidhi; muombe AI akague.
• Hali ya giza, ukiitaka, iwe imebuniwa kwa makusudi badala ya kugeuzwa tu.

Nafasi na mpangilio

• Kipimo cha nafasi kama 4, 8, 12, 16, 24, 32, 48, 64 px. Kila kitu kinakaa kwenye kipimo hicho.
• Mpangilio. Kingo zinapangana; maudhui yanakaa kwenye gridi au safu ya upana wa juu thabiti.
• Ukaribu. Vitu vinavyohusiana viwe karibu, visivyohusiana viwe mbali zaidi. Kanuni hii moja inarekebisha skrini nyingi zilizojaa.
• Vyombo vichache. Si kila kitu kinahitaji kadi. Mipaka, mistari ya kutenganisha na nafasi nyeupe mara nyingi hupanga maudhui kwa utulivu zaidi.

Maagizo yanayoweka mfumo mara moja:

Kabla ya kujenga skrini zaidi, weka mfumo mdogo wa muundo na uutumie kila mahali: kipimo cha herufi 14/16/20/28/40 px, urefu wa mstari wa maandishi 1.5, kipimo cha nafasi 4/8/12/16/24/32/48 px, rangi zisizo na upande kutoka nyeupe karibu hadi nyeusi karibu, rangi moja ya lafudhi (#3F6B5A) kwa vitendo vikuu pekee, na nyekundu kwa hitilafu pekee. Vitufe, sehemu za kuingiza na kadi zishiriki radius moja ya mipaka. Hakikisha maandishi yote yanakidhi WCAG AA ya utofauti.

Kwenye zana inayoelewa msimbo, hili kwa kawaida hugeuka kuwa design tokens — CSS variables au theme ya Tailwind — jambo linalomaanisha mabadiliko ya baadaye yanafanyika mahali pamoja.

Hatua ya 4: Jenga skrini moja vizuri kwanza

Usitengeneze skrini kumi na mbili kisha ujaribu kuzirekebisha zote. Chagua skrini ambayo watumiaji wanaiona mara nyingi — mara nyingi dashibodi au orodha kuu — na urudie mpaka iwe sawa. Kisha:

Tumia dashibodi kama marejeo kwa kurasa zote nyingine: kichwa kile kile, nafasi, ukubwa wa herufi, mitindo ya vitufe na mtindo wa jedwali. Sasisha kurasa za Mipangilio na Miadi ziendane nayo.

Skrini ya marejeo iliyokamilika inawasilisha ladha yako vizuri zaidi kuliko kivumishi chochote.

Hatua ya 5: Rudia kwa maombi madogo na mahususi

Maoni kwa AI yanafanya kazi kama maoni kwa mbunifu mdogo: mahususi, eneo moja kwa wakati, na wazi kuhusu kipi cha kubaki.

Daima ongeza kile cha kubaki — "weka njia zote, maandishi na vipengele vile vile" — ili pasi ya kuona isiondoe kimyakimya utendaji wowote. Kagua kila mabadiliko kwenye skrini ya ukubwa wa simu kabla ya kuomba mengine; tazama jinsi ya kujenga web app inayofaa simu kuona kinachofaa kwenye skrini ndogo.

Hatua ya 6: Maelezo yanayotenganisha nzuri na ya kawaida

Muundo ukishakuwa sahihi, mambo haya madogo yanaifanya app ionekane kamili:

• Hali tupu. Mtumiaji mpya anaona nini bila data: maelezo mafupi na kitendo kimoja wazi, si jedwali tupu.
• Hali za upakiaji. Mifupa yenye umbo la maudhui, si mizunguko ya kupakia kila mahali.
• Hali za hitilafu. Ujumbe wa lugha rahisi karibu na sehemu iliyosababisha.
• Hali za kuelea, kuzingatia na kubonyeza kwenye kila kipengele kinachoingiliana — pete za kuzingatia ni muhimu kwa watumiaji wa kibodi.
• Maudhui halisi. Badilisha "Lorem ipsum" na "John Doe" kwa maandishi na data halisi; maudhui ya kujaza yanaficha matatizo ya mpangilio.
• Aikoni kutoka seti moja, kwa ukubwa mmoja au miwili, zikiwa na upana wa mstari thabiti.
• Picha zenye kusudi. Picha halisi za bidhaa yako, mahali au watu wako zinashinda picha za hisa za kawaida. Ukitumia picha za hisa au zilizozalishwa, weka mtindo mmoja.
• Maandishi. Lebo fupi na mahususi ("Weka nafasi ya darasa", si "Wasilisha") zinachangia ubora unaoonekana kama rangi yoyote.

Makosa ya kawaida

• Kubuni upya kila kitu kwa ombi moja. Maandiko makubwa huleta hitilafu mpya. Nenda ukurasa kwa ukurasa.
• Rangi nyingi za lafudhi. Kila kitu kikiwa kimeangaziwa, hakuna kinachoangaziwa.
• Kuweka kila kitu katikati. Maandishi yaliyo katikati ni magumu kuyasoma zaidi ya kichwa; weka maudhui mengi kushoto.
• Maandishi madogo, yenye utofauti hafifu yanayoonekana maridadi kwenye kompyuta kubwa lakini hayasomeki kwenye simu chini ya jua.
• Mapambo kuliko umuhimu. Gradient na vivuli haviwezi kurekebisha skrini ambayo kitendo muhimu zaidi hakionekani wazi.
• Kupuuza ukurasa wa kutua. Kwa bidhaa nyingi ndio mwonekano wa kwanza; tazama jinsi ya kujenga ukurasa wa kutua unaobadilisha wageni.

Kwa mifumo zaidi ya maagizo nje ya muundo, soma jinsi ya kuandika maagizo kwa zana za kujenga app za AI. Ikiwa kazi yako ndiyo bidhaa — portfolio ya muundo au upigaji picha — jinsi ya kujenga tovuti ya portfolio inaenda kwa kina zaidi kuhusu uwasilishaji.

Kubuni kwa Mythex

Kwenye Mythex unaeleza muundo kwenye gumzo, unauona kwenye onyesho la moja kwa moja, na kukagua fremu ya ukubwa wa simu kabla ya mabadiliko yanayofuata. Docs zina mifumo mifupi ya hili: maagizo ya muundo na UI kuhusu kutaja kitakachobadilika na kitakachobaki, na kubuni upya UI yako kwa kuburudisha ukurasa mmoja kwa wakati bila kupoteza vipengele. Mythex pia inaweza kutafuta picha za hisa au kuzalisha picha kwenye gumzo — picha kuu, mandharinyuma, au picha ya kushiriki — na kuiweka kwenye app ukiomba. Ikiwa pasi itaenda vibaya, rudi kwenye checkpoint ya kabla yake. Vinjari violezo ikiwa ungependa kuanza na muundo uliopo na kuurekebisha.

Maswali