Kako oblikovati lepo aplikacijo z umetno inteligenco

Dobro izgledajočo aplikacijo dobite od umetne inteligence tako, da ji nehate reči »naredi lepo« in ji začnete dajati to, kar bi želel oblikovalec: dve ali tri reference, ki vam všečta, poimenovano smer oblikovanja in konkretna pravila za pisavo, barve in razmike. Nato zgradite en zaslon, ga popravite, dokler ni prav, in naj AI isti sistem uporabi povsod drugje. Večina »AI videza« prihaja iz nejasnih pozivov, ki dajo povprečne odgovore; specifičen vnos da specifično oblikovanje.

Zakaj so AI-oblikovani vmesniki generični

Če AI zaprosite za »moderno, čisto nadzorno ploščo za SaaS«, vam bo dala statistično sredino vseh nadzornih plošč, ki jih je videla: isto brezserifno pisavo, vijolično-moder prelivo, zaobljene kartice z mehkimi senčami, ikone v krogih in osrednjo naslovnico z napisom »Vaš delovni tok, poenostavljen«. Nobena posamezna izbira ni napačna. Težava je, da nobena ni bila izbrana za vaš izdelek.

Dobro oblikovanje je v glavnem odločanje. Vaša naloga je, da sprejmete peščico odločitev, ki aplikaciji dajo značaj, AI pa naj opravi na tisoče drobnih odločitev dosledno.

1. korak: zberite reference, preden pozovete AI

Vzemite dvajset minut in zberite dve do štiri reference – aplikacije ali spletna mesta, katerih videz ustreza vašemu izdelku. Dobri viri so izdelki, ki jih vaše občinstvo že uporablja, galerije oblikovanja in spletna mesta podjetij na sorodnih področjih.

Za vsako zapišite, kaj vam je všeč, z navadnimi besedami:

• »Veliko belega prostora, vsebina v ozkem stolpcu, majhne sive oznake nad velikimi številkami.«
• »Goste tabele s tankimi ločilnicami, brez senc na karticah, ena barva naglasa za dejanja.«
• »Velike serifne naslove, toplo nebarvno ozadje, fotografije namesto ilustracij.«

Nato te opise posredujte AI in, če vaše orodje sprejema slike, priložite posnetke zaslona. Navdih črpajte iz kakovosti, ne iz izdelka: kopiranje tuje postavitve, znamke ali besedil v celoti je pravno in verodostojnostno tveganje.

2. korak: izberite smer oblikovanja in jo poimenujte

Smer je kratek opis občutka. AI daje filter za vsako odločitev. Nekatere, ki dobro delujejo:

Vključite jo v prvi poziv, skupaj s tem, za koga je aplikacija:

Zgradi rezervacijsko aplikacijo za neodvisni studio joge. Smer oblikovanja: mirno in minimalistično, kot natisnjen urnik studia. Topel, rahlo zlomljeno bel fon, skoraj črno besedilo in en umirjen zelenkasto siv naglas (žajbelj) za gumbe in izbrana stanja. Serifna pisava za naslove, čista brezserifna za besedilo. Velikodušni razmiki, brez prelivov, brez senc, brez emojijev. Najprej za mobilne naprave.

3. korak: določite pravila – pisava, barve in razmiki

Tri stvari nosijo največ vizualne kakovosti. Če jih določite izrecno, je to največja izboljšava, ki jo lahko naredite.

Tipografija

• Ena ali dve pisavi. Pisava za naslove in pisava za besedilo ali ena družina v več debelinah.
• Lestvica velikosti. Peščica velikosti, ki se dosledno uporablja – na primer 14, 16, 20, 28 in 40 slikovnih pik – namesto da vsaka komponenta izbere svojo.
• Berljivo besedilo. Na spletu okoli 16 slikovnih pik, višina vrstice približno 1,5 in dolžina vrstice od 60 do 75 znakov pri daljšem besedilu.
• Hierarhija z debelino in velikostjo, ne z barvo. Naslovi so krepkejši in večji; sekundarno besedilo je manjše in mehkejše sivo.

Barve

• Večinoma nevtralne. Ozadja, površine, robovi in sive barve besedila opravijo večino dela.
• En barvni naglas za dejanja in izbrana stanja. Drugega le, če ima jasno vlogo.
• Semantične barve za uspeh, opozorilo in napako – in uporabljene samo za to.
• Kontrast. WCAG 2 zahteva kontrastno razmerje vsaj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. Svetlo siva na belem pogosto ne ustreza; naj AI preveri.
• Temni način, če ga želite, zasnovan namensko, ne samo obrnjen.

Razmiki in postavitev

• Lestvica razmikov, na primer 4, 8, 12, 16, 24, 32, 48, 64 slikovnih pik. Vse se poravna nanjo.
• Poravnava. Robovi se ujemajo; vsebina leži na mreži ali v dosledno največji širini stolpca.
• Bližina. Sorodne stvari so blizu skupaj, nesorodne dlje narazen. To eno pravilo popravi večino preobremenjenih zaslonov.
• Manj vsebnikov. Ne potrebuje vse kartice. Robovi, ločilnice in beli prostor pogosto tiheje združijo vsebino.

Poziv, ki enkrat nastavi sistem:

Preden gradiš več zaslonov, nastavi majhen sistem oblikovanja in ga uporabljaj povsod: lestvica pisave 14/16/20/28/40 px, višina vrstice besedila 1,5, lestvica razmikov 4/8/12/16/24/32/48 px, nevtralne barve od skoraj bele do skoraj črne, en barvni naglas (#3F6B5A) samo za glavna dejanja, rdeča samo za napake. Gumbi, vnosna polja in kartice naj imajo enak polmer zaobljenih kotov. Preveri, ali vse besedilo dosega stopnjo WCAG AA za kontrast.

Se pa v orodju, ki pozna kodo, to običajno spremeni v oblikovalske žetone – CSS spremenljivke ali temo za Tailwind –, kar pomeni, da se kasnejše spremembe zgodijo na enem mestu.

4. korak: najprej naredite en zaslon dobro

Ne generirajte dvanajstih zaslonov in nato poskušajte popraviti vse. Izberite zaslon, ki ga uporabniki vidijo najpogosteje – pogosto nadzorno ploščo ali glavni seznam – in iterirajte, dokler ni prav. Nato:

Uporabi nadzorno ploščo kot referenco za vse druge strani: enaka glava, razmiki, velikosti pisave, slog gumbov in slog tabel. Posodobi strani Nastavitve in Rezervacije, da bodo ustrezale.

Dokončan referenčni zaslon sporoči vaš okus bistveno bolje kot kateri koli pridevnik.

5. korak: iterirajte z natančnimi, majhnimi zahtevami

Povratne informacije AI delujejo kot povratne informacije mlademu oblikovalcu: natančne, o enem območju naenkrat in jasne o tem, kaj ohraniti.

Vedno dodajte, kaj ohraniti – »ohrani vse poti, besedila in funkcije enako« –, da vizualni prehod tiho ne odstrani funkcionalnosti. Vsako spremembo preverite na zaslonu velikosti telefona, preden zahtevate naslednjo. Za to, kako izgleda dobro na majhnih zaslonih, glejte kako zgraditi spletno aplikacijo, prijazno za mobilne naprave.

6. korak: podrobnosti, ki ločijo dobro od generičnega

Ko je struktura pravilna, te drobne stvari naredijo aplikacijo videti dokončano:

• Prazna stanja. Kaj vidi nov uporabnik brez podatkov: kratka razlaga in eno jasno dejanje, ne prazna tabela.
• Stanja nalaganja. Skeleti, oblikovani kot vsebina, ne vrtljivi krogi povsod.
• Stanja napak. Sporočila v preprostem jeziku ob polju, ki je povzročilo težavo.
• Stanja ob premikanju miške, fokusu in pritisku pri vsakem interaktivnem elementu – obroči fokusa so pomembni za uporabnike tipkovnice.
• Resnična vsebina. Zamenjajte »Lorem ipsum« in »Janez Novak« z realističnim besedilom in podatki; označeno vsebino skriva težave z postavitvijo.
• Ikone iz ene zbirke, v eni ali dveh velikostih, z dosledno debelino poteze.
• Slike z namenom. Prave fotografije vašega izdelka, prostora ali ljudi premagajo generične fotografije iz zbirk. Kjer uporabljate zbirne ali ustvarjene slike, ohranite dosledno slog.
• Besedilo. Kratke, specifične oznake (»Rezerviraj urnik«, ne »Pošlji«) prispevajo k zaznani kakovosti toliko kot katera koli barva.

Pogoste napake

• Preoblikovanje vsega v enem pozivu. Veliko prepisovanje prinese regresije. Pojdite stran po stran.
• Preveč barvnih naglasov. Če je vse označeno, ni ničesar.
• Centriranje vsega. Centrirano besedilo je težko brati, razen za naslov; večino vsebine poravnajte na levo.
• Majhno, nizkokontrastno besedilo, ki na velikem monitorju izgleda elegantno, na telefonu na soncu pa je nečitljivo.
• Okras pred hierarhijo. Prelivi in sence ne morejo popraviti zaslona, kjer najpomembnejše dejanje ni očitno.
• Ignoriranje pristajalne strani. Pri številnih izdelkih je to prvi vtis; glejte kako zgraditi pristajalno stran, ki pretvarja.

Za več vzorcev pozivov, ki presegajo oblikovanje, preberite kako pisati pozive za orodja za gradnjo aplikacij z AI. Če je vaše delo sam izdelek – portfelj oblikovanja ali fotografije –, kako zgraditi portfeljsko spletno stran podrobneje obravnava predstavitev.

Oblikovanje z Mythex

V Mythex oblikovanje opišete v klepetu, ga vidite v živem predogledu in pred naslednjo spremembo preverite okvir velikosti telefona. Dokumentacija ima kratke vzorce za to: pozivi za oblikovanje in uporabniški vmesnik o tem, kaj spremeniti in kaj ohraniti, ter prenova vmesnika za osvežitev ene strani naenkrat brez izgube funkcij. Mythex lahko tudi poišče slike iz zbirk ali v klepetu ustvari sliko – glavno sliko, ozadje, sliko za deljenje – in jo po vaši zahtevi postavi v aplikacijo. Če gre prehod narobe, se vrnite na kontrolno točko pred njim. Če raje začnete z obstoječim oblikovanjem in ga prilagodite, si oglejte predloge.

Vprašanja