如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里 

當(dāng)有人登錄到你的網(wǎng)站，你想讓瀏覽者做什么？看哪里？注意到什么信息？而這些信息的順序又是什么？

理想情況下，你想讓人們先注意到最重要的信息，然后是次重要信息。你甚至想讓你潛在客戶確信他們看到的信息，并且想要通過點擊“購買”按鈕來購買內(nèi)容。你也希望人們出現(xiàn)在正確的時間，看到合適的信息，那么你要做的就是控制好你設(shè)計中的視覺流

通過設(shè)計，視覺流決定和引導(dǎo)了視覺的方向：起先應(yīng)該看哪兒，接下來應(yīng)該注意什么，眼睛應(yīng)該在哪停留，并且要停留多久。

設(shè)計模式：缺乏視覺流引導(dǎo)的設(shè)計

在之前的帖子中我講過視覺重量并且我提到過Rudolph Arnheim的結(jié)構(gòu)網(wǎng)。你應(yīng)該細(xì)讀一下，大概意思是說在矩形畫布的中心和畫布的四個角就像磁鐵一樣吸引著你的眼球。隨著這些視覺焦點便會產(chǎn)生軸線，你的眼睛也會跟著它從一個焦點到另一個焦點。

Arnheim的結(jié)構(gòu)網(wǎng)不是唯一的一種模式，視線會隨著這個結(jié)構(gòu)自然的移動。古騰堡的古騰堡圖表（大家可以自行學(xué)習(xí)一下，小編不在這里做過多解釋，平面設(shè)計里的邏輯，了解后對各位在做設(shè)計可能會有幫助）， F形布局模式和Z字形布局模式都會引導(dǎo)觀者的視線隨著設(shè)計模式自然移動。

注意：這些模式是根據(jù)我們通常閱讀順序從左到右總結(jié)出來的，同時也會為其它閱讀方式做指導(dǎo)。

古騰堡圖表：在這個模式中眼睛通常會從左上角到右下角瀏覽，經(jīng)過 Arnheim結(jié)構(gòu)的視覺中心。而缺少注意力的區(qū)域是一個被叫做缺乏活躍度的區(qū)域（視覺盲點）。所謂的閱讀重力是由于視線趨向于從上到下，從左到右的眼動規(guī)律，左上角是第一視覺落腳點，右下角是最終視覺落腳點，所以右上角和左下角都是一個強烈的視覺盲點區(qū)域，大多數(shù)是容易被忽略的。

F形的布局模式：在這個模式中，眼睛從左上角開始，向畫布的右邊移去，然后在向下移動一點，重復(fù)之前的移動模式。而一般這個模式就像字母F的形狀。 

Z字形布局模式：眼睛從左上角向右移動。在視線移到右上角后沿著斜對角向下方走，然后視覺再次像右移動，直到頁面的右下方。視覺移動的軌跡就像字母z。

我想你已經(jīng)看到了眼球追蹤研究和上面說的模式。這些模式很少有來描述文本為主的頁面。它們只是說我們的眼睛通過文本的行列來移動。

文中提到的F模式通常是用在搜索結(jié)果的頁面。為什么呢？因為在搜索結(jié)果頁是以文字為主的頁面，而且是很小的列表信息顯示。 F模式是一種自然的方式來瀏覽這些頁面。

以文字為主的頁面和輕設(shè)計頁面常常遵循F或者是Z字路徑

添加層次結(jié)構(gòu)，方向，運動與節(jié)奏，和視覺流貫穿在你的設(shè)計里，而不是照著上面的模式。這些模式是最終要隱藏在你存在的設(shè)計中。

盡管如此，它們依然是有用的。因為你可以利用這些模式和放置重要的信息在這些地方，使得眼睛自然的看到突出的視覺信息。你可以利用這些通常的模式，但是需要明白它們僅是描述以文字為主的頁面。

無論你是否能控制你的視覺運動，觀眾的眼睛都將會以某種方式來瀏覽你的作品。當(dāng)然你也可以可以控制你的瀏覽順序。

創(chuàng)作流

你可能會在一些有關(guān)設(shè)計和優(yōu)化組合的討論中見到“講故事”這個詞，這個詞越來越多出現(xiàn)在這寫論談中。創(chuàng)作流通過提供正確的信息順序可以幫助你來講你的故事。

創(chuàng)作流是講運動和方向的，并且引導(dǎo)眼睛從作品的一個部分到你想看的另一部分移動。你可以通過視覺重量和視覺方向的組合來創(chuàng)建視覺流。

較大的視覺重量元素（焦點）吸引著眼球，并且變成了休息的地方。其他元素通過這些（如箭頭和線）視覺提示傳遞著方向，讓你的眼球從一個點到另一個點。

顯眼的元素是創(chuàng)作流的開始，它應(yīng)該是你作品的入口點。通過設(shè)計那是給眼睛瀏覽作品提供方向線索的地方。

最顯眼的方向線索是一個箭頭指向某個地方?？雌饋碓谝粋€方向上的圖像是另一個強大和簡單的方向線索。其它的包括：

重復(fù)的元素，

節(jié)奏韻律，

隱藏的動作，

對角線，

手勢交互線，

方向線，

透視角度，

主題元素，

等級漸變。

你會注意到上面列出的有關(guān)線的特征。指示方向是線的主要特征之一。當(dāng)然，線也可以通過垂直于另一個方向的動作來切斷朝一個方向運動的動作。而這時它們充當(dāng)阻礙，阻止了眼睛的瀏覽視線，甚至?xí)まD(zhuǎn)眼睛的瀏覽路徑。

通過上述的方式來創(chuàng)建方向和運動方式?？梢蕴砑釉刈鳛檎系K物來改變眼睛的移動方向。在空曠的空間里創(chuàng)建開放的路徑讓你設(shè)計的元素輕松瀏覽。

和諧的設(shè)計流

即使在很小的細(xì)節(jié)上，你都想要路徑和動作很好的匹配。例如，放置搜索按鈕在線框之后似乎是有意義的，因為我們使用的自然過程是先填寫字段，然后單機按鈕。如果首先將按鈕放置在你瀏覽方向上的第一個位置上，到最后你依然要返回到開始操作。

箭頭指向的東西是你想讓觀者看的更有意義的事情而不是遠(yuǎn)離它。即使箭頭指向相反，也可以創(chuàng)作視覺流，但不是說這種視覺流對獲得最終的目標(biāo)有意義。

箭頭應(yīng)該指向你想讓眼睛看的地方。

運動

運動和方向密切相關(guān)。運動意味著必有方向，方向意味著運動。如果你想讓別人看右邊，一種方式就是讓頁面上的東西看起來像右移動，那么眼睛就會跟隨它。

這里有一些運動的類型

字面意義上（物理）的運動：指發(fā)生在身體的活動

靜態(tài)運動：眼睛在一定的結(jié)構(gòu)內(nèi)從一點到另一點跳躍移動

組合運動：發(fā)生在作品中的設(shè)計元素引導(dǎo)觀者的眼睛從一點到另一點的視覺瀏覽。

動畫可以用來創(chuàng)作頁面上的物理運動。主導(dǎo)元素，焦點和層級來創(chuàng)建靜態(tài)運動。你創(chuàng)作的作品視覺流中在焦點與焦點之間添加元素，這些元素來引導(dǎo)方向和運動規(guī)律。這些能表達(dá)運動規(guī)律的方向線索和我之前提到的列表是一樣的。（見上面的列表）

節(jié)奏韻律

在作品中，節(jié)奏韻律可以控制瀏覽的步伐；還可以有規(guī)律的運動。節(jié)奏韻律模式是由元素本身和元素與元素之間的間隔組成的，就像你的耳朵會跟隨歌曲的韻律移動，所以你的眼睛也會跟隨被創(chuàng)作的視覺韻律節(jié)奏來移動。

在頁面上添加多個元素，那么模式和節(jié)奏就會存在。任意兩個元素都意味著一個結(jié)構(gòu)。無論你做什么這個結(jié)構(gòu)都會存在，然后你只需要學(xué)會控制它。

通過重復(fù)的元素重復(fù)創(chuàng)建視覺流和節(jié)奏韻律。在作品中，當(dāng)眼睛看到一個紅色的圓圈，那么它也會注意到其它的圓圈，并且會尋求建立一個模式。除了重復(fù)之外你可以使用交替重復(fù)和漸變等級來創(chuàng)建節(jié)奏與韻律。

重復(fù)：通過可預(yù)測性創(chuàng)建模式

交替模式：通過兩個兩個的交替重復(fù)創(chuàng)建模式

等級漸變：通過一序列的有規(guī)律的步驟來創(chuàng)建模式

節(jié)奏韻律是通過眼睛跟隨的元素和元素之間的間隔創(chuàng)建出來的。改變?nèi)我庖粋€都可以改變這個模式。變化的模式來增加興趣。模式中強調(diào)的一些元素能夠隨時打破節(jié)奏和阻止視覺流。

三個基本的節(jié)奏韻律的類型：

基本的節(jié)奏韻律：發(fā)生在元素之間的間隔是可被預(yù)測的時候，或者是這類元素在大小和長度上是類似的時候。每隔一定的距離放置重復(fù)的元素就是一個例子。

流動的節(jié)奏：發(fā)生在元素之間有機的間隔。這就產(chǎn)生了自然的模式喚起了一種有機運動的感覺。斑馬或者老虎身上的條紋就是很好的例子。

漸進的節(jié)奏：發(fā)生在表格或圖形的順序通過漸進的步驟展示。一些有特點的元素可能階梯式的變化，或者是元素的間隔階梯式的變化。通過漸增或者減少的順序來創(chuàng)作運動。顏色的階梯式漸變就是一個很好的例子。

田野里綻放的花朵中間就存在著一種視覺節(jié)奏韻律

上面任何一種節(jié)奏的類型都可以用來設(shè)計動感和組合流。而你選擇哪一種類型的節(jié)奏韻律模式取決于你設(shè)計的細(xì)節(jié)。如果你的設(shè)計是想傳達(dá)一致性，基本的節(jié)奏韻律可能是最好的選擇；如果設(shè)計是想傳達(dá)有關(guān)自然和有機運動的，那么選擇第二個流動節(jié)奏模式可能會更好。

設(shè)計流和格式塔

下文中我們會看到格式塔原則有助于設(shè)計原則。

在設(shè)計中，主導(dǎo)和焦點區(qū)域會吸引著眼球。相似性和對比原則則是用來創(chuàng)建節(jié)奏韻律模式。所有

格式塔原則表明元素間的連接和共性都有助于引導(dǎo)眼球從一組中的一個元素看向另一個元素。統(tǒng)一的連通性會引導(dǎo)眼球關(guān)注有關(guān)連接測元素。朝著相同方向同命運的運動元素會讓眼球跟著它們一起運動。延續(xù)原則是關(guān)于元素朝一個方向持續(xù)運動的特殊原則。

案例

讓我們一起看一下一些網(wǎng)站的截屏，并且思考一下他們是怎么做設(shè)計流和動態(tài)，它們有什么樣的節(jié)奏韻律。

還是我之前說的，這僅僅是我個人的觀念。你可能看到過相同的屏幕截圖，與我意見一樣，又或者和我相比你看到的是不同的設(shè)計流和節(jié)奏韻律。沒有問題。重要的是我們都在批判性的思考設(shè)計。

DORIGATI（意大利葡萄酒網(wǎng)站設(shè)計）

當(dāng)我在瀏覽DORIGATI網(wǎng)站的首頁時，我的眼球會迅速被頁面上頂端的圖片吸引。從頂端的圖片到網(wǎng)站的焦點元素如logo和葡萄酒瓶的圖片不會花費很長的時間。

在logo和瓶子之間存在著一個強烈的隱藏式的對角線視覺流，并且你的眼球可以來回在它們之間流動。這個網(wǎng)站可以做到迅速的將公司的名字和產(chǎn)品的連接。

logo下面的曲線似乎是要指出下面的信息，并引導(dǎo)眼球看到目前提供的葡萄酒名字。注意左邊的標(biāo)題和葡萄酒的名字都是相同的藍(lán)色，并且和logo的藍(lán)色相類似。重復(fù)的顏色形成了節(jié)奏韻律，并且鏈接了三個元素形成了視覺流。

頁面上金色的標(biāo)題下帶有節(jié)奏的顏色（藍(lán)色）再次被使用，相對左邊來說更具裝飾性。日期也使用相似的黃色。

雖然間隔是根據(jù)每個條目的文本長度來變化，但間隔依然是可預(yù)見的，并且形成節(jié)奏規(guī)律。葡萄酒瓶也是用于連接標(biāo)題和主要內(nèi)容，通過主要圖片形成了一個垂直流，并且作為橋梁貫穿于中。如果沒有葡萄酒瓶的圖片，那么眼球想要穿過水平線制造的障礙物會更加困難。

DRESS RESPONSIVELY(服裝網(wǎng)站）

在 Dress Responsively這個服裝網(wǎng)站的首頁有著強烈的水平視覺流。導(dǎo)航欄和文本內(nèi)容都引導(dǎo)你的視覺水平移動，使得頁面頂端從左像右瀏覽輕松容易。

我的視線首先會被“you decide”這個文本吸引，但后輕松地看向左右方。它可能是logo，導(dǎo)航欄和標(biāo)題中剩下的文本內(nèi)容。

注意在“you decide”文本的結(jié)尾，你的視線也可能轉(zhuǎn)移到下方。重復(fù)地矩形形狀和橘色的圖形，以至于形成了一個垂直的節(jié)奏。標(biāo)有“wth？”的按鈕與“548 votes”和“see sedtails”按鈕是相互呼應(yīng)的。這個強烈的垂直視覺流是由于這些按鈕和它們之間的文字內(nèi)容都以左對齊的方式排列形成的。

橘色重復(fù)使用在標(biāo)題和下面頁面中的文字上（圖中未顯示）。在頁面頂端上有重復(fù)的顏色，那么你的眼球就會跟隨它想頁面下方瀏覽，這就增強了垂直視覺流。

INCREDIBLE TYPES

NCREDIBLE TYPES網(wǎng)站首頁的標(biāo)頭設(shè)計的是一個水平的視覺流，而這個視覺流取決于線條和文本塊。在頁面上，輕量的網(wǎng)格線創(chuàng)建了一個下拉式的視覺流，并且在水平方向上也形成了一個節(jié)奏規(guī)律。

標(biāo)題下是一組網(wǎng)格圖片。注意圖片間水平和垂直方向上的空隙，而這個空隙為你瀏覽圖片提供了通道。它們有助于你的眼睛從一個圖片瀏覽到另一個圖片上（水平和垂直兩個方向上的圖片）。同時在兩個方向上形成了節(jié)奏規(guī)律。

在頁腳處文本被分成兩行四列，再次形成了兩個方向上的視覺流和節(jié)奏規(guī)律。我認(rèn)為水平方向的視覺流比垂直方向上的視覺流更強烈，導(dǎo)致我的視覺從左向右看多于從上往下看，但是兩個方向的視覺流都是存在的。

LOVE & LUXE

在LOVE & LUXE網(wǎng)站的活動賽事中，它有垂直和水平兩個方向的視覺流。

左側(cè)的粉色列表吸引了我的眼睛，通過它的形狀形成了垂直的視覺流。注意這個網(wǎng)站的名字是旋轉(zhuǎn)排列的，以致于它也形成了一個垂直的視覺流。菜單的兩種顏色形成了對比，一個點選中的標(biāo)簽與未點中的標(biāo)簽形成了強烈的垂直視線。

在本專欄的底部重復(fù)的文，當(dāng)你一節(jié)一節(jié)讀完后形成了一個垂直的規(guī)律。然而，眼睛在水平閱讀瀏覽的時候自然又形成了水平的視覺流。

當(dāng)下選中的菜單是用黑色的背景顯示的，由于你的眼球被這種對比吸引所以形成了一個更為強烈的水平視覺流。因為在它右上角的那個小三角指向右邊。

再右邊，主要內(nèi)容區(qū)域，顏色和日期的大小通過重復(fù)形成了一個有規(guī)律的垂直視覺流。截屏中只顯示了兩個，但是它們對下頁來說仍然有可預(yù)示性。通過藍(lán)色的日期創(chuàng)建顯示，粉色的標(biāo)題也加強了對規(guī)律作用。

在每兩個項目中間的分割水平線讓視覺隨時停留一小會。在日期和標(biāo)題上重復(fù)的顏色 形成的節(jié)奏規(guī)律會帶你進入下一頁，一旦你準(zhǔn)備好通過這個水平線，那么你就會看到另外一個項目。

圖片會隨著每個條目的不同而改變，但是截屏這張圖片會讓你的視線看向左下方。

總結(jié)

經(jīng)你設(shè)計后，你能讓觀者在瀏覽網(wǎng)頁時什么時間看在哪。在以文字為主和輕圖表的頁面上，觀者的眼球可能會遵循一些向Z字模式或者是F模式來瀏覽頁面。

然而，你一旦設(shè)計頁面上的元素并添加圖表，那么那些模式不再適用。訪問者的視覺會跟隨你創(chuàng)建的視覺流和運動規(guī)律來瀏覽網(wǎng)頁。

思考一下你要交流的信息優(yōu)先級。想一下在特定順序下看到這個信息是否更有用?？紤]一下在這個頁面上你想讓用戶首先注意什么地方，然后呢，最后呢？

接著創(chuàng)建視覺線索提示引導(dǎo)人們按照你認(rèn)為最好的瀏覽頁面順序來瀏覽網(wǎng)站。你可以通過添加線或者讓多個元素通過對齊的方式來引導(dǎo)人們?yōu)g覽順序。重復(fù)的顏色或者是文字的大小形成節(jié)奏規(guī)律來引導(dǎo)視覺流。目前運動的圖片來指引眼球的方向。

不要讓一個默有的模式來引導(dǎo)訪問者的眼球。而是創(chuàng)建一個組合的視覺流引導(dǎo)他們自己瀏覽整個網(wǎng)頁。

在本系列設(shè)計原則中還有最后一個問題我想與你們分享，那就是平衡。有關(guān)通常的組合平衡和帶你了解四種不同類型的平衡（對稱與非對稱，徑向和馬賽克）。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)