編者按:前幾天有一篇給大學(xué)生的成都網(wǎng)站制作教程很火,看過(guò)的同學(xué)還記得作者重點(diǎn)圈出來(lái)的網(wǎng)站制作四大原則嗎?為了幫同學(xué)們有效掌握,并且靈活運(yùn)用它們,今天我們深入聊一下四大原則中的對(duì)比,全文近5000字,案例生動(dòng),趕緊趁著這回把對(duì)比原則學(xué)個(gè)透吧!
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的沾益網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
等同和對(duì)比,聯(lián)系與分別,歸類(lèi)和不歸類(lèi)等都是能將元素中相同或不同的元素加以區(qū)別的方式?;谒鼈兯休d的信息,我們希望等同的元素能發(fā)生某種聯(lián)系,用以表明它們?cè)谀骋环矫娴南嗨菩?。我們同樣也希望不同的元素加以區(qū)分,以顯示它們分屬不同的類(lèi)別。
等同和對(duì)比是通過(guò)元素之間所呈現(xiàn)的關(guān)系表現(xiàn)出來(lái)的,如果兩個(gè)元素有著某種聯(lián)系,可以確定這兩個(gè)元素必定有相同的特性。當(dāng)然,兩個(gè)不同元素也必定看上去不同。
基礎(chǔ)特性你是如何表達(dá)元素間的等同和對(duì)比性的?是的,從它們的基礎(chǔ)特性中表現(xiàn)出來(lái)。
那么,什么是元素的基礎(chǔ)特性呢?基礎(chǔ)特性就是指的元素本身所固有的特點(diǎn)。舉例來(lái)說(shuō),這個(gè)元素是什么顏色?它有多大?它是什么形狀?
這些特性都試圖傳遞著關(guān)于元素的較本質(zhì)的信息。如果一個(gè)標(biāo)題看上去比另一個(gè)標(biāo)題更大,那么我們就會(huì)預(yù)估先進(jìn)個(gè)標(biāo)題更加重要。我們也會(huì)把那些尖銳的凹凸不平的東西視為危險(xiǎn)信號(hào)。
通常,元素的一類(lèi)特質(zhì)通過(guò)與另一元素的同類(lèi)特質(zhì)相比較才具有意義,上面關(guān)于標(biāo)題就是這樣一個(gè)例子。一個(gè)標(biāo)題必須與另一個(gè)標(biāo)題或另外一片文字相比較才能凸顯它的重要性。在這里,大小成為一個(gè)很重要的對(duì)比特質(zhì)。通過(guò)比較,元素才得以表達(dá)出它們之間的等同和對(duì)比。
另外一種情況是,我們讓幾個(gè)元素在視覺(jué)上出現(xiàn)相同的特質(zhì),讓這些元素成為一組同類(lèi)元素。如果一個(gè)網(wǎng)頁(yè)上出現(xiàn)兩個(gè)元素:兩個(gè)紅色圓圈,用戶自然就會(huì)對(duì)此產(chǎn)生好奇,為什么它們都是紅色?為什么都是圓圈?這會(huì)引發(fā)出的結(jié)論是也許它們不止是外觀上的等同,還有其他更深的聯(lián)系。元素外觀的等同也會(huì)讓人聯(lián)想到它們會(huì)攜帶相似的信息。
同樣的,如果我們讓兩個(gè)元素外觀上不同,那么它們表達(dá)出的就是兩個(gè)有效不同的元素,它們的意義也有所不同。
任何可以被改變的元素特性,都可以讓成都網(wǎng)站制作元素變得等同或不同。下面所列出的成都網(wǎng)站制作元素特性便是如此:
尺寸 形狀 顏色 賦值 紋理 位置 方向一個(gè)長(zhǎng)方形和一個(gè)圓形的形狀對(duì)比很明顯,而兩個(gè)紅色元素在顏色上具有一致性。一個(gè)紅色長(zhǎng)方形和一個(gè)紅色圓形就會(huì)出現(xiàn)形狀各異而顏色相同的情況。你怎樣平衡元素中的等同和不同的元素特性,這將決定你的元素要與用戶溝通些什么。
注意:
基礎(chǔ)特性是區(qū)分類(lèi)似與不同的基本方法,但還有其他方式可以對(duì)它們加以區(qū)分:元素實(shí)際上所承載的信息內(nèi)容。例如“?!焙汀白摺边@兩個(gè)字的對(duì)比,“停止”和“停下”這兩個(gè)詞的相似。圖片對(duì)比文字,長(zhǎng)文章對(duì)應(yīng)短文章,等等。
對(duì)比當(dāng)人類(lèi)看到不同的元素會(huì)本能地產(chǎn)生緊張的反應(yīng),這是自然進(jìn)化的生存機(jī)制,以使我們能迅速辨認(rèn)出威脅,讓我們快速反應(yīng)出是否需要立刻飛奔回到安全的地方。
我們的這種分辨異類(lèi)的能力使“對(duì)比”這一方式變得特別強(qiáng)大。凡對(duì)比定會(huì)引起注意。它就是吸引眼球的方法。想要讓某個(gè)元素得到注意,那就讓它在視覺(jué)外觀區(qū)別于其他元素即可。如此一來(lái),我們便能制造出視覺(jué)焦點(diǎn)。事實(shí)上,正因?yàn)樽屧貜沫h(huán)境中脫穎而出的方法是如此簡(jiǎn)單,我們也不難猜測(cè),如果想要你的設(shè)計(jì)變得更有趣,這或許也是一個(gè)較有效方法。
對(duì)比的確可以增強(qiáng)吸引力。它也能在兩種元素間建立起分界。舉例來(lái)說(shuō),主要內(nèi)容和花絮內(nèi)容的不同背景色就能輕松將它們區(qū)分開(kāi)來(lái),讓用戶一看便知哪里是主要內(nèi)容,哪里是花絮。
對(duì)比也能起強(qiáng)調(diào)的作用,高亮顯示某一重點(diǎn)元素和內(nèi)容。越是明顯的不同,對(duì)比越明顯,其重要性就越強(qiáng)。
例如,有兩種不同的文字標(biāo)注方式:加粗和斜體。加粗通常會(huì)讓對(duì)比更為明顯。即使是遠(yuǎn)距離一瞥也能比斜體文字更易辨認(rèn)。
如果你想要區(qū)分兩個(gè)元素,那就將放大它們之間的對(duì)比。相信你不希望讓用戶自己來(lái)判斷它們是否不同吧?對(duì)比直觀且顯而易見(jiàn)。不要有模糊不清的地方,讓人產(chǎn)生困惑。不要用16px的文字去對(duì)比15px的文字。人們通常不會(huì)注意到細(xì)微的差別,就算是注意到,也會(huì)發(fā)生誤判。
但是,也請(qǐng)不要對(duì)比得太過(guò)火。慎用對(duì)比。如果所有元素都有區(qū)別,都在爭(zhēng)搶注意力,那么,其實(shí)就等于沒(méi)有對(duì)比一樣。過(guò)多的干擾產(chǎn)生視覺(jué)混亂。
太多的對(duì)比也會(huì)打破設(shè)計(jì)中的和諧,造成不必要的緊張和凌亂。也許在某些特別的設(shè)計(jì)中需要用到它,但是平時(shí)絕對(duì)少碰為妙。*先確認(rèn)哪些元素需要突出,然后讓它們與其他元素發(fā)生對(duì)比。
對(duì)比與格式塔格式塔完形規(guī)律在某方面也是依賴(lài)于等同和對(duì)比的。對(duì)于圖案背景和突出焦點(diǎn)來(lái)說(shuō),對(duì)比是特別重要的。
不清楚什么是格式塔的同學(xué),百度百科:http://baike.baidu.com,維基百科:格式塔心理學(xué)美學(xué)
圖案背景
當(dāng)我們看到一個(gè)對(duì)象,我們先進(jìn)件事就是去區(qū)分哪里是背景哪里是主角。這對(duì)關(guān)系決定了這一對(duì)象中其他元素的角色內(nèi)容。主角與背景必須要有顯而易見(jiàn)的對(duì)比,否則我們將很難區(qū)分它們。
焦點(diǎn)
焦點(diǎn)是指那些較具吸引和趣味的元素。設(shè)計(jì)它們時(shí)就需要讓它們從周?chē)h(huán)境中凸顯出來(lái)。這一對(duì)比也讓他們脫穎而出從而獲得注意。在一個(gè)對(duì)象中較突出的就是這個(gè)對(duì)象的*要元素,而在此對(duì)象中,那些次要突出的就是焦點(diǎn)。
等同我們?nèi)祟?lèi)的另一個(gè)生存機(jī)制,除了讓我們察覺(jué)不同,也讓我們注意到相同。這讓我們能辨認(rèn)出哪些是我們應(yīng)該相信的,從而區(qū)別于潛在的危險(xiǎn)。對(duì)等同有著較強(qiáng)的覺(jué)知力,這就是為什么人類(lèi)能很快認(rèn)出各種模式。模式幫助我們理解周?chē)氖澜?,提供信息并且快速掌握?guī)律,當(dāng)形成習(xí)慣就能變作我們的直覺(jué)和本能。
當(dāng)我們?cè)O(shè)計(jì)兩個(gè)或多個(gè)同類(lèi)元素時(shí),我們就在暗示,如果其中一個(gè)為真,另外那幾個(gè)等同的元素也為真。如果一個(gè)元素重要,其他幾個(gè)也同樣重要。如果其中一個(gè)元素可點(diǎn)擊,那么其他幾個(gè)視覺(jué)上類(lèi)似的元素也可點(diǎn)擊。這就是我們這樣在大段文字當(dāng)中識(shí)別出哪里是鏈接。視覺(jué)對(duì)比使得鏈接文字和其他文字不同吸引你的注意,同時(shí),其他有鏈接的文字的類(lèi)似也提醒了你,如果其中一個(gè)鏈接可點(diǎn)擊,其他的也一樣可以。
同等能顯示出幾個(gè)元素間存在某種聯(lián)系。它能給你的設(shè)計(jì)帶來(lái)熟悉和一致感。
同等讓我們組織信息能力日臻好。當(dāng)我們環(huán)顧視覺(jué)環(huán)境,并要對(duì)其加以理解,我們自然而然會(huì)將所有事物進(jìn)行分類(lèi),以此掌握更多的信息,用記憶的形式存儲(chǔ)起來(lái)。讓它變成我們的長(zhǎng)期記憶,以備以后分析問(wèn)題解決問(wèn)題而使用。
將相同信息的地方設(shè)計(jì)得外觀上也相似,這將會(huì)幫助用戶處理和理解信息,而這也正是我們?cè)O(shè)計(jì)的目標(biāo)。
元素中的基礎(chǔ)特性共同點(diǎn)越多,它們看上去就越等同,從而也就有更多用戶認(rèn)為它們是相同的。它們看上去在某方面成為同類(lèi),即使它們只有其中先進(jìn)一個(gè)特性相同。
我們用等同去構(gòu)建系統(tǒng)性和模式。任何兩個(gè)元素的等同都會(huì)暗示著它們也許是一個(gè)系統(tǒng)。如果再在這個(gè)系統(tǒng)里增加一些同類(lèi)元素,那么就會(huì)演變成為一種模式,在視覺(jué)上它會(huì)形成圖案、紋理或者具有節(jié)奏感的視覺(jué)效果。
不是所有看上去相似的信號(hào)都是等同的。如下圖所示,你是通過(guò)形狀或是顏色來(lái)分類(lèi)圖形?你看見(jiàn)的是一組圓形和一組方形圖形?或者,你看見(jiàn)的是紅色圖形和藍(lán)色圖形?
你也許*先注意到顏色,將元素劃分為紅色和藍(lán)色。這就說(shuō)明,顏色所傳遞的等同的信號(hào)比形狀更強(qiáng)。這也不是有效絕對(duì)的,舉個(gè)例子,一些紅綠色盲的人就不會(huì)注意到顏色的區(qū)別,他們*先注意到的是圖形的形狀。
等同和格式塔我們又快速提到格式塔定律,每個(gè)格式塔都是關(guān)于我們?nèi)绾尾煊X(jué)到物體間的等同和對(duì)比。下面是一些被認(rèn)為顯示出等同的要點(diǎn)。
封閉
在一個(gè)整體中不同的元素都是這個(gè)整體的一部分
對(duì)稱(chēng)和順序
對(duì)稱(chēng)的元素兩相互屬
統(tǒng)一性的聯(lián)結(jié)
視覺(jué)上有聯(lián)系的元素間的等同
共同區(qū)域
在一個(gè)相同的區(qū)域里元素的等同
鄰近
在一個(gè)相同的區(qū)域里相續(xù)元素的等同
連續(xù)
在空間中以某種節(jié)奏或頻率出現(xiàn)的元素等同
共同命運(yùn)
在運(yùn)動(dòng)中的一致
平行
在方向上的一致
等同和對(duì)比之間的關(guān)系等同和對(duì)比用以表達(dá)元素間的關(guān)系。一個(gè)獨(dú)立的元素沒(méi)有意義。一個(gè)元素總是與處于同一環(huán)境下的其他元素發(fā)生著聯(lián)系。
一個(gè)大圓的一角有一個(gè)小圓,這樣的設(shè)計(jì)暗示著什么?一段銀灰色文字比其他文字縮進(jìn)更多這又試圖說(shuō)明什么?
可以這樣說(shuō),等同和對(duì)比就好像是一個(gè)天平,一端是有效不同,一端是有效相同。大多數(shù)情況都是介于兩者之間的,我們?cè)O(shè)計(jì)出的發(fā)生關(guān)系的元素特性也是部分而已,并非全部。等同和對(duì)比就是表達(dá)發(fā)生在這個(gè)天平兩極之間的關(guān)系。
即便我沒(méi)有說(shuō)得很清楚,你都可以知道等同和對(duì)比是彼此互補(bǔ)的。它們彼此相依而存在,對(duì)比是等同所缺少的,而等同也是對(duì)比所缺少的。其互補(bǔ)程度全憑其在天平上的位置。
當(dāng)你將這兩者結(jié)合在一起來(lái)思考就會(huì)感受到它們的作用。你可以只用顏色這一元素特性來(lái)制造出區(qū)別,給幾個(gè)元素用上同一顏色就讓它們發(fā)生了聯(lián)系,然后用另一顏色又讓另外幾個(gè)元素發(fā)生了聯(lián)系,然后這兩組元素由于顏色的不同又發(fā)生了對(duì)比。
色彩代碼就是一個(gè)很好例子,它是一種非常有效的編碼方式,讓寫(xiě)代碼的人即使看一眼也能很快理解代碼的結(jié)構(gòu),快速進(jìn)行成都網(wǎng)站制作。
當(dāng)一切都等同,無(wú)疑會(huì)讓你感到厭倦。如果一切不同,又會(huì)讓你煩躁。先進(jìn)的設(shè)計(jì)應(yīng)該讓這兩者得到很好的平衡,然后又能清楚表達(dá)出想要傳遞的信息。
以上內(nèi)容由創(chuàng)新互聯(lián)(成都網(wǎng)站建設(shè),成都網(wǎng)站制作)為您提供,更多精彩內(nèi)容:https://www.cdcxhl.com/
關(guān)注“科技”微信公眾號(hào),快速獲取互聯(lián)網(wǎng)較新資訊