在近期設(shè)計(jì)的一系列產(chǎn)品中，上線(xiàn)后都遇到一個(gè)同樣的問(wèn)題：用戶(hù)會(huì)多次點(diǎn)擊一個(gè)按鈕，由此引發(fā)的一系列的問(wèn)題，例如同時(shí)提交了多次重復(fù)數(shù)據(jù)等問(wèn)題，有些問(wèn)題雖然能從技術(shù)上的到避免，但我們應(yīng)該從設(shè)計(jì)開(kāi)始就考慮到這些細(xì)節(jié)，從而在設(shè)計(jì)上就避免問(wèn)題發(fā)生的可能性。

來(lái)分析一下為什么用戶(hù)要連續(xù)不斷的多次點(diǎn)擊一個(gè)按鈕？

在設(shè)計(jì)上，這些按鈕都是通用樣式按鈕或者是圖片按鈕，一看就知道能點(diǎn)擊，在功能上沒(méi)什么問(wèn)題，例如以下按鈕：

這樣的按鈕用戶(hù)不用考慮就知道可以點(diǎn)擊，如果比較理想的話(huà)，點(diǎn)擊后就能看到效果，還特地添加了Ajax效果，可悲劇的是很多數(shù)據(jù)都是重復(fù)的，起初還以為是程序問(wèn)題呢，晚上用手機(jī)上網(wǎng)才明白是怎么回事；

真相：當(dāng)網(wǎng)速慢時(shí)，點(diǎn)擊按鈕并不會(huì)緊接著看到效果，而是沒(méi)有反應(yīng)，按常理來(lái)理解就是沒(méi)有點(diǎn)上，這就麻煩了，習(xí)慣性的狂點(diǎn)一陣，等網(wǎng)絡(luò)反應(yīng)過(guò)來(lái)已經(jīng)釀成了一個(gè)個(gè)悲劇。

這樣的問(wèn)題很好避免，一方面是程序加好判斷，多次點(diǎn)擊無(wú)效；另一方面就得從設(shè)計(jì)入手，設(shè)計(jì)上點(diǎn)擊后直至生效前（或頁(yè)面跳轉(zhuǎn)前）的按鈕效果，也就是讓一個(gè)按鈕有三個(gè)效果，普通效果、鼠標(biāo)懸停的效果、點(diǎn)擊后的效果；

添加上這個(gè)按鈕效果后，問(wèn)題迎刃而解，看看以上三個(gè)按鈕點(diǎn)擊后的效果吧：

不僅解決了問(wèn)題，在用戶(hù)體驗(yàn)上也得到了很大的提升，最后來(lái)看幾個(gè)實(shí)際運(yùn)用吧：

感謝閱讀小D的文章，點(diǎn)點(diǎn)細(xì)節(jié)可能早已熟記在你心中，但還要分享給更多剛加入設(shè)計(jì)行業(yè)的朋友們共同學(xué)習(xí)。

作者： dboy~小真

文章來(lái)源：http://www.dboy365.com/archives/856 轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： 交互設(shè)計(jì) 按鈕設(shè)計(jì) 產(chǎn)品設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。