Daloy ng Disenyo - Layout at Artwork na Nagpapahiwatig ng Paggalaw

01 ng 07

Ano ang Visual Flow?

Ang daloy ng visual ay nagdadala ng mata ng manonood sa pamamagitan ng dokumento sa isang paraan na ang lahat ng mahahalagang elemento ay tumatanggap ng katanyagan, at walang nag-snag ang pangitain o nagiging sanhi ng pagkawala ng pagtingin ng piraso. Ang paggamit ng mga halatang daloy ng mga elemento tulad ng mga arrow o mga numero ay ang pinaka-karaniwang paraan ng mga taga-disenyo ng Web na gumagamit ng daloy, ngunit may mga iba pang mga uri ng mga elemento na maaaring magamit at maling ginagamit upang idirekta ang iyong mga mambabasa upang ilipat sa isang tukoy na landas. Ang mga hakbang sa tutorial na ito ay magpapakita sa iyo ng mga halimbawa ng mabuti at masamang daloy at tulungan kang matutunan ang bokabularyo ng visual na daloy sa disenyo.

Maaaring makamit ang visual na daloy sa maraming paraan:

Ang mga sumusunod na larawan ay magpapakita sa iyo ng ilang karaniwang mga pagkakamali sa daloy sa mga pahina ng Web at kung paano itama ang mga ito.

02 ng 07

Western Text Flows mula Kaliwa hanggang Kanan

Maling daloy. Kahanga-hanga ng imahe M Kyrnin

Kung lumaki ka sa pagbabasa ng isang wikang Western, ginagamit mo na iniisip na dapat lumipat ang teksto mula kaliwa hanggang kanan. Kaya, habang gumagalaw ang mata sa isang linya ng teksto, lumilipat ito mula kaliwa hanggang kanan.

Sa itaas na larawan, ang talon ay dumadaloy sa isang karapatan sa kaliwang direksyon, at ang teksto ay dumadaloy sa talon. Dahil alam nating lahat na bumagsak ang mga waterfowl, may kakabit sa direksyon ng daloy ng tubig sa daloy ng teksto. Ang mata ng manonood ay gumagalaw sa maling direksyon upang basahin ang teksto.

03 ng 07

Ang iyong Teksto Dapat Daloy sa Mga Larawan

Tamang Daloy. Kahanga-hanga ng imahe M Kyrnin

Sa kasong ito, ang imahe ay nababaligtad upang ang teksto ay dumadaloy sa parehong direksyon ng tubig. Pinapatnubayan ng lahat ng mga elemento ang mata ng manonood na may daloy ng tubig at ang daloy ng teksto.

04 ng 07

Kaliwa hanggang Kanan ay Katumbas ng Mabilis

Maling daloy. Kahanga-hanga ng imahe M Kyrnin

Ang kabayo sa larawang ito ay tumatakbo mula sa kanan papuntang kaliwa, ngunit ang teksto ay Ingles at kaya kaliwa papuntang kanan. Ang visual na epekto ng racing ng kabayo sa isang direksyon ay nagpapabagal sa tulin ng buong dokumento sapagkat ito ay pagpunta sa ibang direksyon kaysa sa teksto.

Sa mga kultura ng Kanluran, dahil ang aming mga wika ay lumilipat mula kaliwa hanggang kanan, nakarating kami upang maiugnay ang isang visual na direksyon ng kaliwa papuntang kanan bilang pasulong at mabilis, habang ang karapatan sa kaliwa ay mas paatras at mabagal. Kapag lumilikha ka ng isang layout na may konotasyon ng bilis, dapat mong tandaan ito - at panatilihin ang iyong mga imahe na gumagalaw sa parehong direksyon ng teksto.

05 ng 07

Huwag Puwersahin ang Mata ng Tagatingnan upang Mabagal

Tamang Daloy. Kahanga-hanga ng imahe M Kyrnin

Kapag ang kabayo at ang teksto ay parehong pagpunta sa parehong direksyon, ang ipinahiwatig na bilis ay nadagdagan.

06 ng 07

Panoorin ang mga Mata sa Mga Larawan sa Web

Maling daloy. Kahanga-hanga ng imahe ng J Kyrnin

Maraming mga Web site na may mga larawan ang gumagawa ng pagkakamali na ito - inilalagay nila ang isang larawan ng isang tao sa pahina, at ang tao ay naghahanap ng malayo mula sa nilalaman. Maaaring makita ito sa site ng Web Design ng About.com sa lumang disenyo.

Gaya ng nakikita mo, ang aking larawan ay nakalagay sa tabi ng ilang teksto. Ngunit hinahanap ko ang layo mula sa tekstong iyon, halos nakabalik na ako sa likod nito. Kung nakita mo na ang lengguwahe ng katawan sa pagitan ng dalawang tao sa isang grupo, magiging madaling ipalagay na hindi ko gusto ang taong susunod ako (sa kasong ito ang bloke ng teksto).

Maraming pag-aaral ng pagsubaybay sa mata ang nagpakita na ang mga tao ay nakikita ang mga mukha sa mga pahina sa Web. At ang mga kaugnay na pag-aaral ay nagpakita na kapag tumitingin sa mga larawan, ang mga tao ay pagkatapos ay hindi sinasadya sundin ang mga mata upang makita kung ano ang larawan ay naghahanap sa. Kung ang isang larawan sa iyong site ay naghahanap off sa gilid ng browser, iyon ay kung saan ang iyong mga customer ay tumingin, at pagkatapos ay pindutin ang back button.

07 ng 07

Ang mga Mata sa Anumang Litrato Dapat Harapin ang Nilalaman

Tamang Daloy. Kahanga-hanga ng imahe ng J Kyrnin

Sa bagong disenyo para sa About.com, mas maganda ang larawan. Ngayon ang aking mga mata ay naghahanap ng mas pasulong, at may isang bahagyang pahiwatig na Naghahanap ako sa aking kaliwa - kung saan ang teksto ay.

Ang isang mas mahusay na larawan para sa posisyon ay magiging isa kung saan ang aking mga balikat ay din angled patungo sa teksto. Ngunit ito ay isang mas mahusay na solusyon kaysa sa unang larawan. At, para sa mga sitwasyon kung saan ang imahe ay nasa kanan ng nilalaman pati na rin sa kaliwa, ito ay maaaring maging isang mahusay na kompromiso.

Tandaan din na habang ang mga larawan ng mga mukha ng mga tao ay pinakikinabangan, ang parehong ay totoo sa mga larawan ng hayop. Halimbawa, sa halimbawang layout na ito, mayroon akong mga aso na naghahanap ng kaliwa, ngunit ang imahe ay napaligid sa kanan. Kaya tinitingnan nila ang pahina. Ang layout na ito ay mapapabuti kung binago ko ang oryentasyon ng mga aso upang sila ay tumitingin sa gitna ng screen.