人類在回憶所看到過的場景和事物時,對色彩的記憶度要高於形態。也就是説,從視覺角度來看,一款產品給多用户留下深的印象往往是介面的配色。由此我們也能夠看出配色可以説是設計師重要的武器,很可能沒有之一,但是這個武器有使用的「限制」。

  UI 設計的一個基本原則就是避免頁面中出現過多的顏色,這個道理大家都懂,但是在真正自己設計的時候總是會下意識的引入過多的顏色,導致整個介面看起來非常的雜亂。所以對於設計師來説,學會給介面的配色做減法是很重要的一項技能。

  配色體系的目的

  給一款產品建立配色體系之前,設計師先要弄明白的是:我為什麼要建立配色體系?這個問題聽起來十分多餘而且稍顯無厘頭。但是在我看來,每次做東西之前常問自己為什麼可以更好的提高工作效率。只有真正理解了配色的意義,我們才可以做到有的放矢,進行有選擇性的刪減。

  通常來説,配色體系的建立主要有以下三個目標:

  視覺區分

  調整介面風格

  吸引多用户注意力

  視覺區分

  一個 WordPress APP 或網站可能會有好幾個主要且同級別的功能和分割槽。這時,設計師需要對產品的資訊內容和功能模組進行整體規劃,建立介面的基本格局來幫助多用户在視覺上進行更好的區分。配色可以很好的幫助設計師實現這一目標。

  配色可以完成視覺區分,但是視覺區分不是隻能通過配色來實現。文字、影象(圖示)、佈局都可以完成視覺區分。

  例如,一款理財類應用中有不同種類的理財產品(普通型,隨借隨還型和可轉讓型)和不同的狀態(投資確認中,投資成功已起息,清算中等合計 11 種狀態)。

  在這種情況下(3 種產品型別,11 種產品狀態),配色就要很小心了。先我們要對狀態進行整合,相似的狀態整合成一種,這樣可以減少顏色的數量。當然會有人感覺六種顏色還是多,因為書本上告訴我們同一頁面中配色不要超過三種。但是我們得從實際情況出發,對於理財產品來説,多用户不太可能在同一屏中看到全部的六種狀態,也就是説多用户同時看到六種顏色的概率很小。

  另外我們放棄了對產品型別使用配色,因為狀態已經使用了六種配色。在這種情況下,如果我們還對產品型別使用顏色來區分(一個型別一個顏色),那麼整個頁面就會顯得很亂。所以在這裏,對於產品型別我們選擇使用文字(標籤)的形式來區分。

  文字相對於色彩來説,給多用户的視覺體驗還是稍弱一點。所以我們要對要頁面中的內容做一個優先順序的排序,重要的內容優先使用配色。在這裏我們認為相對於產品型別,多用户更關注自己產品的當前狀態。

  視覺風格

  產品的視覺風格是根據其自身定位和多用户需求所決定的,有的產品要求介面具有活力,能讓多用户產生興奮感(購買慾望),我們可以使用光波較長紅色和橙色來作為產品的主色調。

  有的產品講究沉穩舒適內斂,那麼我們使用藍色,灰色可能會更加適合點。

  配色可以很好的幫助我們建立一個產品的視覺風格。但是我們也要知道一款產品的視覺風格是由文字,影象和色彩一起構成的。也就是説,文字和影象同樣可以影響一款產品的視覺風格。

  文字的跳躍率是指同一介面中不同文字之間的大小比率。不同功能的文字在排版設計的時候會有字號和字重的區別,例如主標題,副標題和正文的字號通常是依次減小的,這種字號的差異會帶來不同的文字跳躍率。一般來説,文字跳躍率高的介面會顯得比較活潑,文字跳躍率低的介面會顯得平靜沉着。

  在配色的時候,如果我們減少色彩的使用數目,大面積使用白,灰,黑或者其他同色相配色(藍色與淺藍色,紅色與粉紅色等),這樣的介面會顯得莊重高雅且富有現代感,但是會顯得單調。那麼我們就應該適度的提升文字跳躍率給介面提升一些活力。

  當然,不只文字有跳躍率,圖片也有跳躍率。設計師可以通過對圖片和文字跳躍率的控制來削減介面視覺風格對於配色的依賴。

  吸引多用户注意力

  我們經常喜歡使用配色來吸引多用户注意力,以下圖中行為召喚按鈕 (call to action) 為例,配以與背景色差距較大的顏色使其可以從背景中凸顯出來。

  其實我們即使不使用配色也可以很好的吸引多用户注意力。

  谷歌搜索的主頁出現了大面積的留白,多用户的目光自然就會被吸引到搜索框。這和谷歌的初衷相契合,他們希望多用户在這個頁面完成搜索操作,所以不用展示過多其他的資訊來分散多用户的注意力。

  陰影效果也可以用來吸引多用户注意力,陰影效果可以提升目標元素的 “海拔”,進而使其從背景中凸顯出來。

  當然我們還可以使用模糊效果來吸引多用户注意力。多用户總是會不由自主的被那些對焦準確的部分吸引而忽視掉被虛化的部分。眼球的對焦機制好像一個調節器一樣捕捉那些離您忽遠忽近的物體,這樣才能讓您感受到周圍一切事物的深度和距離。這就是我們人眼的工作機制。設計師可以根據這個理論將介面中一些不重要的內容進行模糊處理來凸顯那些重要的內容。

  好的設計應該讓多用户短時間內就可以找到他們感興趣的內容,過多的給予對多用户來説其實是一種負擔。少即是多,這是當前互聯網時代的信條也是設計師需要恪守的準則。