1. 從距離切入的常規(guī)使用
1.1 對于起始點(diǎn)明確的指點(diǎn)事件
以前我在 UI 控件專題中分析導(dǎo)航欄使用方法的時(shí)候，有引用過滴滴的案例，談到了我對滴滴的“取消訂單”操作交互設(shè)計(jì)的看法，當(dāng)時(shí)是將該操作與使用常規(guī)導(dǎo)航欄取消訂單進(jìn)行了對比。
首先毋庸置疑，「取消訂單」對于業(yè)務(wù)方來說是一項(xiàng)負(fù)向情緒操作（即：與業(yè)務(wù)流程、商業(yè)目標(biāo)相悖的操作）。我們在日常設(shè)計(jì)界面與交互時(shí)，總是希望避免用戶產(chǎn)生負(fù)向情緒操作，這一點(diǎn)對于久經(jīng)沙場，常與產(chǎn)品、運(yùn)營甚至老板對接的設(shè)計(jì)師朋友，應(yīng)該能夠達(dá)成共識。
所以我們看到滴滴對于「取消訂單」操作采用了費(fèi)茨定律中的減小目標(biāo)區(qū)域大小 W 的設(shè)計(jì)，將「取消訂單」按鈕設(shè)計(jì)得小而不顯眼。
但盡管我們總是在極力避免用戶負(fù)向情緒操作，可也無法徹底規(guī)避特殊場景的產(chǎn)生。例如示例中，滴滴雖不希望用戶取消訂單，但依然無法規(guī)避用戶誤操作呼叫、等待時(shí)間過長等場景而導(dǎo)致需要取消訂單的行為。
從上圖中很容易看到，當(dāng)用戶點(diǎn)擊「確認(rèn)呼叫」時(shí)，點(diǎn)擊「確認(rèn)呼叫」按鈕是一個(gè)起始點(diǎn)明確的指點(diǎn)事件，與「取消訂單」的間距很小。對于有明確取消訂單意愿的用戶，可以快速方便地進(jìn)行取消呼叫操作。
再例如 PC 端中，我們在任意位置點(diǎn)鼠標(biāo)右鍵，都會在當(dāng)前位置彈出右鍵菜單。點(diǎn)擊鼠標(biāo)的位置是明確的起始點(diǎn)，在就近位置彈出菜單可以大大降低目標(biāo)與起始位置的距離。
主流移動端規(guī)范中，iOS 與 Material Design 的氣泡彈窗菜單，也和 PC 端右鍵菜單的設(shè)計(jì)有異曲同工之妙，在許多 APP 中也屢見不鮮。
設(shè)計(jì)思想總結(jié)
分析當(dāng)前設(shè)計(jì)場景中的功能與前后步驟是否有（關(guān)鍵）聯(lián)動關(guān)系。如果有，即可以將功能入口定義為起始點(diǎn)明確的指點(diǎn)事件。如果聯(lián)動關(guān)系具有正向意義，請進(jìn)行思考，是否采用減小目標(biāo)區(qū)域距離 D 的設(shè)計(jì)，來協(xié)助提高用戶操作效率。
1.2 滿足操作習(xí)慣的指點(diǎn)事件
有聯(lián)動關(guān)系的功能場景其實(shí)是非常具體的，具體的案例當(dāng)然比較少見，而抽象的場景其實(shí)才占據(jù)了我們設(shè)計(jì)需求中的絕大多數(shù)。有時(shí)候一個(gè)頁面的功能繁多，我們無法具體弄清楚用戶到底想要做什么。
舉個(gè)例子，當(dāng)用戶點(diǎn)開一個(gè)電商歷史訂單，他想要做什么呢？查看物流、查看訂單號、評價(jià)、復(fù)購、聯(lián)系售后？可選擇性太多。我們無法確定用戶究竟想干嘛。
那我們來看看天貓是怎么做的：
頁面中的信息與功能非常多，且不同的訂單狀態(tài)設(shè)計(jì)到的功能展示也各不相同。但滑動頁面時(shí)，始終有幾個(gè)關(guān)鍵操作被固定在頁面底部，并且居右排列。
和前面起始點(diǎn)明確的操作相比，我們的設(shè)計(jì)需求可能包含太多不能完全明確起始點(diǎn)的指點(diǎn)事件，但為了幫助用戶做出選擇，我們可以盡量使關(guān)鍵指點(diǎn)動作符合當(dāng)前設(shè)備的操作習(xí)慣。
例如手機(jī)這樣的小屏設(shè)備，我們拇指最常操作的區(qū)域就是屏幕的右側(cè)中下部，拇指時(shí)常是停留在這個(gè)操作區(qū)域的，所以將主要功能操作放置在設(shè)備中下部，雖然不能明確起始點(diǎn)，但可以盡可能減小操作的移動距離。
設(shè)計(jì)思想總結(jié)
面臨“一個(gè)頁面不只做一件事”的情況，要幫助用戶梳理繁多功能點(diǎn)中的功能優(yōu)先級和操作頻次數(shù)據(jù)，優(yōu)先級高、頻次高的操作可以結(jié)合當(dāng)前操作設(shè)備的操作習(xí)慣，協(xié)助提高用戶操作效率。例如：當(dāng)設(shè)計(jì)車載 HMI 時(shí)，我們是否可以考慮將司機(jī)高頻功能，如廣播、導(dǎo)航等置于偏主駕駛座方，方便司機(jī)操作；而次要功能可以放置于偏副駕駛座方。
2. 從尺寸切入的常規(guī)使用
2.1 簡單粗暴地放大按鈕尺寸
對于功能點(diǎn)比較單一、頁面內(nèi)容比較簡單的頁面，放大按鈕的尺寸一方面能夠填充頁面內(nèi)容，同時(shí)也可以利于用戶點(diǎn)擊。
2.2 擴(kuò)大操作熱區(qū)
考慮到平衡視覺關(guān)系，我們可能無法為了提高用戶操作體驗(yàn)，而在頁面中將每一個(gè)操作都簡單粗暴地放大。但我們可以選擇在元素視覺大小不變的情況下，擴(kuò)大觸發(fā)操作的范圍，即擴(kuò)大熱區(qū)。
設(shè)計(jì)思想總結(jié)
擴(kuò)大事件響應(yīng)區(qū)域是我認(rèn)為提升指點(diǎn)效率最粗暴也是最有效的方法（還記得上一篇文章我提起的“指墻”的例子嗎）。對于擴(kuò)大指點(diǎn)區(qū)域，我們可以根據(jù)頁面具體內(nèi)容排版，往兩個(gè)方向思考：①直接擴(kuò)大視覺元素；②保持視覺元素不變，擴(kuò)大響應(yīng)熱區(qū)。兩個(gè)方案分別是從UI和前端落地上切入，所以要記得有效溝通。
以上我們所講到的案例，都是通過正向思考產(chǎn)生的。但許多交互與 UI 設(shè)計(jì)中，反向思考、逆向使用費(fèi)茨定律的例子，也不在少數(shù)。
這很好理解，當(dāng)我們不希望讓用戶過于方便地操作的時(shí)候，我們就可以開始進(jìn)行逆向思維，反向使用費(fèi)茨定律，增加用戶的操作難度。什么時(shí)候我們不希望用戶過于方便地操作呢？——重要或危險(xiǎn)操作需要用戶小心謹(jǐn)慎，或者壓根想阻撓用戶操作的時(shí)候。
反向使用費(fèi)茨定律最常被人引用的案例就是 iOS 的關(guān)機(jī)操作。
iOS 的確認(rèn)關(guān)機(jī)操作居于設(shè)備的頂部區(qū)域，是不太滿足用戶對手機(jī)的操作習(xí)慣的。其次通過滑動關(guān)機(jī)操作也增加了費(fèi)茨定律中的「距離 D」。各種反向設(shè)計(jì)都是為了提高用戶操作的不便性，放置用戶誤操作。
同時(shí)費(fèi)茨定律的反向使用方法在一些商業(yè)需求中也經(jīng)常被使用。
我們常？吹皆S多商業(yè)廣告的關(guān)閉按鈕被設(shè)計(jì)得很小，且點(diǎn)擊區(qū)域也和用戶習(xí)慣相悖，這也是反向使用費(fèi)茨定律的案例。雖然從用戶體驗(yàn)上來說，我們都希望盡量避免這些設(shè)計(jì)存在，但在商業(yè)價(jià)值面前，你懂的。
最后我想再回到費(fèi)茨定律的公式 T=a+blog2(D/W+1) 談一談對于設(shè)計(jì)法則的看法。
對高中數(shù)學(xué)還有一些記憶的朋友，應(yīng)該對 log 函數(shù)不陌生，是求冪的逆運(yùn)算。log 函數(shù)往往會大幅抵消真數(shù)變化對底數(shù)的影響。我舉個(gè)具體數(shù)值的例子：
我們?nèi)绻唵斡洖?T=log2(D/W)，假設(shè)「距離 D」是「大小 W」的 32 倍，那么 T=log2(32)=5。如果保持「大小 W」不變，「距離 D」縮小為原來的 1/4，即「距離 D」是「大小 W」的 8 倍，那么 T=log2(8)=3。
看到了嗎，「距離 D」雖然縮小了 4 倍，但因?yàn)?log 函數(shù)的影響，T 縮小的倍數(shù)還不到原來的 1/2。何況我們在移動設(shè)備交互設(shè)計(jì)中，時(shí)間 T 往往連一個(gè)整數(shù)秒都達(dá)不到，通常是毫秒級的，所以就算「距離 D」與「大小 W」比率成倍變化，對時(shí)間 T 最后的真實(shí)數(shù)值改變其實(shí)非常微小。
在對費(fèi)茨定律的講解結(jié)束之際，我講這個(gè)是為了說明了什么呢？
我相信讀者中，抱有“其實(shí)這樣做和那樣做，最后的實(shí)質(zhì)性差別并不大嘛”想法的大有人在，但對于老前輩們寫進(jìn)書里的理論又羞于反駁。起初我時(shí)常和你們一樣。
但隨著做設(shè)計(jì)的時(shí)長越長，慢慢發(fā)現(xiàn)，多看多學(xué)“法則”其實(shí)往往是在鞏固一種思維模式和思考方向，而這些我們裝在腦中的東西往往比法則本身更有價(jià)值。對于費(fèi)茨定律我希望大家不要像我起初抱著絕對的數(shù)學(xué)思想去理解，不然會走進(jìn)一個(gè)胡同。多用開放思維去理解，可能更容易打開你設(shè)計(jì)的思想和對設(shè)計(jì)的理解~
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。