交互設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中是關(guān)鍵點(diǎn)之一，也是接近于用戶體驗(yàn)的一種設(shè)計(jì)，能讓用戶感受到交互體驗(yàn)的重要點(diǎn)；交互設(shè)計(jì)師在日常工作時(shí)，需要注意交互設(shè)計(jì)的一些定律，更好的做到加強(qiáng)交互體驗(yàn)；本文作者分享了關(guān)于交互設(shè)計(jì)的五大定律，我們一起來(lái)了解一下。
前段時(shí)間應(yīng)邀給部門內(nèi)新入職的校招設(shè)計(jì)師講一堂設(shè)計(jì)法則的基礎(chǔ)課，作為交互設(shè)計(jì)師，交互設(shè)計(jì)定律肯定是繞不開(kāi)的一個(gè)知識(shí)點(diǎn)，但對(duì)于網(wǎng)上廣為流傳的《交互設(shè)計(jì)7大定律》，我其實(shí)一直都有些質(zhì)疑。
因?yàn)闆](méi)搞清楚作者組織的思路，也查不到任何文檔的介紹，我覺(jué)得如果就這樣照本宣科的去講交互設(shè)計(jì)7大定律是不負(fù)責(zé)任的，所以我根據(jù)自己近10年的交互設(shè)計(jì)經(jīng)驗(yàn)，重新定義了今天這「交互設(shè)計(jì)5大定律」，希望對(duì)你理解和運(yùn)用設(shè)計(jì)定律有所啟發(fā)。
在介紹重新定義的交互設(shè)計(jì)定律之前，我們先來(lái)回顧一下經(jīng)典的《交互設(shè)計(jì)7大定律》：
費(fèi)茨定律告訴我們要節(jié)省操作時(shí)間應(yīng)該怎么做：放大目標(biāo)對(duì)象，減小目標(biāo)距離。
席克定律告訴我們要節(jié)省決策時(shí)間應(yīng)該怎么做：盡可能的減少選項(xiàng)的數(shù)量。
米勒定律告訴我們?nèi)祟愑洃浀纳舷�，所以要將信息�?shù)量控制在4±1內(nèi)。
接近法則告訴我們相鄰≈相關(guān)，所以要根據(jù)信息親密性組織其位置關(guān)系。
泰思勒定律告訴我們復(fù)雜性是守恒的，我們要平衡復(fù)雜性的天平向誰(shuí)傾斜，以實(shí)現(xiàn)整體效益最大化。
防錯(cuò)原則告訴我們用戶出錯(cuò)是不可避免的，我們只能減少并降低其犯錯(cuò)的可能性。
奧卡姆剃刀原理告訴我們?nèi)鐭o(wú)必要，勿增實(shí)體，設(shè)計(jì)要盡量的簡(jiǎn)約。
不知道你看完以上7個(gè)定律有什么感受，我的感受是，他們彼此之間有些重合（奧卡姆剃刀原理、席克定律、米勒定律都在傳達(dá)信息要精簡(jiǎn)），但用其概括交互設(shè)計(jì)的精髓，又覺(jué)得不夠完整（做到這幾點(diǎn)就夠了嗎？），整體交互設(shè)計(jì)的精髓要義并沒(méi)有表達(dá)地很清楚（如何用一句話來(lái)概括交互設(shè)計(jì)的目標(biāo)？）
帶著這幾點(diǎn)疑問(wèn)，我重新去思考到底什么是交互設(shè)計(jì)的底層設(shè)計(jì)目標(biāo)？到底哪些交互設(shè)計(jì)定律更能更好的體現(xiàn)其本質(zhì)？以下是我思考的結(jié)果：
交互設(shè)計(jì)的終極目標(biāo)是改變和影響用戶的行為，達(dá)到期望的業(yè)務(wù)結(jié)果，比如下單率、搜索率等結(jié)果指標(biāo)，結(jié)果指標(biāo)因產(chǎn)品而異，不具有普適性，不可一言以概之。
而在交互設(shè)計(jì)的過(guò)程中，以交互設(shè)計(jì)定律為指導(dǎo)的過(guò)程指標(biāo)是通用的，幾乎可以說(shuō)放之四海而皆準(zhǔn)，我把這四個(gè)過(guò)程指標(biāo)概括為四字箴言：少快好省，怎么理解呢？
所謂少，就是信息功能要精煉，要一目了然，要盡可能減少功能/信息的復(fù)雜度。
所謂快，既是性能也是效率，指的是要盡可能快的響應(yīng)用戶的操作，達(dá)成用戶目標(biāo)。
所謂好，就是產(chǎn)品的設(shè)計(jì)必須達(dá)成行業(yè)一流的設(shè)計(jì)標(biāo)準(zhǔn)，讓用戶用的順手、滿意。
所謂省，就是省心省力省時(shí)，能夠幫助用戶節(jié)約時(shí)間，降低操作和認(rèn)知負(fù)荷。
基于這樣的過(guò)程指標(biāo)，我挑選了5個(gè)設(shè)計(jì)定律來(lái)進(jìn)行設(shè)計(jì)指導(dǎo)，下面我們逐一來(lái)看。
01/
奧卡姆剃刀原理
奧卡姆剃刀原理告訴我們：如無(wú)必要，勿增實(shí)體，即“簡(jiǎn)單有效原理”。對(duì)于工業(yè)產(chǎn)品適用，對(duì)于軟件類產(chǎn)品也是如此。因?yàn)槿魏卧黾拥姆潜匾畔⒑凸δ�，都�?huì)帶來(lái)生產(chǎn)/維護(hù)成本的增加，以及用戶認(rèn)知/操作成本的增加。
在現(xiàn)今這個(gè)注意力稀缺的時(shí)代，復(fù)雜會(huì)讓人望而卻步，也容易使人迷失，而精簡(jiǎn)的產(chǎn)品更利于人們的理解和操作。
典型案例：
小米的電視遙控器設(shè)計(jì)和傳統(tǒng)遙控器設(shè)計(jì)相比，對(duì)奧卡姆剃刀原理的運(yùn)用非常極致，相信大家都可以感受到精簡(jiǎn)前后的視覺(jué)/操作/認(rèn)知負(fù)荷的降低。
我們?cè)賮?lái)看一個(gè)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的案例：
19年初，外銷瀏覽器做了一次視覺(jué)煥新大改版，從交互結(jié)構(gòu)到視覺(jué)界面變化都比較大，所以我們就增加了新版本的滑屏引導(dǎo)，告訴用戶有哪些界面及功能的變化。
結(jié)果新版灰度期間，信息流滲透率下降了33%，搜索下降了18%，經(jīng)過(guò)仔細(xì)的數(shù)據(jù)排查，發(fā)現(xiàn)都是滑屏引導(dǎo)惹的禍，當(dāng)把滑屏引導(dǎo)去掉后，搜索和信息流的數(shù)據(jù)都恢復(fù)正向了。
19年底，我們做的另一個(gè)運(yùn)營(yíng)活動(dòng)也經(jīng)歷了類似的教訓(xùn)。當(dāng)時(shí)錦鯉很火，我們就做了一個(gè)錦鯉大作戰(zhàn)的小活動(dòng)，畫面精致，獎(jiǎng)勵(lì)也比較誘人。
但是發(fā)現(xiàn)活動(dòng)上線后轉(zhuǎn)化率效果卻不及預(yù)期，我們?cè)俅伟衙^對(duì)準(zhǔn)了蒙層引導(dǎo)，通過(guò)去掉蒙層引導(dǎo)，CTA按鈕場(chǎng)景化，并增加微動(dòng)效，轉(zhuǎn)化效果立刻得到了提升。
去掉不必要的引導(dǎo)，讓界面自己會(huì)說(shuō)話，這也是奧卡姆剃刀原理的一個(gè)體現(xiàn)。
02/
米勒定律
米勒定律告訴我們：人們工作記憶平均能記住的元素?cái)?shù)量?jī)H為4±1。所以我們?cè)?a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)時(shí)，首先要運(yùn)用奧卡姆剃刀原理，盡可能的去做減法，盡量將數(shù)量控制在4±1的范圍內(nèi)。如果選項(xiàng)較多，且減無(wú)可減時(shí)，就需要對(duì)信息/選項(xiàng)進(jìn)行分類和分組，保證類別的數(shù)量在4±1的范圍內(nèi)。
典型案例：
對(duì)于像手機(jī)號(hào)、銀行卡號(hào)、身份證號(hào)這種類型的信息，因?yàn)槠涔逃械男畔㈤L(zhǎng)度無(wú)法做精簡(jiǎn)，所以在信息組織時(shí)就會(huì)采取分組的方式，保證分組的數(shù)量控制在4±1的范圍內(nèi)。
另一個(gè)案例也是關(guān)于我們的外銷瀏覽器：
左一是改版前的頁(yè)面，功能有12項(xiàng)之多，且產(chǎn)品認(rèn)為減無(wú)可減了。我們的交互設(shè)計(jì)師通過(guò)對(duì)頁(yè)面功能使用頻度及產(chǎn)品功能的重要程度進(jìn)行分析，將功能劃分為了三大類：重要功能，常用功能，必備功能。然后通過(guò)強(qiáng)化、保持和收納的方式將其進(jìn)行右圖所示的呈現(xiàn)，界面復(fù)雜度迅速降低，功能清晰度和操作便捷度顯著提升。
03/
多爾蒂門檻
多爾蒂門檻告訴我們：系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。
先來(lái)看一組模擬的響應(yīng)效果：
圖片來(lái)自作者「超人的電話亭」
從這組圖片可以感受到，當(dāng)圖片在400ms內(nèi)時(shí)，是勉強(qiáng)可以接受的，但當(dāng)時(shí)間延長(zhǎng)到600ms及以上時(shí)，人們就會(huì)感受到明顯的延遲、等待和卡頓感。
多爾蒂門檻對(duì)響應(yīng)時(shí)間的上限給出了參考，而后續(xù)的研究則給出了更細(xì)致的響應(yīng)標(biāo)準(zhǔn)，比如元素的點(diǎn)擊反饋應(yīng)控制在0.1s左右，盡量不要超過(guò)0.14s，單個(gè)元素入場(chǎng)退場(chǎng)時(shí)間應(yīng)控制在0.2s左右（入場(chǎng)一般比退場(chǎng)稍慢），而頁(yè)面的轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)根據(jù)頁(yè)面大小和轉(zhuǎn)場(chǎng)動(dòng)效的復(fù)雜度盡量控制在0.3s-0.4s之間。只有響應(yīng)時(shí)間符合上述標(biāo)準(zhǔn)，才不會(huì)讓用戶對(duì)產(chǎn)品的流暢性有所懷疑。
04/
雅各布定律
用戶將大部分時(shí)間花在別人家的網(wǎng)站（產(chǎn)品）上，而不是你的。這意味著他們希望你的網(wǎng)站（產(chǎn)品）跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們：作為設(shè)計(jì)師，我們必須要多研究把玩各種App，這樣我們才能夠?qū)Ξ?dāng)下產(chǎn)品的設(shè)計(jì)趨勢(shì)有更直觀的感受。
對(duì)于新入行的設(shè)計(jì)師，我會(huì)建議大家好好研究一下ios和android的OS規(guī)范，了解平臺(tái)的特性，同時(shí)再翻翻下面這些書(shū)籍，了解各種常見(jiàn)的設(shè)計(jì)模式，豐富自己的設(shè)計(jì)組件庫(kù)。
此外，在做某種特定類型的產(chǎn)品設(shè)計(jì)時(shí)，也非常有必要做行業(yè)及競(jìng)品分析，這樣才能確保我們?cè)谧霎a(chǎn)品設(shè)計(jì)時(shí)，可以延續(xù)用戶的主要視覺(jué)及行為習(xí)慣，減少用戶的學(xué)習(xí)及使用成本。
以視頻App為例，行業(yè)內(nèi)的頭部產(chǎn)品在產(chǎn)品框架及元素布局上都具有高度的一致性，這也是雅各布定律的一個(gè)體現(xiàn)。
05/
可感知性原則
操作前有預(yù)期，操作時(shí)有反饋，操作后可撤銷。這是十年前我入行時(shí)接觸到的一句話，我不知道是誰(shuí)提出來(lái)的，但卻是這些年我做交互設(shè)計(jì)最重要的一條參考原則，我將其簡(jiǎn)單命名為可感知性原則。
操作前有預(yù)期，指的是要符合視覺(jué)認(rèn)知原理，符合行業(yè)設(shè)計(jì)習(xí)慣，讓用戶一看就懂。
操作時(shí)有反饋，指的是操作時(shí)要即時(shí)反饋，就近反饋，并且反饋合理。
操作后可撤銷，指的是任何操作都盡量讓其可撤銷，讓用戶無(wú)后顧之憂，安心探索。只要存在用戶行為的交互，這個(gè)準(zhǔn)則都是可以用來(lái)檢驗(yàn)的，以下圖為例。
當(dāng)我們想要?jiǎng)h除某張照片時(shí)：
操作前有預(yù)期：工具欄位于默認(rèn)的底部位置，有刪除圖標(biāo)+文字明確示意的功能按鈕，讓用戶一看就知道應(yīng)該選擇哪一項(xiàng)操作；
操作時(shí)有反饋：點(diǎn)擊刪除按鈕時(shí)，刪除按鈕有一個(gè)灰色的點(diǎn)擊態(tài)，隨后馬上出現(xiàn)一個(gè)確認(rèn)彈窗，而且是就近位置出現(xiàn)，確認(rèn)彈窗上提示簡(jiǎn)單，按鈕用的是CTA的形式，操作交互一目了然。
操作后可撤銷：當(dāng)用戶確認(rèn)刪除后，照片消失，但是還可以去最近刪除的文件夾中，恢復(fù)照片。
06/
結(jié)語(yǔ)
到這里，交互設(shè)計(jì)5大定律就全部介紹完成了，圍繞交互設(shè)計(jì)的過(guò)程指標(biāo)，少、快、好、省依次展開(kāi)，給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。
也是為了滿足米勒定律的4±1原則，我將交互設(shè)計(jì)定律濃縮成了5條，如果在此基礎(chǔ)上加一條的話，我會(huì)在「好」的指標(biāo)下，增加一條「格式塔原理」，它包含的7大設(shè)計(jì)原則。
格式塔原理是做設(shè)計(jì)排版的基石，絕對(duì)值得所有設(shè)計(jì)師反復(fù)學(xué)習(xí)、研究和運(yùn)用；到這里重新定義交互設(shè)計(jì)5大定律就全部介紹完成了，希望你閱讀完也有所收獲。
全部評(píng)論