欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

怪了!為什么你單個(gè)設(shè)計(jì)細(xì)節(jié)好看,整體看卻不行?

2019-4-22    濤濤

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在設(shè)計(jì)的時(shí)候,各種視覺要素以有序的方式排列,設(shè)計(jì)師需要通過對(duì)各部分空間的精妙設(shè)置來實(shí)現(xiàn)這一點(diǎn)。通常而言,我們的目光總會(huì)被最引人注目的部分吸引——無(wú)論它是視覺主體還是負(fù)空間。視覺主體和負(fù)空間,兩者都很重要,尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無(wú)縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品中,設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢?這就牽涉到我們今天要聊的主題了,格式塔原理。

人類的大腦天生就能把規(guī)律性的散點(diǎn)連接起來,并對(duì)目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域,是形式和空間的相互融合,并隨之創(chuàng)造各種各樣的體驗(yàn)。無(wú)論我們接觸到什么樣的設(shè)計(jì)作品,我們的大腦都會(huì)本能地將作品解構(gòu)為更簡(jiǎn)單的各個(gè)組件,這些組件由基本的形狀和不同的形態(tài)組成,而這些形狀和形態(tài)則與空間息息相關(guān)。過往豐富的體驗(yàn)與經(jīng)歷,使得我們的腦海中充滿了各種各樣的記憶,于是我們很容易就能識(shí)別出這些特定的設(shè)計(jì)形式。

正空間,或者說顯著的設(shè)計(jì)主體,構(gòu)成了設(shè)計(jì)的「肉體」,它是你看到形狀、顏色、圖案等部分。相反,負(fù)空間多數(shù)情況下是指背景或大量留白。

文森特·梵高(Vincent Van Gogh)的這幅廣受歡迎的作品,是一個(gè)以正負(fù)空間之間有著強(qiáng)對(duì)比的經(jīng)典設(shè)計(jì)案例。

就像正空間似乎支配著負(fù)空間一樣,兩者都被用來平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。

在平衡的構(gòu)圖中,設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的,形成一個(gè)無(wú)縫、美觀的整體。相反,不平衡的構(gòu)圖會(huì)讓觀眾感到不適,傳達(dá)出一個(gè)不完整的、扭曲的故事。

我們的設(shè)計(jì)在表達(dá)什么?

網(wǎng)頁(yè)設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差,那么網(wǎng)頁(yè)設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來看,在「內(nèi)容為王」的時(shí)代,如果空間布局使用不當(dāng),內(nèi)容將對(duì)您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。

如果你認(rèn)為你的開發(fā)技能很棒,但你的設(shè)計(jì)技能可能需要更多的改進(jìn),那這篇文章對(duì)你就太合適了。在本文中,我們將討論:

  • 正負(fù)空間之間的關(guān)系、重要性及應(yīng)用;
  • 空間與認(rèn)知知覺的關(guān)系;
  • 格式塔原理及其它在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

我們還將討論一些真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例,探討每個(gè)案例如何體現(xiàn)格式塔原理,以及它對(duì)空間的創(chuàng)造性使用。

話不多說,一起開始學(xué)習(xí)吧。

一、正負(fù)空間的關(guān)系、重要性及應(yīng)用

空間由兩個(gè)主要維度組成:正空間和負(fù)空間。正空間是可被直接感知到的視覺元素,負(fù)空間則為元素以外的留白和間隙。如前所述,正的是物體,負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn),另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí),后者則保持靜止和模糊。一個(gè)是月亮,另一個(gè)是環(huán)繞著它的暗夜。

在網(wǎng)頁(yè)設(shè)計(jì)中,正負(fù)空間相互作用,共同形成構(gòu)圖,傳達(dá)理念。只有當(dāng)正負(fù)空間通過對(duì)比來區(qū)分,同時(shí)又向更大的區(qū)域延伸時(shí),才會(huì)產(chǎn)生視覺層次(腦補(bǔ)一下陰陽(yáng)太極圖吧)。

正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素,讓后者更加突出和顯著。

通常而言,正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用,實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:

  • 創(chuàng)建易于遵循的視覺層次;
  • 吸引注意力,營(yíng)造焦點(diǎn),減少分心;
  • 幫助營(yíng)造邊界,突出焦點(diǎn);
  • 讓頁(yè)面更容易被掃讀;
  • 使頁(yè)面看起來自然;
  • 不借助外力的情況下,闡明視覺元素之間的關(guān)系;
  • 有助于保持頁(yè)面干凈清爽;
  • 強(qiáng)化網(wǎng)頁(yè)的視覺風(fēng)格和外觀。

設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí),兩者在視覺上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位,并給人一種「過于擁擠」或「空洞無(wú)物」的印象時(shí),混亂才會(huì)發(fā)生。在這兩種情況下,受眾都無(wú)法處理如此復(fù)雜的信息,因此,而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁(yè)設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。

這是一個(gè)網(wǎng)頁(yè)模板,它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:

△ 布局混亂

△ 空間失衡

△ 適當(dāng)?shù)牟季终{(diào)整

△ 網(wǎng)頁(yè)設(shè)計(jì)中空間的合理運(yùn)用

有意思的是,當(dāng)談到空間的概念和布局出現(xiàn)時(shí),質(zhì)疑聲也隨之而起。

  • 是正空間被負(fù)空間包圍,還是負(fù)空間被正空間吞噬?
  • 如何確定正負(fù)空間的比例?
  • 兩種空間類型中,哪一個(gè)作為焦點(diǎn)對(duì)象?
  • 是否必須突出其中一個(gè)而忽略另一個(gè),以便向觀眾傳達(dá)設(shè)計(jì)師的預(yù)期感知?
  • 我將如何通過正負(fù)空間之間的變化讓設(shè)計(jì)出現(xiàn)質(zhì)的變化?

類似的問題只能在理解基本概念后再來作答。黃金經(jīng)驗(yàn)法則告訴我們——簡(jiǎn)單是最好的策略。

在文章開頭,我曾提到在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候,盡量創(chuàng)建簡(jiǎn)單的用戶界面,這是一舉兩得的舉措,既可以造福你自己,也可以惠及用戶。或從表面上看,網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺吸引力,使用戶操作更為簡(jiǎn)便。

二、空間與認(rèn)知知覺之間的聯(lián)系

我們的大腦總是在扮演偵探的角色,試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺信息與之前的經(jīng)驗(yàn)進(jìn)行比對(duì)。為了成為一名的網(wǎng)頁(yè)設(shè)計(jì)師,你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺元素,利用它們來影響觀眾的感知。

偉大的設(shè)計(jì)師明白心理學(xué)在視覺感知中所扮演的強(qiáng)大角色。當(dāng)某人的目光與你的設(shè)計(jì)作品相遇時(shí)會(huì)發(fā)生什么?他們對(duì)你的文章所傳達(dá)的信息有何反應(yīng)?——?jiǎng)诶げ际玻珹utodesk 品牌內(nèi)容策略師

作為設(shè)計(jì)師,你必須清楚地了解視覺設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說,開發(fā)以用戶為中心的簡(jiǎn)單界面,借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理,它可以幫助你理解和控制視覺和心理的聯(lián)系。

三、網(wǎng)頁(yè)設(shè)計(jì)中的「格式塔原則」

格式塔在德語(yǔ)中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯,它最基本的概念是:

整體大于各個(gè)部分的總和。——庫(kù)爾特·考夫卡(美籍德裔心理學(xué)家,格式塔心理學(xué)的代表人物之一)

當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí),它們?cè)谖覀兊母兄?dāng)中就是一組。我們把元素看作一個(gè)整體,這一概念或理論基本適用于所有的設(shè)計(jì)媒介:我們不把文本、顏色和形狀看作單獨(dú)的元素,而是把整個(gè)網(wǎng)頁(yè)看作一個(gè)整體。同樣的道理也適用于森林:我們看到的不僅僅是一堆樹,就像我們?cè)诳春Q髸r(shí)看不到水滴一樣。

格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí),人類大腦是如何感知視覺成分的。它幫助大腦創(chuàng)造視覺圖像。因此,格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類別:

  • 圖形和背景
  • 接近性原則
  • 對(duì)稱和秩序
  • 相似性
  • 封閉性
  • 連續(xù)性

1. 圖像和背景

「圖形」是直觀地、明顯地與背景分離的物體。

目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對(duì)稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候,你的眼睛會(huì)立即被吸引到畫面上看起來最聚焦的視覺主體上,可能是相互對(duì)立的面孔,也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí),背景或花瓶被模糊了,在那一刻,你的大腦直覺地在圖像中感知到背景。

過了一會(huì)兒,你會(huì)注意到背景中的花瓶,并意識(shí)到它本來就在那里。盡管圖形和基本原則看起來模棱兩可,設(shè)計(jì)師常常創(chuàng)造視覺上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù),并將之運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)。

有時(shí),圖形與背景之間的關(guān)系是穩(wěn)定的,而這種穩(wěn)固的視覺關(guān)系使得兩者之間,產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的,這意味著圖形和背景是無(wú)法清晰區(qū)分的。由于這種關(guān)系的模糊性,用戶會(huì)很自然地開始困惑。

為了讓大家直觀地感受到圖形和背景之間的關(guān)系,讓我們?cè)敿?xì)的拿幾個(gè)案例來進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面:對(duì)比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性,包括顏色、尺寸和信息量,它們關(guān)系到內(nèi)容的區(qū)分和視覺的縱深。

在下面的第一個(gè)例子中,Trellis 使用了一個(gè)全屏大圖背景,并且搭配上清晰的 CTA 元素,圖形-背景關(guān)系明確,該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。

頁(yè)面中的文字是位于中央的手寫風(fēng)格字體,與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對(duì)比的白色文本是吸引用戶注意力的焦點(diǎn),這使得文本在畫面中是高度可見的。從另一個(gè)角度來看,背景圖片是模糊的,所以清晰的文本會(huì)非常醒目。這些都表明,這里的文本被優(yōu)先考慮為圖形或正空間,而模糊的圖像被用作背景或負(fù)空間,從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。

下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開來。這是你在瀏覽他們的網(wǎng)站時(shí)看到的:

當(dāng)你第一次瀏覽這個(gè)頁(yè)面時(shí),哪個(gè)部分會(huì)吸引你的注意力?你會(huì)發(fā)現(xiàn),它的主要文本為白色和藍(lán)色背景構(gòu)成對(duì)比,而更加醒目的是是兩個(gè)與文字對(duì)比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異,構(gòu)造對(duì)比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對(duì)比的同時(shí),還和更靠前的文本構(gòu)成色彩對(duì)比。

背景使用了微妙的色調(diào),使數(shù)字得以鮮明地展現(xiàn),并突出細(xì)節(jié)。方框的運(yùn)用使它們?cè)陧?yè)面上清晰可見。

一些網(wǎng)站還通過添加陰影來表現(xiàn)物與背景的關(guān)系,產(chǎn)生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com:

Seriously Unsweetened 的著陸頁(yè)使用了不止一種方法來保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合;背景是純粹的白色,使得前景元素更容易從中出來。背景之上的元素都是「正空間」,圖中的物體呈現(xiàn)在背景的映襯下,有一種被置于「頂部」的錯(cuò)覺。而陰影并沒有直接用在圖片和文本上,而是應(yīng)用在圖片的內(nèi)部,這讓我們注意到在主要圖像內(nèi)部還有另一層視覺元素,這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。

2. 接近性原理

接近性是指頁(yè)面中元素之間的接近程度。網(wǎng)頁(yè)中的不同元素可以組合在一起,不同的接近程度會(huì)帶來不同的關(guān)聯(lián)屬性。除了視覺特征上的接近性之外,這些元素與其他頁(yè)面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。

從圖像到文本、導(dǎo)航欄到網(wǎng)頁(yè)表單,這種接近性原則在網(wǎng)頁(yè)設(shè)計(jì)中適用范圍非常廣。將類似的內(nèi)容組合在一起時(shí),它將在元素之間創(chuàng)建關(guān)聯(lián),為觀者提供更好的視覺體驗(yàn)。

以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運(yùn)用接近度的案例:

在上方的截圖中,我們可以清楚地看到如何將相同類別的元素放在一起,以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇,使觀者的目光自動(dòng)被吸引到主標(biāo)題下的子欄目上。

除了導(dǎo)航欄外,基于網(wǎng)格的內(nèi)容也符合黃金比例的接近性。亞馬遜的產(chǎn)品列表就是最好的例子:

這個(gè)案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見,具備視覺接近性的同類產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類似的產(chǎn)品列表中,對(duì)其目標(biāo)產(chǎn)品基于購(gòu)買偏好進(jìn)行排序。此外,封閉性原則也在類似項(xiàng)目的清單中發(fā)揮了作用。

現(xiàn)在,我們來仔細(xì)看看 Basecamp 的網(wǎng)頁(yè)表單設(shè)計(jì),它在網(wǎng)頁(yè)設(shè)計(jì)中顯示了另一種接近性的理想情況:

可以看到上圖中的表單是被劃分為兩個(gè)主要部分的:個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段,第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁(yè)表單中,接近度是一個(gè)重要指標(biāo),它將網(wǎng)頁(yè)中呈現(xiàn)的信息按優(yōu)先級(jí)排列。

3. 對(duì)稱和秩序

對(duì)稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對(duì)稱圖形包括等邊三角形、圓形和正方形等幾何圖像。

人類的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對(duì)稱」,這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對(duì)稱,因?yàn)閷?duì)稱創(chuàng)造和諧,讓觀者在觀看圖像時(shí)感到舒適。

下面是 HvD Fonts 在網(wǎng)頁(yè)設(shè)計(jì)中體現(xiàn)對(duì)稱性的一個(gè)很好的案例:

這個(gè)頁(yè)面不僅顯示了典型的圖形-背景關(guān)系,而且強(qiáng)調(diào)了對(duì)稱性原則的運(yùn)用。頁(yè)面被分成四等份,字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的,黑色甚至其他的顏色也可以以圖像作為背景。

對(duì)稱性原則還可以衍生出了另一個(gè)概念:在網(wǎng)頁(yè)設(shè)計(jì)中,不對(duì)稱會(huì)使觀感不佳,必須謹(jǐn)慎使用。許多網(wǎng)站使用不對(duì)稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡,反之亦然。而 Xplode 的營(yíng)銷理念是不對(duì)稱,Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對(duì)稱。

這個(gè)網(wǎng)頁(yè)利用視覺錯(cuò)覺和不對(duì)稱,抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對(duì)稱的布局之下,在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺吸引力。色彩是兩個(gè)空間和諧的主要因素,并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性,而右邊的則是帶來更強(qiáng)的視覺吸引力。你覺得這個(gè)設(shè)計(jì)如何呢?

4. 相似性原理

相似性與接近性原理密切相關(guān)的原因,是相似分組對(duì)象之間共享屬性的質(zhì)量。無(wú)論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性,當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對(duì)象中共享時(shí),相似性將占上風(fēng)。

即使正空間的元素看起來沒有明顯的聯(lián)系,由于相似性原理,它們也會(huì)與負(fù)空間元素區(qū)分開。

看看這些 UrbanDecay 的商品列表:

雖然上面的商品各不相同,但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告,在同類產(chǎn)品中獨(dú)樹一幟。這顯然是一種營(yíng)銷策略,目的是在不損害頁(yè)面整體對(duì)稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是,尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開來。

除了產(chǎn)品展示之外,正空間可以與相似度結(jié)合使用,也可以與負(fù)空間結(jié)合使用。

讓我們來看看 influenster 的著陸頁(yè):

上面例子中對(duì)齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的,但是相似的感覺是通過整個(gè)頁(yè)面中一致的文本字段來傳達(dá)的。風(fēng)格、布局和主題都是相似的,因此帶來了統(tǒng)一的視覺效果。

5. 封閉性原理

你是否曾經(jīng)遇到過這樣一幅畫面,看上去是閉合的,但實(shí)際上是開放的?這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白,并利用我們的視覺感知來使圖形完整化。

正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式,這要求對(duì)正空間中要傳達(dá)的信息進(jìn)行評(píng)估。在封閉空間創(chuàng)造性地使用著正負(fù)空間,可以產(chǎn)生有趣但簡(jiǎn)單的設(shè)計(jì)。

下面是 Magu Kambucha 的設(shè)計(jì)圖:

在這個(gè)案例中,可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對(duì)比,背景則是和兩者都構(gòu)成對(duì)比的柔粉色。封閉性體現(xiàn)在哪里?看到瓶子后面的文字了嗎?雖然你不能完全看到它,但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」,其他字母都是半隱藏的,這些字母都是憑觀者的直覺自動(dòng)完成的,整個(gè)形式開始成形,意義也隨之成形。

下面是 Cult 的截圖:

即使文本沒有寫得很清楚,我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整,文本的排列和對(duì)齊也可以使其易于辨認(rèn)。

6. 連續(xù)性原理

最后,根據(jù)一般格式塔原則,連續(xù)性遵循模式,即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑,建立從一個(gè)對(duì)象到另一個(gè)對(duì)象的線性模式。

在上面的圖片中,盡管圓形色塊的顏色變淡了,但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺感知。當(dāng)我們借助負(fù)空間在視覺元素中畫出路徑,我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。

腦補(bǔ)出來的這條連續(xù)的線條是我們?cè)谠O(shè)計(jì)中更應(yīng)該引入的視覺線索。

讓我們來看看 Crypton Trading 網(wǎng)站中的視覺線索設(shè)計(jì):

看到頁(yè)面右半部分設(shè)計(jì)的完美延續(xù)了嗎?不管背景的明暗色調(diào)如何變化,圖案在頁(yè)面上的變化都非常顯著。當(dāng)你向下滾動(dòng)時(shí),你會(huì)看到圖案和顏色是如何以連續(xù)和無(wú)縫的運(yùn)動(dòng)變化的。在這里,色調(diào)的變化是可以忽略的,我們所看到的是一個(gè)連續(xù)的線和點(diǎn)的模式。

另一個(gè)很好的例子是 OscilloScope 網(wǎng)站:

該網(wǎng)站借用連續(xù)性法則,將網(wǎng)站用戶引入到工作室的 360 度視角中,他們可以在導(dǎo)航中選擇所需的子欄目。

影片《Cargo》的著陸頁(yè)也使用了連續(xù)性法則:滾動(dòng)式的導(dǎo)航,以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的,所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁(yè)面向下滾動(dòng)時(shí),靜態(tài) LOGO 開始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn),而不會(huì)干擾隱藏在下面的內(nèi)容。

由于我們的眼睛通常遵循最平滑的路徑,設(shè)計(jì)師可以使用這樣的方式來創(chuàng)建引導(dǎo)路徑。

總結(jié)

在這篇文章中,我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過一些真實(shí)的案例,讓大家清楚地知道如何運(yùn)用簡(jiǎn)單有效的方法來改變?cè)O(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來設(shè)計(jì)的時(shí)候,可以達(dá)到 1 + 1 > 2 的效果。

人類是根據(jù)感知來思考的——主要是基于視覺。根據(jù)格式塔原理,我們傾向于看到更大的整體性圖景,而不是第一眼看到的某一單個(gè)元素。

正負(fù)空間幫助我們區(qū)分、回憶、感知并識(shí)別理解。在格式塔原理的引導(dǎo)下,我們能夠更好地在網(wǎng)頁(yè)設(shè)計(jì)中利用不同元素來創(chuàng)造吸引人的作品。因?yàn)榭臻g對(duì)于任何設(shè)計(jì)師來說都是一件復(fù)雜的事情,所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識(shí)到空間在設(shè)計(jì)中的重要性、有效性,繼而使自己成為網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的佼佼者。

藍(lán)藍(lán)設(shè)計(jì)www.73404.com.cn )是一家專注而深入的界面設(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ì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 美女视频黄频a免费 | 国产露脸老熟高潮在线 | 干片网在线 | 日本寂寞少妇 | 免费一级a毛片在线播放 | 久久99国产综合精品 | 少妇高跟鞋做爰20p 少妇和黑人老外做爰av | 色无极亚洲影院 | 与子敌伦刺激对白播放 | 国产免费观看久久黄av片 | 69久久久成人看片免费一区二 | 久久久久久久蜜桃 | 久久久久高清 | 亚洲九九夜夜 | 天堂网男人 | 亚洲国产天堂一区二区三区 | 免费在线色视频 | 人人综合亚洲无线码另类 | 性欧美视频 | 日本免费一区二区三区最新vr | 一级做人爱c黑人影片 | 97视频在线免费播放 | 五月婷在线观看 | 女人18毛片一区二区三区 | 草草视频在线播放 | .精品久久久麻豆国产精品 国产精品久久毛片 | 用舌头去添高潮无码视频 | 久久精品国产免费看久久精品 | 久久国产成人精品国产成人亚洲 | 成人性生活免费视频 | 国产视频在线观看一区二区 | 天天插在线视频 | 各种少妇正面着bbw撒尿视频 | 天堂av最新网址 | www国产成人免费观看视频深夜成人网 | 成人区人妻精品一区二区三区 | 强行交换配乱婬bd | 黄色a级大片| 无码国产一区二区三区四区 | 成人精品免费网站 | 蜜桃传媒av免费观看麻豆 | 国产一级特黄视频 | 在线观看一区二区视频 | 久久精品视频一区二区三区 | 在线āv视频 | 精品粉嫩超白一线天av | 久久精品色欧美aⅴ一区二区 | 成人孕妇专区做爰高潮 | 麻豆精品国产传媒 | 免费无码肉片在线观看 | 亚洲精品乱码久久久久久不卡 | 日韩综合av | 成人孕妇专区做爰高潮 | 久久黄页 | 久久久做| 国产色无码精品视频免费 | 日本一级淫片 | 国产98在线 | 免费、 | 日韩色图片 | 亚洲小说另类 | 91亚洲精品一区二区乱码 | 午夜免费网站 | 国产96在线 | 欧美 | 欧美日韩国产成人一区 | 亚洲va欧美va天堂v国产桃 | 99久久国产露脸国语对白 | 人与善性猛交xxxxx | 鲁鲁狠狠狠7777一区二区 | 日韩视频免费观看 | 国产精品99久久久久久久女警 | 一区二区三区日韩视频 | 国产精品久久久久久无人区 | 午夜激情网址 | 国内大量偷窥精品视频 | 日韩精品在线免费看 | 脱了美女内裤猛烈进入gif | 国产成人精品白浆久久69 | 日日噜夜夜噜 | 在线成人www免费观看视频 | 波多野结衣乳巨码无在线观看 | 性色欲网站人妻丰满中文久久不卡 | 亚洲卡一卡二 | 久久接色 | 全黄h全肉边做边吃奶视频 熟妇人妻av无码一区二区三区 | 国产精品无码av天天爽 | 激情成人av | 色八区| 免费的毛片 | 大陆明星乱淫(高h)小说 | 欧美日韩高清在线观看 | 亚洲一区二区三区四区在线 | 亚洲黄色免费网站 | 131mm极品尤物美女无胸罩 | 欧美第一浮力影院 | 欧美操穴| 日韩视频一二三 | 国产精品毛片一区二区在线看 | 18中国xxxxxⅹxxx96 | 青青青免费视频在线 | 毛片毛片毛片毛片毛片毛片毛片毛片毛片毛片 | 91丨九色丨丰满 | 国产中文字幕一区二区 | 五月婷婷综合激情网 | 天堂网2021天堂手机版 | 三级网站国产 | a级片免费网站 | 亚洲国产av无码精品无广告 | 欧美国产日韩a在线视频 | 国产亚洲精品久久久久久移动网络 | 日韩欧美中文字幕在线三区 | 久久久精品久久久久 | 日韩小视频网站 | 五月婷婷俺也去 | 欧美日韩国产免费 | 菠萝蜜视频在线观看入口 | 亚洲黄色一区二区 | 亚洲成人精品久久久 | 日韩成人毛片在线 | 久久黄色网 | 午夜成人影片 | 欧美在线一区二区 | 国产精品免费在线播放 | 亚洲人成网站18禁止 | 成人欧美一区二区三区在线 | 北条麻妃在线一区二区免费播放 | 久久久橹橹橹久久久久高清 | 国产黄色免费大片 | 亚欧av在线| 丰满大肥婆肥奶大屁股 | 成人激情四射网 | 国产精品午夜视频 | 亚洲阿v天堂| 国产天堂av在线 | 久久超 | chinese精品自拍hd | 中文字幕第22页 | 中文字幕一区二区三区久久蜜桃 | 玩丰满熟妇xxxx视频 | av综合久久| 欧美久久视频 | 国产伦精品一区三区视频 | www天天操 | 日本成人激情视频 | 男人添女人高潮免费网站打开网站 | 四虎av永久在线精品免费观看 | 二区三区av| 国产中文字幕91 | 九九午夜| 中文字幕高清免费日韩视频在线 | 亚洲一二三四五 | 成人学院中文字幕 | 国内综合精品午夜久久资源 | xxx国产老太婆视频 xxx精品 | 亚洲大尺度无码专区尤物 | 欧美在线成人免费 | 成年人黄色一级片 | 98精品国产高清在线xxxx天堂 | 婷婷国产天堂久久综合五月 | 日韩在线国产 | 男女啪啪免费视频网站 | 午夜爱爱免费视频体验区 | 999久久久无码国产精品 | 成人无码av一区二区 | 激情小说中文字幕 | 少妇粉嫩无套内谢 | 国产农村乱子伦精品视频 | 国产亚洲精品美女久久久 | 国产精品毛片一区二区在线看 | 香蕉视频在线免费看 | 爽爽淫人 | 午夜在线视频 | 中文字幕无码日韩专区免费 | 午夜影院免费观看 | 蜜桃视频色 | xvideos亚洲网站入口 | 欧美一级网站 | 无码人妻aⅴ一区二区三区69岛 | 中文无码人妻有码人妻中文字幕 | 欧美日产国产精品 | 不卡视频一区二区三区 | 一级大黄毛片 | 在线观看中文字幕码 | 欧美视频二区欧美影视 | 国产精品视频yjizz免费 | 欧美亚洲大片 | 亚洲精品国偷拍自产在线麻豆 | 亚洲男人av香蕉爽爽爽爽 | 欧美美女性生活 | 亚洲人色婷婷成人网站在线观看 | 成人疯狂猛交xxx | 国产欧美日韩一区二区加勒比 | 亚洲视频456 | 亚洲三级免费 | 成人中文视频 | 欧美一级片毛片 | 米奇狠狠干 | 希岛婚前侵犯中文字幕在线 | 思思久久99热久久精品66 | 国产盗摄精品一区二区酒店 | 天天揉久久久久亚洲精品 | 超碰国产人人 | 天天躁日日躁xxxxaaaa | 91超薄肉色丝袜交足高跟凉鞋 | 国产视频一区二区在线播放 | 欧美日韩在线视频一区 | 国产中老年妇女精品 | 久久欧美亚洲另类专区91大神 | 黄色一级免费视频 | 国产伦精品一区二区三区免费迷 | julia乱码中文一二三区 | 欧美午夜精品久久久久 | 91一区二区 | 黄色片免费在线观看 | 屁屁国产第一页草草影院 | 高清av网| 国产精品看高国产精品不卡 | 91网站免费视频 | 五月天小说网 | 精品一区二区三区四区五区 | xvideos永久免费入口 | 国产超碰人人模人人爽人人添 | 国产美女精品一区二区三区 | 国产天堂第一区 | 国产情侣激情自拍 | 国产精品午夜无码体验区 | 免费女人18a级毛片视频 | 中文字幕1| 欧美日韩在线一区二区 | 三级毛片儿| 91亚洲国产成人精品一区二区三 | 欧美综合色 | 久久久久99精品成人片牛牛影视 | 国产精品毛片久久久久久久明星 | 免费国产黄网站在线观看视频 | 国产成人午夜高潮毛片 | 欧美乱妇视频 | 国产不卡在线观看视频 | 亚洲狠狠爱一区二区三区 | 国产无套粉嫩白浆在线 | 日韩精品理论 | 一级片成人 | 国产成人久久精品77777综合 | 日本免费一二区 | 国产精品igao为爱做激情 | 久久99久久99 | 国产精品自产拍高潮在线观看 | 中文字幕超清在线观看 | 久久久久青草大香综合精品 | av不卡一区二区三区 | 少妇高潮毛片高清免费播放 | 国内免费毛片 | av在线收看 | 国内精品福利视频 | 久久这里只有 | 中文无套内谢少妇视频 | 97国产精品理伦影院 | 99蜜桃在线观看免费视频网站 | 日本精品在线播放 | 精品国产福利一区二区 | 国产精品国产三级国产av剧情 | 高潮久久久久久 | 精品久久久久久亚洲综合网 | 欧美成人一区二区三区 | 亚洲春色www | 日韩一区国产二区欧美三区 | 国产成人三级在线播放 | 综合色区亚洲熟妇另类 | 亚洲欧美日韩另类精品一区二区三区 | 亚洲精品精品 | 国产精品久久久久久久久借妻 | 国产手机在线精品 | 久久久久久av无码免费网站 | 日韩av区 | 国产另类视频 | 欧美性xxxx狂欢老少配 | www日本黄色片| av在线免费网址 | 国产极品在线播放 | 五月天激情四射 | 国产精品美女久久久 | 精品午夜久久久 | 蜜桃精品噜噜噜成人av | 人人妻人人澡人人爽欧美精品 | 亚洲一级大片 | 污污网站在线 | 成人做爰高潮片免费视频 | 饥渴丰满的少妇喷潮 | 少妇淫交裸体视频 | 中文字幕高清免费日韩视频在线 | 国产日韩一级 | 日本黄色免费网站 | 最近中文字幕免费视频 | 在线亚洲精品 | 操一操av| 脱了美女内裤猛烈进入gif | 国产农村妇女高潮大叫 | 另类激情文学 | 岬奈奈美女教师中文字幕 | 人妻精品久久久久中文字幕69 | jizz另类| 97国产精东麻豆人妻电影 | 毛片网站在线观看视频 | 波多野结衣一区二区三区高清 | 国产精品久久久不卡 | 99精品视频免费观看 | 337p嫩模大胆色肉噜噜噜 | 日韩成人av在线播放 | 国产精品久久久久久人妻精品动漫 | 国产人碰人摸人爱视频 | 国产精品精品 | 波多野结衣一本一道 | 欧美激情综合色综合啪啪五月 | 男女做激情爱呻吟口述全过程 | 久久久久免费精品国产 | 国产一级精品绿帽视频 | blacked欧美极品一区 | 网站在线观看你懂的 | 中文字幕av一区二区三区谷原希美 | 人妻在客厅被c的呻吟 | 国产精品亚洲一区二区三区 | 日韩av免费一区二区 | 狠狠躁日日躁夜夜躁 | 黄色片网站在线观看 | 性高潮免费视频 | 亚洲小说专区 | 久久精品日韩 | 欧美做受xxxxxⅹ性视频 | 999久久久 | 日韩欧美精品在线视频 | 男女性杂交内射女bbwxz | 久久精品人妻中文系列 | 少妇被粗大的猛烈进出 | 国产主播中文字幕 | 奇米影视亚洲狠狠色 | 亚洲欧美日韩国产成人一区 | 亚洲美女久久 | 黑人与饥渴少妇在线 | 亚洲欧美自拍偷拍 | 韩国久久久久久 | 久操综合| 激情五月婷婷 | 久久久久无码精品国产h动漫 | 色淫网站免费视频 | 欧美一a | 看全色黄大色黄大片男爽一次 | 中国黄色a级片 | 欧美亚洲国产视频 | 中文字幕一区二区三区乱码图片 | 欧美三级三级三级爽爽爽 | 欧美激情视频一区 | 成人高潮片免费软件69视频 | 超碰97在线播放 | 特黄视频免费看 | 伊人三区| 在线精品亚洲观看不卡欧 | 亚洲欧美日韩综合一区二区 | 俺去俺来也www色官网 | 中字乱码视频 | 成人在线视频网 | 久久精品无码一区二区三区免费 | 成人区人妻精品一熟女 | 亚洲手机看片 | 狠狠色综合网站久久久久久久 | 亚洲色综合 | 噜噜高清欧美内射短视频 | 欧美在线一级片 | 亚洲制服av | 亚洲91精品| 日本特级黄色录像 | 最新毛片基地 | 伊人久久一区 | 亚洲另类交 | 国内大量揄拍人妻精品視頻 | 日韩一级视频在线 | 91国偷自产一区二区三区女王 | 国产精品高潮呻吟久久av郑州 | 国产精品人妻熟女毛片av | 欧美国产影院 | 黄色片在线免费看 | 久久婷婷五月国产色综合 | 亚洲精品福利网站 | 亚洲香蕉 | 伊人网在线视频观看 | 国产亚洲成av人片在线观黄桃 | 日韩视频 中文字幕 视频一区 | 久久久久香蕉国产线看观看伊 | 久久精品国产色蜜蜜麻豆 | 久久狼人亚洲精品一区 | 成年人在线观看视频网站 | 久久a级片| 成人国产精品免费观看 | 户外少妇对白啪啪野战 | 国产精品久久久久白丝呻吟 | 国产二级一片内射视频播放 | 国产二区视频在线观看 | 中文字幕乱码免费 | 久久午夜羞羞影院免费观看 | 97久久精品一区二区三区观看 | 国产日韩欧美一区二区久久精品 | 日本在线观看一区 | 精品无码一区在线观看 | 亚洲一区二区三区高清 | 99精品一区二区 | 粗大的内捧猛烈进出 | 国产99色 | 少妇性i交大片免费看 | 亚洲男女一区二区三区 | 97人人超碰国产精品最新o | 国产成人精品a视频一区www | 99综合视频 | 697久久夜色精品国产 | 日本牲交大片免费观看 | 果冻传媒18禁免费视频 | 亚洲国产欧美国产综合一区 | 麻豆aⅴ精品无码一区二区 午夜福制92视频 | 国产剧情精彩演绎 | 人人爽久久涩噜噜噜av | 美国av毛片 | 国产免费一区二区三区 | 午夜宅男影院 | 免费精品视频在线观看 | 麻豆影音| 精品一区二区三区免费视频 | 亚洲一区二区影院 | 国产成人精品一区二区三区无码 | 国产情侣一区二区三区 | 老司机午夜精品视频 | 国产高清第一页 | 国产无遮挡又黄又大又爽 | 久久精品一区二区国产 | 波多野结衣的av一区二区三区 | 欧美一级性 | 色偷偷av男人的天堂 | 丨国产丨调教丨91丨 | 日本黄色美女网站 | 午夜免费播放观看在线视频 | 毛片无遮挡高清免费观看 | 在线观看入口 | 老局长的粗大高h | 女被男啪到哭的视频网站 | 国产a∨精品一区二区三区不卡 | 午夜大片男女免费观看爽爽爽尤物 | 天海翼中文字幕 | 美女黄色毛片视频 | av在线播放一区二区三区 | 极品销魂美女一区二区 | 嫩草影院ncyy入口 | 色婷婷综合久色aⅴ五区最新 | 日韩欧美国产一区二区三区 | 香蕉成人臿臿在线观看 | 欧美人与动物xxxx | 日韩av在线第一页 | 国内品精一二三区品精 | 日韩网红少妇无码视频香港 | 日产高清b站成品片a | 久久久久人妻精品一区三寸 | 97超级碰碰人妻中文字幕 | 亚洲另类伦春色综合妖色成人网 | 无码av中文字幕久久专区 | 午夜精品久久久久久久久久久 | 变态孕妇孕交av免费看 | 97免费在线观看视频 | 亚洲伊人久久综合影院 | 日韩有码在线播放 | 99国产精品久久久久久久成人 | 午夜爱| 一区二区日韩欧美 | 免费看毛片在线观看 | 欧洲少妇ooo| 国产黄网永久免费视频大全 | 娇小xxxx性开放国产精 | av激情影院| 久久精品aⅴ无码中文字字幕蜜桃 | 久久久久人妻精品一区二区三区 | 天天综合天天做天天综合 | 国产精品第一国产精品 | 黄色三极片 | 欧美一级二级三级视频 | 国产福利免费视频 | 台湾佬美性中文网 | 日韩高清中文字幕 | 欧美日韩精品区别 | 欧美极品在线播放 | 国产精品久久久久四虎 | 日日噜噜夜夜狠狠视频 | 欧洲亚洲色一区二区色99 | 一级黄色网址 | 亚欧美精品 | 狠狠躁夜夜躁人蜜臀av小说 | 美女100%挤奶水视频吃胸 | 中文字幕一区二区三区av | 黄色免费视频网站 | 亚洲国产精品成人va在线观看 | 在线观看免费黄网站 | 久久久综合九色合综 | 亚洲九九夜夜 | 亚洲一区二区三区影院 | 久久久久久国产精品亚洲78 | 色网站入口 | 久久99久久99精品 | 6080一级片| 国色天香精品一卡2卡3卡 | 少妇自摸视频 | 一区二区三区精品免费视频 | 奇米影视一区二区 | 免费午夜拔丝袜www在线看 | 久久人人妻人人爽人人爽 | 麻豆av少妇aa喷水 | 欧美最猛黑人xxxx黑人猛交98 | 免费一级做a爰片蜜桃 | 99精品免费观看 | 欧美色就是色 | 午夜成人鲁丝片午夜精品 | 我们2018在线观看免费版高清 | 三级视频在线播放 | 嫩草一区二区三区 | 日韩在线观看你懂的 | 国精产品999国精产 亚洲 欧美 综合 在线 精品 | 亚洲国产精品无码久久青草 | 人妻中出受孕 中文字幕在线 | 久久精品国产清自在天天线 | 国产成人小视频 | 日本欧美色 | 国产黄色在线播放 | 91成人精品一区在线播放69 | 午夜网站在线观看 | 黄网av| 国产午夜精品无码一区二区 | 黄色三级免费 | 自拍日韩亚洲一区在线 | 国产日韩一区二区在线 | av天堂午夜精品一区二区三区 | 一本色道久久综合无码人妻 | 曰韩毛片 | 五月丁香花 | 无码人妻一区二区三区精品视频 | 极品美女囗交 | 亚洲国产一区二区三区在线观看 | 久久99亚洲精品久久99果 | 天天色综合天天色 | 日韩成人黄色片 | 欧美一级久久 | 青青草综合| 国产99久久| 成人黄色免费看 | 成人性生交大片免费看 | 精品一区二区三区四区视频 | 久草在线影| 国产精品不卡无码av在线播放 | 中年熟妇的大黑p | 久久久av片 | 精品视频无码一区二区三区 | 国产91精品久久久 | 免费亚洲视频 | 亚洲一个色 | 国产av天堂无码一区二区三区 | 亚洲免费天堂 | 国产精品一品二品 | 亚洲最新无码中文字幕久久 | 日韩欧美中文字幕一区 | 国产精品日本一区二区不卡视频 | 97日韩精品 | 女人裸体夜夜爽快 | 国产精品无需播放器在线观看 | 欧美日韩免费一区 | 性欧美又大又长又硬 | 老女人一区 | 久久久久欠精品国产毛片国产毛生 | 在线国产中文字幕 | a级毛片蜜桃成熟时2免费观看 | 国产精品女丝袜白丝袜 | 樱桃视频影视在线观看免费 | 一边吃奶一边摸下边激情说说 | 久久久久久国产精品视频 | 成人vr视频在线观看 | 亚洲精品在线视频观看 | 国产真实乱对白精彩久久 | 狼人综合视频 | 亚洲欧美另类一区 | 同性色老头性xxxx老头 | 夜夜看| 伊人免费在线 | 成人精品999 | 黄色片一级毛片 | 日韩美女视频一区 | 天堂网www网在线最新版 | 一级做a爰片久久毛片一 | 天天摸夜夜操 | 日韩综合在线视频 | 特级毛片a| 亚洲影院中文字幕 | 久久久综合香蕉尹人综合网 | 成人欧美一区二区三区黑人一 | 精品夜夜嗨av一区二区三区 | 日韩专区av | 久草免费福利视频 | 天天躁日日躁狠狠躁800凹凸 | 全国探花 | 国产欧美又粗又猛又爽 | 黄色在线观看av | 懂色中文一区二区三区在线视频 | 久久久久久亚洲国产精品 | 国产精品久久久久影院 | 超碰97人人做人人爱少妇 | 亚洲一级中文字幕 | zzijzzijzzij亚洲人 | h色视频在线观看 | 交专区videossex农村 | 日本无翼乌全彩j奶无遮挡漫 | 亚洲精品视频在线播放 | 国产福利在线播放 | 午夜一区二区三区四区 | 精品欧美色视频网站在线观看 | 国产成人久久精品麻豆二区 | 国产一级黄色毛片 |