在頁面中，我們時(shí)常會(huì)被各種絢麗的色彩所吸引。本文介紹了透明度系統(tǒng)的優(yōu)勢(shì)，并以實(shí)際例子展示其在解決設(shè)計(jì)問題、提高細(xì)節(jié)表現(xiàn)和可讀性方面的應(yīng)用。讓我們一起看下去吧。

打開絢麗紛繁的頁面，我們時(shí)常會(huì)被各種各樣的色彩所吸引。但是，除了鮮艷奪目的顏色外，你可曾留意過那些看似平凡無奇的中性顏色？這些中性顏色在UI設(shè)計(jì)中扮演著不可或缺的角色，而其中的透明度系統(tǒng)更是隱藏著無限的魅力。今天，我們就要一起揭開透明度系統(tǒng)的神秘面紗，探索其在UI規(guī)范中的重要性和作用。

或許你曾聽過“Less is more”這句名言，透明度系統(tǒng)恰好就是這個(gè)理念的最佳體現(xiàn)。通過微妙的不透明程度調(diào)整，中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質(zhì)，還能增加元素之間的層次感和空間感。想象一下，通過透明度的微妙運(yùn)用，你的設(shè)計(jì)將呈現(xiàn)出一種舒適且現(xiàn)代感的風(fēng)格。是不是感覺很神奇？同時(shí)這個(gè)方法還是谷歌設(shè)計(jì)規(guī)范中的推崇之一哦！

做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的

我個(gè)人是從非常初級(jí)的產(chǎn)品經(jīng)理做起，再到負(fù)責(zé)一個(gè)大產(chǎn)品的項(xiàng)目管理，現(xiàn)在有幸跳出了日?；A(chǔ)的工作更多的去看產(chǎn)品的PMF，product strategy...

查看詳情 >

在設(shè)計(jì)規(guī)范中，我們通常會(huì)根據(jù)文字的重要性將其分為重要、常規(guī)和輔助三個(gè)層級(jí)，然后為它們定義不同的顏色。但是，有時(shí)候使用定義好的顏色在特定情況下會(huì)出現(xiàn)識(shí)別不清晰、與背景搭配不美觀的問題。這就是透明度應(yīng)用的典型場(chǎng)景。下面先說下使用透明度的優(yōu)勢(shì)：

• 提升設(shè)計(jì)的細(xì)節(jié)表現(xiàn)：通過給文字和設(shè)計(jì)元素設(shè)置透明度，可以使其與背景更融合，提升細(xì)節(jié)的呈現(xiàn)效果，使作品更富有層次感。
• 提高可讀性：透明度的設(shè)置可以在不損害背景色的前提下，增強(qiáng)文字的對(duì)比度，使其更易讀，提供更好的用戶體驗(yàn)。
• 增加視覺美感：透明度的運(yùn)用可以使設(shè)計(jì)更具美感和藝術(shù)性，讓作品更具吸引力。

接下來讓我們首先看看純色文字定義經(jīng)常遇到的問題吧。當(dāng)設(shè)定文字與一些顏色元素搭配時(shí)，就可能出現(xiàn)一些尷尬的情況。

比如，下圖中相同顏色的文字在品牌色背景上，識(shí)別度低，視覺上也不是很和諧。

接下來，我們對(duì)文字顏色進(jìn)行一些小小的改變，通過降低不透明度來解決這個(gè)問題。

效果立竿見影！降低不透明度后，文字識(shí)別問題迎刃而解，細(xì)節(jié)也變得更加清晰，文字顏色還與背景色融為一體，看起來更為和諧。

其實(shí)，不僅僅是文字，我們還可以用這個(gè)方法來改善其他元素的設(shè)計(jì)，比如表格的分割線。讓我們來看一個(gè)例子。

通常，我們使用較淺的顏色來填充分割線，在遇到有彩色背景的情況下，分割線可能會(huì)“隱身”。在下圖中，同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。

接下來，讓我們同樣的方法來改善這個(gè)問題。

效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍(lán)色，整體顏值得到了提升。這也展示了設(shè)計(jì)師在細(xì)節(jié)把控上的魅力。

那么這個(gè)方法如何應(yīng)用到實(shí)際工作中呢？讓我們來介紹一下具體步驟。

首先，我們需要考慮文字的使用場(chǎng)景，大致分為淺色背景、深色背景和彩色背景。我們需要根據(jù)實(shí)際項(xiàng)目情況來確定使用場(chǎng)景。一般我們會(huì)在設(shè)定色階時(shí)也會(huì)根據(jù)實(shí)際項(xiàng)目設(shè)定一個(gè)深色和淺色的透明度階梯，例如：設(shè)定顏色#000000，依次設(shè)置透明度為90%、80%…20%、10%序列。當(dāng)然這個(gè)序列可以分為有序序列和無序序列，85%、56%等等

接下來下面是對(duì)深色背景和淺色背景下文字顏色的定義，具體操作如下：對(duì)于淺色背景，我們將文字分為三個(gè)層級(jí)：重要、次要和輔助。針對(duì)這三個(gè)層級(jí)，文字顏色填充為#000000，并設(shè)置序列中對(duì)應(yīng)的不同不透明度。具體來說，重要文字的不透明度設(shè)為90%，次要文字為60%，輔助文字為40%。在深色背景下，相同的操作也可以應(yīng)用，只是將文字顏色設(shè)置為#FFFFFF（白色）。在彩色背景下，我們會(huì)根據(jù)具體情況選擇使用深色背景或淺色背景下的文字顏色，并根據(jù)需要進(jìn)行透明度的調(diào)整。

最后，為了確保文字在不同背景下的清晰度和可讀性，我們需要進(jìn)行對(duì)比度測(cè)試。可以使用對(duì)比度測(cè)試工具，來驗(yàn)證所定義的透明度是否符合設(shè)計(jì)規(guī)范。（https://www.siegemedia.com/contrast-ratio）

但是，請(qǐng)記住，設(shè)計(jì)并不僅止于設(shè)計(jì)稿。最終需要前端同學(xué)來實(shí)現(xiàn)，而不是所有前端同學(xué)都熟悉并愿意使用透明度的系統(tǒng)。這時(shí)，我們可以運(yùn)用我們的魅力和專業(yè)知識(shí)來說服他們。我們可以引用谷歌的Material Design官方文檔，證明透明度的可行性和簡(jiǎn)便性。我們可以解釋這種設(shè)置透明度的方法不僅簡(jiǎn)單，而且可以提高工作效率，同時(shí)還能增加用戶的視覺體驗(yàn)。

通過使用透明度解決設(shè)計(jì)問題，我們可以使文字和設(shè)計(jì)元素更融合、提升細(xì)節(jié)表現(xiàn)，并提高用戶體驗(yàn)。透明度的設(shè)置靈活多樣，能夠適應(yīng)不同項(xiàng)目、不同場(chǎng)景的需求，讓我們的作品在視覺的世界中獨(dú)樹一幟。

在UI設(shè)計(jì)中，中性顏色透明度是一個(gè)非常重要的設(shè)計(jì)工具，它可以提升界面的平衡感、視覺品質(zhì)，增加元素之間的層次感和空間感，以及創(chuàng)造舒適且現(xiàn)代感的設(shè)計(jì)風(fēng)格。通過合理選擇透明度級(jí)別，并在不同元素的應(yīng)用中靈活運(yùn)用，我們可以創(chuàng)造出令人愉悅和吸引人的界面。

鼓勵(lì)設(shè)計(jì)師們?cè)赨I設(shè)計(jì)中靈活運(yùn)用中性顏色透明度，并探索出獨(dú)特的設(shè)計(jì)風(fēng)格。根據(jù)不同的設(shè)計(jì)目標(biāo)和色彩搭配，選擇合適的透明度級(jí)別，并結(jié)合其他設(shè)計(jì)元素，為用戶呈現(xiàn)出現(xiàn)代且優(yōu)雅的界面。當(dāng)然，這個(gè)方法并非一勞永逸，希望在實(shí)際工作中留意并找到適合自己和項(xiàng)目的方法。讓我們的設(shè)計(jì)在色彩的世界中綻放光芒吧！