巧用音量原理,打造優(yōu)秀的引導(dǎo)體系

好的交互體驗(yàn),會(huì)恰到好處地運(yùn)用“音量”來描述元素功能,幫助用戶識(shí)別功能信息。
“這里需要更多的引導(dǎo)?!蹦阒雷鳛橐幻O(shè)計(jì)師,這句話我聽過多少遍嗎?對(duì)于一個(gè)設(shè)計(jì),缺乏恰當(dāng)?shù)囊龑?dǎo)是非常糟糕的。我堅(jiān)信一句話:“處處引導(dǎo),等同于沒有引導(dǎo)?!边@句話聽上去是不是很熟悉?
隨著時(shí)間推移,我慢慢發(fā)現(xiàn),對(duì)于產(chǎn)品設(shè)計(jì)中的層級(jí)關(guān)系和優(yōu)先級(jí)的理解的匱乏,是一種通病,我們可以把這種情況用現(xiàn)實(shí)生活中的聲音來做類比。
好的交互體驗(yàn),會(huì)恰到好處地運(yùn)用“音量”來描述元素功能,幫助用戶識(shí)別功能信息。你可以想象一下,如果所有的元素都在“尖叫”,那么你聽到耳朵里的便全成了噪音。正確地使用引導(dǎo)手段——就像在一個(gè)擁擠嘈雜的房間里加大音量說話——能夠更加有效地吸引用戶的注意力。謹(jǐn)慎地將“現(xiàn)實(shí)音量”使用在交互設(shè)計(jì)中,有助于明晰設(shè)計(jì)中各元素的優(yōu)先級(jí)。
可以這么說,多花些時(shí)間在項(xiàng)目的早期,弄清楚交互設(shè)計(jì)中哪些元素需要重點(diǎn)突出引導(dǎo)(比其他元素喊出更大聲音)是非常值得的。
音量標(biāo)度
我們根據(jù)聲音的分貝給音量劃分了等級(jí)。在我們的設(shè)計(jì)中,好的層級(jí)闡述之間的區(qū)別是很分明的。從12發(fā)霰彈獵槍暴擊聲,到一根針掉落聲,這兩個(gè)等級(jí)中間有很多的音量層級(jí)。
?我覺得上面這個(gè)圖表是個(gè)很好的輔助工具,可以幫助我們很好地辨別、闡述、表達(dá)哪些設(shè)計(jì)元素比其他元素更需要做著重引導(dǎo)。首先,什么元素需要大聲一些?聲音應(yīng)該有多大?(屬于哪個(gè)層級(jí)?)是竊竊私語(yǔ),還是扯著嗓子喊出來?如果有相近的兩種或更多的聲音,哪個(gè)音量應(yīng)該高一些,高出多少合適?
用真實(shí)的聲音闡述
我們可以利用這些音量來創(chuàng)建一套元素引導(dǎo)體系,包括:鏈接、按鈕或者促銷口號(hào)等。這里有一個(gè)我之前做的例子:
上面這個(gè)例子中的關(guān)鍵點(diǎn)在于,每一條促銷標(biāo)語(yǔ)、每個(gè)按鈕或者鏈接,都有自己的“音量”。深思熟慮地且有選擇性地靈活運(yùn)用色彩、尺寸和排版,相對(duì)于到處使用相似元素來講,會(huì)取得比較好的效果。
比如,在藍(lán)色的“提交”按鈕旁邊,放置的“取消”按鈕使用灰色,那么大家的注意力更多會(huì)聚集在“提交”這個(gè)按鈕上。再舉個(gè)例子,“保存”這個(gè)按鈕使用綠色,會(huì)在眾多藍(lán)色的按鈕中脫穎而出。
而比較大的、橙色的按鈕,會(huì)比其他任何按鈕都顯眼,這是因?yàn)槌壬遣唤?jīng)常使用的暖色,而藍(lán)色和綠色是經(jīng)常被使用的冷色。所謂調(diào)大設(shè)計(jì)圖中元素“音量”,就好比是在喧鬧的街道上用擴(kuò)音器將營(yíng)銷語(yǔ)喊出來一樣,能迅速高效地抓住人們的注意力。
?在上面這個(gè)頁(yè)面中,藍(lán)色按鈕是可以拖拽的元素,執(zhí)行按鈕是橙色的,保存按鈕是綠色的。顏色將他們區(qū)分開,并賦予他們不同的含義,用戶看到相應(yīng)的顏色就明白這個(gè)按鈕是用來做什么的。
總結(jié)
下一次,如果有人對(duì)再對(duì)你講“你的設(shè)計(jì)里需要多加一些引導(dǎo)”時(shí),試著用“音量等級(jí)”系統(tǒng)來作為引導(dǎo),實(shí)現(xiàn)產(chǎn)品和用戶的對(duì)話。盡量避免太多的元素相互干擾,反而大大分散了用戶的注意力。
譯者:藍(lán)湖,微信公眾號(hào):藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作
原文作者:Tom Osborne
原文鏈接:Using Visual Loudness for Better Wayfinding
本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
闊以參考,突然發(fā)現(xiàn)好多產(chǎn)品有這種設(shè)計(jì)
對(duì)頭~