構建一致配色方案嘅方法：從品牌色入手，用漸變分割法整色板，再處理透明色同深色模式，確保界面色彩連貫。
呢篇文章嚟自公眾號「三分設」，分享咗喺重構Aloha瀏覽器時嘅色彩系統搭建經驗。作者指出好多產品嘅色彩應用容易混亂，原因係大家都係逐個顏色加，搞到最後色板越來越多，失去連貫性。為咗解決呢個問題，作者提出咗一套系統化嘅方法：先從品牌色（強調色）開始，用漸變分割法生成統一嘅深淺色調，然後再擴展到其他顏色（紅色、綠色、橙色、黑色、白色、灰色），仲要考慮透明色同深色模式嘅處理。最後，佢建議用100-900嘅編號方式命名色調，方便將來插入新顏色。整體結論係：只要一開始就建立完整色板，並制定使用準則，就可以避免色彩混亂，提升產品體驗。
呢篇文章嘅對象係產品設計師，特別係嗰啲想改善設計系統色彩管理嘅人。作者唔單止講理論，仲分享咗具體嘅操作步驟，例如點樣用漸變分割法、點樣調整端點色調令色板更活潑、點樣分開黑色灰色白色色板以方便深色模式等等。佢仲提醒大家唔好怕改變漸變端點，必要時可以加額外控制點調整亮度。最終目的係令設計師可以掌握一套可複用嘅色彩工作流，減少來回修改嘅時間。
-
色彩混亂嘅根源係隨意新增顏色，應該從一開始就建立完整色板，避免「滾雪球」。
-
漸變分割法係關鍵：將實際顏色漸變分成9等份，取每段中間色調，確保過渡自然。
-
調整漸變端點色調（例如深色偏紫、淺色偏綠）可以令色板更豐富，避免單調。
-
黑色、灰色、白色色板要分開命名，因為界面需要多種灰色支援深色模式，透明色亦要另外處理。
-
顏色編號用100-900，方便日後喺中間插入新色調（例如550、575），保持擴展性。
好多設計師都習慣「用咗先講」——二級文本需要灰色就加一個灰色，圖標需要淺灰又加一個，結果越加越多，最後連貫性盡失。作者話呢個係好普遍嘅問題，尤其係唔專業嘅設計師根本唔在意細節。要解決，就要喺開始界面設計之前，為每種顏色準備好色板。
標準界面通常需要以下顏色類別：主文本同圖標用黑色；二級文本、圖標同描邊用灰色調；按鈕等可點擊元素用強調色；狀態用紅、綠、橙；圖表同標籤再用額外顏色。作者建議從強調色（品牌色）開始，因為佢賦予產品獨特性。
漸變分割法係從前阿里同事學到嘅技巧
用喺界面上實際要用嘅顏色做漸變端點，唔好從#000000到#ffffff。將漸變分成9等份，然後將端點移到第一段同最後段嘅中心，再從每段揀中間色調，就得到初始色板。如果覺得單調，可以將較淺色調調暖啲，成個感覺會更活潑。
想更加豐富？唔好怕改變端點色調。例如深色偏紫、淺色偏綠。如果某啲顏色唔理想，可以喺漸變入面加額外控制點調整亮度，色板依然保持精準。
強調色搞掂之後，用同樣方法整紅色、綠色、橙色色板。注意：加黑色去加深橙色會令佢變暗，加紅色反而更好。跟住搞黑色同灰色，呢兩種色嘅色板要分開，因為界面需要多種灰色，尤其係深色模式。
額外顏色（例如圖表用色）雖然唔使多種色調，但作者都整合到一個調色板入面，方便一齊管理。
將顏色融入界面之前，先要命名。作者建議用100到900嘅編號，而唔係1、2、3。因為咁樣可以隨時喺中間插入新色調（例如550、575），擴展性好。
色板就好似顏料盒，唔好急住用。下一步要制定顏色使用準則，即係語義層，避免成堆顏色搞到混亂。呢篇文章只係第一部分，下一章會深入講語義層。
-
每個色板入面，深淺唔同嘅顏色從100排到900。
-
中間可以任意插入，例如950、975。
-
黑色灰色白色色板分開，雖然佢哋只係同一顏色嘅深淺。
你好，設計師，歡迎加入翻閲計劃 2025，同我哋一齊提升產品同設計思維，成為改變世界嘅新時代設計師。目標每年至少一齊睇 100 篇文章，接下來，我哋一齊開始今日嘅閲讀 📖。
設計系統係產品能夠呈現好體驗嘅基礎，係非常重要嘅組成部分，所以，我哋參與嘅每一個產品，我哋都會積極構建或完善設計系統。其中，我哋喺重構大多數產品嘅時候發現，色彩應用往往係最易混亂，亦都係最易導致產品觀感唔好嘅因素之一。我哋通常會根據需要逐步引入顏色。如果二級文本需要一種灰色，咁我哋就直接新增一個灰色。同樣，如果圖標需要更淺嘅灰色，我哋都直接新增。呢種係好普遍嘅工作流程。
如果，呢個時候我需要一種灰色嚟勾勒文本框。但係，呢種灰色對分隔線嚟講又太深，對文本嚟講又太淺。其實，問題已經開始出現，接下來就會好似滾雪球咁越滾越大，直至到某個階段，一個產品用嘅顏色越來越多，搞到系統失去連貫性。呢種情況係咪好熟口面呢？（不過，都有好多唔專業嘅設計師根本唔在意呢啲細節）喺我哋服務眾多唔同行業、唔同終端嘅產品入面，幾乎所有界面嘅色彩處理流程都係極為相似嘅。4. 負面、正面同警告狀態分別用紅色❤️、綠色💚同橙色🧡。5. 喺強調色或深色背景上面嘅表面及元素用白色🤍。6. 另外，圖表或標籤仲會用到幾種額外嘅顏色🩵💜🩷💛。接下來，我分享喺重構 Aloha 瀏覽器嗰陣用嘅方法，同大家一齊探討。我通常由強調色開始入手。佢往往係品牌色，令產品界面有獨特性。同時，我仲需要呢個顏色嘅唔同深淺色調。咁我就開始準備呢啲色調。為咗確保色調之間過渡自然，保持色調一致性，我會用漸變分割法。呢個係我以前阿里嘅同事度學到嘅技巧。而家，將漸變分成 9 個等份，將漸變嘅端點移去第一段同最後一段嘅中心位置。由每一段入面揀中間嘅色調，咁樣就可以得到初始色板。有時，喺界面入面用同一色調嘅唔同深淺，可能會顯得單調。留意睇嚇，如果將較淺嘅色調調得暖啲，整體睇起嚟就會更活潑。如果想令色板更豐富多樣，唔好怕改變漸變端點嘅色調。喺呢個例子，我將深色調得更偏紫，淺色調得更偏綠。我發現某啲顏色睇起嚟唔係咁理想。透過喺漸變入面加額外嘅點並調整亮度，色板仍然保持準確，而且所有顏色而家睇起嚟都幾好！直至對強調色嘅色板滿意之後，用同樣嘅方法為紅色、綠色同橙色建立色板。如果透過加黑色嚟加深橙色，橙色會變得暗淡。加啲紅色嚟加深橙色會更好。直至對呢啲初始顏色感到滿意之後，就將注意力轉移到黑色同灰色上面。呢個時候，我就可以為文本同埋描邊揀合適嘅色調。我會將黑色、灰色同白色嘅色板分開，即使佢哋只係同一隻顏色嘅唔同深淺。界面通常需要多種灰色同黑色，尤其係支援深色模式嗰陣。所以，將佢哋分成唔同色板去用會更方便。此外，透明色調嘅使用，呢一點我哋稍後都會講。即使唔打算喺界面入面用純黑色 #000000，我都會將佢加入色板入面。到目前為止，我哋只討論咗唔透明嘅純色。不過，喺實際運用入面，我哋好經常會需要透明色，例如：用喺遮罩或各種視覺效果。喺多數情況下，呢啲透明色係指黑色同白色嘅透明色調。如果需要鮮豔顏色嘅透明元素，咁就揀該顏色嘅某個色調，以唔同透明度加入調色板入面。如果界面要實現深色模式，咁就為降低亮度之後嘅鮮明色彩單獨建立色板。黑色同灰色嘅色板喺深色同淺色模式下都可以順暢適配。喺重構 Aloha 瀏覽器嘅時候，我將額外嘅顏色用喺圖表同標籤。雖然呢啲顏色唔一定需要多種色調，但我都決定將佢哋整合到一個調色板入面。而家，可以將呢啲顏色融入到界面入面喇。首先，我會為每一個顏色改名。喺每個色板入面，我俾深淺唔同嘅顏色由 100 到 900 編號。點解用呢種編號方式而唔係 1、2、3… 呢？呢種方式可以令我哋根據需要喺中間插入任意多嘅色調，例如 550、575，或者 950、975 等等。好嘢，建立一個最基本嘅色板，完成。呢個時候，將佢想像成我哋設計界面嘅顏料盒。唔好急住開始用，下一步，我仲要制定顏色使用準則，以免呢堆顏色喺使用過程中造成混亂。下一章，我哋再一齊深入瞭解色板，並引入語義層。最後，我哋希望呢篇文章可以為你提供一啲小小嘅啟發。順便講嚇，唔好忘記俾我哋一鍵三連喎！（點讚👍 、推薦 🩷 同分享🤝），你嘅支持係我哋堅持分享嘅動力。如果你對【設計】有興趣，可以持續關注我哋嘅公眾號【三分設】同埋添加為常讀。如果你喺【職業】【副業】【創業】遇到疑問，歡迎加入我哋嘅【知識星球】，你可以揾到答案同夥伴。我哋會喺每星期六嘅晚上，透過視頻號（📱）直播，同設計師們連線，解答用戶體驗設計相關案例、職業同創業方面嘅問題。歡迎你嚟連線。- END -
呢篇文章部分觀點同圖片都來自網絡
內容係個人職場生涯或閲讀國外文章嘅所思所想
如果喺閲讀過程中發現錯誤同漏洞
歡迎廣大粉絲家人唔吝指正
如需轉載，請註明出自#三分設
本文已經獲得原作者授權翻譯同轉載
如需獲取授權截圖同原文連結
可以聯絡小助手【小小蟲】
期待同更優秀嘅產品設計師一齊成長
👇👇👇
共創 / 交流 / 成長
掃碼入羣
你好，設計師，歡迎加入翻閲計劃 2025 ，和我們一起提升產品和設計思維，成為改變世界的新時代設計師。目標每年至少共讀 100 篇文章，接下來，我們一起開始今天的閲讀 📖 。
設計系統是產品能夠呈現好體驗的基礎，是非常重要的組成部分，因此，我們所參與的每一個產品，我們都會積極構建或完善設計系統。其中，我們在重構大多數產品中發現，色彩應用往往是最容易混亂的，也最容易導致產品觀感不佳的因素之一。我們通常會根據需要逐步引入顏色。如果二級文本需要一種灰色，那麼，我們就直接新增一個灰色。同樣，如果圖標需要更淺一點的灰色，那麼，我們也直接新增。這是一種非常普遍的工作流程。
如果，此時我需要一種灰色來勾勒文本框。然而，這種灰色對於分隔線而言又太深，對於文本而言又太淺。其實，問題已經開始出現，接下來，就會像滾雪球一樣越滾越大，直至到某個階段，一個產品所使用的顏色越來越多，導致系統失去連貫性。這種情況是不是很熟悉呢？（不過，也有很多不專業的設計師根本不在意這些細節）在我們服務眾多不同行業，不同終端的產品，幾乎所有界面的色彩處理流程都是極為相似的。4. 負面、正面和警告狀態分別使用紅色❤️、綠色💚和橙色🧡。5. 在強調色或深色背景上的表面及元素使用白色🤍。6. 另外，圖表或比標籤還會用到幾種額外的顏色🩵💜🩷💛 。接下來，我分享在重構 Aloha 瀏覽器所採用的方法，和大家一起探討。我通常從強調色開始入手。它往往是品牌色，賦予產品界面的獨特性。同時，我還需要這個顏色的不同深淺色調。那麼，我就開始準備這些色調。為確保色調之間過渡自然，保持色調一致性，我會使用漸變分割法。這是我從前阿里的同事那學到的技巧。現在，將漸變分成 9 個等份，把漸變的端點移到第一段和最後一段的中心位置。有時候，在界面中使用同一色調的不同深淺，可能會顯得單調。注意看，如果把較淺的色調調得暖一些，整體看起來就會更活潑。如果想讓色板更豐富多樣，不要害怕改變漸變端點的色調。在這個例子，我把深色調得更偏紫，淺色調得更偏綠。我發現某些顏色看起來不太理想。通過在漸變中添加額外的點並調整亮度，色板仍能保持精準，而且所有顏色現在看起來都還不錯！直至對強調色的色板滿意後，用同樣的方法為紅色、綠色和橙色創建色板。如果通過加黑色來加深橙色，橙色會變得暗淡。加點紅色來加深橙色會更好。直至對這些初始顏色感到滿意後，就把注意力轉移到黑色和灰色上。此時，我就可以為文本和描邊挑選合適的色調了。我會把黑色、灰色和白色的色板分開，即便它們只是同一顏色的不同深淺。界面通常需要多種灰色和黑色，尤其在支持深色模式時。因此，將它們分成不同色板使用會更方便。此外，透明色調的使用，這一點我們稍後也會講到。到目前為止，我們只討論了不透明的純色。然而，在實際運用中，我們經常會需要透明色，比如：用於遮罩或各種視覺效果。在多數情況下，這些透明色指的是黑色和白色的透明色調。如果需要鮮豔顏色的透明元素，那就選該顏色的某個色調，以不同透明度添加到調色板裏。如果界面要實現深色模式，那麼，就為降低亮度後的鮮明色彩單獨建立色板。黑色和灰色的色板在深色和淺色模式下都能順暢適配。在重構 Aloha 瀏覽器的時候，我將額外的顏色用於圖表和標籤。雖然這些顏色不一定需要多種色調，但是，我還是決定把它們整合到一個調色板裏。現在，可以把這些顏色融入到界面裏了。首先，我會給每一個顏色命名。在每個色板中，我給深淺不同的顏色從 100 到 900 編號。為什麼用這種編號方式而不是 1、2、3… 呢？這種方式能讓我們根據需要在中間插入任意多的色調，比如 550、575，或者 950、975 等等。很好，構建一個最基礎的色板，完成。此時，把它想象成我們設計界面的顏料盒。不要着急開始使用，下一步，我還要制定顏色使用準則，以免在這一堆顏色在使用過程中造成混亂。下一章，我們在一起深入瞭解色板，並引入語義層。最後，我們希望這篇文章能夠為你提供一些小小的啓發。對了，不要忘記給我們一鍵三連喲！（點贊👍 、推薦 🩷 和分享🤝），你的支持是我們堅持分享的動力。如果你對【設計】感興趣，可以持續關注我們的公眾號【三分設】並添加為常讀。如果你在【職業】【副業】【創業】遇到疑惑，歡迎加入我們的【知識星球】，你可以找到答案和夥伴。我們會在每週六的晚上，通過視頻號（📱）直播，和設計師們連麥，解答用戶體驗設計相關案例、職業和創業方面的問題。歡迎你來連麥。- END -
該文章部分觀點和圖片均來自網絡
內容為個人職場生涯或閲讀國外文章的所思所想
如在閲讀過程中發現錯誤與疏漏之處
歡迎廣大粉絲家人不吝指出
如需轉載，請註明來自#三分設
本文已獲得原作者授權翻譯和轉載
如需獲取授權截圖和原文連結
可聯繫小助手【小小蟲】
期待與更優秀產品設計師一起成長
👇👇👇
共創 / 交流 / 成長
掃碼進羣
