Unità 5 / 11

Wireframe u Ġenerazzjoni tad-Disinn b'Riżoluzzjoni Baxxa

Qligħ:

  • Kapaċità li tittrasforma l-iskop tal-iskrin u l-prijorità tal-kontenut f'qosor ċar u tipproduċi abbozzi ta' wireframe u varjazzjonijiet b'intelliġenza artifiċjali
  • Kapaċità li tevalwa malajr l-output ta 'għodod li jiġġeneraw interfaces mit-test u skrinhom skond il-prinċipji tad-disinn
  • Kapaċità li timmatura wireframes AI b'għajnejk għal kontenut reali, każ ta 'tarf u aċċessibbiltà

Wireframe huwa l-iskeletru fil-livell tal-kaxxa ta 'skrin, imqaxxar mill-kulur, dettalji viżwali u tal-marka. L-iskop tiegħu huwa sempliċi: biex tittestja malajr il-prijorità, it-tqegħid u l-fluss tal-kontenut; issolvi l-mistoqsija "x'inhu, fejn, għaliex hawn" mingħajr ma tidħol fl-estetika. Disinn ta 'fedeltà baxxa jiddeskrivi wkoll dan l-ewwel stadju ta' abbozz mhux maħdum. L-intelliġenza artifiċjali tħaffef dan il-pass b'mod radikali: għodod li jiġġeneraw wireframes mit-test joħolqu deskrizzjoni tal-iskrin minn talba ta 'sentenza waħda. Iżda din il-veloċità tistieden ukoll il-kunċett żbaljat li "l-ewwel output huwa d-disinn finali." Din l-unità tgħallem kif tiġġenera b'mod intelliġenti u timmatura b'mod kritiku wireframes AI.

L-ewwel il-qosor, imbagħad il-produzzjoni

Ħafna wireframes ħżiena joħorġu minn brief ħażin. Jekk tgħid lill-AI "agħmel skrin tal-login" ikollok mudell ġeneriku. Brief b'saħħtu ta' wireframe jinkludi:

  • Għan tal-iskrin: Għaliex l-utent jasal għal dan l-iskrin, x'jigwadanja minnu?
  • Prijorità tal-kontenut: X'inhuma l-aktar tliet elementi importanti? Fejn għandha taqa 'għajn l-utent l-ewwel?
  • Kuntest: Apparat (mobbli/desktop), burdata attwali tal-utent, skrin preċedenti.
  • Restrizzjonijiet: Elementi meħtieġa (ċaħda, element tad-ditta), limitu ta' spazju.
  • Talba għall-varjazzjoni: Kemm trid tara taqsim differenti.

Meta tagħti dan il-qosor, il-mudell jipproduċi għażliet differenti li jgħinuk tieħu deċiżjoni; Jekk il-qosor ikun dgħajjef, kollha jkunu simili u inutli.

Tip: Staqsi lill-AI mhux għal wireframe wieħed "perfett", iżda għal 3 approċċi distintament differenti (eż. "lista waħda tqil, waħda tqila immaġni, waħda ffokata fuq azzjoni waħda"). Varjetà ta 'għażliet tiftaħ il-blind spots tiegħek.

Post realistiku ta 'għodod li jiġġeneraw interfaces mit-test

F'dawn l-aħħar snin, għodod li jwiegħdu "tiktebha u tidher l-interface" saru mifruxa. Dawn jipproduċu abbozz ta 'starter verament mgħaġġel. Imma jekk ma tafx il-limiti tagħha, tiżgwidak:

  • Mhux ittestjat b'kontenut reali: It-testi tal-kampjun huma dejjem it-tul ideali; Jekk it-titolu attwali jfur, it-tqassim jista 'jiġi mfixkel.
  • M'hemm l-ebda każijiet tat-tarf: Lista vojta, isem twil, każ ta 'żball normalment mhumiex imfassla.
  • L-aċċessibbiltà mhix l-awtomatika: Kuntrast, touch area, ordni tal-qari ħafna drabi mhumiex ikkontrollati.
  • Huwa indifferenti għall-mudell mentali: il-mudell jipproduċi l-"interface medja", mhux il-vizzju tal-utent tiegħek.

Attitudni korretta: ikkunsidra l-output bħala l-abbozz inizjali, mhux id-disinn finali. Dak li jagħmel wireframe "tajjeb" huwa li ġie ttestjat b'kontenut reali, każ tat-tarf, u aċċessibbiltà.

Stadju

Output AI

Il-maturità li żidt

l-ewwel ordni

Skeletru tal-linja tal-kaxxa

Waħħal ibbażat fuq il-prijorità tal-kontenut

Kontenut

Kampjun ta 'tul ideali

Ittestjar b'kontenut reali, li jfur u vojt

każ tarf

Normalment xejn

Stati vojta/żball/tagħbija

aċċessibbiltà

mhux ikkontrollat

Kuntrast, sekwenza, touch area

Rabta Stream

skrin wieħed

Konsistenza mal-iskrin preċedenti/li jmiss

tliet każijiet żgħar

Każ 1 — Tliet varjazzjonijiet, deċiżjoni ċara. Disinjatur talab lill-AI għal 3 layouts differenti għal dashboard (karta sommarja, tabella, chart-heavy). 3 abbozzi waslu fi 15-il minuta; It-tim wera dawn lill-partijiet interessati u ħa deċiżjoni ta' direzzjoni f'20 minuta. Kieku jsir manwalment, 3 abbozzi jieħdu nofs ġurnata.

Każ 2 — Il-kontenut attwali tfixkel l-ordni. Fil-wireframe AI, l-ismijiet tal-prodotti dejjem kienu kelmiet 2. Fil-katalgu attwali, xi ismijiet kienu twal 40 karattru u qabżu l-karti. Id-disinjatur biddel it-tqassim wara li ttestjah b'dejta reali. Lezzjoni: kontenut tal-kampjun tinsab; Ittestjah b'kontenut reali.

Każ 3 — Kawża vojta minsija. Wireframe tal-iskrin "favoriti tiegħi" kien juri biss il-lista sħiħa. L-utent il-ġdid m'għandux favoriti; L-iskrin jiftaħ vojt. Id-disinjatur qal lill-intelliġenza artifiċjali biex "jiġbed l-istat vojt ukoll" u żied stat vojt ta 'gwida. Lezzjoni: l-istat vojt huwa parti mid-disinn prinċipali, mhux tarf.

Kontenut qabel, kaxxa wara

L-iktar kunċett żbaljat komuni fil-Wireframing huwa li d-disinn jiġi żbaljat għal "tqegħid tal-kaxxa". Madankollu, wireframe tajjeb huwa orjentat lejn il-kontenut: l-ewwel tiddeċiedi liema informazzjoni għandha tkun fuq l-iskrin u b'liema prijorità; Il-kaxxi huma r-riżultat ta’ din id-deċiżjoni. Il-ħolqien ta' "prijorità tal-kontenut" huwa l-ewwel pass tal-wireframing: telenka l-affarijiet li l-utent jeħtieġ li jara fuq dan l-iskrin mill-aktar importanti għall-inqas importanti. AI hija sieħba tajba biex toħroġ b'din il-lista; Jipprijoritizza elementi possibbli tal-kontenut meta tagħti l-iskop tal-iskrin. Imbagħad tittraduċi dik il-prijorità f'ordni: l-aktar oġġett importanti fl-aktar post viżibbli. Meta din l-ordni tinqaleb — meta l-ewwel tfassal tqassim sabiħ u mbagħad tipprova twaħħal il-kontenut fih — l-informazzjoni li l-utent fil-fatt jeħtieġ tiġi mbuttata fl-isfond.

Attenzjoni: Wireframe li jkun sabiħ jista' jaħbi prijorità ta' kontenut mhux korretta. "Din is-setup hija sabiħa?" imma "L-aktar informazzjoni importanti hija l-ewwel ħaġa li tiġbed l-għajnejn tiegħek?" staqsi.

Promptijiet kopjabbli

Ir-rwol tiegħek: disinjatur tal-prodott anzjan. Għan tal-iskrin: <<għan>>. Apparat: <<mobbli/desktop>>.L-aqwa 3 oġġetti: <<lista>>. Elementi meħtieġa: <<lista>>.Kompitu: Issuġġerixxi 3 approċċi ta' wireframe distintament differenti (bit-test, taqsima b'taqsima). Għal kull approċċ: loġika tat-tqassim, ordni ta' preċedenza u għaliex se taħdem.

Ittestja din id-definizzjoni tal-wireframe f'kundizzjonijiet tad-dinja reali:<<wireframe test>>. Iġbed jew iddeskrivi: stat vojt, kontenut twil (overflow), stat ta 'żball, stat ta' tagħbija. Għal kull wieħed, ikteb kif it-tqassim għandu jadatta.

Iċċekkja dan il-wireframe għall-aċċessibbiltà: l-ordni tal-qari tagħmel sens, il-miri tal-mess huma suffiċjenti, hemm biss informazzjoni bbażata fuq il-kulur, l-azzjoni primarja hija ovvja? Elenka l-problemi u s-suġġerimenti wieħed wieħed. Wireframe: <<test>>

Iġġenera kontenut realistiku ta' placeholder għal dan il-wireframe: 5 headers ta' tulijiet differenti (minn qasir għal twil ħafna), 3 testi ta' status vojta, 2 messaġġi ta' żball. Għan: biex tittestja d-disinn b'kontenut reali, mhux ideali. Kuntest: <<screen>>

Pront dgħajjef / Pront qawwi

Dgħajjef: "Agħmel wireframe homepage."

Riżultat: Skeletru ġeneriku bi prijorità ta 'kontenut mhux ċara, uniformità, u l-ebda każijiet tarf.

Qawwija: "Suġġerixxi 3 approċċi wireframe differenti għall-homepage mobbli bl-iskop X; it-3 elementi l-aktar importanti huma; spjega l-loġika ta 'prijorità ta' kull approċċ; uri wkoll stat vojt u ta 'żball."

Riżultat: Għażliet komparabbli, prijoritizzati, realistiċi.

Differenza: pront b'saħħtu jagħti skop + prijorità + varjazzjoni + każ tarf.

Żbalji komuni

  • Meta wieħed iqis l-ewwel output bħala d-disinn finali. AI wireframe huwa l-bidu; Li tipproċedi fl-istat immatur tagħha hija għalja.
  • Kun kuntent bil-kontenut tal-kampjun. Test finta ta 'tul ideali jagħmel it-tqassim jidher sabiħ b'mod falz.
  • Jinjora l-istati nulli u ta' żball. L-ewwel skrin li l-utent jara ħafna drabi jkun vojt.
  • Inħallu l-aċċessibilità għall-aħħar. Il-kuntrast u l-ordni tal-qari huma kkunsidrati fl-istadju tal-wireframe u ma jiġux patched aktar tard.
  • Proċediment b'varjazzjoni waħda. L-iffissar fuq l-ewwel idea mingħajr ma tiġġenera għażliet tkabbar blind spots.

Fil-qosor

Il-wireframing huwa l-orħos mod biex tittestja l-prijorità u l-fluss tal-kontenut mingħajr ma tidħol fl-estetika; L-AI taċċellera ħafna dan l-istadju. Iċ-ċavetta hija li tagħti sommarju qawwi (għan, prijorità, kuntest, restrizzjoni, varjazzjoni) qabel il-produzzjoni u jara l-output bħala abbozz inizjali. L-output ta 'għodod li jiġġeneraw interfaces mit-test ma jimmaturawx sakemm jiġi ttestjat b'kontenut reali, każijiet edge u aċċessibbiltà. Uża l-mudell bħal ġeneratur ta 'għażla ta' malajr; Iżżid il-maturità u d-deċiżjoni.

Kompitu ta' applikazzjoni

  1. Agħżel skrin u ikteb brief li jinkludi l-iskop, it-3 elementi l-aktar importanti, u l-elementi obbligatorji.
  2. Iġġenera 3 approċċi wireframe distintament differenti bl-ewwel pront.
  3. Bir-raba 'pront, ipproduċi kontenut realistiku (qasir-tul-vojt) ta' placeholder u ttestja t-tqassim.
  4. Żid stats vojta, żball u tagħbija bit-tieni pront.
  5. Wettaq kontroll tal-aċċessibbiltà mat-tielet pront u poġġi s-sejbiet fil-wireframe.

lista ta' kontroll

  • [ ] Jien ktibt brief bl-iskop u l-prijoritajiet qabel il-produzzjoni.
  • [ ] Jien ipproduċejt mhux waħda iżda 3 varjazzjonijiet differenti.
  • [ ] Ittestjajt it-tqassim b'kontenut realistiku (twil/qasir/vojt).
  • [ ] Iddisinja stati vojta, ta' żball u ta' tagħbija.
  • [ ] Għamilt il-kontroll tal-aċċessibilità fl-istadju tal-wireframe.
  • [ ] Ittrattajt l-output bħala abbozz inizjali u mmaturajt.