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

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

成分流決定眼睛的一個設(shè)計:看起來第一,看起來下,眼睛停頓的地方,停留多長時間。

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

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

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

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

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

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

設(shè)計模式:流沒有設(shè)計

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

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

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

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

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

• f模式布局 :在這種模式的眼睛從左上角開始,在右邊的頁面之前一點點,整個頁面重復(fù)運動。 一般模式遵循F字母的形狀。

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

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

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

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

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

他們?nèi)匀挥杏?因為你可以利用模式和眼睛自然會下降到重要信息的地方增加信息的視覺感受。 你可以利用這些自然模式,但能理解他們描述的文字頁面。

觀眾的眼睛將會以某種方式通過一篇作文無論你是否控制運動。 你不妨控制運動。

的流

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

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

元素的視覺重量(焦點)把眼睛和成為休息的地方。 其他元素傳遞方向和移動你的眼睛從一個點到另一個通過箭頭等視覺線索和線條。

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

最明顯的方向性提示是一個箭頭指向。 看起來在一個方向上的圖像是另一個強大而簡單的方向提示。 其他人包括。

• 重復(fù)的元素

• 節(jié)奏

• 隱含的行動

• 斜線

• 手勢的行

• 方向線

• 的角度來看

• 主題元素的

• 分級

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

通過上述項目創(chuàng)建方向和運動。 添加元素作為屏障改變方向移動。 創(chuàng)建開放的路徑空空間,允許之間的簡單運動,積極的設(shè)計元素。

流和和諧

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

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

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

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

運動

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

有幾種類型的運動。

• 文字(物理)運動 :發(fā)生在一些體育活動。

• 靜態(tài)的運動 :發(fā)生在眼睛周圍跳躍的點對點的層次結(jié)構(gòu)。

• 的運動 設(shè)計元素:發(fā)生在引導(dǎo)觀眾的眼睛從一個點到另一個通過一篇作文。

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

方向線索我先前提出的同樣的列表是用來顯示運動通過一篇作文。

節(jié)奏

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

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

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

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

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

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

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

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

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

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

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

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

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

流和完形

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

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

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

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

例子

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

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

DORIGATI

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

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

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

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

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

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

衣服感動地

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

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

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

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

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

令人難以置信的類型

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

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

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

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

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

愛情和奢華

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

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

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

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

背后的黑暗背景當(dāng)前菜單項創(chuàng)建一個更強的橫向流動,因為你的眼睛是吸引到的對比。 三角它顯示在右上角點向右。

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

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

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

總結(jié)

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

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

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

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

不要讓它默認的模式來引導(dǎo)訪問者的眼睛。 創(chuàng)建的流過,引導(dǎo)他們自己的頁面。

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

網(wǎng)站題目：網(wǎng)站設(shè)計原則：節(jié)奏和分流。
當(dāng)前網(wǎng)址：http://muchs.cn/news/80439.html

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

廣告

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