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

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

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

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

• 設計原則:視覺感知和完形的原則

• 設計原則:空間和圖形-背景的關系

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

• 設計原則:視覺重量和視覺方向

• 設計原則:優(yōu)勢、重點和層次結構

設計模式:流沒有設計

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

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

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

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

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

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

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

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

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

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

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

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

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

的流

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

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

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

流從你開始主導元素,這應該是入口點進你的作文。 從那里你為眼睛提供方向線索跟進您的設計。

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

• 重復的元素

• 節(jié)奏

• 隱含的行動

• 斜線

• 手勢的行

• 方向線

• 的角度來看

• 主題元素的

• 分級

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

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

流和和諧

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

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

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

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

運動

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

有幾種類型的運動。

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

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

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

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

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

節(jié)奏

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

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

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

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

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

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

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

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

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

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

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

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

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

流和完形

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

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

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

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

例子

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

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

DORIGATI

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

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

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

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

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

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

衣服感動地

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

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

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

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

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

令人難以置信的類型

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

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

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

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

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

愛情和奢華

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

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

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

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

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

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

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

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

總結

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

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

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

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

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

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

網(wǎng)站題目：網(wǎng)站設計原則：節(jié)奏和分流。
當前網(wǎng)址：http://www.bm7419.com/news/80439.html

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

廣告

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