Hvernig á að hanna fallegt app með gervigreind

Til að fá gott útlit á app frá gervigreind skaltu hætta að biðja hana um að „gera þetta fallegt“ og byrja á því sem hönnuður myndi vilja: tvær eða þrjár fyrirmyndir sem þér líkar við, nefnda hönnunarstefnu og skýrar reglur um letur, lit og bil. Smíðaðu síðan einn skjá, lagfærðu hann þar til hann er réttur og láttu gervigreindina beita sama kerfi á alla hina skjáina. Mest af „gervigreindarútlitinu“ kemur frá óljósum fyrirmælum sem skila meðalsvörum; sértæk inntök skila sértækri hönnun.

Af hverju hönnun gervigreindar er oft almenn

Biddu gervigreind um „nútímalegt, hreint SaaS-mælaborð“ og hún gefur þér tölfræðilega miðjuna af öllum mælaborðum sem hún hefur séð: sama sans-serif letrið, fjólublátt-í-blátt stigul, ávöl kort með mjúkum skuggum, tákn í hringjum og miðjaða forsíðu sem segir „Vinnuflæðið þitt, einfaldað“. Ekkert af þessu er rangt í sjálfu sér. Vandinn er að ekkert af þessu var valið fyrir vöruna þína.

Góð hönnun snýst að mestu um ákvarðanir. Hlutverk þitt er að taka þær fáu ákvarðanir sem gefa appinu karakter og láta gervigreindina taka þúsundir smærri ákvarðana á samræmdan hátt.

Skref 1: Safnaðu fyrirmyndum áður en þú skrifar fyrirmæli

Eyddu tuttugu mínútum í að safna tveimur til fjórum fyrirmyndum, öppum eða vefsíðum sem útlit hentar vörunni þinni. Góðar uppsprettur eru vörur sem markhópurinn notar nú þegar, hönnunarsöfn og vefsíður fyrirtækja á skyldum sviðum.

Fyrir hverja fyrirmynd skaltu skrifa niður hvað þér líkar í einföldu máli:

• „Mikið hvítt rými, efni í þröngum dálki, lítil grá merki fyrir ofan stórar tölur.“
• „Þéttar töflur með þunnum línum, engir kortaskuggar, einn áherslulitur fyrir aðgerðir.“
• „Stórar serif-fyrirsagnir, hlýr ljósgrár bakgrunnur, ljósmyndir frekar en myndskreytingar.“

Gefðu síðan gervigreindinni þessar lýsingar og hengdu við skjáskot ef smíðatólið tekur við myndum. Sæktu innblástur í gæðin, ekki vöruna: að afrita skipulag, vörumerki eða texta annars fyrirtækis í heild er bæði lagaleg áhætta og trúverðugleikatjón.

Skref 2: Veldu hönnunarstefnu og gefðu henni nafn

Stefna er stutt lýsing á tilfinningunni. Hún gefur gervigreindinni síu fyrir hverja ákvörðun sem hún tekur. Nokkrar sem virka vel:

Settu hana í fyrstu fyrirmælin ásamt því hverjum appið er ætlað:

Smíðaðu bókunarapp fyrir sjálfstæða jógastöð. Hönnunarstefna: róleg og látlaus, eins og prentuð stundaskrá. Hlýr ljósgrár bakgrunnur, næstum svartur texti og einn dempaður salvíugrænn áherslulitur fyrir hnappa og valin atriði. Serif fyrir fyrirsagnir, hreint sans-serif fyrir meginmál. Rausnarlegt bil, engir stigulir, engir skuggar, engin tákn. Farsíma fyrst.

Skref 3: Settu reglurnar um letur, lit og bil

Þessir þrír þættir bera stærstan hluta af sjónrænum gæðum. Að vera skýr um þá er mesta framförin sem þú getur gert.

Leturfræði

• Eitt eða tvö leturgerðir. Eitt fyrir fyrirsagnir og annað fyrir meginmál, eða ein fjölskylda í nokkrum þykktum.
• Stærðarkvarði fyrir letur. Handfylli stærða sem eru notaðar samkvæmt, til dæmis 14, 16, 20, 28 og 40 px, í stað þess að hver eining velji sína stærð.
• Læsilegt meginmál. Um 16 px á vefnum, línubil um 1,5 og línulengd um 60–75 stafir í löngum texta.
• Stigveldi með þykkt og stærð, ekki lit. Fyrirsagnir eru þykkari og stærri; aukatexti er minni og mýkri grár.

Litir

• Aðallega hlutlausir litir. Bakgrunnur, fletir, línur og grátónar í texta gera mest af verkinu.
• Einn áherslulitur fyrir aðgerðir og valin atriði. Annar aðeins ef hann hefur skýrt hlutverk.
• Merkingarlitir fyrir árangur, aðvörun og villu, og aðeins notaðir í þeim tilgangi.
• Andstæða. WCAG 2 krefst að minnsta kosti 4,5:1 andstæðuhlutfalls fyrir venjulegan meginmálstexta og 3:1 fyrir stóran texta. Ljósgrár texti á hvítu fellur oft; biddu gervigreindina um að athuga það.
• Dökk stilling, ef þú vilt hana, hönnuð af ásetningi en ekki bara snúin við.

Bil og skipulag

• Bilskali eins og 4, 8, 12, 16, 24, 32, 48, 64 px. Allt smellur á hann.
• Jöfnun. Brúnir liggja í takt; efni situr á grind eða í samræmdum hámarksbreidd dálki.
• Nálægð. Tengd atriði nálægt hvert öðru, ótengd lengra í burtu. Þessi ein regla lagar flesta þvingaða skjái.
• Færri ílát. Ekki þarf kort utan um allt. Línur, skil og hvítt rými geta flokkað efni hljóðlátar.

Fyrirmæli sem setja kerfið upp í eitt skipti:

Áður en fleiri skjáir eru smíðaðir skaltu setja upp lítið hönnunarkerfi og nota það alls staðar: stærðarkvarði 14/16/20/28/40 px, línubil 1,5 í meginmáli, bilskali 4/8/12/16/24/32/48 px, hlutlausir litir frá næstum hvítu til næstum svörtu, einn áherslulitur (#3F6B5A) fyrir aðalaðgerðir eingöngu og rautt aðeins fyrir villur. Hnappar, inntaksreitir og kort eiga að deila sama radíus. Athugaðu að allur texti uppfylli WCAG AA andstæðu.

Borð í kóðamiðuðu smíðatóli verða yfirleitt að hönnunarbreytum, CSS-breytum eða Tailwind-þema, sem þýðir að síðari breytingar gerast á einum stað.

Skref 4: Smíðaðu fyrst einn skjá almennilega

Ekki búa til tólf skjái og reyna svo að laga þá alla. Veldu skjáinn sem notendur sjá oftast, oft mælaborðið eða aðallistann, og endurtaktu þar til hann er réttur. Síðan:

Notaðu mælaborðið sem viðmið fyrir allar aðrar síður: sama haus, bil, leturstærðir, hnappastíll og töflustíll. Uppfærðu Stillingar- og Bókanasíðurnar til að passa.

Fullbúinn viðmiðunarskjár segir smekk þinn mun betur en nokkur lýsingarorð.

Skref 5: Endurtaktu með smáum, sértækum beiðnum

Adgerð við gervigreind virkar eins og endurgjöf til yngri hönnuðar: sértæk, eitt svæði í einu og skýr um hvað á að halda.

Bættu alltaf við hverju á að halda, til dæmis „haltu öllum leiðum, texta og eiginleikum óbreyttum“, svo að sjónræn umferð fjarlægi ekki virkni án þess að eftir sé tekið. Athugaðu hverja breytingu á skjá í símastærð áður en þú biður um þá næstu, og sjáðu hvernig á að smíða farsímavænt vefapp til að vita hvernig gott útlit lítur út á litlum skjám.

Skref 6: Smáatriðin sem aðgreina gott frá almennu

Þegar uppbyggingin er rétt gera þessi litlu atriði appið fullbúið:

• Tómir skjáir. Það sem nýr notandi sér án gagna: stutt skýring og einn skýr hnappur, ekki tóm tafla.
• Hleðsluástand. Beinagrindur í lögun efnisins, ekki snúningstákn alls staðar.
• Villuástand. Skýr skilaboð á íslensku við reitinn sem olli þeim.
• Hover-, fókus- og niðurþrýstingsástand á öllum gagnvirkum þáttum. Fókushringir skipta máli fyrir þá sem nota lyklaborð.
• Raunverulegt efni. Skiptu út „Lorem ipsum“ og „Jón Jónsson“ fyrir raunhæfan texta og gögn; staðgengilsefni felur skipulagsvandamál.
• Tákn úr einu safni, í einni eða tveimur stærðum, með sama línuþykkt.
• Myndefni með tilgang. Raunverulegar myndir af vörunni, staðnum eða fólki slá almennar lagermyndir. Ef þú notar lagermyndir eða myndir frá gervigreind skaltu halda samræmdum stíl.
• Texti. Stuttar, sértækar merkingar („Bóka tíma“, ekki „Senda“) skila jafn miklu í upplifun af gæðum og nokkur litaval.

Algeng mistök

• Endurhanna allt í einu fyrirmæli. Stórar endurskrifanir valda afturförum. Farðu síðu fyrir síðu.
• Of margir áherslulitir. Ef allt er auðkennt er ekkert auðkennt.
• Miðja allt. Miðjaður texti er erfiður í skönnun umfram fyrirsögn; jafnaðu flest efni til vinstri.
• Smátt, lágt andstæða letur sem lítur glæsilega út á stórum skjá en er ólæsilegt á síma í sólarljósi.
• Skraut í stað stigveldis. Stigulir og skuggar laga ekki skjá þar sem mikilvægasta aðgerðin er ekki augljós.
• Gleyma forsíðunni. Fyrir margar vörur er hún fyrsta sýn; sjáðu hvernig á að smíða lendingarsíðu sem breytir.

Fyrir fleiri mynstur í fyrirmælum en hönnun skaltu lesa hvernig á að skrifa fyrirmæli fyrir gervigreindarsmíðatól. Ef verkið er varan sjálf, til dæmis hönnunar- eða ljósmyndasafn, fer hvernig á að smíða safnvef dýpra í framsetninguna.

Hönnun með Mythex

Í Mythex lýsir þú hönnuninni í spjallinu, sérð hana í beinni forskoðun og athugar rammann í símastærð áður en næsta breyting er gerð. Í skjölunum eru stuttar leiðbeiningar um þetta: hönnunar- og viðmótsfyrirmæli um að nefna hvað á að breyta og hvað á að halda, og endurhönnun viðmótsins til að endurnýja eina síðu í einu án þess að tapa eiginleikum. Mythex getur líka leitað að lagermyndum eða búið til mynd í spjallinu, til dæmis forsíðumynd, bakgrunn eða deilimynd, og sett hana í appið þegar þú biður um það. Ef breyting fer úrskeiðis skaltu fara aftur í vistunarpunktinn frá því áður. Skoðaðu sniðmátin ef þú vilt frekar byrja á hönnun sem er til og laga hana.

Spurningar