2019-3-5 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
交互設(shè)計(jì)中的“所見(jiàn)即所得”原則
“所見(jiàn)即所得”原則我記得在之前的文章中就提到過(guò)，但是沒(méi)有詳細(xì)說(shuō)明。最近在體驗(yàn)一些產(chǎn)品時(shí)，發(fā)現(xiàn)很多交互設(shè)計(jì)上的坑都可以歸納到“所見(jiàn)非所得”上。
所見(jiàn)非所得
我們可以首先來(lái)看一下“所見(jiàn)非所得”的案例：上周寄件去北京，在填寫(xiě)收件人信息時(shí)候，發(fā)現(xiàn)了一個(gè)“智能填寫(xiě)”的功能很有意思。所謂“智能填寫(xiě)”就是OCR識(shí)別技術(shù)，系統(tǒng)可以識(shí)別圖片上的地址。例如，你的收件人地址正好是身份證上的住址，那么你就可以上傳身份證照片，系統(tǒng)直接識(shí)別照片上的地址而不需要手動(dòng)去輸入。
用戶(hù)具體的操作流程是：
1 拍攝/上傳照片；
點(diǎn)擊“上傳圖片”按鈕，用戶(hù)可以選擇拍攝或者上傳相冊(cè)里的照片，框選合適的識(shí)別區(qū)域；
2 系統(tǒng)識(shí)別并展示結(jié)果；
系統(tǒng)會(huì)自動(dòng)識(shí)別圖片中的地址信息，并且在輸入框中展示，如果有識(shí)別錯(cuò)誤的地方，用戶(hù)可以手動(dòng)編輯修改；
3 用戶(hù)確認(rèn)；
用戶(hù)對(duì)地址信息確認(rèn)無(wú)誤了，點(diǎn)擊“智能填寫(xiě)”按鈕，輸入框里的地址信息會(huì)自動(dòng)回填到地址欄；
了解了大致流程，我們來(lái)看一下兩款競(jìng)品。產(chǎn)品A和B都提供了“智能填寫(xiě)”的功能，但是在交互設(shè)計(jì)上存在差異。產(chǎn)品A，當(dāng)用戶(hù)上傳完圖片才會(huì)出現(xiàn)“智能填寫(xiě)”按鈕；產(chǎn)品B是全程展示“智能填寫(xiě)”按鈕的。我個(gè)人更加偏愛(ài)產(chǎn)品A的處理模式，因?yàn)楫?dāng)用戶(hù)都沒(méi)有上傳圖片時(shí)，給用戶(hù)展示“智能填寫(xiě)”按鈕是沒(méi)有任何意義的，這里的“智能填寫(xiě)”雖然可見(jiàn)但是不可得，用戶(hù)也不能點(diǎn)擊。當(dāng)然有人會(huì)說(shuō)，雖然不可點(diǎn)擊，但是展示了也沒(méi)什么問(wèn)題吧？當(dāng)然有問(wèn)題，它會(huì)給用戶(hù)帶來(lái)兩個(gè)痛點(diǎn)：
1） 增加了用戶(hù)的學(xué)習(xí)成本；
對(duì)于新用戶(hù)來(lái)說(shuō)，產(chǎn)品A肯定更加容易上手。因?yàn)樾掠脩?hù)一進(jìn)入這個(gè)頁(yè)面，只能看到上傳圖片的按鈕，用戶(hù)明白了我首先要上傳圖片。產(chǎn)品B是直接一股腦的把所有選項(xiàng)展示出來(lái)，用戶(hù)不知道這些選項(xiàng)之間的聯(lián)系和操作順序。
2） 阻斷正常操作流程；
給用戶(hù)展示了他們本不應(yīng)該看到的元素，可能會(huì)阻斷正常的操作流程。用戶(hù)如果還沒(méi)上傳圖片，就點(diǎn)擊“智能填寫(xiě)”按鈕會(huì)直接報(bào)錯(cuò)，“所傳參數(shù)不能為空”，用戶(hù)哪里看懂這是什么意思。
之前在火車(chē)站取票，前面排隊(duì)的大嬸跟我說(shuō)她的票取不了。我湊過(guò)去一看，發(fā)現(xiàn)她沒(méi)有關(guān)閉購(gòu)買(mǎi)保險(xiǎn)的彈框。因?yàn)檫@個(gè)彈框沒(méi)有蓋住底部“確認(rèn)打印”按鈕，用戶(hù)誤以為還是可以點(diǎn)擊的，導(dǎo)致無(wú)法正常完成取票流程。
了解到這些痛點(diǎn)，那么如何才能在交互設(shè)計(jì)上實(shí)現(xiàn)“所見(jiàn)即所得”原則呢？我總結(jié)了兩個(gè)方法：限制和就近。
限制原則
了解限制原則，我們需要回答兩個(gè)問(wèn)題：
1）為什么要限制？
因?yàn)槎嗖乓拗疲鄷?huì)帶來(lái)哪些壞處？?jī)?nèi)容多，用戶(hù)處理不過(guò)來(lái)；選項(xiàng)多，用戶(hù)挑花了眼；時(shí)間多，優(yōu)惠券沒(méi)有有限期限制用戶(hù)懶得用。
2）限制什么？
限制用戶(hù)與界面交互的觸點(diǎn)。還是以智能填寫(xiě)為例，當(dāng)前界面有三個(gè)觸點(diǎn)：上傳圖片按鈕、輸入框、智能填寫(xiě)按鈕。這三個(gè)觸點(diǎn)分別對(duì)應(yīng)著步驟一、步驟二和步驟三。如果我們?cè)诓襟E一的階段給用戶(hù)提供了步驟三的觸點(diǎn)，保不齊會(huì)有用戶(hù)嘗試去交互，這樣的無(wú)效操作會(huì)觸發(fā)報(bào)錯(cuò)場(chǎng)景。所以當(dāng)用戶(hù)處于一個(gè)線(xiàn)性的操作流程中，根據(jù)用戶(hù)所處的階段，分析用戶(hù)可能進(jìn)行交互操作，提供交互觸點(diǎn)，保證用戶(hù)看到的觸點(diǎn)都是可交互的。
罔顧用戶(hù)的操作階段，一股腦的把所有觸點(diǎn)都提供給用戶(hù)。設(shè)計(jì)師倒是很省心，但是用戶(hù)卻會(huì)很糟心，他們需要花時(shí)間去判斷和分析每一個(gè)觸點(diǎn)的作用以及它們之間可能存在的聯(lián)系。這個(gè)工作應(yīng)該由我們代勞，我們來(lái)分析用戶(hù)處于不同階段所需要的功能觸點(diǎn)。
舉個(gè)知乎的例子，知乎有一個(gè)“向知友提問(wèn)”的功能。但是這個(gè)按鈕只會(huì)在用戶(hù)滑動(dòng)搜索結(jié)果頁(yè)3屏后才會(huì)出現(xiàn)，因?yàn)榛瑒?dòng)了3屏，我們可以猜測(cè)用戶(hù)對(duì)當(dāng)前的搜索結(jié)果不滿(mǎn)意，引導(dǎo)用戶(hù)去提問(wèn)。
當(dāng)然限制原則不僅僅是限制交互觸點(diǎn)，還可以應(yīng)用到產(chǎn)品邏輯中，幫助用戶(hù)解決很多問(wèn)題。我曾經(jīng)遇到過(guò)一個(gè)場(chǎng)景，公司上線(xiàn)了一款優(yōu)惠券，用戶(hù)點(diǎn)擊“立即領(lǐng)取”按鈕即可領(lǐng)取。但是有些用戶(hù)會(huì)被風(fēng)控判定為了風(fēng)險(xiǎn)等級(jí)過(guò)高，導(dǎo)致領(lǐng)取失敗。對(duì)于這個(gè)報(bào)錯(cuò)文案，我們改了好幾版，但是每次都會(huì)收到用戶(hù)的投訴。我們無(wú)法直接告訴用戶(hù)，你是因?yàn)轱L(fēng)險(xiǎn)等級(jí)過(guò)高導(dǎo)致無(wú)法領(lǐng)取，因?yàn)橛脩?hù)風(fēng)險(xiǎn)等級(jí)過(guò)高是因?yàn)殚_(kāi)通了某項(xiàng)業(yè)務(wù)。當(dāng)時(shí)開(kāi)通的時(shí)候，我們并未告知開(kāi)通后會(huì)被判定為高風(fēng)險(xiǎn)用戶(hù)。所以為了不必要的麻煩，最好的辦法就是進(jìn)行判斷前置，如果判斷用戶(hù)為高風(fēng)險(xiǎn)用戶(hù)那么就直接不展示該優(yōu)惠券。
就近原則
從上面的闡述中，我們可以發(fā)現(xiàn)“所見(jiàn)即所得”原則最根本的目的是為了節(jié)省用戶(hù)的操作時(shí)間，提升產(chǎn)品易用性。廣義的操作時(shí)間還應(yīng)該包括了用戶(hù)對(duì)于反饋的感知時(shí)間，因?yàn)橹挥谐浞掷斫庀到y(tǒng)反饋的信息才能進(jìn)行進(jìn)一步的操作。如何幫助用戶(hù)快速的消化反饋的信息呢？因?yàn)榉答伿窍到y(tǒng)對(duì)于用戶(hù)操作的回應(yīng)，那么我們可以讓操作和反饋盡量的貼近一點(diǎn)，這就是就近原則。就近原則可以分為兩類(lèi)：位置就近和形式就近。
1） 位置就近
所見(jiàn)即所得，這里的“所見(jiàn)”即代表著用戶(hù)的視線(xiàn)，而用戶(hù)的視線(xiàn)總是停留在上一個(gè)交互觸點(diǎn)附近。
例如，還是寄件的場(chǎng)景，要填寫(xiě)發(fā)件人信息，我懶得重新填寫(xiě)一遍地址，正好看到輸入框右邊有一個(gè)附近地址的功能。我點(diǎn)了一下，沒(méi)有反應(yīng)，又點(diǎn)了幾下才發(fā)現(xiàn)底部出現(xiàn)了一個(gè)“附近地址”的列表。這里的交互觸點(diǎn)是“附近地址”的文字鏈接，我的視線(xiàn)也是停留在附近，沒(méi)有注意到下拉列表已經(jīng)出現(xiàn)在底部。操作和反饋完全不在同一視覺(jué)區(qū)域。
2）形式就近
形式就近，這里的形式特指反饋形式。目前最通用的反饋方式是彈框，彈框的弊端也就恰恰在于它的“通用”上。所有類(lèi)型的反饋都可以用彈框來(lái)承載，用戶(hù)無(wú)法立刻感知到彈框所傳遞內(nèi)容是什么。既然反饋是系統(tǒng)對(duì)于用戶(hù)操作的回應(yīng)，而用戶(hù)操作又是一個(gè)個(gè)交互觸點(diǎn)所觸發(fā)的。如果我們可以通過(guò)改變觸點(diǎn)自身形態(tài)的變化來(lái)完成信息的傳遞，用戶(hù)感知起來(lái)會(huì)更加容易。
舉個(gè)例子，用戶(hù)在輸入登錄密碼的時(shí)候，其觸點(diǎn)是輸入框。當(dāng)用戶(hù)密碼輸入錯(cuò)誤的時(shí)候，我們可以通過(guò)抖動(dòng)輸入框的方式告知用戶(hù)輸入錯(cuò)誤，這里抖動(dòng)是現(xiàn)實(shí)生活中“搖頭”的映射，我們都知道搖頭代表著否定的意思，用戶(hù)不用看到彈框上的“密碼錯(cuò)誤”幾個(gè)字也能明白密碼輸錯(cuò)了。
總結(jié)
以上就是我對(duì)交互設(shè)計(jì)中“所見(jiàn)即所得”原則的總結(jié)和分析，如果你有不同的意見(jiàn)和看法，歡迎留言或者加群討論
藍(lán)設(shè)計(jì)( m.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.miumiuwan.com
