Flow in Design - Aranĝo kaj Arto, kiu Transdonas Motion

01an de 07

Kio estas Vida Fluo?

Vida fluo portas la okulon de la spektanto tra la dokumento tiel ke ĉiuj gravaj elementoj ricevas eminentajn aspektojn, kaj nenio frapas la vizion aŭ kaŭzas la spektanton perdi senton de la peco. Uzante evidentajn fluajn elementojn kiel sagoj aŭ nombroj estas la plej ofta maniero, kiun uzantoj retejo uzas fluon, sed ekzistas aliaj tipoj de elementoj, kiuj povas esti uzataj kaj malutilaj por direkti viajn legantojn movi laŭ specifa vojo. La paŝoj en ĉi tiu lernilo montros al vi ekzemplojn de bona kaj malbona fluo kaj helpos vin lerni la vortotrezoron de vida fluo en dezajno.

Vida fluo povas esti atingita de multaj manieroj:

La sekvaj bildoj montros al vi iujn komunajn erarojn en la TTT-paĝoj kaj kiel korekti ilin.

02 de 07

Okcidentaj Tekstaj Fluoj de Maldekstre al Dekstra

Malĝusta fluo. Bildo ĝentileco M Kyrnin

Se vi kreskis legante okcidentan lingvon, vi pensas, ke teksto devas movi de maldekstre al dekstre. Do, kiam la okulo moviĝas tra linio de teksto, ĝi moviĝas de maldekstre dekstren.

En la supra bildo, la akvofalo fluas dekstre al maldekstra direkto, kaj la teksto fluas laŭ la akvofalo. Ĉar ni ĉiuj scias, ke akvofaloj falas malsupren, estas malkonektado direkte al la fluo de akvo kun la fluo de la teksto. La okulo de la spektanto moviĝas en la malĝusta direkto por legi la tekston.

03an de 07

Via teksto devas flui per la bildoj

Ĝusta fluo. Bildo ĝentileco M Kyrnin

En ĉi tiu kazo, la bildo estis renversita tiel ke la teksto fluas en la sama direkto kiel la akvo. Ĉiuj elementoj gvidas la okulon de la spektanto kun la fluo de la akvo kaj la fluo de teksto.

04 de 07

Maldekstren al Ĝuste Egalaj Rapida

Malĝusta fluo. Bildo ĝentileco M Kyrnin

La ĉevalo en ĉi tiu foto kuras de dekstre al maldekstre, sed la teksto estas angla kaj do maldekstre dekstre. La vida efiko de la ĉevala kuro unu direkto malrapidas la paŝon de la tuta dokumento ĉar ĝi iĝas malsama direkto ol la teksto.

En okcidentaj kulturoj, ĉar niaj lingvoj moviĝas de maldekstre al dekstra, ni venis al asociigi vidan direkton de maldekstre dekstre kiel antaŭen kaj rapida, kaj dekstre al maldekstre estas pli malantaŭen kaj malrapida. Kiam vi kreas aranĝon kun konotacio de rapido, vi devas memori tion - kaj konservu viajn bildojn moviĝante en la sama direkto kiel la teksto.

05 de 07

Ne fortigu la Vidilon de Okulo malrapide

Ĝusta fluo. Bildo ĝentileco M Kyrnin

Kiam la ĉevalo kaj la teksto ambaŭ iras en la sama direkto, la implicita rapido pliiĝas.

06 de 07

Rigardu la Okulojn en Retaj Fotoj

Malĝusta fluo. Bildo ĝentileco J Kyrnin

Multaj retejoj kun fotoj faras ĉi tiun eraron - ili metis foton de persono en la paĝo, kaj la persono rigardas for de la enhavo. Ĉi tio eĉ povas esti vidita en la retejo de Retejo-Dezajno pri Pri.Com en la malnova dezajno.

Kiel vi povas vidi, mia foto estas metita apud iu teksto. Sed mi rigardas for de tiu teksto, mi preskaŭ havas mian dorson turnita al ĝi. Se vi vidis tiun korpan lingvon inter du homoj en grupo, estus facile supozi, ke mi ne ŝatas la personon, kiu mi estas proksima al (en ĉi tiu kazo la bloko de teksto).

Multaj okuloj sekvantaj studoj montris, ke homoj vidas vizaĝojn en TTT-paĝoj. Kaj rilataj studoj montris, ke, kiam rigardante bildojn, homoj senkonscie sekvas la okulojn por vidi, kion rigardas la bildo. Se foto sur via retejo rigardas la randon de la retumilo, jen viaj klientoj aspektos, kaj poste frapu la malantaŭan butonon.

07 de 07

La Okuloj en Ajna Foto Devos Face la Enhavo

Ĝusta fluo. Bildo ĝentileco J Kyrnin

En la nova dezajno por About.com, la foto iomete pli bonas. Nun miaj okuloj rigardas pli antaŭen, kaj estas iomete konata, ke mi rigardas al mia maldekstra - kie estas la teksto.

Eĉ pli bona foto por tiu pozicio estus unu, kie miaj ŝultroj ankaŭ angulis al la teksto. Sed ĉi tio estas multe pli bona solvo ol la unua foto. Kaj, por situacioj, kie la bildo estos dekstre de enhavo kaj maldekstre, tio povus esti bona kompromiso.

Memoru ankaŭ, ke kvankam bildoj de homoj vokas la plej atenton, la sama estas vera pri bestoj. Ekzemple, en ĉi tiu specimeno aranĝo, mi havas miajn hundojn rigardanta maldekstren, sed la bildo estas flush dekstre. Do ili rigardas de la paĝo. Ĉi tiu aranĝo estus plibonigita se mi ŝanĝus la hundan orientiĝon tiel ke ili rigardis la centron de la ekrano.