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