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