Pag-agos sa Disenyo - Layout ug mga Artwork nga Naghatag Motion

01 sa 07

Unsa ang Visual Flow?

Ang visual nga agianan nagdala sa mata sa tigpaminaw pinaagi sa dokumento sa usa ka paagi nga ang tanan nga importante nga mga elemento madawat nga ilado, ug walay bisan unsa nga makadaut sa panan-aw o makapahimo sa tumatan-aw nga mawad-an sa kahulugan. Ang paggamit sa klaro nga mga elemento sama sa mga arrow o mga numero mao ang labing komon nga paagi nga ang mga tigdesinyo sa Web naggamit sa dagan, apan adunay uban pang mga matang sa mga elemento nga mahimong magamit ug sayup nga gigamit sa pagdumala sa imong mga magbabasa nga mobalhin sa usa ka partikular nga dalan. Ang mga lakang niini nga pagtudlo mopakita kanimo mga panig-ingnan sa maayo ug dili maayo nga dagan ug makatabang kanimo nga makat-on sa bokabularyo sa visual flow sa disenyo.

Ang dagan sa visual makab-ot sa daghang mga paagi:

Ang mosunod nga mga hulagway mopakita kanimo sa pipila ka kasagarang mga sayup sa pagdagayday sa mga panid sa Web ug kung unsaon kini pagtul-id.

02 sa 07

Ang Kasadpan nga Teksto Nag-agos gikan sa Wala ngadto sa Tuo

Sayop nga Pag-agos. Image courtesy M Kyrnin

Kon ikaw nagdako nga nagbasa sa usa ka pinulongan sa Kasadpan, naanad ka sa paghunahuna nga ang teksto kinahanglan molihok gikan sa wala ngadto sa tuo. Busa, sa paglihok sa mata sa usa ka linya sa teksto, kini nagalihok gikan sa wala ngadto sa tuo.

Sa hulagway sa ibabaw, ang busay nagdagayday sa usa ka katungod sa wala nga direksyon, ug ang teksto nag-agos sa busay. Tungod kay nahibal-an namo nga ang mga busay mahulog, adunay usa ka disconnect sa direksyon sa agos sa tubig uban sa agos sa teksto. Ang mata sa tumatan-aw nagalihok sa sayop nga direksyon aron mabasa ang teksto.

03 of 07

Ang imong Teksto Kinahanglan nga Moagay sa mga Imahen

Husto nga Pag-agos. Image courtesy M Kyrnin

Sa kini nga kaso, ang imahe nabali aron ang teksto nagaagi sa sama nga direksyon sama sa tubig. Ang tanan nga mga elemento modala sa mata sa tigpaminaw uban sa pagdagayday sa tubig ug sa agianan sa teksto.

04 sa 07

Ang Wala sa Tuo Sama sa Pagpuasa

Sayop nga Pag-agos. Image courtesy M Kyrnin

Ang kabayo sa niini nga litrato nagdagan gikan sa tuo ngadto sa wala, apan ang teksto mao ang Iningles ug busa mibiya ngadto sa tuo. Ang biswal nga epekto sa kabayo sa usa ka direksyon makapahinay sa lakang sa tibuok nga dokumento tungod kay kini lahi nga direksyon kay sa teksto.

Sa mga kultura sa Kasadpan, tungod kay ang atong mga pinulongan nagbalhin gikan sa wala ngadto sa tuo, nakahimo kita sa pagtan-aw sa usa ka biswal nga direksyon sa wala ngadto sa tuo ingon nga sa unahan ug pagpuasa, samtang ang tuo ngadto sa wala mas paatras ug hinay. Kon ikaw nagmugna sa usa ka plano nga adunay kahulugan sa katulin, kinahanglan nimo hinumdoman kini - ug ipabilin ang imong mga hulagway nga nagalihok sa sama nga direksyon sa teksto.

05 sa 07

Ayaw Pukawa ang Mata sa Nagtan-aw nga Hinay-hinay

Husto nga Pag-agos. Image courtesy M Kyrnin

Sa diha nga ang kabayo ug ang teksto managsama nga direksyon, ang gipasabut nga katulin midako.

06 sa 07

Tan-awa ang mga Mata sa Mga Litrato sa Web

Sayop nga Pag-agos. Image courtesy J Kyrnin

Daghang mga Web site nga adunay mga litrato naghimo niini nga sayop - gibutang nila ang litrato sa usa ka tawo sa panid, ug ang tawo nagtan-aw gikan sa sulod. Mahimo kini makita sa site sa About.com Web Design sa daan nga disenyo.

Sama sa imong makita, ang akong litrato gibutang sa tupad sa pipila ka teksto. Apan nahimulag ko gikan niana nga teksto, hapit na nako ibalik kini. Kung nakita nimo nga ang linggwahe sa lawas tali sa duha ka tawo sa usa ka pundok, sayon ​​nga hunahunaon nga dili ko ganahan sa tawo nga akong sunod (sa kini nga kaso ang block nga teksto).

Daghang pagtuon sa pagsusi sa mata nagpakita nga ang mga tawo nakakita sa mga nawong sa mga panid sa Web. Ug ang mga may kalabutan nga mga pagtuon nagpakita nga sa pagtan-aw sa mga hulagway, ang mga tawo dayon nga dili matukib mosunod sa mga mata aron tan-awon kung unsa ang gihulagway sa hulagway. Kon ang usa ka litrato sa imong site nagtan-aw sa ngilit sa browser, kana mao ang imong tan-awon, ug dayon i-hit ang back button.

07 of 07

Ang mga Mata sa Bisan Unsa nga Litrato Kinahanglang Atubangan ang Kontento

Husto nga Pag-agos. Image courtesy J Kyrnin

Sa bag-ong disenyo alang sa About.com, ang litrato mas maayo. Karon ang akong mga mata naglantaw sa unahan, ug adunay usa ka gamay nga pahibalo nga ako nagapangita sa akong wala - diin ang teksto.

Ang usa ka mas maayo nga litrato alang sa maong posisyon mao ang usa diin ang akong mga abaga usab angled ngadto sa teksto. Apan kini usa ka mas maayo nga solusyon kay sa unang litrato. Ug, alang sa mga sitwasyon diin ang imahe anaa sa katungod sa sulod ingon man usab sa wala, mahimo kini nga usa ka maayong pagkompromiso.

Hinumdomi usab nga samtang ang mga hulagway sa mga nawong sa mga tawo nakadani sa labing pagtagad, pareho usab ang mga litrato sa hayop. Pananglitan, niining sample nga layout, naa ang akong mga iro nga nagtan-aw sa wala, apan ang hulagway hapit na kaayo. Busa sila nagtan-aw sa panid. Kini nga layout mahimong mauswag kung akong giusab ang orientasyon sa mga iro aron nga sila nagtan-aw sa sentro sa screen.