網(wǎng)站設(shè)計(jì)原則：節(jié)奏和分流。

理想情況下,你想要人們先看到你最重要的信息和你的下一個(gè)最重要的信息。 你想讓潛在客戶看到的副本將說(shuō)服他們購(gòu)買(mǎi)之前他們看到“現(xiàn)在購(gòu)買(mǎi)”按鈕。 您希望人們看到正確的信息在正確的時(shí)間,和一個(gè)辦法 控制你的作文 。

成分流決定眼睛的一個(gè)設(shè)計(jì):看起來(lái)第一,看起來(lái)下,眼睛停頓的地方,停留多長(zhǎng)時(shí)間。

請(qǐng)注意 :這是第六個(gè)帖子在一系列設(shè)計(jì)原則。 你可以在這里找到前五個(gè)系列的帖子

• 設(shè)計(jì)原則:視覺(jué)感知和完形的原則

• 設(shè)計(jì)原則:空間和圖形-背景的關(guān)系

• 設(shè)計(jì)原則:通過(guò)對(duì)比和相似性連接和分離元素

• 設(shè)計(jì)原則:視覺(jué)重量和視覺(jué)方向

• 設(shè)計(jì)原則:優(yōu)勢(shì)、重點(diǎn)和層次結(jié)構(gòu)

設(shè)計(jì)模式:流沒(méi)有設(shè)計(jì)

在本系列的文章 我談?wù)撘曈X(jué)方向 和我提到魯?shù)婪駻rnheim的結(jié)構(gòu)性。 你應(yīng)該讀那篇文章,但總的來(lái)說(shuō),在一個(gè)矩形帆布畫(huà)布的中心和四個(gè)角作為磁鐵拉的眼睛。 隨著這些自然焦點(diǎn),它們之間有軸運(yùn)行,你的眼睛沿著他們從焦點(diǎn)到焦點(diǎn)。

Arnheim的結(jié)構(gòu)性網(wǎng)絡(luò)不是唯一的模式表明,眼睛自然如何穿過(guò)一篇作文。 古騰堡圖、f模式布局和Z-pattern布局建議所有觀眾的眼睛將和他們認(rèn)為設(shè)計(jì)的自然流動(dòng)。

請(qǐng)注意 :這些模式描述語(yǔ)言從左到右閱讀。 為其他閱讀方向調(diào)整。

古騰堡圖。 ( 查看大版本 )

• 古騰堡圖 :在這種模式的眼睛一般清潔工從左上角到右下角,穿過(guò)Arnheim光學(xué)中心。 更少的關(guān)注被稱為休閑領(lǐng)域的其他角落。 因?yàn)檠劬ovesto右邊向下移動(dòng),右上角是一個(gè)強(qiáng)烈的休閑區(qū)域,左下角時(shí)主要是忽略了。

• f模式布局 :在這種模式的眼睛從左上角開(kāi)始,在右邊的頁(yè)面之前一點(diǎn)點(diǎn),整個(gè)頁(yè)面重復(fù)運(yùn)動(dòng)。 一般模式遵循F字母的形狀。

• Z-pattern布局 :眼睛從左上角開(kāi)始,行動(dòng)吧。 在右上角向下移動(dòng),左斜之前再次向右移動(dòng)。 整體此前字母Z的形狀和重復(fù)模式,直到它到達(dá)右下角的頁(yè)面。

我相信你已經(jīng)看到了眼動(dòng)跟蹤研究和討論上面的模式。 很少被提到的是什么 這些模式描述的文字頁(yè)面 。 他們描述了我們的眼睛穿過(guò)列的文本。

“f型”往往是結(jié)合搜索結(jié)果頁(yè)面中提到。 那是為什么? 這是因?yàn)樗阉鹘Y(jié)果頁(yè)面的文字頁(yè)掃描以很小的列表信息。 一個(gè)f模式是一個(gè)自然的方式來(lái)掃描這些頁(yè)面。

閱讀模式的文字和design-light頁(yè)面通常遵循一個(gè)F或Z路徑。 ( 查看大版本 )

添加層次結(jié)構(gòu)、方向、運(yùn)動(dòng)和節(jié)奏,流過(guò)你的設(shè)計(jì)不會(huì)遵循上面的模式。 消失的模式設(shè)計(jì)的存在。

他們?nèi)匀挥杏?因?yàn)槟憧梢岳媚Ｊ胶脱劬ψ匀粫?huì)下降到重要信息的地方增加信息的視覺(jué)感受。 你可以利用這些自然模式,但能理解他們描述的文字頁(yè)面。

觀眾的眼睛將會(huì)以某種方式通過(guò)一篇作文無(wú)論你是否控制運(yùn)動(dòng)。 你不妨控制運(yùn)動(dòng)。

的流

你可能已經(jīng)看到了“講故事”一詞越來(lái)越多的出現(xiàn)在討論優(yōu)化設(shè)計(jì)和轉(zhuǎn)換。 成分流可以幫助你告訴你的故事通過(guò)提供信息以正確的順序。

流運(yùn)動(dòng)和方向,和領(lǐng)導(dǎo)的眼睛從一個(gè)組合的一部分到另一個(gè)你想要移動(dòng)的方向。 您創(chuàng)建流經(jīng)視覺(jué)重量和視覺(jué)方向的結(jié)合。

元素的視覺(jué)重量(焦點(diǎn))把眼睛和成為休息的地方。 其他元素傳遞方向和移動(dòng)你的眼睛從一個(gè)點(diǎn)到另一個(gè)通過(guò)箭頭等視覺(jué)線索和線條。

流從你開(kāi)始主導(dǎo)元素,這應(yīng)該是入口點(diǎn)進(jìn)你的作文。 從那里你為眼睛提供方向線索跟進(jìn)您的設(shè)計(jì)。

最明顯的方向性提示是一個(gè)箭頭指向。 看起來(lái)在一個(gè)方向上的圖像是另一個(gè)強(qiáng)大而簡(jiǎn)單的方向提示。 其他人包括。

• 重復(fù)的元素

• 節(jié)奏

• 隱含的行動(dòng)

• 斜線

• 手勢(shì)的行

• 方向線

• 的角度來(lái)看

• 主題元素的

• 分級(jí)

在上面的列表中你會(huì)注意到線條特性。 顯示的方向是線的主要特征之一。 線也可以用來(lái)切斷朝一個(gè)方向運(yùn)動(dòng)的垂直運(yùn)動(dòng)。 當(dāng)這一切發(fā)生的時(shí)候,他們充當(dāng)障礙,阻止或逆轉(zhuǎn)后的眼睛。

通過(guò)上述項(xiàng)目創(chuàng)建方向和運(yùn)動(dòng)。 添加元素作為屏障改變方向移動(dòng)。 創(chuàng)建開(kāi)放的路徑空空間,允許之間的簡(jiǎn)單運(yùn)動(dòng),積極的設(shè)計(jì)元素。

流和和諧

你想要從微觀層面眼睛遵循一致的路徑和任何你希望別人采取行動(dòng)。 例如,它是有意義的地方按鈕搜索表單字段后,由于自然過(guò)程填寫(xiě)字段,然后單擊按鈕。 將按鈕首先將你的訪問(wèn)者在一個(gè)方向,直到最后,當(dāng)他們不得不將所有的方式回到開(kāi)始。

成分流在搜索表單。 ( 查看大版本 )

更有意義有箭頭指向你想找人看看,而不是遠(yuǎn)離那件事。 你創(chuàng)建流即使箭頭點(diǎn),但不是任何意義的流動(dòng)實(shí)現(xiàn)的目標(biāo)網(wǎng)站。

箭頭應(yīng)該你想讓眼睛看。 ( 查看大版本 )

運(yùn)動(dòng)

運(yùn)動(dòng)方向密切相關(guān)。 運(yùn)動(dòng)意味著意味著運(yùn)動(dòng)方向和方向。 如果你想讓別人看右邊,一種方法是在頁(yè)面上有向右移動(dòng)。 眼睛會(huì)跟著它。

有幾種類型的運(yùn)動(dòng)。

• 文字(物理)運(yùn)動(dòng) :發(fā)生在一些體育活動(dòng)。

• 靜態(tài)的運(yùn)動(dòng) :發(fā)生在眼睛周?chē)S的點(diǎn)對(duì)點(diǎn)的層次結(jié)構(gòu)。

• 的運(yùn)動(dòng) 設(shè)計(jì)元素:發(fā)生在引導(dǎo)觀眾的眼睛從一個(gè)點(diǎn)到另一個(gè)通過(guò)一篇作文。

動(dòng)畫(huà)可以用來(lái)創(chuàng)建文字頁(yè)面上的運(yùn)動(dòng)。 創(chuàng)建靜態(tài)運(yùn)動(dòng)優(yōu)勢(shì)、重點(diǎn)和層次結(jié)構(gòu)。 當(dāng)元素傳遞方向和運(yùn)動(dòng)焦點(diǎn)之間添加你創(chuàng)建的流。

方向線索我先前提出的同樣的列表是用來(lái)顯示運(yùn)動(dòng)通過(guò)一篇作文。

節(jié)奏

節(jié)奏可以幫助控制流的速度組成;它的運(yùn)動(dòng)。 有節(jié)奏的模式是由元素和它們之間的間隔,就像你的耳朵會(huì)跟隨歌曲的節(jié)奏,你的眼睛會(huì)跟著節(jié)奏創(chuàng)造了視覺(jué)。

模式和節(jié)奏就會(huì)存在多個(gè)元素添加到頁(yè)面。 什么意味著兩個(gè)結(jié)構(gòu)。 這將是不管你做什么,所以,再一次,你應(yīng)該學(xué)會(huì)控制它。

通過(guò)重復(fù)的元素重復(fù)創(chuàng)建流動(dòng)和節(jié)奏。 當(dāng)眼睛看到一個(gè)紅色圓圈通知其他紅色圓圈組成和尋求建立一個(gè)模式。 除了可以使用重復(fù)交替和層次創(chuàng)造節(jié)奏。

• 重復(fù) 通過(guò)可預(yù)見(jiàn)性:創(chuàng)建模式。

• 交替 通過(guò)對(duì)比對(duì):創(chuàng)建模式。

• 分級(jí) 通過(guò)發(fā)展常規(guī)步驟:創(chuàng)建模式。

節(jié)奏是通過(guò)元素創(chuàng)建的眼睛以及它們之間的間隔。 改變或者改變模式。 添加感興趣的變化模式。 強(qiáng)調(diào)事情的模式可以打破節(jié)奏和停頓的瞬間。

有三個(gè)主要類型的節(jié)奏:

• 常規(guī)的節(jié)奏 :發(fā)生在元素之間的間隔是可預(yù)測(cè)的,或者類似的元素本身的大小和長(zhǎng)度。 將定期重復(fù)元素將是一個(gè)例子。

• 流動(dòng)的旋律 :發(fā)生在有機(jī)元素或時(shí)間間隔。 這就產(chǎn)生了自然模式,喚起一種有機(jī)運(yùn)動(dòng)的感覺(jué)。 老虎和斑馬條紋就是很好的例子。

• 進(jìn)步的節(jié)奏 :發(fā)生在形式或形狀的順序顯示通過(guò)漸進(jìn)的步驟。 一些元素可能會(huì)加強(qiáng)變化的特點(diǎn),或者間隔可能走的變化。 這個(gè)逐步增加或減少序列創(chuàng)建運(yùn)動(dòng)。 一個(gè)顏色梯度是一個(gè)很好的例子。

一片花展品流動(dòng)的節(jié)奏。 ( 查看大版本 )

上面的任何類型的節(jié)奏可以用來(lái)創(chuàng)建運(yùn)動(dòng)和作曲的流。 你會(huì)選擇哪一個(gè)取決于你的設(shè)計(jì)的細(xì)節(jié):如果設(shè)計(jì)試圖溝通一致性,常規(guī)的節(jié)奏是最好,如果設(shè)計(jì)試圖溝通更自然和有機(jī),流動(dòng)的節(jié)奏可能會(huì)優(yōu)先考慮。

流和完形

進(jìn)一步在本系列中,我們得到了更多的完形原則有助于我們看的設(shè)計(jì)原則。

優(yōu)勢(shì)和重點(diǎn)創(chuàng)建地區(qū)設(shè)計(jì),拉的眼睛。 相似度和對(duì)比度用于創(chuàng)建模式和節(jié)奏。

所有連接或顯示的格式塔原則之間的共性元素將幫助引導(dǎo)的眼睛從一個(gè)組中的元素。

統(tǒng)一的連通性使眼睛通過(guò)連接元素的東西。 元素與一個(gè)共同的命運(yùn)似乎在同一方向移動(dòng)著眼睛。 延續(xù)的原則是專門(mén)關(guān)于繼續(xù)朝著一個(gè)方向。

例子

讓我們從一些網(wǎng)站看看截圖,想想他們的設(shè)計(jì)流程和行動(dòng),他們可能有什么樣的節(jié)奏。

正如我前面所提到的,這是我的意見(jiàn)。 你可以看看這些相同的截圖和比我看到一個(gè)不同的流動(dòng)和節(jié)奏。 這很好。 更重要的是對(duì)我們雙方都既進(jìn)行批判性思考的設(shè)計(jì)我們看到比我們同意我們的想法。

DORIGATI

當(dāng)我看一看 Dorigati主頁(yè) 我的眼睛迅速吸引到葡萄酒的英雄形象桶頂部的頁(yè)面。 這不會(huì)花很長(zhǎng)時(shí)間在這里從焦點(diǎn)像網(wǎng)站的logo和酒瓶的形象。

Dorigati的截圖。 它的主頁(yè)。 ( 查看大版本 )

有一個(gè)強(qiáng)烈的暗示斜流之間的標(biāo)志和瓶子,和你的眼睛可能他們之間來(lái)回流動(dòng)。 認(rèn)為如何快速連接公司名稱和網(wǎng)站提供的產(chǎn)品。

曲線底部的標(biāo)志似乎點(diǎn)下行導(dǎo)致你的眼睛葡萄酒的名稱被提出。 注意左邊的標(biāo)題和葡萄酒的名稱是相同的藍(lán)色和類似于藍(lán)色的標(biāo)志。 顏色創(chuàng)建一個(gè)重復(fù)的節(jié)奏和流經(jīng)所有三個(gè)項(xiàng)目。

色彩的節(jié)奏與黃金再次使用標(biāo)題頁(yè),左邊的裝飾性的繁榮。 類似的顏色是用于日期。 雖然間隔可以取決于每個(gè)條目文本的長(zhǎng)度,這是相當(dāng)可預(yù)見(jiàn)的和常規(guī)的節(jié)奏。

酒瓶也連接頭與主要內(nèi)容,創(chuàng)建一個(gè)垂直流過(guò)英雄形象,作為它的一座橋。 沒(méi)有酒瓶的形象需要更多的努力為你的眼睛的水平線,創(chuàng)建運(yùn)動(dòng)障礙。

衣服感動(dòng)地

有一個(gè)強(qiáng)烈的橫向流的頂部 衣服感動(dòng)地主頁(yè) 。 導(dǎo)航和文本兩個(gè)鉛水平你的眼睛,讓它很容易掃描頭左和右。

從衣服感動(dòng)地網(wǎng)站的主頁(yè)截圖。 ( 查看大版本 )

我的眼睛往往先從“你決定”文本和輕易地左右移動(dòng),可以標(biāo)志,導(dǎo)航和剩下的文本標(biāo)題。

注意“你決定結(jié)束時(shí)你的眼睛也推倒。 有重復(fù)的矩形和橙色的形狀,創(chuàng)建了一個(gè)垂直的節(jié)奏。 的形狀”搭配的? ”按鈕回蕩在矩形”548票”形狀和“見(jiàn)下面的詳細(xì)信息”按鈕的文本。 這個(gè)垂直流是由強(qiáng)大的垂直線,加強(qiáng)了與這些形狀的左邊緣對(duì)齊它們之間的文本。

橙色顏色重復(fù)作為文本的標(biāo)題,也進(jìn)一步的頁(yè)面截圖(圖中未顯示)。 有遇到顏色重復(fù)在頁(yè)面的頂部,你的眼睛之前下來(lái)頁(yè)面增加垂直流動(dòng)。

令人難以置信的類型

的頭 令人難以置信的類型的主頁(yè) 也有一個(gè)橫向流由于形狀的線條和塊文本。 光網(wǎng)格線還創(chuàng)建一個(gè)微妙的拉下來(lái)并創(chuàng)建一個(gè)常規(guī)的節(jié)奏水平整個(gè)頁(yè)面。

從不可思議的類型網(wǎng)站的主頁(yè)截圖。 ( 查看大版本 )

下面的頭是一個(gè)網(wǎng)格的圖像。 注意圖像之間的排水溝(橫向和縱向)為你的眼睛通過(guò)提供一個(gè)通道。 他們幫助你的眼睛流從圖像到圖像的方向。 他們還創(chuàng)建一個(gè)常規(guī)的節(jié)奏在兩個(gè)方向上。

截圖的頁(yè)腳令人難以置信的類型網(wǎng)站的主頁(yè)。 ( 查看大版本 )

在頁(yè)腳文本分成兩排,四列再次創(chuàng)建兩個(gè)水平和垂直流動(dòng)和節(jié)奏。 我認(rèn)為水平流比垂直,所以我的眼睛往往左右超過(guò)上下移動(dòng),但存在于兩個(gè)方向流動(dòng)。

愛(ài)情和奢華

的 愛(ài)奢侈網(wǎng)站活動(dòng)頁(yè)面 是另一個(gè)設(shè)計(jì),顯示了水平和垂直流動(dòng)。

從內(nèi)部頁(yè)截圖的愛(ài)&華美的網(wǎng)站。 ( 查看大版本 )

左列的粉紅色吸引了我的眼睛和創(chuàng)建垂直流過(guò)它的形狀。 注意網(wǎng)站的名字是旋轉(zhuǎn),也創(chuàng)建了一個(gè)垂直流動(dòng)。 菜單下的對(duì)比的顏色,它創(chuàng)建了一個(gè)強(qiáng)大的垂直線兩見(jiàn)面。

本專欄的底部的文字重復(fù),創(chuàng)建一個(gè)垂直的節(jié)奏在你讀一個(gè)街區(qū)然后它下面的一個(gè)。 然而,水平線條的性質(zhì)變化流水平和你的眼睛向右移動(dòng)。

背后的黑暗背景當(dāng)前菜單項(xiàng)創(chuàng)建一個(gè)更強(qiáng)的橫向流動(dòng),因?yàn)槟愕难劬κ俏降膶?duì)比。 三角它顯示在右上角點(diǎn)向右。

在右邊,在主要內(nèi)容,顏色和大小的日期創(chuàng)建一個(gè)常規(guī)的垂直通過(guò)重復(fù)的節(jié)奏。 截屏只顯示兩個(gè),但是他們繼續(xù)進(jìn)一步的頁(yè)面。 粉紅色的頭條新聞工作要加強(qiáng)節(jié)奏重復(fù)創(chuàng)建的藍(lán)色的日期。

每個(gè)條目停止之間的水平線垂直流瞬間,讓你在每個(gè)條目一會(huì)兒。 重復(fù)的節(jié)奏顏色的日期和標(biāo)題在頁(yè)面一旦你把你準(zhǔn)備穿過(guò)水平線,搬到另一個(gè)條目。

圖像自然變化與每個(gè)條目,但在這個(gè)截圖指導(dǎo)你的眼睛向左斜。

總結(jié)

你看起來(lái)有很多的控制,人們當(dāng)他們?yōu)g覽網(wǎng)頁(yè)設(shè)計(jì)。 頁(yè)面上的文字,graphic-light,游客的眼睛可能是類似Z-pattern或f模式在整個(gè)頁(yè)面。

然而,一旦你設(shè)計(jì)頁(yè)面元素并添加圖形,這些模式不再適用。 訪問(wèn)者的眼睛會(huì)流,您創(chuàng)建運(yùn)動(dòng)和節(jié)奏。

思考你溝通信息的優(yōu)先級(jí)。 想如果它會(huì)更有用,當(dāng)看到在一個(gè)特定的順序。 頁(yè)面上的思考,你想找人看第一,第二,第三。

然后創(chuàng)建視覺(jué)提示來(lái)引導(dǎo)他們通過(guò)頁(yè)面的順序你認(rèn)為最好的。 添加一行人,或創(chuàng)建一個(gè)通過(guò)調(diào)整各種元素。 重復(fù)的顏色或文本大小創(chuàng)建一個(gè)節(jié)奏的眼睛。 目前移動(dòng)物體的圖像直接。

不要讓它默認(rèn)的模式來(lái)引導(dǎo)訪問(wèn)者的眼睛。 創(chuàng)建的流過(guò),引導(dǎo)他們自己的頁(yè)面。

有最后一個(gè)話題我想與你分享在本系列設(shè)計(jì)原則,這就是平衡。 我將討論一般成分的平衡,然后帶您經(jīng)歷四個(gè)不同類型的平衡(對(duì)稱、不對(duì)稱徑向和馬賽克)您可以創(chuàng)建。

網(wǎng)頁(yè)題目：網(wǎng)站設(shè)計(jì)原則：節(jié)奏和分流。
文章鏈接：http://muchs.cn/news39/80439.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)