交互設(shè)計5大定理
發(fā)布時間:2022-01-06 09:57 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 2883

推導(dǎo)

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

費茨定律告訴我們要節(jié)省操作時間應(yīng)該怎么做:放大目標(biāo)對象,減小目標(biāo)距離。

席克定律告訴我們要節(jié)省決策時間應(yīng)該怎么做:盡可能的減少選項的數(shù)量。

米勒定律告訴我們?nèi)祟愑洃浀纳舷,所以要將信息?shù)量控制在 4±1 內(nèi)。

接近法則告訴我們相鄰≈相關(guān),所以要根據(jù)信息親密性組織其位置關(guān)系。

泰思勒定律告訴我們復(fù)雜性是守恒的,我們要平衡復(fù)雜性的天平向誰傾斜,以實現(xiàn)整體效益最大化。

防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。

奧卡姆剃刀原理告訴我們?nèi)鐭o必要,勿增實體,設(shè)計要盡量的簡約。

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

交互設(shè)計的終極目標(biāo)是改變和影響用戶的行為,達(dá)到期望的業(yè)務(wù)結(jié)果,比如下單率、搜索率等結(jié)果指標(biāo),結(jié)果指標(biāo)因產(chǎn)品而異,不具有普適性,不可一言以概之。而在交互設(shè)計的過程中,以交互設(shè)計定律為指導(dǎo)的過程指標(biāo)是通用的,幾乎可以說放之四海而皆準(zhǔn),我把這四個過程指標(biāo)概括為四字箴言:少快好省。怎么理解呢?

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

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

奧卡姆剃刀原理

奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業(yè)產(chǎn)品適用,對于軟件類產(chǎn)品也是如此。因為任何增加的非必要信息和功能,都會帶來生產(chǎn)/維護(hù)成本的增加,以及用戶認(rèn)知/操作成本的增加。在現(xiàn)今這個注意力稀缺的時代,復(fù)雜會讓人望而卻步,也容易使人迷失,而精簡的產(chǎn)品更利于人們的理解和操作。

典型案例:

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

19 年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結(jié)構(gòu)到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導(dǎo),告訴用戶有哪些界面及功能的變化,結(jié)果新版灰度期間,信息流滲透率下降了 33%,搜索下降了 18%,經(jīng)過仔細(xì)的數(shù)據(jù)排查,發(fā)現(xiàn)都是滑屏引導(dǎo)惹的禍,當(dāng)把滑屏引導(dǎo)去掉后,搜索和信息流的數(shù)據(jù)都恢復(fù)正向了。

19 年底,我們做的另一個運營活動也經(jīng)歷了類似的教訓(xùn)。當(dāng)時錦鯉很火,我們就做了一個錦鯉大作戰(zhàn)的小活動,畫面精致,獎勵也比較誘人,但是發(fā)現(xiàn)活動上線后轉(zhuǎn)化率效果卻不及預(yù)期,我們再次把矛頭對準(zhǔn)了蒙層引導(dǎo),通過去掉蒙層引導(dǎo),CTA 按鈕場景化,并增加微動效,轉(zhuǎn)化效果立刻得到了提升。去掉不必要的引導(dǎo),讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現(xiàn)。

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

米勒定律

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

典型案例:

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

多爾蒂門檻

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

雅各布定律

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

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

可感知性原則

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

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

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

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

當(dāng)我們想要刪除某張照片時:

操作前有預(yù)期:工具欄位于默認(rèn)的底部位置,有刪除圖標(biāo)+文字明確示意的功能按鈕,讓用戶一看就知道應(yīng)該選擇哪一項操作。

操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態(tài),隨后馬上出現(xiàn)一個確認(rèn)彈窗,而且是就近位置出現(xiàn),確認(rèn)彈窗上提示簡單,按鈕用的是 CTA 的形式,操作交互一目了然。

操作后可撤銷:當(dāng)用戶確認(rèn)刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復(fù)照片。

結(jié)語

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

值得反復(fù)學(xué)習(xí)的「交互設(shè)計5大定律」,一篇帶你全部學(xué)完!

也是為了滿足米勒定律的 4±1 原則,我將交互設(shè)計定律濃縮成了 5 條,如果在此基礎(chǔ)上加一條的話,我會在「好」的指標(biāo)下,增加一條「格式塔原理」,它包含的 7 大設(shè)計原則。格式塔原理是做設(shè)計排版的基石,絕對值得所有設(shè)計師反復(fù)學(xué)習(xí)、研究和運用。到這里重新定義交互設(shè)計 5 大定律就全部介紹完成了

Sketch視頻教程
我要自學(xué)網(wǎng)商城 ¥40 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機(jī)械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC