做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的
2025-4-4 杰睿
在頁面中，我們時常會被各種絢麗的色彩所吸引。本文介紹了透明度系統(tǒng)的優(yōu)勢，并以實際例子展示其在解決設(shè)計問題、提高細節(jié)表現(xiàn)和可讀性方面的應用。讓我們一起看下去吧。
打開絢麗紛繁的頁面，我們時常會被各種各樣的色彩所吸引。但是，除了鮮艷奪目的顏色外，你可曾留意過那些看似平凡無奇的中性顏色？這些中性顏色在UI設(shè)計中扮演著不可或缺的角色，而其中的透明度系統(tǒng)更是隱藏著無限的魅力。今天，我們就要一起揭開透明度系統(tǒng)的神秘面紗，探索其在UI規(guī)范中的重要性和作用。
或許你曾聽過“Less is more”這句名言，透明度系統(tǒng)恰好就是這個理念的最佳體現(xiàn)。通過微妙的不透明程度調(diào)整，中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質(zhì)，還能增加元素之間的層次感和空間感。想象一下，通過透明度的微妙運用，你的設(shè)計將呈現(xiàn)出一種舒適且現(xiàn)代感的風格。是不是感覺很神奇？同時這個方法還是谷歌設(shè)計規(guī)范中的推崇之一哦！
在設(shè)計規(guī)范中，我們通常會根據(jù)文字的重要性將其分為重要、常規(guī)和輔助三個層級，然后為它們定義不同的顏色。但是，有時候使用定義好的顏色在特定情況下會出現(xiàn)識別不清晰、與背景搭配不美觀的問題。這就是透明度應用的典型場景。下面先說下使用透明度的優(yōu)勢：
接下來讓我們首先看看純色文字定義經(jīng)常遇到的問題吧。當設(shè)定文字與一些顏色元素搭配時，就可能出現(xiàn)一些尷尬的情況。
比如，下圖中相同顏色的文字在品牌色背景上，識別度低，視覺上也不是很和諧。
接下來，我們對文字顏色進行一些小小的改變，通過降低不透明度來解決這個問題。
效果立竿見影！降低不透明度后，文字識別問題迎刃而解，細節(jié)也變得更加清晰，文字顏色還與背景色融為一體，看起來更為和諧。
其實，不僅僅是文字，我們還可以用這個方法來改善其他元素的設(shè)計，比如表格的分割線。讓我們來看一個例子。
通常，我們使用較淺的顏色來填充分割線，在遇到有彩色背景的情況下，分割線可能會“隱身”。在下圖中，同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。
接下來，讓我們同樣的方法來改善這個問題。
效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍色，整體顏值得到了提升。這也展示了設(shè)計師在細節(jié)把控上的魅力。
那么這個方法如何應用到實際工作中呢？讓我們來介紹一下具體步驟。
首先，我們需要考慮文字的使用場景，大致分為淺色背景、深色背景和彩色背景。我們需要根據(jù)實際項目情況來確定使用場景。一般我們會在設(shè)定色階時也會根據(jù)實際項目設(shè)定一個深色和淺色的透明度階梯，例如：設(shè)定顏色#000000，依次設(shè)置透明度為90%、80%…20%、10%序列。當然這個序列可以分為有序序列和無序序列，85%、56%等等
接下來下面是對深色背景和淺色背景下文字顏色的定義，具體操作如下：對于淺色背景，我們將文字分為三個層級：重要、次要和輔助。針對這三個層級，文字顏色填充為#000000，并設(shè)置序列中對應的不同不透明度。具體來說，重要文字的不透明度設(shè)為90%，次要文字為60%，輔助文字為40%。在深色背景下，相同的操作也可以應用，只是將文字顏色設(shè)置為#FFFFFF（白色）。在彩色背景下，我們會根據(jù)具體情況選擇使用深色背景或淺色背景下的文字顏色，并根據(jù)需要進行透明度的調(diào)整。
最后，為了確保文字在不同背景下的清晰度和可讀性，我們需要進行對比度測試。可以使用對比度測試工具，來驗證所定義的透明度是否符合設(shè)計規(guī)范。（https://www.siegemedia.com/contrast-ratio）
但是，請記住，設(shè)計并不僅止于設(shè)計稿。最終需要前端同學來實現(xiàn)，而不是所有前端同學都熟悉并愿意使用透明度的系統(tǒng)。這時，我們可以運用我們的魅力和專業(yè)知識來說服他們。我們可以引用谷歌的Material Design官方文檔，證明透明度的可行性和簡便性。我們可以解釋這種設(shè)置透明度的方法不僅簡單，而且可以提高工作效率，同時還能增加用戶的視覺體驗。
通過使用透明度解決設(shè)計問題，我們可以使文字和設(shè)計元素更融合、提升細節(jié)表現(xiàn)，并提高用戶體驗。透明度的設(shè)置靈活多樣，能夠適應不同項目、不同場景的需求，讓我們的作品在視覺的世界中獨樹一幟。
在UI設(shè)計中，中性顏色透明度是一個非常重要的設(shè)計工具，它可以提升界面的平衡感、視覺品質(zhì)，增加元素之間的層次感和空間感，以及創(chuàng)造舒適且現(xiàn)代感的設(shè)計風格。通過合理選擇透明度級別，并在不同元素的應用中靈活運用，我們可以創(chuàng)造出令人愉悅和吸引人的界面。
鼓勵設(shè)計師們在UI設(shè)計中靈活運用中性顏色透明度，并探索出獨特的設(shè)計風格。根據(jù)不同的設(shè)計目標和色彩搭配，選擇合適的透明度級別，并結(jié)合其他設(shè)計元素，為用戶呈現(xiàn)出現(xiàn)代且優(yōu)雅的界面。當然，這個方法并非一勞永逸，希望在實際工作中留意并找到適合自己和項目的方法。讓我們的設(shè)計在色彩的世界中綻放光芒吧！
本文由 @Esc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設(shè)計的小編 http://m.ocunn.cn