Kasu:
- Võimalus muuta ekraani eesmärk ja sisu prioriteet selgeks lühikirjelduseks ning luua tehisintellekti abil traatraami mustandeid ja variatsioone
- Oskus kiiresti hinnata tekstist liideseid genereerivate tööriistade väljundit ja neid disainiprintsiipide järgi sõeluda
- Võimalus küpseda tehisintellekti kaadreid, pidades silmas tegelikku sisu, serva korpust ja juurdepääsetavust
Wireframe on ekraani karbijoone tasemel karkass, millel pole värvi, visuaalseid ja kaubamärgiga seotud üksikasju. Selle eesmärk on lihtne: kiiresti testida sisu prioriteeti, paigutust ja voogu; esteetikasse laskumata küsimuse "mis, kus, miks siin" lahendamine. Madala täpsusega disain kirjeldab ka seda esimest, jämedat mustandi etappi. Tehisintellekt kiirendab seda sammu radikaalselt: tekstist traatraamid genereerivad tööriistad loovad ühelauselisest päringust ekraanikontuuri. Kuid see kiirus tekitab ka väärarusaama, et "esimene väljund on lõplik disain". See üksus õpetab intelligentselt genereerima ja kriitiliselt küpsema tehisintellekti kaadreid.
Kõigepealt lühikirjeldus, siis lavastus
Enamik halbu traatraamistikke tulenevad halvast lühikirjeldusest. Kui ütlete AI-le "tehke sisselogimisekraan", saate üldise mustri. Tugev traatraamistik sisaldab järgmist:
- Ekraani eesmärk: Miks kasutaja sellele ekraanile tuleb, mida ta sellest võidab?
- Sisu prioriteet: millised on kolm kõige olulisemat elementi? Kuhu peaks kasutaja silm esimesena langema?
- Kontekst: seade (mobiil/lauaarvuti), kasutaja praegune meeleolu, eelmine ekraan.
- Piirangud: nõutavad elemendid (disclaimer, brand element), ruumipiirang.
- Variatsioonitaotlus: mitu erinevat paigutust soovite näha.
Kui esitate selle lühikokkuvõtte, pakub mudel erinevaid valikuid, mis aitavad teil otsust teha; Kui lühikirjeldus on nõrk, on need kõik sarnased ja kasutud.
Näpunäide. Küsige tehisintellektilt mitte ühte "täiuslikku" traatraami, vaid kolme selgelt erinevat lähenemisviisi (nt "üks loendi-, üks pilditihe, üks ühele toimingule keskendunud"). Valikute mitmekesisus avab teie pimealad.
Tekstist liideseid loovate tööriistade realistlik asukoht
Viimastel aastatel on laialt levinud tööriistad, mis lubavad "kirjutage see ja liides ilmub". Need annavad tõeliselt kiire starditõmmise. Kuid kui te ei tea selle piire, eksitab see teid:
- Pole testitud tegeliku sisuga: näidistekstid on alati ideaalse pikkusega; Kui tegelik pealkiri läheb üle, võib küljendus olla häiritud.
- Äärejuhtumeid pole: tühi loend, pikk nimi, veajuhtum tavaliselt ei joonistata.
- Juurdepääsetavus ei ole vaikeseade: kontrasti, puuteala ja lugemisjärjekorda sageli ei kontrollita.
- See on mentaalse mudeli suhtes ükskõikne: mudel loob "keskmise liidese", mitte teie kasutaja harjumuse.
Õige suhtumine: arvestage väljundit esialgse mustandiga, mitte lõpliku kujundusega. "Hea" traatraami teeb see, et seda on testitud tõelise sisu, serva korpuse ja ligipääsetavusega.
Lava
AI väljund
Teie lisatud tähtaeg
esimene tellimus
Kastiliini skelett
Parandage sisu prioriteedi alusel
Sisu
Ideaalse pikkusega näidis
Testimine tõelise, ülevoolava, tühja sisuga
serva korpus
Tavaliselt mitte ühtegi
Tühi/viga/laadimise olekud
ligipääsetavus
märkimata
Kontrastsus, järjestus, puuteala
Voo link
üks ekraan
Kooskõla eelmise/järgmise ekraaniga
kolm minikarpi
Juhtum 1 – kolm varianti, selge otsus. Disainer palus tehisintellektilt armatuurlaua jaoks 3 erinevat paigutust (kokkuvõttekaart, tabel, raske diagramm). 15 minutiga saabus 3 mustandit; Meeskond näitas neid huvirühmadele ja tegi 20 minutiga suunaotsuse. Kui seda käsitsi teha, kuluks 3 mustandi tegemiseks pool päeva.
Juhtum 2 – tegelik sisu häiris järjekorda. Tehisintellekti traatraamis olid tootenimed alati 2 sõna. Tegelikus kataloogis olid mõned nimed 40 tähemärgi pikkused ja ajasid kaarte üle. Disainer muutis paigutust pärast selle testimist tegelike andmetega. Õppetund: näidissisu valed; Testige seda tõelise sisuga.
Juhtum 3 – tühi korpus on unustatud. "Minu lemmikute" ekraani traatraam näitas ainult täielikku loendit. Uuel kasutajal pole lemmikuid; Ekraan avaneb tühjana. Disainer käskis tehisintellektil "joonistada ka tühi olek" ja lisas suunava tühja oleku. Õppetund: tühi olek on osa põhikujundusest, mitte serv.
Sisu enne, kast pärast
Kõige levinum eksiarvamus traatraamis on kujundust ekslikult "kasti paigutusega". Hea wireframe on aga sisule orienteeritud: kõigepealt otsustad, milline info peaks ekraanil olema ja millise prioriteediga; Kastid on selle otsuse tulemus. "Sisu prioriteedi" loomine on raamimise esimene samm: loetlete asjad, mida kasutaja sellel ekraanil nägema peab, alates kõige olulisemast kuni kõige vähem oluliseni. AI on selle nimekirja koostamisel hea partner; See seab võimalikud sisuelemendid esikohale, kui annate ekraani eesmärgi. Seejärel tõlkite selle prioriteedi järjekorda: kõige olulisem ese kõige nähtavamas kohas. Kui see järjekord on vastupidine – kui joonistate esmalt kena küljenduse ja proovite seejärel sisu sobitada –, tõrjutakse kasutajale tegelikult vajalik teave tagaplaanile.
Ettevaatust. Kena välimusega traatraam võib peita vale sisu prioriteedi. "Kas see seade on hea?" aga "Kas kõige olulisem info on esimene asi, mis sulle silma hakkab?" küsi.
Kopeeritavad juhised
Teie roll: vanemtootedisainer. Ekraani eesmärk: <<eesmärk>>. Seade: <<mobiil/lauaarvuti>>. 3 populaarseimat üksust: <<loend>>. Nõutavad elemendid: <<loend>>.Ülesanne: soovitage 3 selgelt erinevat traatraami lähenemisviisi (koos tekstiga, jaotiste kaupa).Iga lähenemisviisi jaoks: paigutusloogika, tähtsuse järjekord ja miks see töötab.
Testige seda traatraami definitsiooni reaalsetes tingimustes:<<traatraami tekst>>. Joonista või kirjelda: tühi olek, pikk sisu (ületäitumine), veaolek, laadimise olek. Kirjutage igaühe jaoks, kuidas paigutus peaks kohanema.
Kontrollige selle traatraami juurdepääsetavust: kas lugemisjärjestus on mõistlik, kas puuteobjektidest piisab, kas on ainult värvipõhine teave, kas esmane toiming on ilmne? Loetlege probleemid ja ettepanekud ükshaaval. Wireframe: <<tekst>>
Looge selle traatraami jaoks realistlik kohahoidja sisu: 5 erineva pikkusega päist (lühikest kuni väga pikkani), 3 tühja olekuteksti, 2 veateadet. Eesmärk: testida disaini tegeliku, mitte ideaalse sisuga. Kontekst: <<ekraan>>
Nõrk viip / Tugev viip
Nõrk: "Tee kodulehe raam."
Tulemus: ebaselge sisuprioriteedi, ühtsuse ja servajuhtudeta üldine skelett.
Tugev: "Soovitage 3 erinevat traatraamistiku lähenemisviisi mobiili avalehe jaoks eesmärgiga X; 3 kõige olulisemat elementi on; selgitage iga lähenemisviisi prioriteetsuse loogikat; kuvage ka tühi ja vea olek."
Tulemus: võrreldavad, prioriteetsed, realistlikud valikud.
Erinevus: tugev viip annab eesmärgi + prioriteet + variatsioon + suurtäht.
Levinud vead
- Arvestades esimest väljundit lõplikuks kujunduseks. AI traatraamistik on algus; Ebaküpses olekus jätkamine on kulukas.
- Olge näidissisuga rahul. Ideaalse pikkusega näiv tekst muudab paigutuse võltsi ilusaks.
- Null- ja veaolekutest möödahiilimine. Esimene ekraan, mida kasutaja näeb, on sageli tühi.
- Juurdepääsetavuse jätmine viimaseks. Kontrastsust ja lugemisjärjestust võetakse arvesse raami etapis ja neid hiljem ei parandata.
- Jätkame ühe variatsiooniga. Esimese idee fikseerimine ilma valikuid genereerimata suurendab pimeala.
Kokkuvõttes
Wireframing on odavaim viis sisu prioriteedi ja voolu testimiseks ilma esteetikasse laskumata; AI kiirendab seda etappi oluliselt. Võti on anda enne tootmist põhjalik ülevaade (eesmärk, prioriteet, kontekst, piirang, variatsioon) ja vaadata väljundit esialgse mustandina. Tekstist liideseid loovate tööriistade väljund ei küpse enne, kui seda testitakse tegeliku sisu, servajuhtumite ja juurdepääsetavuse osas. Kasutage mudelit nagu kiirvaliku generaatorit; Lisate küpsust ja otsustusvõimet.
Rakenduse ülesanne
- Valige ekraan ja kirjutage lühikirjeldus, mis sisaldab eesmärki, kolme kõige olulisemat elementi ja kohustuslikke elemente.
- Looge esimese viipaga kolm selgelt erinevat traatraami lähenemisviisi.
- Neljanda viipaga looge realistlik (lühike-pika-tühi) kohatäite sisu ja testige paigutust.
- Lisage teise viipaga tühjad, vea- ja laadimisolekud.
- Tehke kolmanda viipaga juurdepääsetavuse kontroll ja postitage leiud traatraamile.
kontrollnimekiri
- [ ] Kirjutasin enne tootmist lühikokkuvõtte eesmärgi ja prioriteetidega.
- [ ] Tootsin mitte ühe, vaid 3 erinevat variatsiooni.
- [ ] Testisin realistliku (pikk/lühike/tühi) sisuga paigutust.
- [ ] Kujundasin tühjad, vea- ja laadimisseisundid.
- [ ] Tegin juurdepääsetavuse kontrolli traatraami etapis.
- [ ] Käsitlesin väljundit kui esialgset mustandit ja küpsesin selle.