重新定義「交互設(shè)計5大定律」,你漲知識了沒?

17 評論 17193 瀏覽 197 收藏 15 分鐘

編輯導(dǎo)語:交互設(shè)計在產(chǎn)品設(shè)計中是關(guān)鍵點之一,也是接近于用戶體驗的一種設(shè)計,能讓用戶感受到交互體驗的重要點;交互設(shè)計師在日常工作時,需要注意交互設(shè)計的一些定律,更好的做到加強交互體驗;本文作者分享了關(guān)于交互設(shè)計的五大定律,我們一起來了解一下。

前段時間應(yīng)邀給部門內(nèi)新入職的校招設(shè)計師講一堂設(shè)計法則的基礎(chǔ)課,作為交互設(shè)計師,交互設(shè)計定律肯定是繞不開的一個知識點,但對于網(wǎng)上廣為流傳的《交互設(shè)計7大定律》,我其實一直都有些質(zhì)疑。

因為沒搞清楚作者組織的思路,也查不到任何文檔的介紹,我覺得如果就這樣照本宣科的去講交互設(shè)計7大定律是不負責(zé)任的,所以我根據(jù)自己近10年的交互設(shè)計經(jīng)驗,重新定義了今天這「交互設(shè)計5大定律」,希望對你理解和運用設(shè)計定律有所啟發(fā)。

在介紹重新定義的交互設(shè)計定律之前,我們先來回顧一下經(jīng)典的《交互設(shè)計7大定律》:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

  1. 費茨定律告訴我們要節(jié)省操作時間應(yīng)該怎么做:放大目標對象,減小目標距離。
  2. 席克定律告訴我們要節(jié)省決策時間應(yīng)該怎么做:盡可能的減少選項的數(shù)量。
  3. 米勒定律告訴我們?nèi)祟愑洃浀纳舷蓿砸獙⑿畔?shù)量控制在4±1內(nèi)。
  4. 接近法則告訴我們相鄰≈相關(guān),所以要根據(jù)信息親密性組織其位置關(guān)系。
  5. 泰思勒定律告訴我們復(fù)雜性是守恒的,我們要平衡復(fù)雜性的天平向誰傾斜,以實現(xiàn)整體效益最大化。
  6. 防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。
  7. 奧卡姆剃刀原理告訴我們?nèi)鐭o必要,勿增實體,設(shè)計要盡量的簡約。

不知道你看完以上7個定律有什么感受,我的感受是,他們彼此之間有些重合(奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡),但用其概括交互設(shè)計的精髓,又覺得不夠完整(做到這幾點就夠了嗎?),整體交互設(shè)計的精髓要義并沒有表達地很清楚(如何用一句話來概括交互設(shè)計的目標?)

帶著這幾點疑問,我重新去思考到底什么是交互設(shè)計的底層設(shè)計目標?到底哪些交互設(shè)計定律更能更好的體現(xiàn)其本質(zhì)?以下是我思考的結(jié)果:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

交互設(shè)計的終極目標是改變和影響用戶的行為,達到期望的業(yè)務(wù)結(jié)果,比如下單率、搜索率等結(jié)果指標,結(jié)果指標因產(chǎn)品而異,不具有普適性,不可一言以概之。

而在交互設(shè)計的過程中,以交互設(shè)計定律為指導(dǎo)的過程指標是通用的,幾乎可以說放之四海而皆準,我把這四個過程指標概括為四字箴言:少快好省,怎么理解呢?

  1. 所謂少,就是信息功能要精煉,要一目了然,要盡可能減少功能/信息的復(fù)雜度。
  2. 所謂快,既是性能也是效率,指的是要盡可能快的響應(yīng)用戶的操作,達成用戶目標。
  3. 所謂好,就是產(chǎn)品的設(shè)計必須達成行業(yè)一流的設(shè)計標準,讓用戶用的順手、滿意。
  4. 所謂省,就是省心省力省時,能夠幫助用戶節(jié)約時間,降低操作和認知負荷。

基于這樣的過程指標,我挑選了5個設(shè)計定律來進行設(shè)計指導(dǎo),下面我們逐一來看。

一、奧卡姆剃刀原理

奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業(yè)產(chǎn)品適用,對于軟件類產(chǎn)品也是如此。因為任何增加的非必要信息和功能,都會帶來生產(chǎn)/維護成本的增加,以及用戶認知/操作成本的增加。

在現(xiàn)今這個注意力稀缺的時代,復(fù)雜會讓人望而卻步,也容易使人迷失,而精簡的產(chǎn)品更利于人們的理解和操作。

典型案例:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

小米的電視遙控器設(shè)計和傳統(tǒng)遙控器設(shè)計相比,對奧卡姆剃刀原理的運用非常極致,相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。

我們再來看一個互聯(lián)網(wǎng)產(chǎn)品設(shè)計的案例:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

19年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結(jié)構(gòu)到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導(dǎo),告訴用戶有哪些界面及功能的變化。

結(jié)果新版灰度期間,信息流滲透率下降了33%,搜索下降了18%,經(jīng)過仔細的數(shù)據(jù)排查,發(fā)現(xiàn)都是滑屏引導(dǎo)惹的禍,當把滑屏引導(dǎo)去掉后,搜索和信息流的數(shù)據(jù)都恢復(fù)正向了。

19年底,我們做的另一個運營活動也經(jīng)歷了類似的教訓(xùn)。當時錦鯉很火,我們就做了一個錦鯉大作戰(zhàn)的小活動,畫面精致,獎勵也比較誘人。

但是發(fā)現(xiàn)活動上線后轉(zhuǎn)化率效果卻不及預(yù)期,我們再次把矛頭對準了蒙層引導(dǎo),通過去掉蒙層引導(dǎo),CTA按鈕場景化,并增加微動效,轉(zhuǎn)化效果立刻得到了提升。

去掉不必要的引導(dǎo),讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現(xiàn)。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

二、米勒定律

米勒定律告訴我們:人們工作記憶平均能記住的元素數(shù)量僅為4±1。所以我們在設(shè)計時,首先要運用奧卡姆剃刀原理,盡可能的去做減法,盡量將數(shù)量控制在4±1的范圍內(nèi)。如果選項較多,且減無可減時,就需要對信息/選項進行分類和分組,保證類別的數(shù)量在4±1的范圍內(nèi)。

典型案例:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

對于像手機號、銀行卡號、身份證號這種類型的信息,因為其固有的信息長度無法做精簡,所以在信息組織時就會采取分組的方式,保證分組的數(shù)量控制在4±1的范圍內(nèi)。

另一個案例也是關(guān)于我們的外銷瀏覽器:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

左一是改版前的頁面,功能有12項之多,且產(chǎn)品認為減無可減了。我們的交互設(shè)計師通過對頁面功能使用頻度及產(chǎn)品功能的重要程度進行分析,將功能劃分為了三大類:重要功能,常用功能,必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現(xiàn),界面復(fù)雜度迅速降低,功能清晰度和操作便捷度顯著提升。

三、多爾蒂門檻

多爾蒂門檻告訴我們:系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng),這樣才能夠讓使用者保持專注,并提高生產(chǎn)效率。

先來看一組模擬的響應(yīng)效果:

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

圖片來自作者「超人的電話亭」

從這組圖片可以感受到,當圖片在400ms內(nèi)時,是勉強可以接受的,但當時間延長到600ms及以上時,人們就會感受到明顯的延遲、等待和卡頓感。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

多爾蒂門檻對響應(yīng)時間的上限給出了參考,而后續(xù)的研究則給出了更細致的響應(yīng)標準,比如元素的點擊反饋應(yīng)控制在0.1s左右,盡量不要超過0.14s,單個元素入場退場時間應(yīng)控制在0.2s左右(入場一般比退場稍慢),而頁面的轉(zhuǎn)場時長根據(jù)頁面大小和轉(zhuǎn)場動效的復(fù)雜度盡量控制在0.3s-0.4s之間。只有響應(yīng)時間符合上述標準,才不會讓用戶對產(chǎn)品的流暢性有所懷疑。

四、雅各布定律

用戶將大部分時間花在別人家的網(wǎng)站(產(chǎn)品)上,而不是你的。這意味著他們希望你的網(wǎng)站(產(chǎn)品)跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們:作為設(shè)計師,我們必須要多研究把玩各種App,這樣我們才能夠?qū)Ξ斚庐a(chǎn)品的設(shè)計趨勢有更直觀的感受。

對于新入行的設(shè)計師,我會建議大家好好研究一下ios和android的OS規(guī)范,了解平臺的特性,同時再翻翻下面這些書籍,了解各種常見的設(shè)計模式,豐富自己的設(shè)計組件庫。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

此外,在做某種特定類型的產(chǎn)品設(shè)計時,也非常有必要做行業(yè)及競品分析,這樣才能確保我們在做產(chǎn)品設(shè)計時,可以延續(xù)用戶的主要視覺及行為習(xí)慣,減少用戶的學(xué)習(xí)及使用成本。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

以視頻App為例,行業(yè)內(nèi)的頭部產(chǎn)品在產(chǎn)品框架及元素布局上都具有高度的一致性,這也是雅各布定律的一個體現(xiàn)。

五、可感知性原則

操作前有預(yù)期,操作時有反饋,操作后可撤銷。這是十年前我入行時接觸到的一句話,我不知道是誰提出來的,但卻是這些年我做交互設(shè)計最重要的一條參考原則,我將其簡單命名為可感知性原則。

操作前有預(yù)期,指的是要符合視覺認知原理,符合行業(yè)設(shè)計習(xí)慣,讓用戶一看就懂。

操作時有反饋,指的是操作時要即時反饋,就近反饋,并且反饋合理。

操作后可撤銷,指的是任何操作都盡量讓其可撤銷,讓用戶無后顧之憂,安心探索。只要存在用戶行為的交互,這個準則都是可以用來檢驗的,以下圖為例。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

當我們想要刪除某張照片時:

  • 操作前有預(yù)期:工具欄位于默認的底部位置,有刪除圖標+文字明確示意的功能按鈕,讓用戶一看就知道應(yīng)該選擇哪一項操作;
  • 操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態(tài),隨后馬上出現(xiàn)一個確認彈窗,而且是就近位置出現(xiàn),確認彈窗上提示簡單,按鈕用的是CTA的形式,操作交互一目了然。
  • 操作后可撤銷:當用戶確認刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復(fù)照片。

六、結(jié)語

到這里,交互設(shè)計5大定律就全部介紹完成了,圍繞交互設(shè)計的過程指標,少、快、好、省依次展開,給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。

重新定義「交互設(shè)計5大定律」,一起漲芝士啦

也是為了滿足米勒定律的4±1原則,我將交互設(shè)計定律濃縮成了5條,如果在此基礎(chǔ)上加一條的話,我會在「好」的指標下,增加一條「格式塔原理」,它包含的7大設(shè)計原則。

格式塔原理是做設(shè)計排版的基石,絕對值得所有設(shè)計師反復(fù)學(xué)習(xí)、研究和運用;到這里重新定義交互設(shè)計5大定律就全部介紹完成了,希望你閱讀完也有所收獲。

參考文獻:多爾蒂門檻

 

本文由@悅有所思 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自?Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 可感知原則,和七大定律的“防錯原則”很像啊

    來自上海 回復(fù)
    1. 差異還是挺大的,可感知原則更多強調(diào)設(shè)計與用戶的過往習(xí)慣經(jīng)驗和認知的匹配性,而防錯原則更多是設(shè)計時,要盡量不給用戶犯錯的環(huán)境和設(shè)計,或者要兼容部分用戶可能能存犯錯的方式。

      來自江蘇 回復(fù)
    2. 很感謝作者能回復(fù)。那就是“可感知原則”就是要匹配產(chǎn)品目標用戶的交互心智,盡量符合他們已有的習(xí)慣喝認知。

      來自上海 回復(fù)
  2. 為什么我看到的米勒定律文章寫的是7±2

    來自廣東 回復(fù)
    1. 那個是最高的猜測,后來實驗多次證明是4±1

      來自江蘇 回復(fù)
  3. “操作前有預(yù)期,操作時有反饋,操作后可撤銷”泡泡老師的原話哈哈哈

    來自上海 回復(fù)
  4. 干貨滿滿,并有實際案例加以理解

    回復(fù)
  5. 好文

    回復(fù)
  6. 學(xué)到了

    回復(fù)
  7. 可以的。學(xué)到很多,很實用。

    來自河南 回復(fù)
  8. 超級棒

    回復(fù)
  9. 贊??

    回復(fù)
  10. 非常不錯

    回復(fù)
  11. 請問可以轉(zhuǎn)載嗎,會備注來源與作者,謝謝

    來自浙江 回復(fù)
  12. 寫的真棒??,太專業(yè)了

    回復(fù)
    1. 來自北京 回復(fù)
  13. 寫得非常細膩??

    回復(fù)