Pelnas:
- Galimybė paversti ekrano paskirtį ir turinio prioritetą į aiškų trumpą tekstą ir dirbtiniu intelektu sukurti rėmo juodraščius bei variantus
- Gebėjimas greitai įvertinti sąsajas iš teksto generuojančių įrankių išvestį ir jas ekranuoti pagal projektavimo principus
- Galimybė subręsti AI vielinius rėmelius, atsižvelgiant į tikrą turinį, kraštovaizdį ir prieinamumą
„Wireframe“ yra dėžutės linijos lygio ekrano karkasas, kuriame nėra spalvų, vaizdinių ir prekės ženklo detalių. Jos tikslas paprastas: greitai patikrinti turinio prioritetą, vietą ir srautą; sprendžiant klausimą „kas, kur, kodėl čia“ nesigilinant į estetiką. Žemo tikslumo dizainas taip pat apibūdina šį pirmąjį, grubaus projekto etapą. Dirbtinis intelektas radikaliai pagreitina šį žingsnį: įrankiai, generuojantys vielinius rėmelius iš teksto, sukuria ekrano kontūrą iš vieno sakinio užklausos. Tačiau šis greitis taip pat skatina klaidingą nuomonę, kad „pirmasis rezultatas yra galutinis dizainas“. Šis skyrius moko, kaip protingai generuoti ir kritiškai brandinti AI vielinius rėmelius.
Pirmiausia trumpas, tada gamyba
Dauguma blogų vielinių rėmų atsiranda dėl blogo trumpo. Jei pasakysite AI „sukurti prisijungimo ekraną“, gausite bendrą modelį. Į tvirtą karkasą įeina:
- Ekrano paskirtis: Kodėl vartotojas ateina į šį ekraną, ką jis iš to gauna?
- Turinio prioritetas: kokie trys svarbiausi elementai? Kur pirmiausia turėtų nukristi vartotojo akis?
- Kontekstas: įrenginys (mobilusis / stalinis kompiuteris), dabartinė vartotojo nuotaika, ankstesnis ekranas.
- Apribojimai: būtini elementai (atsisakymas, prekės ženklo elementas), vietos apribojimas.
- Variacijos užklausa: kiek skirtingų maketų norite matyti.
Kai pateikiate šią santrauką, modelis pateikia skirtingas parinktis, kurios padės priimti sprendimą; Jei trumpas trumpas, jie visi bus panašūs ir nenaudingi.
Patarimas: prašykite dirbtinio intelekto ne vieno „tobulo“ vielinio rėmelio, o 3 aiškiai skirtingų metodų (pvz., „vienas sudėtingas sąrašas, vienas didelis vaizdas, vienas į vieną veiksmą sutelktas“). Pasirinkimų įvairovė atveria jūsų akląsias vietas.
Reali įrankių, kurie sukuria sąsajas iš teksto, vieta
Pastaraisiais metais plačiai paplito įrankiai, žadantys „parašyk ir atsiras sąsaja“. Tai sukuria tikrai greitą pradinį projektą. Bet jei nežinote jo ribų, tai jus suklaidins:
- Neišbandyta su tikru turiniu: pavyzdiniai tekstai visada yra idealaus ilgio; Jei tikrasis pavadinimas persipildo, išdėstymas gali būti sutrikdytas.
- Kraštinių atvejų nėra: tuščias sąrašas, ilgas pavadinimas, klaidos atvejai dažniausiai nebraižomi.
- Prieinamumas nėra numatytasis: kontrastas, lietimo sritis, skaitymo tvarka dažnai nekontroliuojami.
- Jis abejingas mentaliniam modeliui: modelis sukuria „vidutinę sąsają“, o ne jūsų vartotojo įprotį.
Teisingas požiūris: apsvarstykite išvestį kaip pradinį projektą, o ne galutinį dizainą. „Gerą“ vielinį rėmą daro tai, kad jis buvo išbandytas su tikru turiniu, kraštutiniu korpusu ir prieinamumu.
Scena
AI išvestis
Jūsų pridėta branda
pirmas užsakymas
Dėžutės linijos skeletas
Pataisykite pagal turinio prioritetą
Turinys
Idealaus ilgio pavyzdys
Bandymai su tikru, perpildytu, tuščiu turiniu
krašto dėklas
Paprastai jokios
Tuščios/klaidos/įkeliamos būsenos
prieinamumas
nepažymėtas
Kontrastas, seka, lietimo sritis
Srauto nuoroda
vienas ekranas
Suderinamumas su ankstesniu/kitu ekranu
trys mini dėklai
1 atvejis – trys variantai, aiškus sprendimas. Dizaineris paprašė dirbtinio intelekto 3 skirtingų prietaisų skydelio išdėstymų (suvestinės kortelės, lentelės, didelės diagramos). 3 juodraščiai atkeliavo per 15 minučių; Komanda tai parodė suinteresuotosioms šalims ir per 20 minučių priėmė sprendimą dėl krypties. Jei tai būtų daroma rankiniu būdu, 3 juodraščiai užtruktų pusę dienos.
2 atvejis – faktinio turinio tvarka sutrikdyta. AI vieliniame rėmelyje produktų pavadinimai visada buvo 2 žodžiai. Tikrame kataloge kai kurie pavadinimai buvo 40 simbolių ilgio ir perpildė korteles. Išbandęs realiais duomenimis, dizaineris pakeitė maketą. Pamoka: turinio melo pavyzdys; Išbandykite su tikru turiniu.
3 atvejis – tuščias dėklas pamirštas. „Mano mėgstamiausių“ ekrano rėmelis rodė tik visą sąrašą. Naujas vartotojas neturi mėgstamiausių; Ekranas atsidaro tuščias. Dizaineris liepė dirbtiniam intelektui „nupiešti ir tuščią būseną“ ir pridėjo nukreipiančią tuščią būseną. Pamoka: tuščia būsena yra pagrindinės konstrukcijos dalis, o ne kraštas.
Turinys prieš, dėžutė po
Labiausiai paplitęs klaidingas supratimas naudojant „Wireframing“ yra klaidingas dizainas su „dėžutės išdėstymu“. Tačiau geras karkasas yra orientuotas į turinį: pirmiausia nusprendžiate, kokia informacija turi būti ekrane ir kokiu prioritetu; Dėžės yra šio sprendimo rezultatas. „Turinio prioriteto“ sukūrimas yra pirmasis laidinio kadravimo žingsnis: išvardijate dalykus, kuriuos vartotojas turi matyti šiame ekrane, nuo svarbiausių iki mažiausiai svarbių. AI yra geras partneris rengiant šį sąrašą; Nurodant ekrano paskirtį, pirmenybė teikiama galimiems turinio elementams. Tada tą prioritetą paverčiate tvarka: svarbiausias daiktas matomiausioje vietoje. Kai ši tvarka pakeičiama – kai pirmą kartą nupiešite gražų išdėstymą ir tada bandote pritaikyti turinį – informacija, kurios vartotojui iš tikrųjų reikalinga, nustumiama į antrą planą.
Įspėjimas: gražiai atrodantis vielinis rėmas gali slėpti netinkamą turinio prioritetą. "Ar ši sąranka gera?" bet "Ar svarbiausia informacija pirmiausia krenta į akis?" paklausti.
Kopijuojami raginimai
Jūsų vaidmuo: vyresnysis gaminių dizaineris. Ekrano paskirtis: <<paskirtis>>. Įrenginys: <<mobilusis / darbalaukis>>. 3 populiariausi elementai: <<sąrašas>>. Reikalingi elementai: <<sąrašas>>.Užduotis: Pasiūlykite 3 aiškiai skirtingus vielinio rėmo metodus (su tekstu, po skyrelį).Kiekvienam metodui: išdėstymo logika, eiliškumo tvarka ir kodėl ji veiks.
Išbandykite šį vielinio rėmo apibrėžimą realiomis sąlygomis: <<wireframe text>>. Nubraižykite arba apibūdinkite: tuščia būsena, ilgas turinys (perpildymas), klaidos būsena, įkėlimo būsena. Kiekvienam parašykite, kaip turėtų prisitaikyti išdėstymas.
Patikrinkite, ar šis rėmelis pasiekiamas: ar skaitymo tvarka prasminga, ar pakanka liečiamų taikinių, ar yra tik spalvomis pagrįstos informacijos, ar akivaizdus pagrindinis veiksmas? Išvardykite problemas ir pasiūlymus po vieną. Vielos rėmas: <<tekstas>>
Sukurkite tikrovišką šio vielinio rėmelio rezervuotos vietos turinį: 5 skirtingo ilgio antraštės (nuo trumpos iki labai ilgos), 3 tušti būsenos tekstai, 2 klaidų pranešimai. Tikslas: išbandyti dizainą su tikru, o ne idealiu turiniu. Kontekstas: <<ekranas>>
Silpnas raginimas / Stiprus raginimas
Silpnas: „Sukurkite pagrindinio puslapio rėmelį“.
Rezultatas: bendras skeletas su neaiškiu turinio prioritetu, vienodumu ir be kraštinių atvejų.
Stiprus: „Pasiūlykite 3 skirtingus pagrindinio puslapio mobiliesiems metodus su X tikslu; 3 svarbiausi elementai yra; paaiškinkite kiekvieno metodo prioritetų logiką; taip pat parodykite tuščią ir klaidos būseną“.
Rezultatas: palyginamos, prioritetinės, tikroviškos galimybės.
Skirtumas: stiprus raginimas suteikia tikslą + prioritetas + variantas + kraštinis atvejis.
Dažnos klaidos
- Pirmą išvestį laikant galutiniu dizainu. AI wireframe yra pradžia; Tęsti nesubrendusioje būsenoje yra brangu.
- Būkite patenkinti pavyzdiniu turiniu. Dėl idealaus ilgio netikro teksto išdėstymas atrodo klaidingai gražus.
- Nulinių ir klaidų būsenų apėjimas. Pirmas ekranas, kurį mato vartotojas, dažnai būna tuščias.
- Prieinamumas paliekamas paskutiniam. Kontrastas ir skaitymo tvarka atsižvelgiama į rėmelio etapą ir vėliau nėra pataisomi.
- Tęsiama su vienu variantu. Pritvirtinus pirmąją idėją negeneruojant parinkčių, aklosios dėmės padidinamos.
Apibendrinant
„Wireframing“ yra pigiausias būdas patikrinti turinio prioritetą ir srautą nesigilinant į estetiką; AI labai pagreitina šį etapą. Svarbiausia yra pateikti tvirtą trumpą aprašymą (tikslas, prioritetas, kontekstas, apribojimai, variacijos) prieš gaminant ir žiūrėti produkciją kaip pradinį juodraštį. Įrankių, generuojančių sąsajas iš teksto, išvestis nesubręsta, kol nėra išbandyta naudojant tikrą turinį, kraštutinius atvejus ir prieinamumą. Naudokite modelį kaip greitųjų parinkčių generatorių; Jūs pridedate brandą ir sprendimą.
Taikymo užduotis
- Pasirinkite ekraną ir parašykite santrauką, kurioje būtų nurodytas tikslas, 3 svarbiausi elementai ir privalomi elementai.
- Pirmuoju raginimu sugeneruokite 3 aiškiai skirtingus vielinio rėmo metodus.
- Ketvirtuoju raginimu sukurkite tikrovišką (trumpą, ilgai tuščią) rezervuotos vietos turinį ir išbandykite išdėstymą.
- Antruoju raginimu pridėkite tuščią, klaidą ir įkėlimo būsenas.
- Atlikite pritaikymo neįgaliesiems patikrą trečiuoju raginimu ir paskelbkite išvadas ant vielinio rėmo.
kontrolinis sąrašas
- [ ] Prieš gamybą parašiau trumpą su tikslu ir prioritetais.
- [ ] Gaminau ne vieną, o 3 skirtingus variantus.
- [ ] Išbandžiau maketą su realistišku (ilgu/trumpu/tuščiu) turiniu.
- [ ] Suprojektavau tuščias, klaidų ir įkėlimo būsenas.
- [ ] Prieinamumo patikrinimą atlikau vielinio rėmo etape.
- [ ] Išvestį traktavau kaip pradinį juodraštį ir subrandinau.