如何通(tōng)過按鍵顔色的對比來(lái)引導用戶
一個(gè)好的APP UI設計(jì)師(shī),往往是是注意細節的。細緻到一個(gè)按鍵的顔色來(lái)引導用戶的正确選擇!用戶沒有(yǒu)被正确引導時(shí)往往會(huì)在模态窗口上(shàng)做(zuò)出錯誤的決策。很(hěn)多(duō)模态窗口會(huì)在不明(míng)确不同行(xíng)動區(qū)别的條件下就彈出來(lái)。
所有(yǒu)的按鍵都從屬于三個(gè)大(dà)類之下:
1 正面 —— 改變、發送、添加信息
2 中性 —— 不做(zuò)改變、返回屏幕(比如“取消”)
3 負面 —— 删除、重置、阻止信息
一個(gè)模态窗口上(shàng)的幾個(gè)按鍵通(tōng)常會(huì)集成好幾個(gè)行(xíng)動。為(wèi)了讓用戶能識别出它們之間(jiān)的區(qū)别,每個(gè)按鍵的顔色對比是我們不可(kě)忽視(shì)的論題。
正面行(xíng)為(wèi)需要最高(gāo)的對比度,正面行(xíng)動時(shí)在模态窗口上(shàng)最常見的一類。用戶需要知道(dào)那(nà)個(gè)行(xíng)為(wèi)能幫助他們完成任務。這時(shí)應該給這類行(xíng)動按鍵最高(gāo)的顔色對比度來(lái)幫助用戶去達成目的。放在它旁邊的其它任何中性或負面行(xíng)動按鍵應該具有(yǒu)較低(dī)的顔色對比。
要想達到最高(gāo)的對比度,給你(nǐ)的正面行(xíng)為(wèi)按鍵填充上(shàng)一個(gè)冷色以及白色的文字。
當負面行(xíng)為(wèi)按鍵擁有(yǒu)最高(gāo)的對比度時(shí),相較正面行(xíng)動,負面行(xíng)動不應該具備更高(gāo)的對比度。正面行(xíng)動往往使用頻率更高(gāo)且更安全,而對于負面按鍵,我們要确保用戶不會(huì)因為(wèi)誤點而出錯。但(dàn)是如果隻有(yǒu)負面和(hé)中性兩種行(xíng)動存在時(shí),我們應該賦予負面行(xíng)動更高(gāo)的對比。
黑(hēi)色邊框對于用戶識别來(lái)說已經足夠了。無填充顔色讓用戶的注意力不會(huì)從正面或負面行(xíng)動上(shàng)移開。
尤其注意的是不要灰化邊框+字,不然用戶很(hěn)可(kě)能會(huì)誤認為(wèi)這是一個(gè)禁按(disable)的按鍵。再怎麽樣他們也需要按鍵能和(hé)背景有(yǒu)所區(qū)别開來(lái)。
結語
如果顔色對比明(míng)晰的話(huà),正面、中性和(hé)負面行(xíng)動可(kě)以一塊出現。它們之間(jiān)的對比越是清楚,用戶就能越快地完成任務。顔色在界面上(shàng)扮演着非常重要的角色——不僅僅是美感,頁同樣是能引導用戶行(xíng)動的一種強力工具。