網頁設計“對比”在用戶體驗設計中的作用

新聞 2023-08-19編輯：重慶網站建設標簽： 網頁設計 作用

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

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

　　一、什么是對比度

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

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

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

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

　　二、UI設計中的對比類型

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

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

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

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

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

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

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

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

　　三、對比和意義

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

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

　　色輪幫助設計師找到具有最佳對比度的顏色組合

　　四、排版對比

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

　　加拿大版式設計師Carl Dair定義了 7 種核心類型的版式對比：

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

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

　　Contrast of Form : 這里的形式是指大寫字母和小寫字母之間的區(qū)別，或者羅馬字母和它的斜體變體，壓縮和擴展版本，與標準類型協調的腳本類型——所有提到的都可以用于戲劇性的形式的改變。然而，Carl Dair 警告不要同時使用腳本和斜體，因為它們都是手寫字母的版本;他們更有可能發(fā)生沖突而不是對比。

　　結構對比：結構是指不同類型字體的不同字母形式，例如單行無襯線字體與高對比度現代字體，或斜體字體與黑體字體。

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

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

　　方向對比：這種類型是關于垂直和水平之間的對立以及兩者之間的角度。同樣，Dair 指出，文本塊也有其垂直或水平方面，將寬長行塊與高列短行混合可以產生對比。

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

　　五、對比無障礙

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

　　根據Web Content Accessibility Guidelines 2.0，文本和文本圖像的視覺呈現應堅持至少 7:1 的對比度，但以下情況除外：

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

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

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

　　六、暗對光還是亮對暗?

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

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

　　可讀性：用戶輕松閱讀文本的能力。如果應用程序或網站是文本驅動的，這一方面尤其重要：可讀性差可能導致用戶丟失關鍵數據或在使用產品時感到莫名的緊張，因為他們一直在與副本作斗爭，這需要付出相當大的努力被閱讀。缺乏可讀性可能是即使有吸引力的產品也無法留住用戶的一個重要原因。

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

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

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

　　七、要考慮的要點

　　在應用于網頁或應用程序屏幕設計的對比度方面，還有一些需要考慮的事項。

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

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

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

　　太高的對比度既累人又令人擔憂

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

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

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

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

　　八、注意負空間

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

　　九、為什么對比很重要

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

　　生活充滿對比，無論您選擇哪個方面。對于所有的生命，我們必須學會如何接受這一點，并努力享受如此多樣化和不可預測的生活。呼應現實，設計也充滿對比，并盡可能多地從中汲取靈感。

• 上一章：網格布局有什么好處
• 下一章：網頁設計中紅色的配色理論與應用