蒐集了百種配色工具，該如何應用至UI設計？. App ... - Medium

App配色流程及工具分享. 前言. 這篇文章適合想要快速產生一定質量配色方案的初階設計師閱讀，文章 ... 選擇了好看的色票套用到app介面，卻還是歪樓? HomeNotificationsListsStoriesWritePublishedinAAPD — AsAProductDesigner·蒐集了百種配色工具，該如何應用至UI設計？App配色流程及工具分享前言這篇文章適合想要快速產生一定質量配色方案的初階設計師閱讀，文章內容主要分享自己的「配色流程」及「配色網站的使用」，讀完這篇文章可以對色彩理論及配色網站工具的使用有基本的認識與操作。

痛點每次配色前爬文看到「必備配色神器」就心癢儲存成各種書籤，但還是不知道如何使用它們，總之先存再說?!選擇了好看的色票套用到app介面，卻還是歪樓?覺得配色突兀，但不知道怎麼快速且有效地調整…這篇文章針對以上痛點提出解法及實際使用範例。

本文架構ㄧ、色彩基本名詞、色彩理論影片分享二、配色流程1產品定位後，brainstorming提取關鍵字2依關鍵字製作情緒板3圖片色彩提取網站工具，決定色票4顏色套用三、色彩突兀時該如何調整1色彩突兀的原因及解決方法2使用網站工具調整色調/飽和度/明度四、其他配色資源五、參考資料ㄧ、色彩基本名詞、色彩理論影片分享一開始接觸配色時，雖然知道聽說過色相環，但是看到密密麻麻的色彩理論還是忍不住睜一隻眼閉一隻眼？沒關係，下面這個影片用6分半的時間快速讓你理解色彩基本概念↓影片內容重點：1Hue：表達顏色的詞Saturation：飽和度，指強度、顏色黯淡或明亮有活力Value：顏色的明暗、深淺2單色配色法、相似色配色法、互補色、分裂互補色、三元配色法、四元色搭配3幾個經典的顏色使用準則4可讀性是任何設計中的重要因素5每種顏色都會傳達不同的訊息，重要的是記住專案的特質，然後選擇合適的配色方案讀懂色彩理論的初階目的以記住色相、飽和度(純度)、明度的觀念為主，下一步才能實際使用配色工具進行配色。

二、配色流程理解影片中說明色彩在設計專案中的重要性後，根據產品定位，定義要給目標使用者的視覺感受，以下分享實際應用在app設計中的配色流程。

1使用brainstorming提取關鍵字寫下產品想要傳達給目標使用者的視覺感受名詞，例如：產品想要的視覺風格是有活力、親和力、快樂，可以用這幾個詞發想較具體的名詞進行關鍵字搜尋圖片。

2依關鍵字製作情緒板(Moodboard)將關鍵字以英文字彙搜尋質感圖片，下一步拼貼情緒版。

情緒版除了可以幫助自己確認想要傳達的視覺概念，公司內部視覺提案也可以運用，後續產品設計的風格也可以幫助自己初步定位。

質感圖片來源網站https://unsplash.com/快速情緒板製作網站https://spark.adobe.com/make/mood-board-maker/這個線上網站提供了關鍵字搜尋及圖片拼貼模板，可以快速拼貼出像以下這樣的情緒板。

在sparkadobe輸入”Happy“，拼貼出的圖片3圖片色彩提取網站工具，決定色票製作出情緒板後，可以用運用下面這些網站提取色彩，產出colorpalette，建議最多選擇三種顏色(不含黑白)，並定義出主色及輔助色。

兩款自動產生色票工具：左：https://www.canva.com/colors/color-palette-generator/右：https://colors.muz.li/有時自動擷取的色彩不滿意時，我會選擇下面這個手動顏色提取工具。

https://www.huesnap.com/snap這個工具在吸色後也會針對你選擇的顏色提供不同的「色彩建構」配色方案，如下圖。

產出自：https://www.huesnap.com/snap從以上方法，可以產出下面這三個顏色：如果覺得有還可以更好的空間，可以找找平時常用的色票網站，看看這幾個色系的組合方案，初步決定好後就可以試著套用進wireframe中測試囉！4顏色套用有了色票之後，把色碼放進下面這兩個網站：左：https://material.io/resources/color右：https://colors.muz.li/測試在UI介面的呈現效果，或是套用進自己的wireframeUIKit，進一步確認是不是想要呈現的配色，測試和自己預想的效果是否有落差。

套用後：最左：https://material.io/resources/color右2張：https://colors.muz.li/套用到網站後，感覺大致上沒太大問題，就可以開始套用到自己畫的元件中，如下圖。

到這邊覺得對#5BC9D4有點不滿意有點突兀，建議可以在平常蒐集的色票網站中套用挑選的顏色激發更多靈感，下一段來說說色彩微調的方法，並調整覺得突兀的顏色。

補充：按鈕漸層色可以快速使用這個網站找到延伸色做變化https://www.colorhexa.com/三、色彩突兀時該如何調整色彩突兀的原因最常見的有三個，「使用太多顏色」、「色彩飽和度太高」、「色彩對比不足或過多」。

我們在上一段選好了我們的色票後，已避免掉「使用太多顏色」的雷區，接著針對飽和度及色彩對比做分析。

步驟1我們可以把覺得突兀的畫面轉成黑白圖片，檢視色彩的平衡。

例如：把圖片置入Sketch，並在平常編輯STYLE的欄位，找到一項「ColorAjust」的項目勾選起來，並把圖片的Saturation調整到-100%，把圖片轉成黑白後，可以看到目前哪些顏色達到平衡，檢視哪個顏色「對比太強」或是想要「強調的對象」設定錯誤。

左：調整前/中：Sketch中的圖片調整欄位/右：黑白化後這邊可以發現SignUp的按鈕在畫面中較不平衡，可以從延伸色再做點調整;黃色logo的平衡可以更好;藍色在彩色稿中微突兀，轉為黑白後色彩大致上是平衡的，可以透過下面步驟2的網站調整飽和度測試。

步驟2把剛剛一開始產生三個色票的色碼貼進下面這個網站做飽和度(Saturation)調整，把三個顏色的飽和度統一跟紅色一樣調整到48，這邊我以佔版面最大的顏色為調整的基準。

左：調整前/右：調整後接著來看看調整飽和度後，套用到元件上的感覺如何。

嗯～看到這邊是不是會覺得是右邊底色變淡了吧！別騙喔，但底色的確是共用同一個symbol呢！覺得神奇，一點點的調整可以影響這麼大～另外補充：其實也可以在一開始提取色彩的時候就做飽和度的數值調整，但個人比較喜歡先以不調整的狀態去套用元件，說不定有意想不到的組合效果～還有，若產品已有品牌色，可以把品牌色當作主色再進行配色流程，再調整應用在介面上的色彩比例。

結語系統化自己的配色流程後，接著會發現只有配色技巧還是不夠，排版也會是影響美感的關鍵，對我來說增進設計能力的動力，可以在實作的過程中挖掘，並實際感受自己的程度在哪，當做不出自己想要的效果時，自然就會想學習更多更多。

最後想說，踏進UI設計領域前就知道水有多深，明白要學習的地方還有很多，所以實際工作後，很多時候會覺得自己還不夠好，但不用因此氣餒，只要告訴自己今天比昨天更進步一點，這樣就足夠了。

第一次寫文章，醞釀了好久的想法，工程師同事問我配色是怎麼決定的，才脫離難產整理自己的配色流程給大家參考，希望這篇文章有幫助到任何對配色有興趣的夥伴。

有更好的配色方法及文章想法，希望各位設計大神路過給予建議：）四、其他配色資源設計資源總匯|奧革設計：https://ogdesign.tw/resourcesAdobe色輪：https://color.adobe.com/zh/create想要激發設計想像力時可以逛的網站，還可以指定色彩尋找各種設計靈感https://www.designspiration.com/五、參考資料超实用！写给零基础新手的配色指南色彩設計概念篇：為什麼我的配色亂七八糟？從配色書籤裡挖出來的各大網站UnderstandingColorHowToUseColor—ColorBasics(videotutorial)平面設計入門：顏色色彩印象座標如果這篇文章有幫助到你，別忘了拍個手，讓我更有動力寫出更好的文章！MorefromAAPD — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected] — AsAProductDesignerGetstartedLevanaLi46FollowersAsaUI/UXdesigner,Ilovecreatingfantasticandeasytouseproducts.FollowRelatedpushthepausebuttonCreatingcreativespaceisadelicatebalancebetweeninspiration,absorption,immersion,gestation,process,andproduction.Atwonder|…CaseStudy:ActiveEssexxPlayedHowPlayedishelpingActiveEssexpromotelocalsportingactivitiestotheircommunitythroughtheFindYourActiveActivityFinder.CreatingaDataVisualizationWebsiteforFarmworkerAdvocacyAbstractPainterFrancisScorzelliPlayswithIntuitionandLogic,MemoryandDreamsHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable