您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 交互設(shè)計 >> 瀏覽設(shè)計教程

交互設(shè)計法則之接近法則與格式塔

 

早在20世紀(jì)早期,一個由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并編訂了目錄。格式塔理論明確地提出:眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程,正是通過這一過程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu),并且在神經(jīng)系統(tǒng)層面上感知形狀,圖形和物體,而不是只看到互不相連的邊,線和區(qū)域。“形狀”和“圖形”在德語中是“Gestalt”,因此這些理論也被稱為視覺感知的格式塔(Gestalt)原理。

接近法則是格式塔理論中最為我們所熟知的,也是我們最常用到的一項(xiàng)法則。說的是物體之間的相對距離會影響我們感知它們是否以及如何在一起。相對于其它物體來說,彼此之間靠近的物體看起來屬于一組。越接近,組合在一起的可能性就越大,強(qiáng)調(diào)的是位置。如下圖(圖1),我們在意識中會將其分為兩組。

圖1

 接近原則被廣泛應(yīng)用于頁面內(nèi)容的組織,以及分組設(shè)計中。對于引導(dǎo)用戶的視覺流及方便用戶對界面的解讀起到非常重要的作用,通過接近原則對同類內(nèi)容進(jìn)行分組,同時留下間距,會給用戶的視覺以秩序和合理的休憩。 設(shè)計者們經(jīng)常使用分組框或分割線將屏幕上的控件和數(shù)據(jù)顯示分隔開,如圖2、圖3。

圖2

圖3

除了接近法則之外,還有很多重要的原則你知道嗎?接下來我將逐一向大家介紹。

相似原則:

相似,聽起來跟接近非常類似,但是他們確實(shí)是不同的兩個概念。接近強(qiáng)調(diào)位置,而相似則強(qiáng)調(diào)內(nèi)容。人們通常把那些明顯具有共同特性(如形狀、大小、顏色等)的事物組合在一起,即相似的部分在知覺中會形成若干組。在圖4中,我們會將黑帽子蛋和紅帽子蛋自然的分成兩組。

圖4

在頁面設(shè)計中分類使用文本、顏色、圖像等,可以更好的區(qū)分各個模塊和內(nèi)容。如下圖(圖5)中雅虎讀書導(dǎo)航,通過相似原則我們很容易的將一級導(dǎo)航和二級導(dǎo)航區(qū)分開來。

圖5

換一個角度來思考,顏色的變化很清楚的區(qū)分了不同的內(nèi)容,相似中的逆向思維是獲取焦點(diǎn)的好方法。這種方法在導(dǎo)航強(qiáng)調(diào)部分信息的設(shè)計上有著廣泛地應(yīng)用,如圖6。

圖6

封閉原則:

當(dāng)元素不完整或者不存在的時候,依然可以被人們所識別。根據(jù)過去以往的經(jīng)驗(yàn)和視知覺的整體意愿驅(qū)使,我們習(xí)慣性的將圖形作為一個整體去觀看,于是我們在腦袋里將缺少的形狀補(bǔ)充進(jìn)去之后,便形成最終我們識別出來的圖形效果。如下圖(圖7),沒有三角形和圓,但是在我們心理模型中填充缺失的信息,創(chuàng)建我們熟知的形狀和圖形。

圖7

封閉原則常被應(yīng)用于圖形界面和頁面設(shè)計中,例如:在頁面中經(jīng)常會用堆疊的形式表示對象的集合,只要顯示一個完整的對象和其“背后”對象的一角就足以讓用戶感知到這是由一疊對象構(gòu)成的整體,如圖8所示。

圖8

連續(xù)原則:

與封閉性相關(guān)的是連續(xù)原則,連續(xù)原則說的是我們的視覺傾向于感知連續(xù)的形式而不是零散的碎片。在圖形設(shè)計中,使用了連續(xù)原則的一個最廣為人知的例子就是IBM的標(biāo)志。它由非連續(xù)性的藍(lán)色塊組成,但一點(diǎn)也不含糊,我們很容易就能識別出三個粗體字母,就像透過百葉窗看到的效果一樣,見圖9。

圖9

關(guān)于格式塔的原則還有很多,而且可以復(fù)合使用。在我們設(shè)計了一個東西之后,可以試著使用格式塔原理來考量一下自己各個設(shè)計元素之間的關(guān)系是否復(fù)合設(shè)計的初衷。希望通過對格式塔原始理論的介紹可以給大家?guī)硪恍﹩l(fā):>

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id1799.html
交互設(shè)計原理之奧卡姆剃刀原理
交互設(shè)計原理之7±2法則
圖趣網(wǎng)微信
建議反饋
×