Flow in Design - izkārtojums un mākslas darbs, kas pārvērš kustību

01 no 07

Kas ir vizuālais plūsma?

Vizuālā plūsma caur dokumentu aplūko skatītāja acu efektu tā, ka visi svarīgie elementi saņem svarīgu nozīmi, un nekas nenozīmē redzi vai liek skatītājam zaudēt gabala izjūtu. Izmantojot acīmredzamus plūsmas elementus, piemēram, bultiņas vai ciparus, visbiežākais veids, kā tīmekļa izstrādātāji izmanto plūsmu, tomēr ir arī citi elementu tipi, kurus var izmantot un nepareizi izmantot, lai novirzītu lasītājus uz konkrētu ceļu. Šīs apmācības soļi parādīs jums labas un sliktas plūsmas piemērus un palīdzēs jums apgūt vizuālās plūsmas vārdnīcu dizainā.

Vizuālo plūsmu var panākt daudzos veidos:

Tālāk minētie attēli parādīs dažas izplatītas tīmekļa lapu plūsmas kļūdas un to novēršanu.

02 no 07

Rietumu teksta plūsmas no kreisās uz labo pusi

Nepareiza plūsma. Attēla pieklājība M Kyrnin

Ja jūs uzauguši Rietumu valodas lasīšanā, jūs domājat, ka teksts ir jāpārvieto pa kreisi uz labo pusi. Tātad, kad acs pāri teksta rindiņai virzās no kreisās uz labo pusi.

Iepriekš attēlā ūdenskritums plūst labajā un kreisajā virzienā, un teksts plūst ūdenskritumam. Tā kā mēs visi zinām, ka ūdenskritumi nokrīt, ūdens plūsmas virziens ir atvienots ar teksta plūsmu. Skatītāja acis pārvietojas nepareizā virzienā, lai lasītu tekstu.

03 no 07

Jūsu tekstam vajadzētu plūst ar attēliem

Pareizā plūsma Attēla pieklājība M Kyrnin

Šajā gadījumā attēls ir apgriezts, lai teksts plūst tādā pašā virzienā kā ūdens. Visi elementi noved skatītāja acu uz leju ar ūdens plūsmu un teksta plūsmu.

04 no 07

Pa kreisi līdz taisnība vienāds ātri

Nepareiza plūsma. Attēla pieklājība M Kyrnin

Šajā fotoattēlā esošais zirgs darbojas no labās uz kreiso pusi, bet teksts ir angļu valodā, un tāpēc pa kreisi pa labi. Zirgu skriešanās vizuālā ietekme vienā virzienā palēnina visa dokumenta tempu, jo tā virzās citādi nekā teksts.

Rietumu kultūrās, jo mūsu valodas pāriet no kreisās puses uz labo pusi, esam nonākuši saistīt vizuālo virzienu no kreisās uz labo pusi uz priekšu un strauji, savukārt pa labi no kreisās puses ir vairāk atpalikušs un lēns. Kad veidojat izkārtojumu ar ātruma konotāciju, to vajadzētu atcerēties - un saglabāt attēlus kustībā tādā pašā virzienā kā teksts.

05 no 07

Nepierunājiet skatītāja acu, lai palēninātu

Pareizā plūsma Attēla pieklājība M Kyrnin

Kad zirgs un teksts abi virzās vienā virzienā, tiek palielināts netiešais ātrums.

06 no 07

Noskatīties Eyes in Web Photos

Nepareiza plūsma. Attēla pieklājība J Kirins

Daudzas tīmekļa vietnes ar fotogrāfijām rada šo kļūdu - tās lapā ievieto personu fotoattēlu, un persona meklē saturu no satura. To var redzēt arī vecajā dizaina modelī vietne, kas iekļauta Search.com.

Kā redzat, mans foto tiek novietots blakus kādam tekstam. Bet es skatos prom no šī teksta, man gandrīz mana mugura pagriezās pret to. Ja jūs redzējāt šo ķermeņa valodu starp diviem cilvēkiem grupā, būtu viegli pieņemt, ka man nepatīk persona, kurai es esmu blakus (šajā gadījumā teksta bloks).

Daudzi acu izsekošanas pētījumi ir parādījuši, ka cilvēki redz mājas lapas tīmekļa lapās. Arī saistītie pētījumi ir parādījuši, ka, skatot bildes, cilvēki neapzināti seko līdzi acīm, lai redzētu, kāds ir attēls. Ja jūsu vietnē esošais fotoattēls skar pārlūka malu, tas ir, kur jūsu klienti izskatīsies, un pēc tam nospiediet pogu atpakaļ.

07 no 07

Jebkura fotoattēla acis jāuzskata par saturu

Pareizā plūsma Attēla pieklājība J Kirins

Jaunajā dizainā, kas paredzētas aptuveni.com, fotoattēls ir mazliet labāks. Tagad manas acis meklējat vairāk uz priekšu, un ir neliels mājiens, ka es meklēju pa kreisi - kur teksts ir.

Vēl viens labāks fotoattēls šai pozīcijai būtu tāds, kurā arī mani pleciem pievērsa uzmanību tekstam. Bet tas ir daudz labāks risinājums nekā pirmais fotoattēls. Un situācijās, kad attēls būs gan satura labajā pusē, gan kreisajā pusē, tas varētu būt labs kompromiss.

Atcerieties arī, ka, kamēr cilvēku seju attēli pievērš vislielāko uzmanību, tas pats attiecas arī uz dzīvnieku fotogrāfijām. Piemēram, šajā parauga izkārtojumā mani suņi izskatās pa kreisi, bet attēls ir labais. Tātad viņi meklē lapu. Šis izkārtojums tiktu uzlabots, ja es mainītu suņu orientāciju, lai viņi skatītos ekrāna centrā.