當人類記住他們看到的場景和事物時,他們對顏色的記憶高于形式。換句話說,從視覺角度來看,產品通常給用戶留下深刻的印象是界面的顏色匹配。因此,我們也可以看到,顏色匹配可以說是設計師的重要武器,可能沒有一種,但這種武器被使用「限制」。
UI設計的一個基本原則是避免頁面中出現太多的顏色,這是眾所周知的,但當你真正設計自己時,你總是潛意識地引入太多的顏色,導致整個界面看起來非常混亂。因此,對于設計師來說,學習減去界面的配色是一項非常重要的技能。
配色系統的目的
在為產品建立配色系統之前,設計師首先要明白的是:我為什么要建立配色系統?這個問題聽起來很多余,有點胡說八道。但在我看來,我經常問自己為什么在做事之前能更好地提高工作效率。只有真正理解配色的意義,才能有針對性地有選擇地刪除。
一般來說,建立配色系統有三個主要目標:
視覺區分
調整界面風格
吸引用戶的注意力
視覺區分
一個App或者網站可能有幾個主要和相同級別的功能和分區。此時,設計師需要對產品的信息內容和功能模塊進行總體規劃,建立界面的基本模式,以幫助用戶更好地區分視覺。顏色匹配可以幫助設計師實現這一目標。
配色可以完成視覺區分,但視覺區分不僅可以通過配色來實現。文本、圖像(圖標)和布局可以完成視覺區分。
例如,在一個金融應用程序中,有不同類型的金融產品(普通類型、借款還款類型和可轉讓類型)和不同的狀態(在投資確認中,投資成功起息,中等清算共11種)。
在這種情況下(3種產品類型,11種產品狀態),配色要非常小心。首先要整合狀態,將類似的狀態整合成一種,這樣可以減少顏色的數量。當然,有些人會覺得有六種顏色或更多,因為書告訴我們,在同一頁面上不超過三種顏色。然而,我們必須從實際情況出發。對于金融產品,用戶不太可能在同一屏幕上看到所有六種狀態,也就是說,用戶同時看到六種顏色的概率很小。
此外,我們放棄了產品類型的顏色匹配,因為狀態已經使用了六種顏色匹配。在這種情況下,如果我們仍然使用顏色來區分產品類型(一種類型和一種顏色),那么整個頁面就會顯得非常混亂。所以在這里,我們選擇使用文本(標簽)來區分產品類型。
與顏色相比,文本給用戶的視覺體驗略弱。因此,我們應該優先考慮頁面中的內容,并優先考慮重要內容的顏色匹配。在這里,我們認為用戶更關注產品的當前狀態,而不是產品類型。
視覺風格
產品的視覺風格是根據自己的定位和用戶需求來決定的。有些產品要求界面充滿活力,這可以讓用戶感到興奮(購買欲望)。我們可以紅色和橙色作為產品的主色調。
有些產品注重平靜、舒適和內向,所以我們使用藍色,灰色可能更合適。
配色可以幫助我們建立產品的視覺風格。但我們也應該知道,產品的視覺風格是由文本、圖像和顏色組成的。換句話說,文本和圖像也會影響產品的視覺風格。
文本跳躍率是指同一界面中不同文本之間的大小比。不同功能的文本在排版設計中會有字體大小和字體重量的差異,如主標題、副標題和文本大小通常會依次減少,這種大小的差異會帶來不同的文本跳躍率。一般來說,高文本跳躍率的界面會更加活躍,低文本跳躍率的界面會顯得平靜和平靜。
在配色時,如果我們減少使用顏色的數量,大面積使用白色、灰色、黑色或其他相同顏色的配色(藍色和淺藍色、紅色和粉色等),這樣的界面將顯得莊嚴、優雅、現代,但將顯得單調。然后我們應該適度地提高文本跳躍率,以提高界面的活力。
當然,不僅文本有跳躍率,圖片也有跳躍率。設計師可以通過控制圖片和文本跳躍率來減少界面視覺風格對配色的依賴。
吸引用戶的注意力
我們經常喜歡使用配色來吸引用戶的注意力(calltoaction)以背景色差距較大的顏色為例,可以從背景中凸顯出來。
事實上,即使不使用配色,也能吸引用戶的注意力。
谷歌搜索的主頁有大面積的空白,用戶的眼睛自然會被吸引到搜索框中。這符合谷歌的初衷。他們希望用戶能在這個頁面上完成搜索操作,所以他們不需要顯示太多其他信息來分散用戶的注意力。
陰影效果也可以用來吸引用戶的注意力。陰影效果可以提高目標元素的海拔,從而突出其背景。
當然,我們也可以使用模糊效果來吸引用戶的注意力。用戶總是不由自主地被對焦準確的部分所吸引,而忽略了被模糊的部分。眼球的對焦機制就像一個調節器,捕捉遠離你的物體,讓你感受到周圍一切的深度和距離。這是我們人眼的工作機制。根據這一理論,設計師可以模糊界面中的一些不重要內容,以突出這些重要內容。
好的設計應該讓用戶短時間內就可以找到他們感興趣的內容,過多的給予對用戶來說其實是一種負擔。少即是多,這是當前互聯網時代的信條也是設計師需要恪守的準則。