亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)視覺(jué)設(shè)計(jì)中的相似原理

視覺(jué)設(shè)計(jì)中的相似原理

具有相似視覺(jué)特征的物體最有可能是相關(guān)的,或者至少在用戶界面設(shè)計(jì)方面應(yīng)該如此。清晰、一致地為每種類型的UI元素應(yīng)用可視化規(guī)則對(duì)于幫助用戶輕松地理解和使用設(shè)計(jì)至關(guān)重要。這是因?yàn)槊看谓换ザ紩?huì)開(kāi)發(fā)出用戶對(duì)其他類似元素如何發(fā)揮作用的期望。

定義:相似原則表明,具有相同視覺(jué)特征的項(xiàng)目被認(rèn)為比不相似的項(xiàng)目更相關(guān)。

視覺(jué)設(shè)計(jì)中的相似原理(圖1)

由于相似原則,這種形狀的網(wǎng)格通常被認(rèn)為是四列(而不是三行,或者是一個(gè)大的組)。每種形狀類型構(gòu)成一組。

相似原則是20世紀(jì)初格式塔心理學(xué)家發(fā)現(xiàn)的視覺(jué)分組原則(以及接近性和閉合性)的原始集合之一。這些心理學(xué)家的目的是了解人們是如何從視覺(jué)上感知世界的,并決定某些元素是否屬于同一群體。后來(lái),更多的分組原則(如公共區(qū)域)被添加到原始格式塔列表中。

視覺(jué)設(shè)計(jì)師可以也應(yīng)該使用這些格式塔原則來(lái)創(chuàng)建可用的用戶界面。

1、使用共享特征表示關(guān)系

相似性原則簡(jiǎn)單地說(shuō),當(dāng)物品具有某種視覺(jué)特征時(shí),它們被假定在某種程度上是相關(guān)的。這些物品不需要完全相同,只要至少有一個(gè)明顯的特征,比如顏色、形狀或大小,就可以被認(rèn)為是同一組的一部分。

相似性原則與其他幾個(gè)可視化分組原則不同,因?yàn)楣蚕淼奶卣骺梢栽诜植嘉恢玫那闆r下將元素統(tǒng)一起來(lái)。此外,視覺(jué)上相似的項(xiàng)目也可能是其他基于位置的分組的一部分。因此,雖然相似性原則不一定是最強(qiáng)的分組原則,因?yàn)樗?jīng)常被鄰近或共同區(qū)域所壓倒,但它可以被認(rèn)為是最具彈性的。

2、顏色

應(yīng)用共享的顏色來(lái)表示某些項(xiàng)目是相關(guān)的,因此可能具有相似的功能,這是很強(qiáng)大的。共同的顏色往往比其他特征(如形狀)更突出,因此可以用來(lái)統(tǒng)一不同類型的元素,并表明它們確實(shí)是相關(guān)的。

視覺(jué)設(shè)計(jì)中的相似原理(圖2)

色彩是一種強(qiáng)烈的相似性特征,它可以將不同類型的元素統(tǒng)一起來(lái)。在這里,共享的藍(lán)色創(chuàng)建行的感覺(jué),盡管柱狀排列的形狀。


視覺(jué)設(shè)計(jì)中的相似原理(圖3)

顏色繼續(xù)作為一種清晰的共同特征,創(chuàng)造出一種分組的感覺(jué),即使是在不同形狀的隨機(jī)模式中使用。

在用戶界面設(shè)計(jì)中,顏色通常用來(lái)表示常用的功能。例如,這是一個(gè)最佳實(shí)踐是使用一個(gè)鏈接顏色作為主要通信方式向用戶可點(diǎn)擊:共享顏色允許點(diǎn)擊元素來(lái)突出作為一個(gè)群體不管頁(yè)面上的鏈接的位置,與純非交互的文本出現(xiàn)在默認(rèn)文本顏色。這種鏈接顏色應(yīng)該只保留給交互文本和其他可點(diǎn)擊元素,因?yàn)橛脩魰?huì)認(rèn)為所有共享這種特征的項(xiàng)目都是相關(guān)的,并且以相同的方式工作。因此,鏈接顏色不應(yīng)該用于關(guān)鍵詞,不可點(diǎn)擊的標(biāo)題,或附近不能點(diǎn)擊的圖標(biāo)。

視覺(jué)設(shè)計(jì)中的相似原理(圖4)

上傳圖標(biāo)和它下面的錄制或上傳視頻按鈕都是紅色的,看起來(lái)好像是同一組。在這樣的設(shè)計(jì)中,用戶可能會(huì)認(rèn)為點(diǎn)擊圖標(biāo)或按鈕都會(huì)觸發(fā)相同的功能——然而,這個(gè)圖標(biāo)純粹是裝飾性的,不能點(diǎn)擊。

相同顏色的按鈕會(huì)被認(rèn)為具有相同的重要性。因此,應(yīng)該為主要的動(dòng)作調(diào)用保留一個(gè)單獨(dú)的顏色,以幫助它們?cè)诖我粹o中脫穎而出。在下面的示例中,消息中心中的所有按鈕都是綠色的,因此用戶必須花時(shí)間弄清楚哪個(gè)是提交表單的主按鈕。(此外,提交按鈕遠(yuǎn)離消息區(qū),而且根據(jù)菲茨定律,這種距離的不近也會(huì)降低用戶的速度。)

視覺(jué)設(shè)計(jì)中的相似原理(圖5)

Synchrony Bank消息中心的Submit按鈕與Cancel和Add Attachment按鈕的顏色相同,并與這些二次操作混合在一起。

3、形狀

正如在前面的插圖中看到的,形狀還可以用來(lái)表示分組。在界面設(shè)計(jì)中,我們經(jīng)常對(duì)某些元素使用相同的矩形形狀來(lái)表示它們都是按鈕或樣式某些類別鏈接為圓形或圓形的"藥丸"形狀來(lái)加強(qiáng)它們之間的關(guān)系。

視覺(jué)設(shè)計(jì)中的相似原理(圖6)

Asos.com上的子類別鏈接都被做成圓角矩形,以加強(qiáng)他們的群體感知,并傳達(dá)他們類似導(dǎo)航的功能。與此相反,下面矩形形狀的過(guò)濾器表明,這一組具有不同的功能。

當(dāng)元素共享一個(gè)形狀時(shí),我們可能會(huì)認(rèn)為它們是相同的,從而忽略了一些細(xì)節(jié),比如附加標(biāo)簽、形狀中的小文本和形式中的細(xì)微差異。如果元素實(shí)際上是不同的,那么這可能會(huì)產(chǎn)生問(wèn)題。例如,Makr平板電腦應(yīng)用程序中產(chǎn)品導(dǎo)航中的幾個(gè)圖標(biāo)形狀非常相似,其中兩個(gè)圖標(biāo)是相同的。視覺(jué)上的相似性會(huì)錯(cuò)誤地傳達(dá)出類別是相關(guān)的——除非有目的地將這些類別放在一起?在確保一組圖標(biāo)在視覺(jué)上一致和暗示非有意的對(duì)之間的關(guān)系過(guò)于強(qiáng)烈之間有一條很好的界限。

視覺(jué)設(shè)計(jì)中的相似原理(圖7)

避免使用形狀相同或非常相似的圖標(biāo)來(lái)代表不同的類別,因?yàn)樗鼈兛赡苠e(cuò)誤地表明一種關(guān)系。在Makr應(yīng)用程序的導(dǎo)航中,保存日期和RSVPs使用了相同的圖標(biāo),感謝卡也使用了另一個(gè)非常類似的圖標(biāo)。

同樣,我們過(guò)去研究視覺(jué)指標(biāo)作為列表中的項(xiàng)目的差異發(fā)現(xiàn),用戶能夠更快更準(zhǔn)確地找到某些項(xiàng)目指標(biāo)有一個(gè)獨(dú)特的形狀,如果指標(biāo)顯得過(guò)于相似,需要花費(fèi)很長(zhǎng)的時(shí)間來(lái)掃描,發(fā)現(xiàn)他們是如何不同。例如,在Etsy的主頁(yè)上,一些產(chǎn)品被標(biāo)記為免費(fèi)送貨或具有類似形狀指標(biāo)的暢銷產(chǎn)品。幸運(yùn)的是,這兩個(gè)指標(biāo)至少是不同的顏色,暢銷書(shū)指標(biāo)包括一個(gè)小圖標(biāo),以幫助在視覺(jué)上區(qū)分他們是一個(gè)不同的組與免費(fèi)送貨的商品。

視覺(jué)設(shè)計(jì)中的相似原理(圖8)

免費(fèi)送貨和暢銷書(shū)的指標(biāo)用不同顏色的圓角矩形括起來(lái),暢銷書(shū)還包括一個(gè)特殊的圖標(biāo)。這些特征使得這兩個(gè)指標(biāo)很容易區(qū)分。如果它們的顏色相同,共享的形狀會(huì)使它們看起來(lái)太相似,并會(huì)減慢用戶的速度。

如果使用得當(dāng),在整個(gè)界面中重復(fù)顯示相同的圖標(biāo),說(shuō)明這些相關(guān)元素將以類似的方式運(yùn)行。例如,不同的圖標(biāo)可以顯示哪些菜單項(xiàng)是指向著陸頁(yè)面的鏈接,哪些是指向伸縮菜單的鏈接,或者哪些鏈接可以將用戶發(fā)送到外部站點(diǎn)。下面的例子來(lái)自Etsy主頁(yè),箭頭圖標(biāo)被放置在各種元素的旁邊,以表明它們是可點(diǎn)擊的,而不是使用類似的顏色特征。

視覺(jué)設(shè)計(jì)中的相似原理(圖9)

箭頭圖標(biāo)同樣放置在每個(gè)可點(diǎn)擊元素的旁邊。這表明它們?cè)诠δ苌鲜窍嗨频?,盡管字體處理不同。

4、尺寸

大小也可以用來(lái)表示信號(hào)關(guān)系。大小相似的物體很可能被認(rèn)為是相關(guān)的,通常具有相同的重要性水平。

視覺(jué)設(shè)計(jì)中的相似原理(圖10)

圖中較大的圓圈與較小的圓圈相比,可能被認(rèn)為是相關(guān)的,屬于不同的組。

在用戶界面中,我們經(jīng)常使用大小來(lái)強(qiáng)調(diào)內(nèi)容或行動(dòng)的哪些區(qū)域是最重要的。同樣的大小意味著同樣的視覺(jué)突出,并且,在所有其他事物相同的情況下,連接所有共享這一屬性的元素。始終如一地使用大小創(chuàng)建一個(gè)視覺(jué)層次結(jié)構(gòu),并使頁(yè)面易于掃描,因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。

例如,在產(chǎn)品列表頁(yè)面中,每個(gè)單獨(dú)的產(chǎn)品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺(jué)樣式告訴我們,該區(qū)域的所有項(xiàng)目都是產(chǎn)品;共享的大小將它與其他不同的UI元素分開(kāi)。當(dāng)一個(gè)產(chǎn)品以不同的大小或形狀出現(xiàn)在這個(gè)列表中時(shí),它會(huì)被認(rèn)為不屬于產(chǎn)品分組。例如,在Anthropologie.com網(wǎng)站上,產(chǎn)品系列的促銷活動(dòng)的規(guī)模是單個(gè)產(chǎn)品列表的兩倍。

視覺(jué)設(shè)計(jì)中的相似原理(圖11)

與周圍的產(chǎn)品列表相比,產(chǎn)品集合的促銷信息以更大的尺寸顯示,以有效地傳達(dá)它們是不同類型的內(nèi)容元素。

相反,當(dāng)不同類型的內(nèi)容以相同或非常相似的大小顯示時(shí),它們通常被認(rèn)為是相關(guān)的——即使它們是不同的。這個(gè)問(wèn)題通常發(fā)生在網(wǎng)站的右欄,那里的實(shí)際內(nèi)容和外部廣告通常以相似的大小顯示。因?yàn)橛脩粝M谡_的軌道上看到廣告,所以所有的內(nèi)容都受到橫幅盲目性的影響,特別是在樣式類似的情況下。這就是為什么在我們的教學(xué)視頻研究中,一些參與者完全沒(méi)有看到瑪莎·斯圖爾特網(wǎng)站上展示如何折疊餐巾的視頻教程——它的大小和周圍所有展示廣告的大小一模一樣。

視覺(jué)設(shè)計(jì)中的相似原理(圖12)

用戶將這篇Martha Stewart how-to文章右邊的視頻誤認(rèn)為是一個(gè)廣告,因?yàn)樗拇笮『托螤钆c該區(qū)域的其他廣告相似。

5、許多其他相似的特征

顏色、形狀和大小并不是顯示相似的唯一方式;還有更多的視覺(jué)特征可以用來(lái)傳達(dá)某些相關(guān)元素。相同的字體處理(粗體、斜體等)可以表明文本片段是相關(guān)的,并表示相同類型的信息。類似地,方向甚至移動(dòng)都可以表明元素屬于同一組,并且可能具有相同的意義或功能。相似原理在視覺(jué)設(shè)計(jì)中無(wú)處不在,幾乎在所有存在的界面設(shè)計(jì)中都可以看到相似的效果。

在我們關(guān)于人類思維和可用性的培訓(xùn)課程中學(xué)習(xí)更多關(guān)于視覺(jué)感知,它如何應(yīng)用于UI設(shè)計(jì),以及其他心理學(xué)原理。

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/8439.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。