建站
咨詢
售后
建站咨詢
新聞中心
一套產(chǎn)品色彩需要有哪幾種色彩：品牌色+提醒類型顏色(成功、錯誤、警告)+中性黑白灰顏色(各種字體、背景、分割線顏色等)
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、達州網(wǎng)站維護、網(wǎng)站推廣。
那么用到的色彩類型：
- 品牌色
- 品牌黑
- 內(nèi)容底色
- 全局底色
- 分割底色
- 圖標(biāo)色
- 文字鏈接可點擊顏色
- 提示信息
- 錯誤提示
- 錯誤提升
文字顏色
- 重要文字
- 常規(guī)文字
- 輔助文字 1
- 輔助文字 2
- 反白文字或圖表
- 次要的反白文字或圖表
分割線
- 常規(guī)分割線(10%)、強調(diào)分割線(30%)、最弱分割線(5%)
- 反白：常規(guī)分割線(10%)、強調(diào)分割線(30%)、最弱分割線(5%)
如何確定品牌顏色
選取品牌色方面，選擇公司 logo 色是最為保險的，便于與公司的品牌標(biāo)識保持一致，具有更好的辨識度。如果因為出于公司的產(chǎn)品戰(zhàn)略要求，需要跟公司其他的產(chǎn)品有所區(qū)分，更多的還是要考慮到產(chǎn)品本身的特征，比如醫(yī)療方面多用藍色、綠色，給用戶一種安全、可靠;購物產(chǎn)品用色多為鮮艷，主要目的是要激起用戶的購買欲。
首先，我們確定主色為：
在獲取品牌色色階之后，選取其中的幾個顏色用于產(chǎn)品中進行不斷的嘗試與評定，最終確定：
輔助色選擇
根據(jù) HSB 的方法去得到同色溫下面的 24 色：
以 H 值(色相)以 15，S 和 B 不變，遞增到基于主色的 24 個色帶，原理就是 15/360=24，正好圍繞色環(huán)一盤。
色盤
輔助色是豐富應(yīng)用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
真正的輔助色的選擇是根據(jù)實際場景功能來確定的，
比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型。
從色環(huán)中吸取紅、黃、綠三種顏色，在這四種顏色之上覆蓋純黑色#000，混合模式再選色相，這樣就能看出他們是否是在同一個明度之上，再根據(jù)實際的需求進行矯正，比對，調(diào)至舒服為止。
將選擇好的輔助色進行明度與對比度的變化，得出相應(yīng)的色階，如果不確定色階是否科學(xué)合理，也可以利用色彩工具，比如 Antdesign 的配色工具，F(xiàn)igma 里面也有很多配色插件，這些都可以快速獲得相應(yīng)的色階。根據(jù)實際的應(yīng)用場景再進行合理的配色。
中性色的選擇
中性色通常與文字色匯總為一個灰色模塊，通常包括背景色、分割元素色、反饋色、禁用色。背景色在使用卡片設(shè)計模式時必然會用到，一般為帶有一點主色的淺灰色。
分割元素色包括常見的線框元素、線性分割元素、面型分割元素。反饋色包括 hover、press、highlight 多種反饋顏色。中性色讓整個頁面更加富有層級感。
中性色的配置，就是制定一個由深到淺的灰度階梯，應(yīng)用在對應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B(明度) 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗(滿足 RGB 的某種特性)。
根據(jù)選定的品牌色，利用上述的中心色選擇方法，進行中性色的選配：
利用之前的作品或者現(xiàn)有的設(shè)計頁面，進行不斷的搭配調(diào)試，確保整體頁面效果為最佳。當(dāng)然，我們也要考慮到一些特殊的場景使用，如果現(xiàn)階段并沒有出現(xiàn)復(fù)雜或者特殊的應(yīng)用場景時，我們可以先統(tǒng)一一致用色。隨著產(chǎn)品的不斷完善與迭代，有可能現(xiàn)在的中性色并不能滿足需求時，要及時做到調(diào)整與更新，確保整體的一致性與統(tǒng)一型。
文字色
在實際的應(yīng)用場景中，文字色的色階可以劃分 3-5 個階梯：重要的標(biāo)題和正文、輔助內(nèi)容的次要文案、次要等級文字、及需要進一步弱化的最次級文字。當(dāng)然在命名文字色的時候，你可以用一級色、二級色、三級色、或者其他的命名規(guī)則去定義每個階梯色。另外還有帶有特殊語義的文字用色，例如鏈接文字用色、強調(diào)文字用色等。
文字色的強弱代表了該信息的重要程度，同時也表現(xiàn)出信息的層級與邏輯關(guān)系，傳遞給用戶是如何能夠正確、快速的找到所需信息。同時，文字色也對其是否具有可操作性進行釋義說明，這就要求文字色各個色階之間的對比明顯，語義清晰。
Sam Gordain 在 Medium 上有一篇文章《Pick Better Colors with the Hue Shift Method》中很好的講述了其階梯顏色選取規(guī)則與技巧的關(guān)鍵理論?？偨Y(jié)下來即，想要由一個基礎(chǔ)顏色拆分出一套梯級配色，在通過調(diào)整透明度或明度的同時調(diào)整色相、飽和度、明度三個屬性，這樣最終生成的一套梯級配色會更加協(xié)調(diào)，過度更為自然。
文章鏈接：https://medium.muz.li/natural-color-palettes-7769e5b38ecd
在做配色時，我們大都知道如何利用同類色、類比色、中差色、對比色、互補色等這樣的配色規(guī)則去搭配色彩。但在實際的工作中，其實這些知識并不能滿足我們的需要，尤其是跟幾個設(shè)計師共同完成一個項目時，就會出現(xiàn)很多問題：輔助色、文字色、背景、分割線、陰影等方面差異，導(dǎo)致的結(jié)果就是不能保證視覺上的一致性。
在很多的設(shè)計網(wǎng)站上，輸入“配色”進行搜索，就能看到很多有關(guān)配色的文章，大家從很多原理、理論性的方面進行討論，但是對于如何進行配色、配色的過程詳細的進行描述的文章很少。我們在找了很多參考文章、配色理論與配色工具之后，結(jié)合實際應(yīng)用場景，進行配色。希望這篇文章能夠給有相同疑惑的設(shè)計師一些幫助。
網(wǎng)站題目：想做好UI配色？只需要這三步！
網(wǎng)頁地址：http://www.5511xx.com/article/dhidocg.html
