編者按：今天分享兩個小技巧，第一個教你如何通過按鍵顏色的對比來引導(dǎo)用戶，第二個是讓進度條看起來“快一點”的方法。站在用戶角度，這兩個不僅細膩體貼，而且確實能提升使用的愉悅感。在此特別感謝@勵定洲 的傾情譯文。

一、如何通過按鍵顏色的對比來引導(dǎo)用戶

你有沒有過意外點錯按鍵的時候？當用戶沒有被正確引導(dǎo)時往往會在模態(tài)窗口上做出錯誤的決策。很多模態(tài)窗口會在不明確不同行動區(qū)別的條件下就彈出來。

不同按鍵之間明確的顏色對比能夠引導(dǎo)用戶進行正確的選擇。確實明確的行動指示則會讓用戶困惑并降低他們的效率。這甚至還可能導(dǎo)致他們做出產(chǎn)生惡劣影響的錯誤選擇。

正面、中性和負面行動

所有的按鍵都從屬于三個大類之下：

1 正面 —— 改變、發(fā)送、添加信息

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

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

一個模態(tài)窗口上的幾個按鍵通常會集成好幾個行動。為了讓用戶能識別出它們之間的區(qū)別，每個按鍵的顏色對比是我們不可忽視的論題。

正面行為需要最高的對比度

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

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

在正面行動旁邊的中性或負面行動按鍵不應(yīng)該被填充顏色。如果你那么做了會導(dǎo)致所有的按鍵之間的顏色對比變得太過相近。反之，如果只讓它們顯示邊框則能較好地凸顯正面行為按鍵。

當負面行為按鍵擁有最高的對比度時

相較正面行動，負面行動不應(yīng)該具備更高的對比度。正面行動往往使用頻率更高且更安全，而對于負面按鍵，我們要確保用戶不會因為誤點而出錯。但是如果只有負面和中性兩種行動存在時，我們應(yīng)該賦予負面行動更高的對比。

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

賦予中性行動最低的對比度

中性行動永遠不會在一個模態(tài)窗口里單獨存在，它總是會和正面或負面行動成對出現(xiàn)。它應(yīng)被賦予最低的顏色對比以不干擾到另外兩者。

黑色邊框?qū)τ谟脩糇R別來說已經(jīng)足夠了。無填充顏色讓用戶的注意力不會從正面或負面行動上移開。

但注意了，不要灰化邊框+字，不然用戶很可能會誤認為這是一個禁按（disable）的按鍵。再怎么樣他們也需要按鍵能和背景有所區(qū)別開來。

結(jié)語

如果顏色對比明晰的話，正面、中性和負面行動可以一塊出現(xiàn)。它們之間的對比越是清楚，用戶就能越快地完成任務(wù)。顏色在界面上扮演著非常重要的角色——不僅僅是美感，頁同樣是能引導(dǎo)用戶行動的一種強力工具。

二、讓進度條看起來“快一點”

在如今這個什么都講究快的年代里，讓用戶等待太長時間對于你的應(yīng)用加載來說絕對是一個用戶體驗問題。如果用戶感到你的應(yīng)用加載太慢，他們就會失去耐心，然后把時間用在其它地方（競爭應(yīng)用上）?，F(xiàn)在有些技術(shù)手段可以加快加載時間，一些功能豐富的應(yīng)用因為體量的關(guān)系要想以理想狀態(tài)運作不得不讓用戶等待一會。當你費盡心思優(yōu)化你的應(yīng)用卻發(fā)現(xiàn)它仍然不夠快時，有一個辦法可以加速用戶對時間的感知，然后讓他們感覺你的應(yīng)用比它實際加載的速度要快。

當一個應(yīng)用正在加載時，用戶通常會看到一個進度條。這能給他們以直觀的視覺提醒——什么時候能加載完。進度條的動畫效果會影響到用戶對加載時間的感知。

使用反向的填充

經(jīng)調(diào)研顯示，反向（與進度條行進方向相反的）填充的進度條看起來比那些正向的進度條要快不少。這個結(jié)果說明“表現(xiàn)動作知覺的誘導(dǎo)性動畫效果并非絕對的，而會隨當前的視覺情境產(chǎn)生變化”，同時它也創(chuàng)造了一個速率被增加了的假象，能影響到我們對于進度時間的感知。

藍色那部分就是我說的填充，在加載時讓它往左邊行進會給人感覺整個加載速度更快

刷新頻率加快

另一個讓進度看起來更快的方法是增加刷新頻率（譯者注：如果你真的看到過進度條的話，希望你能明白我在說什么）。經(jīng)過同樣的調(diào)研后發(fā)現(xiàn)那些頻率較快的進度條更容易被人感覺時間較短。這里說的頻率就像一首歌里的節(jié)拍。節(jié)拍越多，音樂的播放速度就越快。當一個進度條的填充不斷循環(huán)刷新時，就好像正在計算著進度的拍子。

快點轉(zhuǎn)

這個發(fā)現(xiàn)同時對那些較含蓄的活動指示器（就上面這種加載的圖標）有所啟示。不確定的活動指示器和進度條很像，除了他們是徑向的而非線性的。它們也不能說明進程何時能結(jié)束，其更多的是被用來告訴用戶進程已經(jīng)開始，但并不會進一步描述其程度。如果你的應(yīng)用使用了活動指示器，你可以通過增加它轉(zhuǎn)動的速度（譯者注：還是刷新頻率，一個意思）來讓用戶覺得加載時間更快。在同等時間內(nèi)你的活動指示器旋轉(zhuǎn)的圈數(shù)越多，對于用戶來說你的應(yīng)用看起來就更快。

加速進程，避免最后關(guān)頭停止

有另一份調(diào)研發(fā)現(xiàn)加速的進度條遠比減速的進度條受歡迎。這意味著在進程結(jié)尾速度加快的進度條會比那些在最后關(guān)頭莫名其妙減速或僵住的進度條感知起來要快得多。如果你的進度條可能會出現(xiàn)中間某一段停住的問題，那你可以讓它在一開始的時候慢一點，然后在最后加速，給用戶一個快速收尾的感覺。用戶對進度開始的時候停止/緩速的容忍度要遠高于在結(jié)尾的時候停止/緩速。

寧愿在開頭慢點，也不愿在結(jié)尾的時候卡住。迅雷99.9%停止笑而不語

進度條的時間是相對的

聰明的小伎倆可以讓你的進度條看起來比它實際要更快。這在你耗盡了所有可能可以優(yōu)化應(yīng)用的方式后可以嘗試下，會是個不錯的解決方案。很多需要長時間加載的功能豐富的應(yīng)用可以從這些技術(shù)中獲益。對于用戶體驗來說，感知則意味著一切。如果你的應(yīng)用看起來、感覺起來對用戶更快，或許它確實就是如此。

【優(yōu)設(shè)經(jīng)典好文重讀】

從菜鳥成為高手的摳圖攻略：
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

可商用的免費高清大圖：
《免費高清！10個無版權(quán)限制的大圖特供網(wǎng)站》

多邊形字體怎么做？
《這效果超火！教你創(chuàng)建高大上的多邊形字體》

原文地址：uxmovement
譯者：@勵定洲

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量102萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com