Kitengo 5 / 11

Wireframe na Kizazi cha Usanifu cha Azimio Chini

Faida:

  • Uwezo wa kubadilisha madhumuni ya skrini na kipaumbele cha yaliyomo kuwa muhtasari wazi na kutoa rasimu za waya na tofauti kwa akili ya bandia.
  • Uwezo wa kutathmini kwa haraka matokeo ya zana zinazozalisha miingiliano kutoka kwa maandishi na kuiangalia kulingana na kanuni za muundo
  • Uwezo wa kukomaa fremu za waya za AI kwa jicho la maudhui halisi, kesi ya makali na ufikivu

Wireframe ni kiunzi cha kiwango cha kisanduku cha skrini, kisicho na rangi, maelezo ya kuona na ya chapa. Kusudi lake ni rahisi: kupima haraka kipaumbele, uwekaji na mtiririko wa maudhui; kutatua swali "nini, wapi, kwa nini hapa" bila kuingia katika aesthetics. Muundo wa uaminifu wa chini pia unaelezea hatua hii ya kwanza, mbaya ya rasimu. Akili Bandia huharakisha hatua hii kwa kiasi kikubwa: zana zinazozalisha fremu za waya kutoka kwa maandishi huunda muhtasari wa skrini kutoka kwa ombi la sentensi moja. Lakini kasi hii pia inakaribisha maoni potofu kwamba "matokeo ya kwanza ni muundo wa mwisho." Kitengo hiki kinafundisha jinsi ya kutengeneza na kukomaa kwa umakinifu wima za AI.

Kwanza muhtasari, kisha uzalishaji

Wireframe nyingi mbaya hutoka kwa ufupi mbaya. Ukiiambia AI "tengeneza skrini ya kuingia" utapata muundo wa kawaida. Muhtasari wa nguvu wa waya ni pamoja na:

  • Kusudi la skrini: Kwa nini mtumiaji anakuja kwenye skrini hii, anafaidika nini kutoka kwake?
  • Kipaumbele cha maudhui: Je, ni vipengele gani vitatu muhimu zaidi? Jicho la mtumiaji linapaswa kuanguka wapi kwanza?
  • Muktadha: Kifaa (simu ya mkononi/desktop), hali ya sasa ya mtumiaji, skrini iliyotangulia.
  • Vikwazo: Vipengele vinavyohitajika (kanusho, kipengele cha chapa), kikomo cha nafasi.
  • Ombi la utofautishaji: Ni miundo mingapi tofauti unayotaka kuona.

Unapotoa kifupi hiki, mfano hutoa chaguzi tofauti ambazo zitakusaidia kufanya uamuzi; Ikiwa kifupi ni dhaifu, wote watakuwa sawa na wasio na maana.

Kidokezo: Uliza AI sio fremu moja ya waya "kamili", lakini kwa njia 3 tofauti (k.m. "orodha moja nzito, picha moja nzito, moja ya hatua moja"). Chaguzi anuwai hufungua sehemu zako za upofu.

Mahali halisi ya zana zinazozalisha miingiliano kutoka kwa maandishi

Katika miaka ya hivi karibuni, zana zinazoahidi "kuiandika na interface inaonekana" zimeenea. Hizi hutoa rasimu ya kuanza haraka sana. Lakini ikiwa haujui mipaka yake, itakupotosha:

  • Haijajaribiwa na maudhui halisi: Maandishi ya sampuli daima ni urefu bora; Ikiwa kichwa halisi kitafurika, mpangilio unaweza kukatizwa.
  • Hakuna matukio makali: Orodha tupu, jina refu, kesi ya hitilafu kwa kawaida haijachorwa.
  • Ufikiaji sio chaguo-msingi: Tofauti, eneo la kugusa, utaratibu wa kusoma mara nyingi haudhibitiwi.
  • Haijalishi mfano wa kiakili: mfano hutoa "kiolesura cha wastani", sio tabia ya mtumiaji wako.

Mtazamo sahihi: zingatia matokeo kama rasimu ya awali, sio muundo wa mwisho. Kinachofanya wireframe "nzuri" ni kwamba imejaribiwa na maudhui halisi, kesi ya makali, na ufikiaji.

Jukwaa

Pato la AI

Ukomavu ulioongeza

agizo la kwanza

Mifupa ya mstari wa sanduku

Rekebisha kulingana na kipaumbele cha maudhui

Maudhui

Sampuli ya urefu bora

Kujaribu kwa maudhui halisi, yaliyojaa, tupu

kesi ya makali

Kwa kawaida hakuna

Hali tupu/kosa/kupakia

upatikanaji

haijadhibitiwa

Tofauti, mlolongo, eneo la kugusa

Kiungo cha kutiririsha

skrini moja

Uwiano na skrini iliyotangulia/ifuatayo

kesi tatu ndogo

Kesi ya 1 - Tofauti tatu, uamuzi wazi. Mbuni aliuliza AI kwa mpangilio 3 tofauti wa dashibodi (kadi ya muhtasari, jedwali, chati-nzito). Rasimu 3 zilifika kwa dakika 15; Timu ilionyesha haya kwa wadau na kufanya uamuzi wa mwelekeo katika dakika 20. Ikiwa imefanywa kwa mikono, rasimu 3 zingechukua nusu ya siku.

Kesi ya 2 - Maudhui halisi yalitatiza mpangilio. Katika mfumo wa waya wa AI, majina ya bidhaa yalikuwa maneno 2 kila wakati. Katika orodha halisi, baadhi ya majina yalikuwa na urefu wa herufi 40 na yalizidisha kadi. Mbuni alibadilisha mpangilio baada ya kuujaribu na data halisi. Somo: sampuli ya maudhui ya uongo; Ijaribu na maudhui halisi.

Kesi ya 3 - Kesi tupu imesahaulika. Filamu ya waya ya skrini ya "vipendwa vyangu" ilikuwa inaonyesha orodha kamili pekee. Mtumiaji mpya hana vipendwa; Skrini inafungua wazi. Mbuni aliiambia akili ya bandia "kuteka hali tupu pia" na akaongeza hali tupu inayoongoza. Somo: hali tupu ni sehemu ya muundo mkuu, sio makali.

Maudhui kabla, sanduku baada

Dhana potofu ya kawaida katika Wireframing ni kukosea muundo wa "uwekaji kisanduku". Hata hivyo, wireframe nzuri ina mwelekeo wa maudhui: kwanza unaamua ni habari gani inapaswa kuwa kwenye skrini na kwa kipaumbele gani; Sanduku ni matokeo ya uamuzi huu. Kuunda "kipaumbele cha maudhui" ni hatua ya kwanza ya kutengeneza waya: unaorodhesha vitu ambavyo mtumiaji anahitaji kuona kwenye skrini hii kutoka muhimu zaidi hadi muhimu sana. AI ni mshirika mzuri katika kuja na orodha hii; Inatanguliza vipengele vinavyowezekana vya maudhui unapotoa madhumuni ya skrini. Kisha unatafsiri kipaumbele hicho kwa utaratibu: kipengee muhimu zaidi katika sehemu inayoonekana zaidi. Agizo hili linapobadilishwa - unapochora mpangilio mzuri kwa mara ya kwanza na kisha kujaribu kutoshea yaliyomo - maelezo ambayo mtumiaji anahitaji husukumwa chinichini.

Tahadhari: Wireframe yenye sura nzuri inaweza kuficha kipaumbele cha maudhui kisicho sahihi. "Je, mpangilio huu ni mzuri?" lakini "Je, habari muhimu zaidi ni jambo la kwanza ambalo linavutia jicho lako?" uliza.

Vidokezo vinavyoweza kunakiliwa

Jukumu lako: mtengenezaji mkuu wa bidhaa.Madhumuni ya skrini: <<purpose>>. Kifaa: <<mobile/desktop>>.Vipengee 3 Maarufu: <<orodha>>. Vipengee vinavyohitajika: <<orodha>>.Kazi: Pendekeza mbinu 3 tofauti kabisa za mfumo wa waya (pamoja na maandishi, sehemu kwa sehemu).Kwa kila mbinu: mantiki ya mpangilio, mpangilio wa utangulizi na kwa nini utafanya kazi.

Jaribu ufafanuzi huu wa wireframe katika hali halisi ya ulimwengu:<<wireframe text>>. Chora au ueleze: hali tupu, maudhui marefu (ya kufurika), hali ya hitilafu, hali ya upakiaji. Kwa kila moja, andika jinsi mpangilio unapaswa kubadilika.

Angalia mfumo huu wa waya kwa ufikivu: je, mpangilio wa kusoma una maana, malengo ya mguso yanatosha, kuna maelezo yanayotegemea rangi pekee, je, kitendo cha msingi ni dhahiri? Orodhesha shida na mapendekezo moja baada ya nyingine. Wireframe: <<text>>

Tengeneza maudhui halisi ya kishika nafasi kwa fremu hii ya waya: vichwa 5 vya urefu tofauti (kutoka mfupi hadi mrefu sana), maandishi 3 ya hali tupu, ujumbe 2 wa hitilafu. Kusudi: kujaribu muundo na maudhui halisi, sio bora.Muktadha: <<screen>>

Mwongozo dhaifu / Mwongozo thabiti

Dhaifu: "Tengeneza wireframe ya ukurasa wa nyumbani."

Matokeo: Mifupa ya jumla yenye kipaumbele cha maudhui kisichoeleweka, usawa, na hakuna kesi za makali.

Imara: "Pendekeza mbinu 3 tofauti za mfumo wa waya kwa ukurasa wa nyumbani wa simu wenye kusudi X; vipengele 3 muhimu zaidi ni; eleza mantiki ya kipaumbele ya kila mbinu; pia onyesha hali tupu na hitilafu."

Matokeo: Chaguzi zinazoweza kulinganishwa, zilizopewa kipaumbele na za kweli.

Tofauti: haraka haraka hutoa kusudi + kipaumbele + tofauti + kesi ya makali.

Makosa ya kawaida

  • Kuzingatia pato la kwanza kama muundo wa mwisho. AI wireframe ni mwanzo; Kuendelea katika hali yake ya ukomavu ni gharama kubwa.
  • Ridhika na sampuli ya yaliyomo. Maandishi ya dummy ya urefu bora hufanya mpangilio uonekane mzuri wa uwongo.
  • Kukwepa hali zisizo na makosa. Skrini ya kwanza ambayo mtumiaji huona mara nyingi huwa tupu.
  • Inaacha ufikiaji kwa mwisho. Agizo la kulinganisha na kusoma huzingatiwa katika hatua ya waya na hazijawekwa viraka baadaye.
  • Kuendelea na tofauti moja. Kurekebisha wazo la kwanza bila kutoa chaguzi hutukuza matangazo ya upofu.

Kwa muhtasari

Wireframing ni njia ya bei nafuu zaidi ya kupima kipaumbele cha maudhui na mtiririko bila kuingia katika aesthetics; AI inaharakisha sana hatua hii. Jambo kuu ni kutoa muhtasari wa nguvu (kusudi, kipaumbele, muktadha, kizuizi, tofauti) kabla ya uzalishaji na kuona matokeo kama rasimu ya awali. Toleo la zana zinazozalisha violesura kutoka kwa maandishi halikomai hadi lijaribiwe kwa maudhui halisi, matukio makali na ufikivu. Tumia mfano kama jenereta ya chaguo la haraka; Unaongeza ukomavu na uamuzi.

Jukumu la maombi

  1. Chagua skrini na uandike muhtasari unaojumuisha madhumuni, vipengele 3 muhimu zaidi, na vipengele vya lazima.
  2. Tengeneza mbinu 3 tofauti za waya kwa haraka ya kwanza.
  3. Kwa kidokezo cha nne, toa maudhui halisi (ya muda mfupi-tupu) ya kishika nafasi na ujaribu mpangilio.
  4. Ongeza hali tupu, makosa na upakiaji kwa kidokezo cha pili.
  5. Tekeleza ukaguzi wa ufikivu kwa kidokezo cha tatu na uchapishe matokeo kwenye fremu ya waya.

orodha ya ukaguzi

  • [ ] Niliandika muhtasari wenye madhumuni na vipaumbele kabla ya uzalishaji.
  • [ ] Sikutoa tofauti moja lakini 3 tofauti.
  • [ ] Nilijaribu mpangilio na maudhui ya kweli (ndefu/fupi/tupu).
  • [ ] Nilitengeneza hali tupu, makosa na upakiaji.
  • [ ] Nilifanya ukaguzi wa ufikivu katika hatua ya wireframe.
  • [ ] Nilichukulia pato kama rasimu ya awali na nikalikomaza.