<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          用戶界面設計中的對比類型

          2021-8-25    ui設計分享達人

          了解對比如何在設計中發揮作用,在用戶界面中可以找到哪些類型的對比,以及為什么它對積極的用戶體驗很重要。

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

          為什么對比度很重要?因為人眼自然會捕捉到對比度。圖像的最高可能對比度稱為對比度或動態范圍。更重要的是,對于色盲等視力不佳的人來說,對比度成為他們看到的物體的核心特征,并讓他們能夠區分它們。

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

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

          Pass-On 應用程序登錄頁面的設計展示了有效的顏色和尺寸對比示例,為頁面構建了堅實的視覺層次結構。

          UI設計中的對比類型

          對比可以基于 UI 元素的不同特性,包括:

          A. 顏色:這種類型是人眼最自然和最明顯的對比之一;它適用于顏色明顯不同的情況,例如,通過互補、分裂互補或三元方案組合,這種類型的對比最廣泛地用于制作按鈕和其他關鍵導航元素。在網頁布局或應用程序屏幕中立即看到,支持清晰直觀的導航。

          B. 大?。哼@種類型的對比是基于首先引起注意的元素明顯大于其他元素。

          C. 形狀:通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

          D. 位置:在這種類型中,設計師以這種方式更改一個元素的位置,使其看起來不同,例如,文本片段的新段落以縮進開頭。

          E. 紋理:這里的差異是由于使用彼此明顯區分的紋理而建立的。

          F. 方向:改變元素的物理位置,使其在其他方向,這樣以不尋常的方式吸引用戶的注意力。

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

          排版對比

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

          加拿大字體設計師卡爾·戴爾定義了 7 種核心類型的排版對比:

          A. 尺寸對比:它是關于由表格創建的基本圖案的物理放大和用于文本的類型的重量。這里最常見的情況是使標題或標題明顯大于文本。

          B. 重量對比:粗體在同款較輕的對比中突出。它有助于將注意力吸引到文本的特定部分,并讓用戶了解它們的重要性。

          C. 形式對比:這里的形式是指大寫字母和小寫字母之間的區別,或者羅馬字母和它的斜體變體,壓縮和擴展版本,與標準類型協調的腳本類型——所有提到的都可以用于戲劇性的形式的改變。

          D. 結構對比:結構意味著不同類型字體的不同字母形式,例如單線無襯線與高對比度現代,或斜體與黑體。

          E. 紋理對比:這是關于字體的線條如何看起來像一個整體,這部分取決于字體本身,部分取決于它們的排列方式。

          F. 顏色對比:第二種顏色通常不如基本的白底黑字(或黑底白字)強調,因此必須仔細考慮需要強調的元素并注意色調值使用的顏色。

          G. 方向對比:這種類型是關于垂直和水平之間的對立以及它們之間的角度。出文本塊也有它們的垂直或水平方面,將寬的長線塊與高的短線列混合可以產生對比。

          另外,還有一些不太流行的對比,比如所謂的孤立對比,就是把一個詞或詞組放在遠離其他元素的地方,這樣就可以從人群中脫穎而出,以及對比按節奏(空間間隔)——破碎的部分形成對比并吸引注意力。

          對比輔助功能

          閱讀上面提到的所有內容,很容易假設這里的經驗法則是對比度越高,設計越好。然而,事實并非如此:以及任何其他設計方面太多并不意味著更好。雖然低對比度會使內容難以感知和閱讀,但過高的對比度會引起眼睛疲勞,使交互更加困難。

          根據網頁內容無障礙指南 2.0,文字的視覺呈現和文字的圖像應該堅持至少 7:1的對比度,以下情況除外:

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

          裝飾:作為界面組件的一部分的文本或文本圖像,作為裝飾沒有對比度要求。

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

          注意留白

          空白是留空的布局區域,不僅在對象周圍,還包括對象之間和內部。空白是頁面或屏幕上所有對象的一種呼吸空間,因此它極大地影響了 UI 中應用的不同類型對比度的有效性。

          總結

          生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學會如何接受這一點,并嘗試享受如此多樣化和不可預測的生活。與現實相呼應,設計也充滿對比,并盡可能多地借鑒。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:對啊設計君

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合