網(wǎng)頁(yè)設(shè)計(jì)按鈕擺放問(wèn)題

關(guān)于按鈕擺放的問(wèn)題源于我去年接觸后臺(tái)管理頁(yè)面制作大量對(duì)話框和表單時(shí)的一個(gè)思考，曾經(jīng)也與身邊的小伙伴討論過(guò)這個(gè)問(wèn)題，當(dāng)時(shí)看到大家一左一右撕的不亦樂(lè)乎瞬間覺(jué)得在這種我們習(xí)慣成自然的的事情里，需要去探究一下它們的緣由，方能在疑問(wèn)比較多的客戶面前把故事說(shuō)的有聲有色！
一、 “左”還是“右” 我有理論依據(jù)
    兩大平臺(tái)規(guī)范中給出了關(guān)于對(duì)話框按鈕擺放的規(guī)范：
    在MD規(guī)范中的組件-對(duì)話框中寫(xiě)道：肯定行動(dòng)置于右側(cè)并繼續(xù)進(jìn)行。消除行為直接放在肯定行動(dòng)的左側(cè)。
    而在iOS規(guī)范里的查看-警報(bào)按鈕中寫(xiě)道：將按鈕放在人們期望的地方。一般來(lái)說(shuō)人們最有可能點(diǎn)擊的按鈕在右側(cè)，取消按鈕則始終位于左側(cè)。
    以上可以看出兩大規(guī)范都傾向于在對(duì)話框中把「確定」按鈕放在右側(cè)，「取消」按鈕則在左側(cè)。
      上方給出的兩個(gè)對(duì)話框案例也是我們最常見(jiàn)的按鈕擺放順序。這些都是成文的規(guī)范，當(dāng)然也有不成文的，那么我們分別從功能和視覺(jué)兩個(gè)方面來(lái)分析一下，什么情況下「確定」按鈕放在左側(cè)，「取消」按鈕則在右側(cè)。
二、「確定 」按鈕放左邊也有理
    下方左圖在點(diǎn)擊刪除按鈕后出現(xiàn)的對(duì)話框把“刪除專(zhuān)輯”放在了“取消”按鈕的左側(cè)，這是一個(gè)并不順手的位置，但是這里不僅把“取消”放在更方便右手操作的位置，并且在顏色上給出了高亮，仿佛在引導(dǎo)用戶快點(diǎn)“取消”吧，你不該刪除這首歌。事實(shí)上這個(gè)按鈕的擺放位置在幫助用戶做了多一步的思考，因?yàn)闇?zhǔn)備被刪除的這首歌曲來(lái)自用戶曾經(jīng)收藏過(guò)的專(zhuān)輯，也就意味著這首歌不能被單獨(dú)刪除，而我們平常在閱讀對(duì)話框內(nèi)容時(shí)并不是一個(gè)字一個(gè)字去耐心閱讀的，通常都是“掃視”，所以這里把確定性操作放在不順手的位置目的是需要用戶仔細(xì)思考是否確認(rèn)要“刪除專(zhuān)輯”，來(lái)避免誤操作。
    而右圖的對(duì)話框中要?jiǎng)h除的歌曲不會(huì)涉及其他因素，所以不需要用戶去仔細(xì)思考到底該不該刪除，只要去順著右手的習(xí)慣點(diǎn)擊“確定刪除”就可以了。
      另外根據(jù)我們視覺(jué)掃視習(xí)慣，是自上往下，從左至右。當(dāng)我們把確定性按鈕放在不順手的左側(cè)，但我們的視覺(jué)并沒(méi)有停止，會(huì)繼續(xù)往右閱讀然后再折返，這比把確定性按鈕放在右側(cè)在視覺(jué)上多了一步，減緩了做出選擇的速度，這個(gè)目的同樣也是為了讓用戶在點(diǎn)擊按鈕時(shí)謹(jǐn)慎選擇，避免順手點(diǎn)擊出現(xiàn)誤操作。
    三、符合用戶使用習(xí)慣就一定對(duì)嗎
    下方兩個(gè)對(duì)話框把確定性按鈕放在了用戶習(xí)慣的右側(cè)并且字體加粗顏色高亮，會(huì)讓人在不加思索的情況下點(diǎn)擊，他們這么做似乎沒(méi)什么毛病，但是這些彈窗的內(nèi)容在點(diǎn)擊確定性按鈕后會(huì)對(duì)用戶造成干擾，例如：iOS系統(tǒng)在安裝應(yīng)用后，會(huì)自動(dòng)出現(xiàn)“想給您發(fā)送通知”的彈窗，用戶在手快的情況下點(diǎn)擊“允許”后，我們的手機(jī)會(huì)不定期收到相關(guān)應(yīng)用的消息通知，而這些消息大多數(shù)情況下并不是我們想接受的有效信息。
    再看百度網(wǎng)盤(pán)這張自動(dòng)跳出的對(duì)話框頁(yè)面，本來(lái)用戶打開(kāi)應(yīng)用的目的很可能是查找或下載文件，但是對(duì)話框以自動(dòng)跳出這種方式出現(xiàn)本身就不太友好，加上它的確定性按鈕放在了用戶習(xí)慣的右側(cè)，在沒(méi)有任何思考就順手點(diǎn)擊的情況下會(huì)進(jìn)入與用戶初衷目的完全不一致的頁(yè)面中，是一種干擾用戶操作的行為。
    所以，商家把希望你點(diǎn)的按鈕放在右側(cè)，很多時(shí)候還會(huì)把字體加粗高亮，利用用戶習(xí)慣引導(dǎo)達(dá)成想要他們想要的目的，這時(shí)按鈕的順序會(huì)按照商家的利益出發(fā)，希望你點(diǎn)確定的時(shí)候，確定按鈕就會(huì)在右邊；希望你點(diǎn)取消的時(shí)候，取消按鈕就在右邊。
四、總結(jié)
    無(wú)論按鈕放在左邊，還是放在右邊，即便是成文的平臺(tái)規(guī)范也沒(méi)有最優(yōu)的方案，對(duì)于重要場(chǎng)景的操作，希望用戶慎重做決定時(shí)，確定性按鈕的位置往往會(huì)刻意違背用戶習(xí)慣；對(duì)于簡(jiǎn)單的，只需用戶掃視就可以快速做出判斷的操作，確定性按鈕往往會(huì)符合我們的右手操作習(xí)慣；當(dāng)商家的利益大于用戶體驗(yàn)時(shí)，往往會(huì)把他們希望用戶點(diǎn)擊的按鈕放在方便用戶操作的位置。最后我覺(jué)得做設(shè)計(jì)雖然需要考慮平臺(tái)規(guī)范的建議，但是在特殊場(chǎng)景下為用戶考慮甚至替他們多做一步思考才是一種講道理的好設(shè)計(jì)。

網(wǎng)頁(yè)題目：網(wǎng)頁(yè)設(shè)計(jì)按鈕擺放問(wèn)題
分享鏈接：http://bm7419.com/news/117171.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站制作、App開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)