網(wǎng)頁(yè)設(shè)計(jì)“對(duì)比”在用戶體驗(yàn)設(shè)計(jì)中的作用

新聞 2023-08-19編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 網(wǎng)頁(yè)設(shè)計(jì) 作用

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國(guó)際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營(yíng)銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營(yíng)銷網(wǎng)站的效果】重長(zhǎng)尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專屬VIP服務(wù)

　　如果沒(méi)有黑暗，就不可能定義光。如果沒(méi)有暖氣，就很難感受到冷水帶來(lái)的爽快享受。如果它們之間沒(méi)有寂靜，就很難享受這些聲音。如果單詞之間沒(méi)有空格，那么閱讀這些單詞將是一項(xiàng)挑戰(zhàn)。如果周?chē)鷽](méi)有孩子，我們就感覺(jué)不到自己是成年人。世界上的一切都存在并與其他事物形成對(duì)比，因此難怪它是藝術(shù)和設(shè)計(jì)的基礎(chǔ)之一。這就是我們今天的文章要討論的主題。

　　一、什么是對(duì)比度

　　一般而言，“對(duì)比度”一詞用于描述彼此截然不同的對(duì)象。談到視覺(jué)感知，對(duì)比度基本上與使物體清晰可辨的顏色或光線的差異有關(guān)。

　　為什么對(duì)比度很重要?因?yàn)槿搜圩匀粌A向于捕捉對(duì)比度。圖像的最高可能對(duì)比度稱為對(duì)比度或動(dòng)態(tài)范圍。更重要的是，對(duì)于色盲等視力不佳的視覺(jué)障礙者來(lái)說(shuō)，對(duì)比度成為他們看到的物體的核心特征，使他們能夠區(qū)分它們。

　　在學(xué)院派藝術(shù)中，對(duì)比處理的是對(duì)立元素和效果的排列，例如顏色的明暗、形狀的大小、粗糙或光滑的紋理。在這種情況下，對(duì)比不僅可以用來(lái)吸引注意力，還可以用來(lái)營(yíng)造情緒和氛圍，并在藝術(shù)品中創(chuàng)造多樣性、視覺(jué)趣味和戲劇效果。

　　在設(shè)計(jì)中，對(duì)比度是影響網(wǎng)頁(yè)或移動(dòng)屏幕的可掃描性和視覺(jué)層次的關(guān)鍵因素之一。它使設(shè)計(jì)師能夠以一種方式呈現(xiàn)布局，告知用戶哪些交互點(diǎn)是重要的，哪些是次要的。對(duì)比度可以有效地吸引用戶的注意力并將其吸引到特定元素，因此它在支持?jǐn)?shù)字產(chǎn)品的直觀導(dǎo)航和可用性方面發(fā)揮著重要作用。

　　二、UI設(shè)計(jì)中的對(duì)比類型

　　對(duì)比度可以基于 UI 元素的不同特征，包括：

　　顏色：這種類型是人眼最自然和最引人注目的顏色之一;它適用于顏色截然不同的情況，例如，通過(guò)互補(bǔ)、拆分互補(bǔ)或三元方案組合(在我們的色彩理論評(píng)論中查看更多關(guān)于它們的信息)。這種對(duì)比最廣泛地用于使CTA 按鈕和其他關(guān)鍵導(dǎo)航元素立即出現(xiàn)在網(wǎng)頁(yè)或應(yīng)用程序屏幕的布局中，支持清晰直觀的導(dǎo)航。

　　size：這種類型的對(duì)比是基于使一個(gè)應(yīng)該首先引起注意的元素明顯比其他元素大

　　shape：在這里，通過(guò)使一個(gè)元素的形狀與其他元素不同來(lái)吸引用戶的眼球

　　position：在這種類型中，設(shè)計(jì)人員以這種方式更改行中一個(gè)元素的位置，使其看起來(lái)不同，例如，文本片段的新段落以縮進(jìn)開(kāi)頭。

　　texture：在這里，差異是由于使用彼此明顯不同的紋理而產(chǎn)生的

　　direction ( orientation ): 在這里，你改變了元素的物理定位，讓它使用其他或意想不到的方向，這種方式以不常見(jiàn)的方式吸引用戶的注意力。

　　在他的文章對(duì)比和意義中，Andy Rutledge 將設(shè)計(jì)師經(jīng)常使用的對(duì)比類型放在一個(gè)簡(jiǎn)單但信息豐富的方案中，如下所示，將每種類型可視化。

　　三、對(duì)比和意義

　　關(guān)于對(duì)比，第一個(gè)想到的想法往往是黑白的。在沒(méi)有陰影和多種顏色的情況下，單色圖像使用對(duì)比度作為表達(dá)潛力的主要助推器。這在用戶界面中的工作方式相同。更重要的是，與藝術(shù)品或攝影作品相比，對(duì)比不僅影響審美，而且對(duì)布局的可用性和導(dǎo)航性也有重大影響。因此，經(jīng)過(guò)深思熟慮的對(duì)比度使用是使網(wǎng)站和應(yīng)用程序用戶友好且易于使用的有效方法。

　　當(dāng)然，這并不意味著只有黑白 UI 才是最有效的。當(dāng)全球用戶呈現(xiàn)出如此多樣化的愿望和需求時(shí)，受到如此多的限制是不明智的。然而，“黑白”測(cè)試非常有用。設(shè)計(jì)師應(yīng)該記住，彩色界面在不同的屏幕和分辨率下看起來(lái)可能會(huì)有所不同。此外，低對(duì)比度會(huì)使色盲用戶難以使用界面。

　　色輪幫助設(shè)計(jì)師找到具有最佳對(duì)比度的顏色組合

　　四、排版對(duì)比

　　另一種特定類型的對(duì)比是排版對(duì)比，基于用于設(shè)計(jì)作品文本部分的字體的區(qū)別特征的差異。

　　加拿大版式設(shè)計(jì)師Carl Dair定義了 7 種核心類型的版式對(duì)比：

　　Contrast of Size：它是關(guān)于由形式創(chuàng)建的基本圖案的物理放大和用于文本的類型的重量。這里最常見(jiàn)的情況是使標(biāo)題或標(biāo)題明顯大于文本。

　　重量對(duì)比：粗體字在同款較輕的字眼中間突出。它有助于將注意力吸引到文本的特定部分，并讓用戶知道它們的重要性。

　　Contrast of Form : 這里的形式是指大寫(xiě)字母和小寫(xiě)字母之間的區(qū)別，或者羅馬字母和它的斜體變體，壓縮和擴(kuò)展版本，與標(biāo)準(zhǔn)類型協(xié)調(diào)的腳本類型——所有提到的都可以用于戲劇性的形式的改變。然而，Carl Dair 警告不要同時(shí)使用腳本和斜體，因?yàn)樗鼈兌际鞘謱?xiě)字母的版本;他們更有可能發(fā)生沖突而不是對(duì)比。

　　結(jié)構(gòu)對(duì)比：結(jié)構(gòu)是指不同類型字體的不同字母形式，例如單行無(wú)襯線字體與高對(duì)比度現(xiàn)代字體，或斜體字體與黑體字體。

　　紋理對(duì)比：這是關(guān)于字體線條看起來(lái)如何作為一個(gè)整體，這部分取決于字體本身，部分取決于它們的排列方式。

　　顏色對(duì)比：在這里，Dair 提到第二種顏色通常不如基本的白底黑(或黑底白)那么突出，因此必須仔細(xì)考慮需要強(qiáng)調(diào)的元素并注意色調(diào)值使用的顏色。

　　方向?qū)Ρ龋哼@種類型是關(guān)于垂直和水平之間的對(duì)立以及兩者之間的角度。同樣，Dair 指出，文本塊也有其垂直或水平方面，將寬長(zhǎng)行塊與高列短行混合可以產(chǎn)生對(duì)比。

　　此外，還有一些其他不太流行的對(duì)比類型，例如所謂的隔離對(duì)比，當(dāng)一個(gè)單詞或短語(yǔ)遠(yuǎn)離其他元素放置時(shí)，這種方式從人群中脫穎而出，以及對(duì)比通過(guò)節(jié)奏(空間間隔)——它被打破的部分形成對(duì)比并吸引注意力。

　　五、對(duì)比無(wú)障礙

　　閱讀上面提到的所有內(nèi)容，很容易假設(shè)這里的經(jīng)驗(yàn)法則是對(duì)比度越高，設(shè)計(jì)越好。然而，事實(shí)并非如此：與任何其他設(shè)計(jì)方面一樣，太多并不意味著更好。雖然低對(duì)比度會(huì)使內(nèi)容難以感知和閱讀，但過(guò)高的對(duì)比度會(huì)引起眼睛疲勞，使交互變得更加困難。所以，又到了尋找黃金媒介的時(shí)候了。

　　根據(jù)Web Content Accessibility Guidelines 2.0，文本和文本圖像的視覺(jué)呈現(xiàn)應(yīng)堅(jiān)持至少 7:1 的對(duì)比度，但以下情況除外：

　　大文本：大文本和大文本圖像的對(duì)比度至少為 4.5:1;

　　附帶：作為非活動(dòng)用戶界面組件一部分的文本或文本圖像，純裝飾，任何人都看不到，或者是包含其他重要視覺(jué)內(nèi)容的圖片的一部分，沒(méi)有對(duì)比度要求。

　　標(biāo)識(shí)：作為標(biāo)識(shí)或品牌名稱一部分的文本沒(méi)有最低對(duì)比度要求。

　　六、暗對(duì)光還是亮對(duì)暗?

　　網(wǎng)頁(yè)設(shè)計(jì)師通常在顏色和對(duì)比度方面必須回答的第一個(gè)問(wèn)題是選擇什么樣的通用配色方案：應(yīng)該是深色還是淺色?從這個(gè)角度來(lái)看，應(yīng)該考慮幾個(gè)重要方面。

　　清晰度：這方面應(yīng)該包括用戶清楚地看到和區(qū)分屏幕或頁(yè)面上所有必要細(xì)節(jié)的能力。配色方案和組合應(yīng)支持簡(jiǎn)單直觀的導(dǎo)航，并使布局中最實(shí)用的元素有效突出。如果這個(gè)方面既沒(méi)有被考慮也沒(méi)有被正確測(cè)試，它可能會(huì)導(dǎo)致產(chǎn)品在屏幕上變得一團(tuán)糟，用戶看不到他們真正應(yīng)該看到的東西。檢查它的方法之一是廣泛使用的“模糊效果”，當(dāng)您以模糊模式查看屏幕或頁(yè)面并檢查是否可以輕松快速地觀察到所有重要內(nèi)容時(shí)。

　　可讀性：用戶輕松閱讀文本的能力。如果應(yīng)用程序或網(wǎng)站是文本驅(qū)動(dòng)的，這一方面尤其重要：可讀性差可能導(dǎo)致用戶丟失關(guān)鍵數(shù)據(jù)或在使用產(chǎn)品時(shí)感到莫名的緊張，因?yàn)樗麄円恢痹谂c副本作斗爭(zhēng)，這需要付出相當(dāng)大的努力被閱讀。缺乏可讀性可能是即使有吸引力的產(chǎn)品也無(wú)法留住用戶的一個(gè)重要原因。

　　可訪問(wèn)性：產(chǎn)品覆蓋盡可能多的人的能力。這意味著“使用或不使用”的決定應(yīng)該主要基于用戶的需求和愿望，而不是他們的身體能力。配色方案問(wèn)題是影響這方面的主要因素之一。設(shè)計(jì)師應(yīng)該考慮不同年齡、特殊需求和殘疾的用戶，這也可以決定背景和布局元素的顏色選擇。

　　響應(yīng)能力：產(chǎn)品根據(jù)所使用的設(shè)備靈活變換布局的能力。這會(huì)對(duì)可用性產(chǎn)生至關(guān)重要的影響。在高分辨率專業(yè)顯示器上看起來(lái)時(shí)尚、有吸引力且清晰的東西在小型低分辨率屏幕上可能會(huì)變成臟污。配色方案和對(duì)比度水平肯定會(huì)首先影響這個(gè)問(wèn)題。

　　環(huán)境：為用戶經(jīng)常使用的潛在環(huán)境選擇合適的配色方案和背景類型。就在自然光下持續(xù)使用而言，深色背景確實(shí)會(huì)產(chǎn)生反射效果，尤其是在平板電腦和智能手機(jī)的典型光面屏幕上。相反，就在光線不足的環(huán)境中經(jīng)常使用而言，深色背景會(huì)使光線遠(yuǎn)離屏幕，從而對(duì)導(dǎo)航和可讀性產(chǎn)生負(fù)面影響。因此，顏色組合、對(duì)比度和陰影的問(wèn)題在這里引起了極大的關(guān)注。

　　七、要考慮的要點(diǎn)

　　在應(yīng)用于網(wǎng)頁(yè)或應(yīng)用程序屏幕設(shè)計(jì)的對(duì)比度方面，還有一些需要考慮的事項(xiàng)。

　　如果文本覆蓋在圖像上，請(qǐng)注意高對(duì)比度

　　由于圖片具有涵蓋多種功能的強(qiáng)大能力，背景圖片在網(wǎng)頁(yè)和移動(dòng)設(shè)計(jì)中呈現(xiàn)出穩(wěn)定的趨勢(shì)。這種方法使屏幕在視覺(jué)和情感上都具有吸引力和信息量，因?yàn)閳D像通過(guò)這種方式可以更快地立即吸引用戶的注意力。此外，它支持所有布局元素的完整性。然而，找到合適的對(duì)比度并適當(dāng)?shù)卣蠈?dǎo)航和文本內(nèi)容需要很多技巧和努力，這樣頁(yè)面才不會(huì)變成對(duì)比度太低時(shí)經(jīng)常發(fā)生的難以辨認(rèn)的混亂。

　　請(qǐng)注意建議的對(duì)比度至少為 4.5:1(或大字符為 3:1，定義為 18 號(hào)字體或 14 號(hào)粗體)。嘗試使用對(duì)比度工具來(lái)檢查不同顏色組合的效果。

　　太高的對(duì)比度既累人又令人擔(dān)憂

　　另一方面，重要的是要記住過(guò)度對(duì)比也沒(méi)有好處，甚至可能對(duì)用戶體驗(yàn)設(shè)計(jì)的某些方面有害。什么能有效地作為一種強(qiáng)調(diào)來(lái)暫時(shí)將注意力吸引到一個(gè)按鈕或一個(gè)方向提示上，可能會(huì)在旨在長(zhǎng)時(shí)間閱讀的頁(yè)面上引起真正的問(wèn)題，并且必須關(guān)心讓讀者的眼睛不要過(guò)度疲勞。有時(shí)，應(yīng)用程序用戶或網(wǎng)站訪問(wèn)者甚至無(wú)法清楚地定義問(wèn)題所在，但過(guò)于鮮明的對(duì)比會(huì)讓他們感到緊張和疲倦，并阻礙他們使用數(shù)字產(chǎn)品。

　　太多的對(duì)比意味著沒(méi)有對(duì)比

　　在他的Designing for Emotion 一書(shū)中，Aarron Walter分享了一個(gè)關(guān)于用戶界面對(duì)比度的非常寶貴的想法：“當(dāng)你增加頁(yè)面上高對(duì)比度元素的數(shù)量時(shí)，你會(huì)按比例增加執(zhí)行任務(wù)所需的時(shí)間，學(xué)習(xí)一個(gè)系統(tǒng)，并記住路徑。添加?xùn)|西會(huì)將人腦推向極限。你有沒(méi)有參加過(guò)每個(gè)人都大喊著要和旁邊的人說(shuō)話的聚會(huì)?隨著音量的增加，每個(gè)人都必須大聲說(shuō)話才能被聽(tīng)到，但這使得對(duì)話變得更加困難。設(shè)計(jì)以同樣的方式工作。如果一切都在大喊大叫以引起觀眾的注意，那么什么也聽(tīng)不到?！?/p>

　　因此，如果您在這方面使頁(yè)面或屏幕變得復(fù)雜，并且充滿了相互對(duì)比的各種元素，那么交互流程將變得更加困難、變得更加煩人和不可用的風(fēng)險(xiǎn)很高。

　　八、注意負(fù)空間

　　負(fù)空間(又名空白)是留空的布局區(qū)域，不僅在對(duì)象周?chē)以趯?duì)象之間和內(nèi)部。負(fù)空間是頁(yè)面或屏幕上所有對(duì)象的一種呼吸空間，因此它極大地影響了 UI 中應(yīng)用的不同類型對(duì)比的有效性。

　　九、為什么對(duì)比很重要

　　總結(jié)上面提到和顯示的所有內(nèi)容，讓我們將對(duì)比的幾個(gè)主要好處定義為良好用戶友好設(shè)計(jì)的強(qiáng)大功能：更強(qiáng)的視覺(jué)層次、更好地專注、創(chuàng)意氛圍、增強(qiáng)可讀性、對(duì)應(yīng)于人類的自然感知和反應(yīng)。

　　生活充滿對(duì)比，無(wú)論您選擇哪個(gè)方面。對(duì)于所有的生命，我們必須學(xué)會(huì)如何接受這一點(diǎn)，并努力享受如此多樣化和不可預(yù)測(cè)的生活。呼應(yīng)現(xiàn)實(shí)，設(shè)計(jì)也充滿對(duì)比，并盡可能多地從中汲取靈感。

• 上一章：網(wǎng)格布局有什么好處
• 下一章：網(wǎng)頁(yè)設(shè)計(jì)中紅色的配色理論與應(yīng)用