Струмень у Design - Вёрстка і Твор, што Перадае Motion

01 07

Што такое Візуальная Flow?

Візуальны паток нясе вачэй гледача праз дакумент такім чынам, што ўсе важныя элементы атрымліваюць вядомасць, і нішто не карчакі бачання або прымушае глядач страціць сэнс твора. Выкарыстоўваючы відавочныя элементы патоку, як стрэлак або лічбаў з'яўляецца найбольш распаўсюджаным спосабам вэб-дызайнеры выкарыстоўваюць паток, але ёсць і іншыя тыпы элементаў, якія могуць быць выкарыстаны і няправільна выкарыстоўваюцца, каб накіроўваць вашых чытачоў рухацца па вызначаным шляху. Дзеянні, апісаныя ў дадзеным кіраўніцтве пакажуць вам прыклады добрага і дрэннага патоку і дапамогуць вам вывучыць слоўнік візуальнага патоку ў дызайне.

Візуальны паток можа быць дасягнуты рознымі спосабамі:

Наступныя малюнка пакажа вам некаторыя агульныя памылкі ў патоку на вэб-старонках, і як іх выправіць.

02 ад 07

Заходні тэкст абцякае злева направа

Некарэктнае Flow. Малюнак прадастаўлена M Kyrnin

Калі вы выраслі чытанне заходняга мовы, вы прывыклі думаць, што тэкст павінен рухацца злева направа. Такім чынам, як вока рухаецца па лініі тэксту, ён рухаецца злева направа.

На малюнку вышэй, вадаспад цячэ ў кірунку справа налева, а тэкст цячэ ўверх па вадаспадзе. Так як мы ўсе ведаем, што вадаспады падаюць, існуе разрыў у напрамку патоку вады з патокам тэксту. вачэй перамяшчае гледача ў няправільным кірунку, каб чытаць тэкст.

03 з 07

Ваш тэкст павінен цячы з выявамі

Правільны Flow. Малюнак прадастаўлена M Kyrnin

У гэтым выпадку малюнак было адменена, так што тэкст цячэ ў тым жа кірунку, што і вада. Усе элементы прыводзяць вачэй гледача ўніз з патокам вады і патокам тэксту.

04 з 07

Злева направа Роўна Хуткі

Некарэктнае Flow. Малюнак прадастаўлена M Kyrnin

Конь на гэтай фатаграфіі бяжыць справа налева, але тэкст на англійскай і так злева направа. Візуальнае ўздзеянне скачак адно напрамкі запавольвае тэмп ўсяго дакумента, так як гэта адбываецца ў іншы накірунак, чым тэкст.

У заходніх культурах, таму што нашы мовы рухацца злева направа, мы прыйшлі, каб звязаць візуальнае напрамак злева направа як наперад і хутка, у той час як справа налева больш назад і павольна. Пры стварэнні макета з канатацыі хуткасці, вы павінны памятаць пра гэта - і захаваць вашыя выявы рухаецца ў тым жа кірунку, што і тэкст.

05 07

Ня прымушайце вочы гледача запаволіцца

Правільны Flow. Малюнак прадастаўлена M Kyrnin

Калі конь і тэкст абодва збіраюцца ў тым жа кірунку, меркаваная хуткасць павялічваецца.

06 з 07

Глядзець вочы ў вэб-фатаграфій

Некарэктнае Flow. Малюнак прадастаўлена J Kyrnin

Многія вэб - сайты з фотаздымкамі робяць гэтую памылку - яны паставіць фатаграфію чалавека на старонцы, і чалавек глядзіць у баку ад зместу. Гэта можа быць нават убачыць на сайце About.com Вэб-дызайн у старым дызайне.

Як вы можаце бачыць, мая фатаграфія змяшчаецца побач з якім-небудзь тэкстам. Але я адрываючыся ад гэтага тэксту, я амаль у мяне спіной да яго. Калі вы ўбачылі, што мова цела паміж двума людзьмі ў групе, было б лёгка выказаць здагадку, што мне не падабаецца чалавек, я побач (у гэтым выпадку блок тэксту).

Шматлікія даследаванні вачэй сачэння паказалі, што людзі бачаць асобы на вэб-старонках. І роднасныя даследаванні паказалі, што пры поглядзе на фатаграфіі, людзі будуць затым несвядома вынікаюць вочы, каб убачыць, што карціна глядзіць. Калі фатаграфія на вашым сайце глядзіць ад краю браўзэра, то дзе вашыя кліенты будуць выглядаць, а затым націсніце кнопку вяртання.

07 07

Вочы ў любым фота Калі Face Зместу

Правільны Flow. Малюнак прадастаўлена J Kyrnin

У новай канструкцыі для About.com, фота трохі лепш. Цяпер мае вочы глядзяць больш наперад, і ёсць невялікі намёк, што я гляджу на мой злева - там, дзе тэкст.

Яшчэ лепш фота для гэтай пазіцыі будзе адзін, дзе мае плечы былі таксама пад вуглом да тэксту. Але гэта значна лепшае рашэнне, чым першае фота. І, у сітуацыях, калі малюнак будзе знаходзіцца справа ад ўтрымання, а таксама злева, гэта можа быць добрым кампрамісам.

Памятаеце таксама, што ў той час як выявы твараў людзей звярнуць найбольшую ўвагу, тое ж самае адносіцца і да фатаграфіі жывёл. Напрыклад, у гэтай схеме выбаркі, у мяне ёсць мае сабакі глядзіць налева, але малюнак ўпоравень направа. Такім чынам, яны глядзяць ад старонкі. Гэты макет можна было б палепшыць, калі я змяніў арыентацыю сабак, так што яны глядзелі ў цэнтр экрана.