Dobički:
- Sposobnost preoblikovanja namena zaslona in prioritete vsebine v jasen brief ter ustvarjanje žičnih osnutkov in variacij z umetno inteligenco
- Sposobnost hitrega ovrednotenja rezultatov orodij, ki ustvarjajo vmesnike iz besedila, in njihovega pregleda v skladu z načeli oblikovanja
- Sposobnost dozorevanja žičnih okvirjev umetne inteligence s pogledom na resnično vsebino, robni primer in dostopnost
Wireframe je okostje zaslona na ravni škatlaste črte, brez barvnih, vizualnih podrobnosti in podrobnosti blagovne znamke. Njegov namen je preprost: hitro preizkusiti prioriteto, umestitev in pretok vsebine; reševanje vprašanja "kaj, kje, zakaj tukaj" brez spuščanja v estetiko. Zasnova nizke ločljivosti opisuje tudi to prvo, grobo fazo osnutka. Umetna inteligenca radikalno pospeši ta korak: orodja, ki ustvarjajo žične okvire iz besedila, ustvarijo oris zaslona iz zahteve v enem stavku. Toda ta hitrost spodbuja tudi napačno prepričanje, da je "prvi rezultat končna zasnova." Ta enota uči, kako inteligentno ustvariti in kritično dozoreti žične okvire AI.
Najprej brief, nato produkcija
Večina slabih žičnih okvirjev izhaja iz slabega briefa. Če umetni inteligenci rečete "naredi prijavni zaslon", boste dobili splošen vzorec. Močan wireframe brief vključuje:
- Namen zaslona: Zakaj uporabnik pride na ta zaslon, kaj s tem pridobi?
- Prednostna vsebina: Kateri so trije najpomembnejši elementi? Kam naj najprej pade oko uporabnika?
- Kontekst: naprava (mobilna/namizna), trenutno razpoloženje uporabnika, prejšnji zaslon.
- Omejitve: Zahtevani elementi (izjava o omejitvi odgovornosti, element blagovne znamke), omejitev prostora.
- Zahteva za različico: koliko različnih postavitev želite videti.
Ko daste ta povzetek, model ustvari različne možnosti, ki vam bodo pomagale pri odločitvi; Če je brief šibak, bodo vsi podobni in neuporabni.
Namig: od AI ne zahtevajte enega "popolnega" žičnatega okvirja, ampak 3 izrazito različne pristope (npr. "en na seznamu, ena na slikah, en osredotočen na eno dejanje"). Raznolikost možnosti odpre vaše slepe pege.
Realna lokacija orodij, ki ustvarjajo vmesnike iz besedila
V zadnjih letih so postala razširjena orodja, ki obljubljajo "napiši in vmesnik se pojavi". Ti ustvarijo zelo hiter začetni osnutek. Če pa ne poznate njegovih meja, vas bo zavedlo:
- Ni preizkušeno z resnično vsebino: vzorčna besedila so vedno idealne dolžine; Če se dejanski naslov preliva, je lahko postavitev motena.
- Ni robnih primerov: Prazen seznam, dolgo ime, napaka običajno niso narisani.
- Dostopnost ni privzeta: Kontrast, območje na dotik, vrstni red branja pogosto niso nadzorovani.
- Do miselnega modela je brezbrižen: model proizvaja "povprečen vmesnik", ne navade vašega uporabnika.
Pravilen odnos: rezultat upoštevajte kot začetni osnutek, ne kot končno zasnovo. Kar naredi "dober" žični okvir je, da je bil preizkušen z resnično vsebino, robnim primerom in dostopnostjo.
Oder
AI izhod
Zrelost, ki ste jo dodali
prvo naročilo
Škatlasto okostje
Popravek na podlagi prioritete vsebine
Vsebina
Vzorec idealne dolžine
Testiranje s pravo, prepolno, prazno vsebino
robno ohišje
Ponavadi nobenega
Stanja prazno/napaka/nalaganje
dostopnost
nepreverjeno
Kontrast, zaporedje, območje dotika
Povezava do toka
en zaslon
Skladnost s prejšnjim/naslednjim zaslonom
trije mini kovčki
Primer 1 – Tri različice, jasna odločitev. Oblikovalec je od umetne inteligence zahteval 3 različne postavitve za nadzorno ploščo (kartica s povzetkom, tabela, obsežna tabela). 3 osnutki so prispeli v 15 minutah; Ekipa jih je pokazala zainteresiranim stranem in v 20 minutah sprejela odločitev o smeri. Če bi to delali ročno, bi 3 osnutke vzeli pol dneva.
2. primer – Moten vrstni red dejanske vsebine. V žičnem okviru AI so bila imena izdelkov vedno sestavljena iz dveh besed. V dejanskem katalogu so bila nekatera imena dolga 40 znakov in so bila čez kartice. Oblikovalec je spremenil postavitev, potem ko jo je preizkusil z dejanskimi podatki. Lekcija: vzorčna vsebina laži; Preizkusite ga z resnično vsebino.
Primer 3 — Pozabljen prazen primer. Žični okvir zaslona »moje priljubljene« je prikazoval samo celoten seznam. Novi uporabnik nima priljubljenih; Zaslon se odpre prazen. Oblikovalec je umetni inteligenci naročil, naj "nariše tudi prazno stanje" in dodal vodilno prazno stanje. Nauk: prazno stanje je del glavne zasnove, ne rob.
Vsebina prej, škatla za
Najpogostejša napačna predstava pri Wireframingu je napačna zasnova za "postavitev škatle". Vendar pa je dober žični okvir vsebinsko usmerjen: najprej se odločite, katere informacije naj bodo na zaslonu in s kakšno prednostjo; Škatle so rezultat te odločitve. Ustvarjanje "prioritete vsebine" je prvi korak pri žičnem oblikovanju: navedete stvari, ki jih mora uporabnik videti na tem zaslonu, od najpomembnejših do najmanj pomembnih. AI je dober partner pri pripravi tega seznama; Ko podate namen zaslona, daje prednost možnim elementom vsebine. Nato to prioriteto prevedete v vrstni red: najpomembnejši predmet na najbolj vidnem mestu. Ko je ta vrstni red obrnjen – ko najprej narišete lepo postavitev in nato poskušate prilagoditi vsebino – so informacije, ki jih uporabnik dejansko potrebuje, potisnjene v ozadje.
Pozor: lep žični okvir lahko skrije nepravilno prioriteto vsebine. "Je ta postavitev dobra?" ampak "Ali je najpomembnejša informacija prva stvar, ki vam pade v oči?" vprašaj.
Pozivi, ki jih je mogoče kopirati
Vaša vloga: višji produktni oblikovalec. Namen zaslona: <<namen>>. Naprava: <<mobilni/namizni računalnik>>. Prvi 3 elementi: <<seznam>>. Zahtevani elementi: <<seznam>>. Naloga: Predlagajte 3 izrazito različne pristope žične konstrukcije (z besedilom, odsek za odsekom). Za vsak pristop: logika postavitve, prednostni vrstni red in zakaj bo deloval.
Preizkusite to definicijo žične konstrukcije v realnih pogojih:<<besedilo žične konstrukcije>>. Narišite ali opišite: prazno stanje, dolga vsebina (prelivanje), stanje napake, stanje nalaganja. Za vsako napišite, kako naj se postavitev prilagodi.
Preverite ta žični okvir za dostopnost: ali je vrstni red branja smiseln, ali cilji dotika zadostujejo, ali obstajajo le informacije, ki temeljijo na barvah, ali je primarno dejanje očitno? Naštejte težave in predloge enega za drugim. Žični okvir: <<besedilo>>
Ustvarite realistično nadomestno vsebino za ta žični okvir: 5 glav različnih dolžin (od kratkih do zelo dolgih), 3 prazna besedila stanja, 2 sporočila o napakah. Namen: preizkusiti dizajn z resnično, ne idealno vsebino. Kontekst: <<zaslon>>
Šibek poziv/močan poziv
Slabo: "Naredite žično okvirno domačo stran."
Rezultat: generično okostje z nejasno prioriteto vsebine, enotnostjo in brez robnih primerov.
Močno: "Predlagajte 3 različne pristope žičnih okvirjev za mobilno domačo stran z namenom X; 3 najpomembnejši elementi so; razložite prednostno logiko vsakega pristopa; pokažite tudi stanje praznega in napake."
Rezultat: Primerljive, prioritetne, realistične možnosti.
Razlika: močan poziv daje namen + prednost + različico + robni primer.
Pogoste napake
- Upoštevanje prvega rezultata kot končnega dizajna. AI wireframe je začetek; Nadaljevanje v nezrelem stanju je drago.
- Bodite zadovoljni z vzorčno vsebino. Navidezno besedilo idealne dolžine naredi postavitev lažno lepo.
- Obhod ničelnih stanj in stanj napak. Prvi zaslon, ki ga uporabnik vidi, je pogosto prazen.
- Dostopnost puščamo za konec. Kontrast in vrstni red branja se upoštevata na stopnji žične konstrukcije in se pozneje ne popravljata.
- Nadaljevanje z eno samo različico. Osredotočanje na prvo idejo brez ustvarjanja možnosti poveča slepe pege.
Če povzamem
Wireframing je najcenejši način za testiranje prioritete vsebine in toka, ne da bi se spuščali v estetiko; AI močno pospeši to stopnjo. Ključno je, da podate močno povzetek (namen, prioriteta, kontekst, omejitev, različica) pred izdelavo in si ogledate rezultat kot začetni osnutek. Izhod orodij, ki ustvarjajo vmesnike iz besedila, ne dozori, dokler ni preizkušen z resnično vsebino, robnimi primeri in dostopnostjo. Uporabite model kot generator hitrih možnosti; Dodaš zrelost in odločitev.
Aplikacijska naloga
- Izberite zaslon in napišite kratek opis, ki vključuje namen, 3 najpomembnejše elemente in obvezne elemente.
- S prvim pozivom ustvarite 3 izrazito različne pristope žične konstrukcije.
- S četrtim pozivom izdelajte realistično (kratko-dolgo-prazno) vsebino ograde in preizkusite postavitev.
- Z drugim pozivom dodajte stanja prazno, napaka in nalaganje.
- Izvedite preverjanje dostopnosti s tretjim pozivom in objavite ugotovitve v žični okvir.
kontrolni seznam
- [ ] Napisal sem kratek opis z namenom in prednostnimi nalogami pred izdelavo.
- [ ] Izdelal nisem eno, ampak 3 različne različice.
- [ ] Preizkusil sem postavitev z realistično (dolgo/kratko/prazno) vsebino.
- [ ] Oblikoval sem stanja prazno, napaka in nalaganje.
- [ ] Preverjanje dostopnosti sem opravil na stopnji žične konstrukcije.
- [ ] Rezultat sem obravnaval kot začetni osnutek in ga dozorel.