2016-11-12 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
當(dāng)有人登錄到你的網(wǎng)站，你想讓瀏覽者做什么？看哪里？注意到什么信息？而這些信息的順序又是什么？
理想情況下，你想讓人們先注意到最重要的信息，然后是次重要信息。你甚至想讓你潛在客戶確信他們看到的信息，并且想要通過點(diǎn)擊“購買”按鈕來購買內(nèi)容。你也希望人們出現(xiàn)在正確的時(shí)間，看到合適的信息，那么你要做的就是控制好你設(shè)計(jì)中的視覺流
通過設(shè)計(jì)，視覺流決定和引導(dǎo)了視覺的方向：起先應(yīng)該看哪兒，接下來應(yīng)該注意什么，眼睛應(yīng)該在哪停留，并且要停留多久。
設(shè)計(jì)模式：缺乏視覺流引導(dǎo)的設(shè)計(jì)
在之前的帖子中我講過視覺重量并且我提到過Rudolph Arnheim的結(jié)構(gòu)網(wǎng)。你應(yīng)該細(xì)讀一下，大概意思是說在矩形畫布的中心和畫布的四個(gè)角就像磁鐵一樣吸引著你的眼球。隨著這些視覺焦點(diǎn)便會產(chǎn)生軸線，你的眼睛也會跟著它從一個(gè)焦點(diǎn)到另一個(gè)焦點(diǎn)。
Arnheim的結(jié)構(gòu)網(wǎng)不是唯一的一種模式，視線會隨著這個(gè)結(jié)構(gòu)自然的移動。古騰堡的古騰堡圖表（大家可以自行學(xué)習(xí)一下，小編不在這里做過多解釋，平面設(shè)計(jì)里的邏輯，了解后對各位在做設(shè)計(jì)可能會有幫助）， F形布局模式和Z字形布局模式都會引導(dǎo)觀者的視線隨著設(shè)計(jì)模式自然移動。
注意：這些模式是根據(jù)我們通常閱讀順序從左到右總結(jié)出來的，同時(shí)也會為其它閱讀方式做指導(dǎo)。
古騰堡圖表：在這個(gè)模式中眼睛通常會從左上角到右下角瀏覽，經(jīng)過 Arnheim結(jié)構(gòu)的視覺中心。而缺少注意力的區(qū)域是一個(gè)被叫做缺乏活躍度的區(qū)域（視覺盲點(diǎn)）。所謂的閱讀重力是由于視線趨向于從上到下，從左到右的眼動規(guī)律，左上角是第一視覺落腳點(diǎn)，右下角是最終視覺落腳點(diǎn)，所以右上角和左下角都是一個(gè)強(qiáng)烈的視覺盲點(diǎn)區(qū)域，大多數(shù)是容易被忽略的。
F形的布局模式：在這個(gè)模式中，眼睛從左上角開始，向畫布的右邊移去，然后在向下移動一點(diǎn)，重復(fù)之前的移動模式。而一般這個(gè)模式就像字母F的形狀。
Z字形布局模式：眼睛從左上角向右移動。在視線移到右上角后沿著斜對角向下方走，然后視覺再次像右移動，直到頁面的右下方。視覺移動的軌跡就像字母z。
我想你已經(jīng)看到了眼球追蹤研究和上面說的模式。這些模式很少有來描述文本為主的頁面。它們只是說我們的眼睛通過文本的行列來移動。
文中提到的F模式通常是用在搜索結(jié)果的頁面。為什么呢？因?yàn)樵谒阉鹘Y(jié)果頁是以文字為主的頁面，而且是很小的列表信息顯示。 F模式是一種自然的方式來瀏覽這些頁面。
以文字為主的頁面和輕設(shè)計(jì)頁面常常遵循F或者是Z字路徑
添加層次結(jié)構(gòu)，方向，運(yùn)動與節(jié)奏，和視覺流貫穿在你的設(shè)計(jì)里，而不是照著上面的模式。這些模式是最終要隱藏在你存在的設(shè)計(jì)中。
盡管如此，它們依然是有用的。因?yàn)槟憧梢岳眠@些模式和放置重要的信息在這些地方，使得眼睛自然的看到突出的視覺信息。你可以利用這些通常的模式，但是需要明白它們僅是描述以文字為主的頁面。
無論你是否能控制你的視覺運(yùn)動，觀眾的眼睛都將會以某種方式來瀏覽你的作品。當(dāng)然你也可以可以控制你的瀏覽順序。
創(chuàng)作流
你可能會在一些有關(guān)設(shè)計(jì)和優(yōu)化組合的討論中見到“講故事”這個(gè)詞，這個(gè)詞越來越多出現(xiàn)在這寫論談中。創(chuàng)作流通過提供正確的信息順序可以幫助你來講你的故事。
創(chuàng)作流是講運(yùn)動和方向的，并且引導(dǎo)眼睛從作品的一個(gè)部分到你想看的另一部分移動。你可以通過視覺重量和視覺方向的組合來創(chuàng)建視覺流。
較大的視覺重量元素（焦點(diǎn)）吸引著眼球，并且變成了休息的地方。其他元素通過這些（如箭頭和線）視覺提示傳遞著方向，讓你的眼球從一個(gè)點(diǎn)到另一個(gè)點(diǎn)。
顯眼的元素是創(chuàng)作流的開始，它應(yīng)該是你作品的入口點(diǎn)。通過設(shè)計(jì)那是給眼睛瀏覽作品提供方向線索的地方。
最顯眼的方向線索是一個(gè)箭頭指向某個(gè)地方。看起來在一個(gè)方向上的圖像是另一個(gè)強(qiáng)大和簡單的方向線索。其它的包括：
重復(fù)的元素，
節(jié)奏韻律，
隱藏的動作，
對角線，
手勢交互線，
方向線，
透視角度，
主題元素，
等級漸變。
你會注意到上面列出的有關(guān)線的特征。指示方向是線的主要特征之一。當(dāng)然，線也可以通過垂直于另一個(gè)方向的動作來切斷朝一個(gè)方向運(yùn)動的動作。而這時(shí)它們充當(dāng)阻礙，阻止了眼睛的瀏覽視線，甚至?xí)まD(zhuǎn)眼睛的瀏覽路徑。
通過上述的方式來創(chuàng)建方向和運(yùn)動方式。可以添加元素作為障礙物來改變眼睛的移動方向。在空曠的空間里創(chuàng)建開放的路徑讓你設(shè)計(jì)的元素輕松瀏覽。
和諧的設(shè)計(jì)流
即使在很小的細(xì)節(jié)上，你都想要路徑和動作很好的匹配。例如，放置搜索按鈕在線框之后似乎是有意義的，因?yàn)槲覀兪褂玫淖匀贿^程是先填寫字段，然后單機(jī)按鈕。如果首先將按鈕放置在你瀏覽方向上的第一個(gè)位置上，到最后你依然要返回到開始操作。
箭頭指向的東西是你想讓觀者看的更有意義的事情而不是遠(yuǎn)離它。即使箭頭指向相反，也可以創(chuàng)作視覺流，但不是說這種視覺流對獲得最終的目標(biāo)有意義。
箭頭應(yīng)該指向你想讓眼睛看的地方。
運(yùn)動
運(yùn)動和方向密切相關(guān)。運(yùn)動意味著必有方向，方向意味著運(yùn)動。如果你想讓別人看右邊，一種方式就是讓頁面上的東西看起來像右移動，那么眼睛就會跟隨它。
這里有一些運(yùn)動的類型
字面意義上（物理）的運(yùn)動：指發(fā)生在身體的活動
靜態(tài)運(yùn)動：眼睛在一定的結(jié)構(gòu)內(nèi)從一點(diǎn)到另一點(diǎn)跳躍移動
組合運(yùn)動：發(fā)生在作品中的設(shè)計(jì)元素引導(dǎo)觀者的眼睛從一點(diǎn)到另一點(diǎn)的視覺瀏覽。
動畫可以用來創(chuàng)作頁面上的物理運(yùn)動。主導(dǎo)元素，焦點(diǎn)和層級來創(chuàng)建靜態(tài)運(yùn)動。你創(chuàng)作的作品視覺流中在焦點(diǎn)與焦點(diǎn)之間添加元素，這些元素來引導(dǎo)方向和運(yùn)動規(guī)律。這些能表達(dá)運(yùn)動規(guī)律的方向線索和我之前提到的列表是一樣的。（見上面的列表）
節(jié)奏韻律
在作品中，節(jié)奏韻律可以控制瀏覽的步伐；還可以有規(guī)律的運(yùn)動。節(jié)奏韻律模式是由元素本身和元素與元素之間的間隔組成的，就像你的耳朵會跟隨歌曲的韻律移動，所以你的眼睛也會跟隨被創(chuàng)作的視覺韻律節(jié)奏來移動。
在頁面上添加多個(gè)元素，那么模式和節(jié)奏就會存在。任意兩個(gè)元素都意味著一個(gè)結(jié)構(gòu)。無論你做什么這個(gè)結(jié)構(gòu)都會存在，然后你只需要學(xué)會控制它。
通過重復(fù)的元素重復(fù)創(chuàng)建視覺流和節(jié)奏韻律。在作品中，當(dāng)眼睛看到一個(gè)紅色的圓圈，那么它也會注意到其它的圓圈，并且會尋求建立一個(gè)模式。除了重復(fù)之外你可以使用交替重復(fù)和漸變等級來創(chuàng)建節(jié)奏與韻律。
重復(fù)：通過可預(yù)測性創(chuàng)建模式
交替模式：通過兩個(gè)兩個(gè)的交替重復(fù)創(chuàng)建模式
等級漸變：通過一序列的有規(guī)律的步驟來創(chuàng)建模式
節(jié)奏韻律是通過眼睛跟隨的元素和元素之間的間隔創(chuàng)建出來的。改變?nèi)我庖粋€(gè)都可以改變這個(gè)模式。變化的模式來增加興趣。模式中強(qiáng)調(diào)的一些元素能夠隨時(shí)打破節(jié)奏和阻止視覺流。
三個(gè)基本的節(jié)奏韻律的類型：
基本的節(jié)奏韻律：發(fā)生在元素之間的間隔是可被預(yù)測的時(shí)候，或者是這類元素在大小和長度上是類似的時(shí)候。每隔一定的距離放置重復(fù)的元素就是一個(gè)例子。
流動的節(jié)奏：發(fā)生在元素之間有機(jī)的間隔。這就產(chǎn)生了自然的模式喚起了一種有機(jī)運(yùn)動的感覺。斑馬或者老虎身上的條紋就是很好的例子。
漸進(jìn)的節(jié)奏：發(fā)生在表格或圖形的順序通過漸進(jìn)的步驟展示。一些有特點(diǎn)的元素可能階梯式的變化，或者是元素的間隔階梯式的變化。通過漸增或者減少的順序來創(chuàng)作運(yùn)動。顏色的階梯式漸變就是一個(gè)很好的例子。
田野里綻放的花朵中間就存在著一種視覺節(jié)奏韻律
上面任何一種節(jié)奏的類型都可以用來設(shè)計(jì)動感和組合流。而你選擇哪一種類型的節(jié)奏韻律模式取決于你設(shè)計(jì)的細(xì)節(jié)。如果你的設(shè)計(jì)是想傳達(dá)一致性，基本的節(jié)奏韻律可能是最好的選擇；如果設(shè)計(jì)是想傳達(dá)有關(guān)自然和有機(jī)運(yùn)動的，那么選擇第二個(gè)流動節(jié)奏模式可能會更好。
設(shè)計(jì)流和格式塔
下文中我們會看到格式塔原則有助于設(shè)計(jì)原則。
在設(shè)計(jì)中，主導(dǎo)和焦點(diǎn)區(qū)域會吸引著眼球。相似性和對比原則則是用來創(chuàng)建節(jié)奏韻律模式。所有
格式塔原則表明元素間的連接和共性都有助于引導(dǎo)眼球從一組中的一個(gè)元素看向另一個(gè)元素。統(tǒng)一的連通性會引導(dǎo)眼球關(guān)注有關(guān)連接測元素。朝著相同方向同命運(yùn)的運(yùn)動元素會讓眼球跟著它們一起運(yùn)動。延續(xù)原則是關(guān)于元素朝一個(gè)方向持續(xù)運(yùn)動的特殊原則。
案例
讓我們一起看一下一些網(wǎng)站的截屏，并且思考一下他們是怎么做設(shè)計(jì)流和動態(tài)，它們有什么樣的節(jié)奏韻律。
還是我之前說的，這僅僅是我個(gè)人的觀念。你可能看到過相同的屏幕截圖，與我意見一樣，又或者和我相比你看到的是不同的設(shè)計(jì)流和節(jié)奏韻律。沒有問題。重要的是我們都在批判性的思考設(shè)計(jì)。
DORIGATI（意大利葡萄酒網(wǎng)站設(shè)計(jì)）
當(dāng)我在瀏覽DORIGATI網(wǎng)站的首頁時(shí)，我的眼球會迅速被頁面上頂端的圖片吸引。從頂端的圖片到網(wǎng)站的焦點(diǎn)元素如logo和葡萄酒瓶的圖片不會花費(fèi)很長的時(shí)間。
在logo和瓶子之間存在著一個(gè)強(qiáng)烈的隱藏式的對角線視覺流，并且你的眼球可以來回在它們之間流動。這個(gè)網(wǎng)站可以做到迅速的將公司的名字和產(chǎn)品的連接。
logo下面的曲線似乎是要指出下面的信息，并引導(dǎo)眼球看到目前提供的葡萄酒名字。注意左邊的標(biāo)題和葡萄酒的名字都是相同的藍(lán)色，并且和logo的藍(lán)色相類似。重復(fù)的顏色形成了節(jié)奏韻律，并且鏈接了三個(gè)元素形成了視覺流。
頁面上金色的標(biāo)題下帶有節(jié)奏的顏色（藍(lán)色）再次被使用，相對左邊來說更具裝飾性。日期也使用相似的黃色。
雖然間隔是根據(jù)每個(gè)條目的文本長度來變化，但間隔依然是可預(yù)見的，并且形成節(jié)奏規(guī)律。葡萄酒瓶也是用于連接標(biāo)題和主要內(nèi)容，通過主要圖片形成了一個(gè)垂直流，并且作為橋梁貫穿于中。如果沒有葡萄酒瓶的圖片，那么眼球想要穿過水平線制造的障礙物會更加困難。
DRESS RESPONSIVELY(服裝網(wǎng)站）
在 Dress Responsively這個(gè)服裝網(wǎng)站的首頁有著強(qiáng)烈的水平視覺流。導(dǎo)航欄和文本內(nèi)容都引導(dǎo)你的視覺水平移動，使得頁面頂端從左像右瀏覽輕松容易。
我的視線首先會被“you decide”這個(gè)文本吸引，但后輕松地看向左右方。它可能是logo，導(dǎo)航欄和標(biāo)題中剩下的文本內(nèi)容。
注意在“you decide”文本的結(jié)尾，你的視線也可能轉(zhuǎn)移到下方。重復(fù)地矩形形狀和橘色的圖形，以至于形成了一個(gè)垂直的節(jié)奏。標(biāo)有“wth？”的按鈕與“548 votes”和“see sedtails”按鈕是相互呼應(yīng)的。這個(gè)強(qiáng)烈的垂直視覺流是由于這些按鈕和它們之間的文字內(nèi)容都以左對齊的方式排列形成的。
橘色重復(fù)使用在標(biāo)題和下面頁面中的文字上（圖中未顯示）。在頁面頂端上有重復(fù)的顏色，那么你的眼球就會跟隨它想頁面下方瀏覽，這就增強(qiáng)了垂直視覺流。
INCREDIBLE TYPES
NCREDIBLE TYPES網(wǎng)站首頁的標(biāo)頭設(shè)計(jì)的是一個(gè)水平的視覺流，而這個(gè)視覺流取決于線條和文本塊。在頁面上，輕量的網(wǎng)格線創(chuàng)建了一個(gè)下拉式的視覺流，并且在水平方向上也形成了一個(gè)節(jié)奏規(guī)律。
標(biāo)題下是一組網(wǎng)格圖片。注意圖片間水平和垂直方向上的空隙，而這個(gè)空隙為你瀏覽圖片提供了通道。它們有助于你的眼睛從一個(gè)圖片瀏覽到另一個(gè)圖片上（水平和垂直兩個(gè)方向上的圖片）。同時(shí)在兩個(gè)方向上形成了節(jié)奏規(guī)律。
在頁腳處文本被分成兩行四列，再次形成了兩個(gè)方向上的視覺流和節(jié)奏規(guī)律。我認(rèn)為水平方向的視覺流比垂直方向上的視覺流更強(qiáng)烈，導(dǎo)致我的視覺從左向右看多于從上往下看，但是兩個(gè)方向的視覺流都是存在的。
在LOVE & LUXE網(wǎng)站的活動賽事中，它有垂直和水平兩個(gè)方向的視覺流。
左側(cè)的粉色列表吸引了我的眼睛，通過它的形狀形成了垂直的視覺流。注意這個(gè)網(wǎng)站的名字是旋轉(zhuǎn)排列的，以致于它也形成了一個(gè)垂直的視覺流。菜單的兩種顏色形成了對比，一個(gè)點(diǎn)選中的標(biāo)簽與未點(diǎn)中的標(biāo)簽形成了強(qiáng)烈的垂直視線。
在本專欄的底部重復(fù)的文，當(dāng)你一節(jié)一節(jié)讀完后形成了一個(gè)垂直的規(guī)律。然而，眼睛在水平閱讀瀏覽的時(shí)候自然又形成了水平的視覺流。
當(dāng)下選中的菜單是用黑色的背景顯示的，由于你的眼球被這種對比吸引所以形成了一個(gè)更為強(qiáng)烈的水平視覺流。因?yàn)樵谒疑辖堑哪莻€(gè)小三角指向右邊。
再右邊，主要內(nèi)容區(qū)域，顏色和日期的大小通過重復(fù)形成了一個(gè)有規(guī)律的垂直視覺流。截屏中只顯示了兩個(gè)，但是它們對下頁來說仍然有可預(yù)示性。通過藍(lán)色的日期創(chuàng)建顯示，粉色的標(biāo)題也加強(qiáng)了對規(guī)律作用。
在每兩個(gè)項(xiàng)目中間的分割水平線讓視覺隨時(shí)停留一小會。在日期和標(biāo)題上重復(fù)的顏色 形成的節(jié)奏規(guī)律會帶你進(jìn)入下一頁，一旦你準(zhǔn)備好通過這個(gè)水平線，那么你就會看到另外一個(gè)項(xiàng)目。
圖片會隨著每個(gè)條目的不同而改變，但是截屏這張圖片會讓你的視線看向左下方。
總結(jié)
經(jīng)你設(shè)計(jì)后，你能讓觀者在瀏覽網(wǎng)頁時(shí)什么時(shí)間看在哪。在以文字為主和輕圖表的頁面上，觀者的眼球可能會遵循一些向Z字模式或者是F模式來瀏覽頁面。
然而，你一旦設(shè)計(jì)頁面上的元素并添加圖表，那么那些模式不再適用。訪問者的視覺會跟隨你創(chuàng)建的視覺流和運(yùn)動規(guī)律來瀏覽網(wǎng)頁。
思考一下你要交流的信息優(yōu)先級。想一下在特定順序下看到這個(gè)信息是否更有用。考慮一下在這個(gè)頁面上你想讓用戶首先注意什么地方，然后呢，最后呢？
接著創(chuàng)建視覺線索提示引導(dǎo)人們按照你認(rèn)為最好的瀏覽頁面順序來瀏覽網(wǎng)站。你可以通過添加線或者讓多個(gè)元素通過對齊的方式來引導(dǎo)人們?yōu)g覽順序。重復(fù)的顏色或者是文字的大小形成節(jié)奏規(guī)律來引導(dǎo)視覺流。目前運(yùn)動的圖片來指引眼球的方向。
不要讓一個(gè)默有的模式來引導(dǎo)訪問者的眼球。而是創(chuàng)建一個(gè)組合的視覺流引導(dǎo)他們自己瀏覽整個(gè)網(wǎng)頁。
在本系列設(shè)計(jì)原則中還有最后一個(gè)問題我想與你們分享，那就是平衡。有關(guān)通常的組合平衡和帶你了解四種不同類型的平衡（對稱與非對稱，徑向和馬賽克）。
藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn
