沒有設計師時，產品經理該如何給產品配色？

12-06

如何選擇一種「安全」的配色方案，使 App 顏色看起來自然

謝 @Yeti 邀。回答這個問題之前，需要釐清一個概念，那就是——

團隊中可以沒有職位為「設計師」的人，但是不能沒有設計師這個角色。

對於每個互聯網產品，甚至是產品中的一個功能模塊，以下這些角色通常都是不可或缺的：

項目 Owner：設置項目目標，把控進度，溝通協調，對最終結果負責。
產品：連接用戶需求、使用場景和產品的業務模式、功能設置。
交互：根據產品使用的媒介，設計產品和用戶的互動關係，提升產品可用性和易用性。
視覺：向使用者傳達準確的信息，提升產品的視覺表現力，激發用戶情緒。
工程：應用技術手段在一定客觀限制內實現產品功能。
運營：在現有產品框架下通過各類人工干預實現產品目標。
市場：通過提升產品公眾認知、引導用戶行為的方式提升產品價值。
數據分析：從數據中提取信息、形成結論，輔助產品中的各類判斷和決策。

（只是一種從產品視角出發的粗略的劃分，每一項都還可以分得更細；排序不分先後）

獨立開發者，要一個人扮演以上的全部角色（不難想像他在其中某項能力上的長板/短板也就是這個產品在這一項上的長板/短板）。大公司的產品團隊，通常會給每個角色設置一個或多個細分的崗位，術業有專攻。創業公司中的常見情況，則是在一個項目中每人都分飾多角。如果有人說他的團隊中沒有這其中的某個角色，那麼很有可能在他們沒有意識到的情況下某（幾）個團隊成員實質上做了這個角色需要做的事情。

一般而言，很多早期團隊會由產品經理去補設計、運營等角色的短板。所以才有了這個問題「沒有設計師時，產品經理該如何 XX」。同時，提問者所在的產品應該對視覺表現力的依賴性不高，否則沒有設計師項目最初就無法啟動。

現在回來看問題，前提已經比較清楚了：

這個產品對視覺表現力的要求不高（不需要做非常複雜的設計）
團隊里暫時沒有比提問者更適合去填補設計短板的人（其他成員認可提問者的審美）

我的回答如下——

? 方法一：使用系統原生組件或成熟的第三方框架

iOS 和 Android 系統都有配套的交互和視覺規範，完全使用系統原生控制項，只做最小限度的修改和定製，就能得到不錯的效果。不滿意原生控制項的話，也可以選擇第三方的框架，比如 Web 端的 Bootstrap。系統原生控制項和成熟的第三方框架提供的，是一整套經過用戶檢驗的布局、交互、視覺方案。

iOS 和 Android 原生控制項示意（官網截圖）

很多第三方框架也會有多種不同配色方案的主題（Theme）。挑選合適的主題，與應用的主色調搭配，完全可以實現和默認配色非常不同的效果。再加上產品的 Logo 和一些特有的元素，就可以達到比較獨特的視覺效果。

? 方法二：學習和借鑒成熟產品的配色方案
如果對現成的解決方案不滿意，想要更多的設計和定製，首先需要向先行者學習。和很多人的直覺不同，直接研究完成的產品，學習效率並不高。我推薦多多參考優秀的設計規範和開發框架。原因是在這些規範、框架的示例和文檔中，會有各類組件的詳細說明，以及組件的樣式、可調整參數和不同組件搭配的使用方法。
不只是配色方案，從這些框架的設計中，還可以學到很多產品邏輯和交互的最佳實踐。

Bootstrap - https://getbootstrap.com/components/:

Material-UI - http://www.material-ui.com/#/customization/themes

React Toolbox - http://react-toolbox.com/

? 方法三：主動學習一些色彩相關的理論和配色的原則，自己多嘗試
前面兩個方法更像是立即可用、繞過核心問題的替代方案。如果對結果有更高的追求，就勢必要系統的學習一些色彩相關的知識。如果產品需要在一段持續的時間內做設計決策，就無法避開這個步驟。

這件事本身足以寫本書，我在這個回答中所寫的，僅僅相當於畫畫重點。希望通過這些線索可以幫你定位解決具體問題所需的知識。

先列出幾個關鍵詞，可以直接閱讀相應的 Wikipedia 頁面，也可以在 Google 中搜索，把排序靠前的網頁都看一看。

Color Theory (Wikipedia, Google) - 基本的色彩理論，其中需要了解的重要概念包括：

合成色彩的原理，加色法（Additive Color）、減色法（Subtractive Color），以及他們在現實中的應用，如電子屏幕和印刷品的差異
色彩的明度（Lightness）、純度（Saturation）、色相（Hue）三個重要概念的意義，不同明度/純度/色相的顏色帶來的觀感有哪些不同，以及在設計中應該如何使用
補色、冷/暖色、對比度、色調、色溫、灰度圖像等概念
常見的色彩模型（色彩空間）：RGB, HSL, HSV, CMYK

Color Scheme (Wikipedia, Google) - 各類常用配色方案，以及他們的適用場景
Computer Graphics (Wikipedia) - 計算機圖形學。略微超綱，有能力的話建議也了解下

像素、點陣圖、矢量圖、調色盤、色彩深度、透明（Alpha 通道）、非線性漸變、陰影等概念

HSL、HSV、RGB 色彩空間示意圖（引自 Wikipedia）

上面這些概念和術語，無論在英文還是中文中，都有意思相近的不同表達方式。一些術語在產品設計、繪畫、印刷等不同語境下也有不同的含義。閱讀過程中應該留意，分辨相似表達的細微差別，同時不要拘泥於某一種特定翻譯。以免未來在和其他人溝通時造成誤會。

了解了色彩的基本知識後，就可以把他們應用到設計中。

iOS Human Interface Guidelines 和 Google Material Design Guidelines，每個產品和設計師都應該讀一讀。這兩份 Guidelines 中都有針對色彩使用的說明（Color - Visual Design - iOS Human Interface Guidelines, Color - Style - Google Design Guidelines），我挑選其中幾條重要的原則簡單轉述一下。

為你的應用選擇一個與產品 Logo 和品牌相符的主色
在主要的可交互元素上使用一致的顏色
盡量只用有限的幾種顏色來生成調色板（即在整個應用中使用有限的色彩組合）
提供充足的對比度，考慮不同光照條件下的顯示效果，保證對色弱和視覺受損用戶可用
在可能的情況下使用透明而非灰度顏色，使得元素出現在不同背景色中都能被識別

許多色彩使用的技巧會隨著一時的審美潮流變化，比如早期桌面系統使用漸變創造的 3D 突起效果，比如擬物設計中頻繁出現的高光和陰影，現在扁平化設計中都已經很少使用。但是我在上面列出的這些色彩使用原則，比較基礎，基本適用於所有平台、設計風格和產品形態。

以上就是我針對不同基礎的人和不同的適用場景給出的三個方法。希望對不同階段的人都有幫助。

短時間內把這些知識融會貫通、靈活運用並不是一件簡單的事。最後我再介紹三個自動生成配色方案的小工具，讓沒有設計經驗的人也能快速上手。

Coolors.co - 隨機，基於一種或幾種主色，或從現有圖片中提取，自動生成調色盤
Material Palette - 選擇視覺主色和交互主色，自動生成適用於 Material Design 的調色盤
Paletton - 非常方便直觀的顏色選擇，並且可以高度自定義的調色盤生成工具

使用這幾個工具生成的調色盤，就可以滿足問題的要求，給你的產品一個立即可用的安全和自然的配色方案。在這個基礎之上，學習方法三裡面的知識和概念時，也可以研究和揣摩下這幾個工具是基於什麼原理來生成配色方案的，相信你會有更深的理解。

首先不建議做配色，會限制設計師發揮，但如果一定要做，有以下的一些方法：

借用現有第三方庫，做簡單素色，如這樣：

（版權: Sladedesign）

當然，如果強行要上色/做樣式，可以參考一些現成的配色及樣式方案（或組件庫），如常見的bootstrap風格:

比如Twitter風格：

Semantic:

Raised:

Chubby：

Round：

Amazon：

Material：

GitHub:

（以上示例摘自 Semantic UI）

當然，如果喜歡DIY，可以看看這裡，一個日本的配色站 NipponColors

同時支持動態配色:

附網址 NIPPON COLORS 這站我能玩一天

當然，也可以參考一些商業設計稿，最簡單的方法，是到一些模板站，或者設計站，這裡隨便舉幾個。
我常用（常來買插件）的Themeforest:

各產品均有live preview，按F12抄配色即可

附網址：Website Templates WordPress Themes from ThemeForest或者到一些設計師網址，也是隨便舉個例子，ui8，進入UI KIT頁面，你需要的配色方案在裡面，裡面也有些免費素材（freebies）

如果還能想到別的，我再補充

先推薦一個基於 Angular、Bootstrap3 的前端框架，裡面有多種配色可選。

吸取顏色，移動端直接抄就可以了。

選擇合適的配色，要結合自身產品的風格。
參考競品或者與自己風格相似的產品，是一種比較穩妥的方式。

比如：
知乎的藍白，科技理性
Enjoy 的黑白，高端大氣上當子
Nice 的黃黑白，活潑歡快

如果要自己調顏色，可以去 Dribbble 找找靈感。

關注我的朋友都知道我只要回答問題就是來提供實用的乾貨滴~
決定設計好壞因素有很多，顏色就是其中一個相當重要的元素，色彩搭配一定程度上決定著APP的設計風格。
既然題主想要「安全」的APP配色方案，使 App 顏色看起來自然，那就分享大量的乾貨供產品經理和設計總監在沒有設計師在場的時候使用。

------------------分割線---------------------

1.首要推薦的就是Material design風格的色彩搭配Material Design Color Palette Generator

點擊其中兩個顏色就可提供自然協調的APP主要配色。

2.參考優秀配色的APP界面設計也是一種有效的方法

iOS / Mac inspiration, Daily a€「 iOSUp

這個網站裡面有很多設計前沿的優秀用色作品。

3.提供各色系安全色，同色系色值採取Material Design Colors

4.還有一種方法很有意思，找一張你喜歡的色彩協調的圖片，提取其中之色用到APP界面，必然也不會錯。Discover — Art amp; Design Inspiration at ColRD.com

設計配色 _圖片素材欣賞

5.正兒八經的WEB安全色：Web安全色

6.國內良心色彩搭配網站，有理論，有實例，有教程配色網-致力色彩搭配方案的交流與學習

7.ios風格顏色：iOS 7 colors

8.Explore - Coolors.co漂亮的配色

9.uiGradients - Beautiful coloured gradients特別喜歡的一個漸變色採取網站

10.draGGradients -- create custom css radial-gradients dragging your mouse另一個特別漂亮的漸變色

色彩搭配的原理和方法都是相通的

個人認為，色彩搭配工具也只是工具，關鍵還是自己對色彩的理解和把握。

------------------設計相關回答-------------------

·如何做設計月薪上萬？ - 莫若的回答

·UI 設計初學者應該怎樣入門？ - 莫若的回答

UI設計交流群：414632028

引入情緒板的方法：
介紹可以參考（用戶研究方法介紹——情緒板（Mood Board））

思考產品的特性，和產品希望給用戶帶來的感覺，盡量用直覺感性的去嘗試描述，並且提出情緒關鍵詞。比如你做一個手機安全的app，可能會提出，可靠，安全，科技，快速，等這樣的Keywords，然後根據這些辭彙來選擇可以表現這種感覺的一些圖片。比如從可靠，安全有可能就找到一些深藍，綠色，金屬質感的圖，然後根據這些圖來取色，可能就能代表你的產品。
情緒板可以很多人參與，圖片也可以大家一起找，在找Keywords的過程中也許大家對產品本身到底會給用戶帶來什麼，有新的感想。

我的做法，去 Color Trends + Palettes :: COLOURlovers 這樣的網站找一個看著順眼的配色。
順便看看競品的顏色……
當然，這只是我覺得。因為我遇到的設計師小夥伴都很給力。

產品配色，除了題主點名要求的「安全」（意為不出格，不辣眼睛），還有一些別的限制，比如起碼的「風格適宜」，「可讀性過關」和要求高一點的「和諧美觀」。

作為非職業的設計師，做到「安全」，「風格適宜」和「可讀性過關」就可以。「和諧美觀」請交給設計師處理，沒有全職設計師也可以找設計師做一下付費諮詢，讓專業人士稍微指點修改一下。這個只要不是個大爛攤子，設計師還是很願意業餘賺兩個小錢的。

那我就重點講前三點啦。

1. 安全（不出格，不辣眼睛）

最安全最靠譜的方法是黑白灰附近的顏色+一個亮眼的主題色（一般是品牌色）。如果你的產品有logo，請大膽的選擇logo上的顏色來輔助設計，如果連做logo的設計師也沒有……那轉第二條看怎麼找風格相符的顏色吧。

栗子一大筐，你能想到的app可能80%都是保守色＋主題色。上排左到右：知乎，FB，Twitter，下排左到右：Jelly，Apple Music iOS 9，Fancy。

啊對了，黑白灰可以不完全是中性的黑白灰，比如騰訊的全民k歌，底下那欄與其說是灰色，不如說是棕灰，是偏暖的，有些app則是冷灰，是摻了藍紫色的。既然都說到全民k歌了，歡迎加我好友個人主頁 - 全民K歌

使用方式大致有三種：

底欄點亮的圖標用主題色，其他少量元素用主題色（知乎，Jelly，Fancy）
有鏈接可點擊的部分用主題色，底欄點亮的圖標用主題色（Twitter，Apple Music iOS 9）
狀態欄用主題色，底欄點亮的圖標用主題色（FB）

我個人更喜歡第一種，第二種也ok，最不喜歡第三種，感覺顏色被過度使用了，尤其是FB藍那麼丑……我個人喜好哈，如果是新app，要建立品牌識別度，是可以這麼做的。

新的趨勢是重排版，輕色彩。
感受一下如果微信的標題欄也是綠的，是不是一片生機……但看多了容易審美疲勞？
感受一下中間和右邊的Instagram移動版和網頁版，都是黑白的，收斂的設計，突出了內容本身。

大家對蘋果音樂的新設計褒貶不一，但可以看出同樣的新趨向，用排版來進行強調，色彩運用上更謹慎，如果標題全換成那個玫粉色，是不是又要瞎……

Airbnb的app懶得截圖了，和網頁差不多，也是用更大的字型大小和字重做層次，而不是把所有重要的地方都搞成彩色的。常見雷區是什麼呢？

主題色使用過度
飽和度太強
色彩太多

主題色使用過度：保守色＋主題色，保守色（黑白灰近似色）至少得80%～90%吧，這裡我們重安全，那種又花又艷還美的，太難做了，不在討論範圍之內。

飽和度太強：上圖來自設計師配色寶典！教你從零開始學配色（一）講解互補色用這個圖沒什麼問題，但app里全是飽和到爆表的顏色就沒法看了。取色的時候最好不要取到頂點（下圖的右上角），稍微低調一點點，會比較不辣眼睛。（請無視透明度，截圖的時候不小心多截了）

色彩太多：網上的調色盤也不知道坑了多少人，看著超美，實際上一個app里很少會用到那麼多種顏色。用這些零散的小顏色做icon什麼的沒問題，但微信那樣的app，如果切換一個tab，界面就換一個顏色的話，很快用戶就崩潰了……

2. 風格適宜（比如，小清新不搞冷艷酷，嚴肅冷靜不搞靈動活潑）

作為設計師在和非設計師（一般是客戶）溝通視覺效果的時候，我最喜歡要兩樣東西，一是客戶喜歡的風格的例子，二是moodboard（大概叫情緒板？imageboard差不多也是這個功能）。這兩樣不需要他們有設計功底，所以作為pm，自己建立這兩個庫的時候，也不需要你有設計功底啦。

客戶喜歡的風格的例子可以去Dribbble，站酷等網站搜關鍵詞，比如用戶面板，搜索結果是這樣。

如果他喜歡前排的，可能他想要的是濃烈鮮明的，如果他喜歡後排的，可能他想要的是清新柔和的，注意這不只是light mode和dark mode的區別，與主題無關就不展開了。

moodboard與主題有關，講講這個～

比如說你的產品和自然景觀有關，可能收集來的board上就有很多天和水的藍，冰雪的白，山脈的褐色，就不會取大紅大綠作為品牌色。（此圖來自網路）

比如你的產品是時尚相關的，可能會有當季流行色，有金屬色，有很多黑白。（此圖來自網路）

如果是體育產品，除了黑白可能還有很多熒光色。（此圖來自網路）

如果是家居類的，可能有米黃的窗帘，原木的桌子，白色的床鋪，一點鮮艷的水壺啊之類的小點綴。

如果是高級酒店，可能有深色大理石，白色或者金色桌布，搖曳的小蠟燭，昏暗的頂燈，有沒有想到Enjoy那個美食app呢？

moodboard不要求只收集競品，基本上與主題相關的，所有的圖都可以堆起來，直到你找到一種色彩能和你的產品產生共鳴。

紅色橙色熱情，綠色藍色冷靜什麼的都講爛了，略～有興趣可以看這裡：用戶體驗設計遇見色彩情感。

3. 可讀性過關（比如，大面積的紅底藍字請圓潤離開）

這個作為自檢項，設計做完以後檢查一下就可以了。主要是看有沒有對比度不夠的情況（深灰色底＋淺灰色字，白色底＋淺灰色字都要注意），顏色不搭的情況（大紅色底，寶藍色字，字的邊緣會有種溢出的感覺）。

如果是網頁設計的話，有很多查accessability的工具，不止是對比度得過關，還有支不支持給視覺障礙人士的語音啦，圖片有沒有設置alternative text（替換文字）啦，之類更詳細的要求。

－－－

基本上就是這樣了，總結一下的話，最實用的部分就是黑白灰＋主題色，主題色可以是logo色也可以來自moodboard，再注意一點細節就好啦，對設計水平的要求不高，絕對是pm能夠達到的。

希望這個答案對大家有所啟發，給個讚唄。

具體的配色動作，只是某種工具的熟練度而已。
但是，審美水平的提高，和有沒有設計師並無關係。缺少審美能力的產品經理，就是廢物。

謝邀。

這個問題好傷感233333

給你兩種權宜之計的辦法。
第一種：
打開：Flat UI Colors
你一看便知（神秘的微笑），謝謝不客氣。

第二種：
我覺得吧，在沒有設計師的情況下，建議可以先去copy一款高用戶量的競品。
你截圖，然後吸取競品的主色調，比如我以網易雲音樂為例好了：

截圖吸取的色值是：

然後這個時候打開adobe kular：
https://color.adobe.com/zh/create/color-wheel/

保證中間顏色為你吸取的競品色，然後隨意拉動一下色盤指針，五個顏色會跟著變，然後隨意先選一個主色配上就好了。

（反正有設計師了以後都要重新改的嘛

_(:зゝ∠)_

產品經理和設計師的矛盾已經到了不可調和的地步了？

相關問題：沒有設計師和產品經理時，程序員應該如何給產品配色？

用采色靈感獲取配色靈感

額我還是寫我的後台去QAQ再見

隨便找一個設計師諮詢一下，我就不信你沒有一個設計師朋友或者你的朋友找不到一個設計師。
產品經理要找到做成一件事，怎麼樣快又好才是真理。
臉皮厚，什麼事都可以解決。

不建議配色，對設計師影響會很大

不妨看看這個？adobe.com 的頁面

高票答案已經寫得很詳細了，我再補充一下：
1.選擇純度較低的顏色（就是我們所說的不那麼「跳」或者不那麼「亮」的顏色）；
2.根據產品性質選擇顏色：異色元素多的產品參考成功的類似產品，如facebook /twitter /微信早期的iOS 版本的灰藍色；異色元素少的產品請參照1；
3.需要顏色表現產品的層次的時候，可以使用選定的低純度顏色和黑白灰搭配，又或者在低純度的顏色灰度上做遞增表達層次；

請一個設計師,,,,,,

藍色最保險，灰色其次

多走走心啊，配色就好看了，簡單的設計只需要一個符合大眾審美的人來做就行了