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

新聞 2023-08-19編輯：重慶網(wǎng)站建設(shè)標(biāo)簽： 網(wǎng)頁設(shè)計(jì) 作用

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

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

　　一、什么是對比度

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

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

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

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

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

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

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

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

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

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

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

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

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

　　三、對比和意義

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

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

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

　　四、排版對比

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

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

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

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

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

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

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

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

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

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

　　五、對比無障礙

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

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

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

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

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

　　六、暗對光還是亮對暗?

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

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

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

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

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

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

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

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

　　如果文本覆蓋在圖像上，請注意高對比度

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

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

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

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

　　太多的對比意味著沒有對比

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

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

　　八、注意負(fù)空間

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

　　九、為什么對比很重要

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

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

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