Ieguvumi:
- Spēja pārveidot ekrāna mērķi un satura prioritāti skaidrā īsumā un radīt karkasa melnrakstus un variācijas ar mākslīgo intelektu
- Spēja ātri novērtēt rīku izvadi, kas ģenerē saskarnes no teksta, un pārmeklēt tos saskaņā ar projektēšanas principiem
- Spēja izstrādāt mākslīgā intelekta rāmjus, ņemot vērā reālu saturu, malas korpusu un pieejamību
Wireframe ir ekrāna kastes līnijas līmeņa karkass, kurā nav krāsu, vizuālo un zīmola detaļu. Tās mērķis ir vienkāršs: ātri pārbaudīt satura prioritāti, izvietojumu un plūsmu; risinot jautājumu "kas, kur, kāpēc šeit", neiedziļinoties estētikā. Zemas precizitātes dizains apraksta arī šo pirmo, aptuveno projektu posmu. Mākslīgais intelekts radikāli paātrina šo darbību: rīki, kas no teksta ģenerē stiepļu rāmjus, izveido ekrāna kontūru no viena teikuma pieprasījuma. Taču šis ātrums arī rada nepareizu priekšstatu, ka "pirmais rezultāts ir galīgais dizains". Šī vienība māca, kā gudri ģenerēt un kritiski nobrieduši AI vadu rāmjus.
Vispirms īss apraksts, tad iestudējums
Lielākā daļa slikto karkasu rodas no sliktas īsziņas. Ja sakāt AI “izveidot pieteikšanās ekrānu”, jūs iegūsit vispārīgu modeli. Spēcīga karkasa īss apraksts ietver:
- Ekrāna mērķis: Kāpēc lietotājs nonāk šajā ekrānā, ko viņš no tā iegūst?
- Satura prioritāte: kādi ir trīs svarīgākie elementi? Kur vispirms jānokrīt lietotāja acij?
- Konteksts: ierīce (mobilā ierīce/galddators), lietotāja pašreizējais noskaņojums, iepriekšējais ekrāns.
- Ierobežojumi: nepieciešamie elementi (atruna, zīmola elements), vietas ierobežojums.
- Variācijas pieprasījums: cik dažādu izkārtojumu vēlaties redzēt.
Kad jūs sniedzat šo īso ziņojumu, modelis piedāvā dažādas opcijas, kas palīdzēs jums pieņemt lēmumu; Ja īss apraksts ir vājš, tie visi būs līdzīgi un bezjēdzīgi.
Padoms. Lūdziet mākslīgajam intelektam nevis vienu “perfektu” karkasu, bet gan 3 skaidri atšķirīgas pieejas (piemēram, “viens ar lielu sarakstu, viens smags attēls, viens uz vienu darbību”). Dažādas iespējas paver jūsu aklās zonas.
Reālistiska to rīku atrašanās vieta, kas ģenerē saskarnes no teksta
Pēdējos gados ir kļuvuši plaši izplatīti rīki, kas sola "rakstiet to un interfeiss parādās". Tie rada patiešām ātru sākuma projektu. Bet, ja jūs nezināt tās robežas, tas jūs maldinās:
- Nav pārbaudīts ar reālu saturu: teksta paraugi vienmēr ir ideālā garumā; Ja faktiskais nosaukums ir pārpildīts, izkārtojums var tikt traucēts.
- Nav malas gadījumu: Tukšs saraksts, garš nosaukums, kļūdu reģistrs parasti netiek uzzīmēts.
- Pieejamība nav noklusējuma: kontrasts, pieskāriena apgabals, lasīšanas secība bieži netiek kontrolēti.
- Tas ir vienaldzīgs pret garīgo modeli: modelis rada "vidējo saskarni", nevis jūsu lietotāja ieradumu.
Pareiza attieksme: uzskatiet rezultātu par sākotnējo projektu, nevis par galīgo dizainu. “Labu” karkasu padara tas, ka tas ir pārbaudīts ar reālu saturu, malu korpusu un pieejamību.
Skatuves
AI izvade
Jūsu pievienotais termiņš
pirmais pasūtījums
Box-line skelets
Labojiet, pamatojoties uz satura prioritāti
Saturs
Ideāla garuma paraugs
Testēšana ar īstu, pārpildītu, tukšu saturu
malas korpuss
Parasti neviena
Tukšs/kļūdas/ielādētas stāvokļi
pieejamība
nav atzīmēts
Kontrasts, secība, pieskāriena laukums
Straumēšanas saite
viens ekrāns
Konsekvence ar iepriekšējo/nākamo ekrānu
trīs mini futrāļi
1. gadījums — trīs varianti, skaidrs lēmums. Dizaineris AI lūdza 3 dažādus informācijas paneļa izkārtojumus (kopsavilkuma kartīte, tabula, liela diagramma). 15 minūtēs ieradās 3 melnraksti; Komanda tos parādīja ieinteresētajām personām un 20 minūšu laikā pieņēma lēmumu par virzienu. Ja to darītu manuāli, 3 melnraksti aizņemtu pusi dienas.
2. gadījums — faktiskā satura izjaukta secība. AI vadu karkasā produktu nosaukumi vienmēr bija 2 vārdi. Faktiskajā katalogā daži nosaukumi bija 40 rakstzīmes gari un pārpildīja kartītes. Dizaineris mainīja izkārtojumu pēc tā testēšanas ar reāliem datiem. Nodarbība: satura meli paraugs; Pārbaudiet to ar reālu saturu.
3. gadījums — aizmirsta tukša lieta. Ekrāna "mans izlases" karkass rādīja tikai pilnu sarakstu. Jaunajam lietotājam nav izlases; Ekrāns tiek atvērts tukšs. Dizaineris lika mākslīgajam intelektam "uzzīmēt arī tukšo stāvokli" un pievienoja vadošo tukšo stāvokli. Nodarbība: tukšais stāvoklis ir daļa no galvenā dizaina, nevis mala.
Saturs pirms, lodziņš pēc
Visizplatītākais nepareizs priekšstats par vadu karkasu ir maldināt dizainu ar "kastes izvietojumu". Tomēr labs karkass ir orientēts uz saturu: vispirms jūs izlemjat, kādai informācijai jābūt ekrānā un ar kādu prioritāti; Kastes ir šī lēmuma rezultāts. “Satura prioritātes” izveidošana ir pirmais karkasa izveides solis: jūs uzskaitāt lietas, kas lietotājam ir jāredz šajā ekrānā, sākot no vissvarīgākajām līdz vismazākajām. AI ir labs partneris šī saraksta izstrādē; Tas piešķir prioritāti iespējamiem satura elementiem, kad norādāt ekrāna mērķi. Pēc tam jūs pārveidojat šo prioritāti secībā: vissvarīgākā prece visredzamākajā vietā. Ja šī secība ir apgriezta — kad vispirms uzzīmējat jauku izkārtojumu un pēc tam mēģināt iekļaut tajā saturu, lietotājam nepieciešamā informācija tiek novirzīta fonā.
Uzmanību! Skaists stiepļu rāmis var paslēpt nepareizu satura prioritāti. "Vai šis uzstādījums ir jauks?" bet "Vai vissvarīgākā informācija ir pirmā lieta, kas iekrīt acīs?" jautāt.
Kopējamas uzvednes
Jūsu loma: vecākais produktu dizainers. Ekrāna mērķis: <<mērķis>>. Ierīce: <<mobilais/galddators>>. 3 populārākie vienumi: <<saraksts>>. Nepieciešamie elementi: <<saraksts>>.Uzdevums: Iesakiet 3 izteikti atšķirīgas karkasa pieejas (ar tekstu, pēc sadaļas). Katrai pieejai: izkārtojuma loģika, prioritātes secība un kāpēc tā darbosies.
Pārbaudiet šo karkasa definīciju reālos apstākļos: <<wireframe text>>. Zīmēt vai aprakstīt: tukšs stāvoklis, garš saturs (pārpilde), kļūdas stāvoklis, ielādes stāvoklis. Katram uzrakstiet, kā izkārtojumam vajadzētu pielāgoties.
Pārbaudiet šī karkasa pieejamību: vai lasīšanas secībai ir jēga, vai pietiek ar pieskārienu, vai ir tikai uz krāsām balstīta informācija, vai galvenā darbība ir acīmredzama? Uzskaitiet problēmas un ieteikumus pa vienam. Stiepļu karkass: <<teksts>>
Izveidojiet reālistisku viettura saturu šim karkasam: 5 dažāda garuma galvenes (no īsas līdz ļoti garas), 3 tukši statusa teksti, 2 kļūdu ziņojumi. Mērķis: pārbaudīt dizainu ar reālu saturu, nevis ideālu.Konteksts: <<ekrāns>>
Vāja uzvedne / spēcīga uzvedne
Vāji: "Izveidojiet sākumlapas karkasu."
Rezultāts: vispārīgs skelets ar neskaidru satura prioritāti, viendabīgumu un bez malas gadījumiem.
Spēcīgs: "Iesakiet 3 dažādas karkasa pieejas mobilajai sākumlapai ar mērķi X; 3 svarīgākie elementi ir; izskaidrojiet katras pieejas prioritāšu loģiku; parādiet arī tukšas un kļūdas statusu."
Rezultāts: salīdzināmas, prioritāras, reālas iespējas.
Atšķirība: spēcīga uzvedne dod mērķi + prioritāte + variācija + malas gadījums.
Biežas kļūdas
- Uzskatot pirmo izvadi par galīgo dizainu. AI karkass ir sākums; Turpināšana nenobriedušā stāvoklī ir dārga.
- Esiet apmierināts ar satura paraugu. Ideāla garuma fiktīvais teksts liek izkārtojumam izskatīties neparasti skaisti.
- Nulles un kļūdu stāvokļu apiešana. Pirmais ekrāns, ko lietotājs redz, bieži vien ir tukšs.
- Pieejamība tiek atstāta uz pēdējo. Kontrasts un nolasīšanas secība tiek ņemta vērā karkasa stadijā un vēlāk netiek labota.
- Turpina ar vienu variantu. Fiksējot pirmo ideju, neradot opcijas, tiek palielinātas aklās vietas.
Rezumējot
Wireframing ir lētākais veids, kā pārbaudīt satura prioritāti un plūsmu, neiedziļinoties estētikā; AI ievērojami paātrina šo posmu. Galvenais ir sniegt stingru īsu izklāstu (mērķis, prioritāte, konteksts, ierobežojums, variācija) pirms ražošanas un aplūkot produkciju kā sākotnējo melnrakstu. To rīku izvade, kas ģenerē saskarnes no teksta, nenobriest, kamēr tā nav pārbaudīta ar reālu saturu, malām un pieejamību. Izmantojiet modeli kā ātro opciju ģeneratoru; Jūs pievienojat briedumu un lēmumu.
Lietojumprogrammas uzdevums
- Izvēlieties ekrānu un uzrakstiet īsu tekstu, kurā ir ietverts mērķis, 3 svarīgākie elementi un obligātie elementi.
- Ar pirmo uzvedni ģenerējiet 3 skaidri atšķirīgas karkasa pieejas.
- Izmantojot ceturto uzvedni, izveidojiet reālistisku (īsi, ilgi un tukšu) viettura saturu un pārbaudiet izkārtojumu.
- Pievienojiet tukšu, kļūdu un ielādes statusus ar otro uzvedni.
- Veiciet pieejamības pārbaudi ar trešo uzvedni un ievietojiet rezultātus karkasā.
kontrolsaraksts
- [ ] Pirms ražošanas es uzrakstīju īsu ziņojumu ar mērķi un prioritātēm.
- [ ] Es ražoju nevis vienu, bet 3 dažādas variācijas.
- [ ] Izmēģināju izkārtojumu ar reālistisku (garu/īsu/tukšu) saturu.
- [ ] Es projektēju tukšus, kļūdu un ielādes stāvokļus.
- [ ] Es veicu pieejamības pārbaudi karkasa stadijā.
- [ ] Es uztvēru produkciju kā sākotnējo projektu un nogatavināju to.