您有沒有過意外點錯按鍵的時候?當多用户沒有被正確引導時往往會在模態視窗上做出錯誤的決策。很多模態視窗會在不明確不同行動區別的條件下就彈出來。
不同按鍵之間明確的顏色對比能夠引導多用户進行正確的選擇。確實明確的行動指示則會讓多用户困惑並降低他們的效率。這甚至還可能導致他們做出產生惡劣影響的錯誤選擇。今天 WordPress 網站建設-SEO 站羣就來分享一下關於網站設計中按鈕顏色設計的相關技巧!
正面、中性和負面行動
所有的按鍵都從屬於三個大類之下:
1 正面 —— 改變、傳送、新增資訊
2 中性 —— 不做改變、返回螢幕(比如 “取消”)
3 負面 —— 刪除、重置、阻止資訊
一個模態視窗上的幾個按鍵通常會整合好幾個行動。為了讓多用户能識別出它們之間的區別,每個按鍵的顏色對比是我們不可忽視的論題。
正面行為需要高的對比度
正面行動時在模態視窗上常見的一類。多用户需要知道那個行為能幫助他們完成任務。您應該給這類行動按鍵高的顏色對比度來幫助多用户去達成目的。放在它旁邊的其它任何中性或負面行動按鍵應該具有較低的顏色對比。
要想達到高的對比度,給您的正面行為按鍵填充上一個冷色以及白色的文字。所謂冷色就是藍、綠和紫色等那些看着較為舒緩的顏色。而此類實色上的白色文字會比普通一般的黑字更加出挑些。
在正面行動旁邊的中性或負面行動按鍵不應該被填充顏色。如果您那麼做了會導致所有的按鍵之間的顏色對比變得太過相近。反之,如果只讓它們顯示邊框則能較好地凸顯正面行為按鍵。
當負面行為按鍵擁有高的對比度時
相較正面行動,負面行動不應該具備更高的對比度。正面行動往往使用頻率更高且更安全,而對於負面按鍵,我們要確保多用户不會因為誤點而出錯。但是如果只有負面和中性兩種行動存在時,我們應該賦予負面行動更高的對比。
在這個案例中,您應該給負面行動按鍵填充上暖色。所謂的暖色就是指紅、橙、黃等略刺眼的顏色。當多用户看到它時,他們自然會明白點選之前要三思。
賦予中性行動低的對比度
中性行動永遠不會在一個模態視窗裏單獨存在,它總是會和正面或負面行動成對出現。它應被賦予低的顏色對比以不干擾到另外兩者。
黑色邊框對於多用户識別來説已經足夠了。無填充顏色讓多用户的注意力不會從正面或負面行動上移開。
但注意了,不要灰化邊框+字,不然多用户很可能會誤認為這是一個禁按(disable)的按鍵。再怎麼樣他們也需要按鍵能和背景有所區別開來。
結語
如果顏色對比明晰的話,正面、中性和負面行動可以一塊出現。它們之間的對比越是清楚,多用户就能越快地完成任務。顏色在介面上扮演着非常重要的角色——不僅僅是美感,頁同樣是能引導多用户行動的一種強力工具。