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