三個(gè)按鈕背后由小見(jiàn)大的交互思考發(fā)布者：本站     時(shí)間：2020-06-20 14:06:48

初入交互設計工作，最常見(jiàn)的需求就是——放按鈕。放按鈕看起來(lái)是超級簡(jiǎn)單的事，無(wú)非就是設計按鈕的樣式、擺放按鈕的位置、確定按鈕的狀態(tài)與反饋等，但殊不知其『麻雀雖小，五臟俱全』，小小的按鈕設計中也蘊含了很多交互設計的思維，當然除了設計本身之外，還能看到如何平衡開(kāi)發(fā)、產(chǎn)品以及用戶(hù)各方的需求。
所以，本文章會(huì )通過(guò)三個(gè)真實(shí)但抽象的例子說(shuō)明工作中『放按鈕』是怎么做的。真實(shí)說(shuō)的是案例來(lái)源于實(shí)戰，抽象就是提煉出思維但講的場(chǎng)景都是虛擬的，免得透露機密。有趣的是，三個(gè)按理都和時(shí)間、時(shí)效有關(guān)。

案例一
虛擬場(chǎng)景：某訂單頁(yè)面，商品訂單以卡片的形式羅列，每個(gè)卡片下方有若干操作按鈕，如支付、取消、投訴等。根據規則，投訴按鈕必須在訂單產(chǎn)生2天后才可使用。

現狀：目前產(chǎn)品線(xiàn)上的設計方案是，幾個(gè)按鈕同時(shí)呈現可點(diǎn)擊狀態(tài)，當投訴按鈕處于可用時(shí)間段內時(shí)，點(diǎn)擊就會(huì )去往一個(gè)投訴頁(yè)面填寫(xiě)投訴申請；當目前處于不可投訴時(shí)間段內，投訴按鈕點(diǎn)擊后彈窗提醒用戶(hù)：還有 XXX 時(shí)間才可發(fā)起投訴。



目標：提出這個(gè)案例時(shí)，我們希望讓這個(gè)操作過(guò)程更加自然，不要讓用戶(hù)點(diǎn)擊了之后才告訴用戶(hù)這個(gè)功能不可用，而不要脫離用戶(hù)的交互期望（如果按鈕可用，交互期望就應該是實(shí)現相應的功能）。

設計過(guò)程：

最開(kāi)始考慮這個(gè)案例時(shí)，我的第一反應就是如果一個(gè)按鈕當前是不可用的，就應該隱藏起來(lái)，這個(gè)場(chǎng)景按鈕還是挺擠的，明明不能用的東西為什么要放在界面中吸引視線(xiàn)呢？



但是很明顯，這個(gè)第一感覺(jué)有嚴重的硬傷。首先，對于一個(gè)按鈕或功能，告訴用戶(hù)這個(gè)東西不可用，和不告訴用戶(hù)有這個(gè)功能，是完全兩碼事。尤其是一個(gè)存在可用/不可用兩種狀態(tài)的按鈕，在特定時(shí)間將其隱藏的風(fēng)險非常大——你不知道這個(gè)功能的被需要度多高。

于是，我們去查閱了一下數據和之前的設計方案。首先得出的結論是，這個(gè)按鈕的點(diǎn)擊率不低（超過(guò)10%的用戶(hù)，而且這個(gè)頁(yè)面的總 pv 非常高），其次，以前有嘗試過(guò)把這個(gè)按鈕直接在不可用時(shí)隱藏的設計，但是立刻引來(lái)了大量的客服投訴——用戶(hù)找不到投訴入口在哪里了。

所以，似乎數據和歷史方案幫助我們排除了第一種做法，也就是直接隱藏按鈕。那在不可用期間把按鈕置灰怎么樣？



置灰的好處在于，用戶(hù)一眼就能看到這個(gè)功能的存在，同時(shí)又能知道這個(gè)功能暫時(shí)是不可用的。但是問(wèn)題也來(lái)了，怎么知道這個(gè)按鈕什么時(shí)候可點(diǎn)什么時(shí)候不可點(diǎn)？一個(gè)解決方案是在置灰的按鈕中加上文案提醒，另一個(gè)是點(diǎn)擊置灰的按鈕后給出文案提示，但是前者似乎沒(méi)有足夠的空間進(jìn)行展示了，而后者看起來(lái)不錯……但是好像又回到了原點(diǎn)？（后來(lái)還討論過(guò)一些更復雜的方案，比如最后半天置灰，更早的時(shí)候隱藏等，但我們并無(wú)法判斷用戶(hù)對時(shí)間點(diǎn)的真實(shí)感受和期待。）

所以最終的結論就是，由于當前的線(xiàn)上形式并沒(méi)有什么致命的問(wèn)題，也沒(méi)有收到太多關(guān)于體驗方面的投訴，而考慮到開(kāi)發(fā)成本、設計成本和迭代周期，還是選擇保持線(xiàn)上的樣式不變。

感覺(jué)走了一圈走回原地？在實(shí)際工作中經(jīng)常遇到這樣的情況，設計師通過(guò)本能和直覺(jué)判斷某些內容的體驗可能不是最佳的，但經(jīng)過(guò)資料搜集、自我批判、成本評估后發(fā)現，似乎保持現狀是最好的做法。

總結：這個(gè)案例告訴我們，設計時(shí)不要總想著(zhù)找茬，第一反應往往可能漏過(guò)了諸多細節，思考清楚再做行動(dòng)。