小按鈕，大體驗(yàn)！三個(gè)按鈕背后的交互思考

交互設(shè)計(jì)是個(gè)大命題，放大了說(shuō)是用來(lái)關(guān)注用戶(hù)的體驗(yàn),更多地著眼于如何將這種影響體現(xiàn)在用戶(hù)界面的信息架構(gòu),用戶(hù)操作的流程上。

但初入交互設(shè)計(jì)工作，最常見(jiàn)的需求就是——放按鈕。放按鈕看起來(lái)是超級(jí)簡(jiǎn)單的事，無(wú)非就是設(shè)計(jì)按鈕的樣式、擺放按鈕的位置、確定按鈕的狀態(tài)與反饋等，但殊不知其『麻雀雖小，五臟俱全』，小小的按鈕設(shè)計(jì)中也蘊(yùn)含了很多交互設(shè)計(jì)的思維，當(dāng)然除了設(shè)計(jì)本身之外，還能看到如何平衡開(kāi)發(fā)、產(chǎn)品以及用戶(hù)各方的需求。

本網(wǎng)頁(yè)教程會(huì)通過(guò)三個(gè)真實(shí)但抽象的例子說(shuō)明工作中『放按鈕』是怎么做的。真實(shí)說(shuō)的是案例來(lái)源于實(shí)戰(zhàn)，抽象就是提煉出思維但講的場(chǎng)景都是虛擬的，免得透露機(jī)密。有趣的是，三個(gè)按理都和時(shí)間、時(shí)效有關(guān)。

案例一

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

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

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

設(shè)計(jì)過(guò)程：

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

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

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

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

置灰的好處在于，用戶(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)不錯(cuò)……但是好像又回到了原點(diǎn)?(后來(lái)還討論過(guò)一些更復(fù)雜的方案，比如最后半天置灰，更早的時(shí)候隱藏等，但我們并無(wú)法判斷用戶(hù)對(duì)時(shí)間點(diǎn)的真實(shí)感受和期待。)

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

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

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

案例二

虛擬場(chǎng)景：對(duì)商家或商品進(jìn)行投訴之后，需要用戶(hù)選擇投訴原因，如態(tài)度不好、價(jià)格變動(dòng)、缺貨等。其中，在某些特殊時(shí)間段內(nèi)，如該商品本身就是秒殺商品，用戶(hù)發(fā)起投訴時(shí)則不能選擇『缺貨』原因。

現(xiàn)狀：線(xiàn)上目前沒(méi)有這個(gè)功能，即所有的投訴原因都是可選的，選擇組件使用的是 picker，大概如下圖的樣式(最常見(jiàn)的就是選擇時(shí)間啦)。

目標(biāo)：對(duì)于『缺貨』這個(gè)投訴原因進(jìn)行交互處理，令其在特定時(shí)間段內(nèi)(商品秒殺階段)無(wú)法選擇，并給用戶(hù)相關(guān)提醒。

設(shè)計(jì)過(guò)程：

乍一看和案例一非常相似，但其實(shí)差別還是挺大的。案例一屬于設(shè)計(jì)師自發(fā)嘗試對(duì)體驗(yàn)改進(jìn)，而案例二確實(shí)明確的業(yè)務(wù)需求，需要把沒(méi)有的功能融入到現(xiàn)有方案中。拿到這個(gè)需求時(shí)，首先看到大概會(huì)涉及兩個(gè)頁(yè)面可以用來(lái)設(shè)計(jì)，分別是投訴頁(yè)面和投訴原因選擇頁(yè)(這兩個(gè)通常不會(huì)直接在一起，但是后者有可能以彈層的形式出現(xiàn)，當(dāng)然也可能新開(kāi)頁(yè)面)，于是閃過(guò)幾種可能的處理方案。

方案一，在投訴頁(yè)面提前進(jìn)行文案披露，告訴用戶(hù)『缺貨』原因不可選，同時(shí)進(jìn)入原因選擇頁(yè)時(shí)將『缺貨』選項(xiàng)置灰;

方案二，原因選擇頁(yè)的『缺貨』按鈕正?？蛇x，選擇后通過(guò)彈窗提醒用戶(hù)該原因不可用，并恢復(fù)默認(rèn)待選原因狀態(tài);

方案三，僅設(shè)計(jì)原因選擇頁(yè)，在『缺貨』選項(xiàng)內(nèi)提供文案如『暫不可選』，并且置灰該選項(xiàng)。

詳細(xì)了解需求背景之后，方案三首先被排除了。原因很簡(jiǎn)單，本身置灰就已經(jīng)表示不可選了，『暫不可選』文案所表達(dá)的內(nèi)容太少，既沒(méi)有展示出不可選的原因，也沒(méi)有告訴用戶(hù)什么時(shí)候恢復(fù)該投訴選項(xiàng)。同時(shí)，我們得知反饋的文案會(huì)比較長(zhǎng)，大約有十幾個(gè)漢字，按鈕本身的空間有限，并且直接在原因字段內(nèi)拼接『暫不可選』也會(huì)有點(diǎn)技術(shù)成本。

方案二在流程上是順暢的，但是和案例一中提到的類(lèi)似，我們一般希望用戶(hù)在操作之前就能預(yù)期到交互的結(jié)果，而不是讓可選的按鈕點(diǎn)擊后出現(xiàn)提醒再告訴用戶(hù)不可選。

同時(shí)考慮方案一，對(duì)于按鈕置灰有一個(gè)問(wèn)題需要考慮，可以看到無(wú)線(xiàn)端使用的是這種滾輪式的選擇組件，其本身置灰能不能做是要打個(gè)問(wèn)號(hào)的，事實(shí)上和開(kāi)發(fā)溝通之后發(fā)現(xiàn)確實(shí)無(wú)法實(shí)現(xiàn)。最后，綜合考慮下，還是采用了方案二。

總結(jié)：通過(guò)案例二可以看到，設(shè)計(jì)中常常會(huì)有一個(gè)最優(yōu)解，但又總會(huì)因?yàn)榧夹g(shù)成本、其他業(yè)務(wù)原因的影響去妥協(xié)，最后得到的方案也許不是交互上最佳的，但確實(shí)整體效率最高的。這也說(shuō)明了，新人不要輕易對(duì)其他產(chǎn)品做體驗(yàn)分析，因?yàn)槟悴](méi)有這些真實(shí)限制，所得出的結(jié)論也是空中樓閣。

案例三

虛擬場(chǎng)景：某些操作是有時(shí)效的，比如某個(gè)商品限量銷(xiāo)售，如果還沒(méi)有到付款的時(shí)間節(jié)點(diǎn)，付款功能是不可用的，那么付款按鈕能否優(yōu)化處理。

現(xiàn)狀：當(dāng)商品不在支付時(shí)間段內(nèi)，付款按鈕隱藏。

目標(biāo)：不要讓用戶(hù)找不到付款按鈕，令操作更加順暢，可見(jiàn)性更強(qiáng)。

設(shè)計(jì)過(guò)程：

和案例一一樣，這也是一個(gè)設(shè)計(jì)師自發(fā)想要改善體驗(yàn)的過(guò)程，正好有其他業(yè)務(wù)需要對(duì)這些頁(yè)面進(jìn)行改造，能否把這個(gè)按鈕隱藏的過(guò)程優(yōu)化呢?原因相信大家都能理解，把不可用的功能藏起來(lái)，總歸不是最好的做法。

仔細(xì)查看線(xiàn)上的樣式我們發(fā)現(xiàn)，這個(gè)案例和案例一還不太一樣。最重要的一點(diǎn)是，付款的時(shí)間是有倒計(jì)時(shí)的，也就是說(shuō)即便付款按鈕本身是隱藏起來(lái)的，但其附近依然有文案提醒現(xiàn)在不在支付時(shí)間內(nèi)，所以用戶(hù)不太容易迷惑。

比較簡(jiǎn)單的解決辦法就是，把支付按鈕暴露出來(lái)，并且置灰?？磥?lái)今天三個(gè)案例都和置灰杠上了。經(jīng)過(guò)交互小組和產(chǎn)品小組的討論，都一致覺(jué)得把不可用的支付按鈕置灰更加合適，并且線(xiàn)上已有文案提醒說(shuō)明，用戶(hù)也更容易理解。

但是這個(gè)案例最后的結(jié)論有些出乎意料，首先，因?yàn)榫€(xiàn)上所有類(lèi)似業(yè)務(wù)都采用了隱藏不可支付按鈕的做法，所以如果這類(lèi)交易要改，其他全都要改(時(shí)間成本);其次，這個(gè)按鈕組件在早期開(kāi)發(fā)過(guò)程中，并沒(méi)有設(shè)計(jì)、開(kāi)發(fā) disable 的狀態(tài)，也就是沒(méi)有置灰的樣式，如果要做，需要重新設(shè)計(jì)和開(kāi)發(fā)(開(kāi)發(fā)成本);最后，線(xiàn)上這個(gè)隱藏的樣式已經(jīng)存在很長(zhǎng)時(shí)間了，用戶(hù)大部分都其已經(jīng)習(xí)慣，并且沒(méi)有發(fā)生普遍的反饋表示認(rèn)知困難(用戶(hù)理解成本)。所以，結(jié)論還是保持線(xiàn)上的樣式。

總結(jié)：有時(shí)候設(shè)計(jì)是對(duì)的，所有人都認(rèn)可，但是依然會(huì)有各種因素前來(lái)制約。尤其在較大的產(chǎn)品團(tuán)隊(duì)，業(yè)務(wù)節(jié)奏快、需求多、上線(xiàn)緊，這類(lèi)優(yōu)化體驗(yàn)的工作常常優(yōu)先級(jí)不夠高。與此同時(shí)，很多朋友可能會(huì)說(shuō)一個(gè)按鈕而已，加一個(gè) disable 的樣式又有何難?然而很多團(tuán)隊(duì)的流程規(guī)則導(dǎo)致業(yè)務(wù)工作是一條線(xiàn)，組件優(yōu)化新增樣式又是另一條線(xiàn)，想要一步把兩件事都做了并沒(méi)有想象中的容易。

怎么樣，簡(jiǎn)單的三個(gè)按鈕，是不是讓你有些暈了?交互設(shè)計(jì)的難點(diǎn)常常就在于體驗(yàn)、產(chǎn)品、開(kāi)發(fā)各個(gè)內(nèi)容的協(xié)調(diào)，相互妥協(xié)，最后達(dá)到一個(gè)平衡的狀態(tài)。由小見(jiàn)大，小按鈕我們能應(yīng)付了，慢慢就可以面對(duì)大問(wèn)題啦。