如何通過網站按鈕顔色的對比來引導用(yòng)戶

你有(yǒu)沒有(yǒu)過意外點錯按鍵的時候？當用(yòng)戶沒有(yǒu)被正确引導時往往會在模态窗口上做出錯誤的決策。很(hěn)多(duō)模态窗口會在不明确不同行動區(qū)别的條件下就彈出來。

不同按鍵之間明确的顔色對比能(néng)夠引導用(yòng)戶進行正确的選擇。确實明确的行動指示則會讓用(yòng)戶困惑并降低他(tā)們的效率。這甚至還可(kě)能(néng)導緻他(tā)們做出産(chǎn)生惡劣影響的錯誤選擇。今天深圳網站建設-雲梯就來分(fēn)享一下關于網站設計中(zhōng)按鈕顔色設計的相關技(jì )巧！

正面、中(zhōng)性和負面行動

所有(yǒu)的按鍵都從屬于三個大類之下：

1 正面 —— 改變、發送、添加信息

2 中(zhōng)性 —— 不做改變、返回屏幕（比如“取消”）

3 負面 —— 删除、重置、阻止信息

一個模态窗口上的幾個按鍵通常會集成好幾個行動。為(wèi)了讓用(yòng)戶能(néng)識别出它們之間的區(qū)别，每個按鍵的顔色對比是我們不可(kě)忽視的論題。

正面行為(wèi)需要高的對比度

正面行動時在模态窗口上常見的一類。用(yòng)戶需要知道那個行為(wèi)能(néng)幫助他(tā)們完成任務(wù)。你應該給這類行動按鍵高的顔色對比度來幫助用(yòng)戶去達成目的。放在它旁邊的其它任何中(zhōng)性或負面行動按鍵應該具(jù)有(yǒu)較低的顔色對比。

要想達到高的對比度，給你的正面行為(wèi)按鍵填充上一個冷色以及白色的文(wén)字。所謂冷色就是藍、綠和紫色等那些看着較為(wèi)舒緩的顔色。而此類實色上的白色文(wén)字會比普通一般的黑字更加出挑些。

在正面行動旁邊的中(zhōng)性或負面行動按鍵不應該被填充顔色。如果你那麽做了會導緻所有(yǒu)的按鍵之間的顔色對比變得太過相近。反之，如果隻讓它們顯示邊框則能(néng)較好地凸顯正面行為(wèi)按鍵。

當負面行為(wèi)按鍵擁有(yǒu)高的對比度時

相較正面行動，負面行動不應該具(jù)備更高的對比度。正面行動往往使用(yòng)頻率更高且更安(ān)全，而對于負面按鍵，我們要确保用(yòng)戶不會因為(wèi)誤點而出錯。但是如果隻有(yǒu)負面和中(zhōng)性兩種行動存在時，我們應該賦予負面行動更高的對比。

在這個案例中(zhōng)，你應該給負面行動按鍵填充上暖色。所謂的暖色就是指紅、橙、黃等略刺眼的顔色。當用(yòng)戶看到它時，他(tā)們自然會明白點擊之前要三思。

賦予中(zhōng)性行動低的對比度

中(zhōng)性行動永遠(yuǎn)不會在一個模态窗口裏單獨存在，它總是會和正面或負面行動成對出現。它應被賦予低的顔色對比以不幹擾到另外兩者。

黑色邊框對于用(yòng)戶識别來說已經足夠了。無填充顔色讓用(yòng)戶的注意力不會從正面或負面行動上移開。

但注意了，不要灰化邊框+字，不然用(yòng)戶很(hěn)可(kě)能(néng)會誤認為(wèi)這是一個禁按（disable）的按鍵。再怎麽樣他(tā)們也需要按鍵能(néng)和背景有(yǒu)所區(qū)别開來。

結語

如果顔色對比明晰的話，正面、中(zhōng)性和負面行動可(kě)以一塊出現。它們之間的對比越是清楚，用(yòng)戶就能(néng)越快地完成任務(wù)。顔色在界面上扮演着非常重要的角色——不僅僅是美感，頁(yè)同樣是能(néng)引導用(yòng)戶行動的一種強力工(gōng)具(jù)。

/jianzhanzhishi/7725.html 如何通過網站按鈕顔色的對比來引導用(yòng)戶