網頁設計的80/20規則 你可知道?

2020-12-17 51CTO

最近學習了一些有關設計原理的內容,我發現了一個有趣的原則-80/20規則。也被稱為帕雷託原理、朱蘭原理、關鍵的少數和次要的多數理論或因素稀疏理論。

在網站和網絡應用設計中,80/20規則對用戶體驗有深遠的影響,並最終影響網站和網絡應用的內容效用和功能。

本文首先給出了80/20規則的基本定義,然後通過案例講解80/20規則是如何產生效用的。最後通過對80/20規則知識的搜集總結出一些經驗與大家分享。

80/20規則是什麼?

80/20規則最初是由義大利經濟學家維弗雷多·帕雷託總結出來的,但是帕雷託原理的命名是由約瑟夫·M.·朱藍提出的。

以下是對80/20規則的兩種定義。一是從設計通用原則一書中。

80/20 規則認為在任何一個大型的系統中,大約80%的效用就由系統中20%的變量產生的。

維基百科對80/20 規則的定義是:

大許多情況下,大約80%的影響是產生於20%的原因。

做為設計人員,你將會發現80/20規則不是能夠直接人為控制的,我們觀察到它是自然而然產生的。

對80/20 規則的了解可以使我們獲得有價值的信息,並在提高設計易用性和效用方面幫助我們做出決策。

不必糾結於規則的假設性本質

有些批評者認為80/20規則只是一個假設,它只是一個極其一般的系統理論,很多情況下是不適用的。

但先暫且拋開假設問題不談,對用戶界面和功能的設計人員來說,理論概念可以幫助他們審查和優化。無論這理論是70/30規則還是90/10規則。

用戶體驗中如何應用80/20規則?

80/20規則表明80%的結果是由20%的功能和特性決定的,這一規則適用於所有網站、網絡應用程式和軟體。

有些情況下,確定至關重要的20%的構成是容易的。 通過網頁數據統計、表單提交和session cookies可以追蹤到用戶的使用行為,幫助我們了解用戶與哪些UI區域有最多的交互。

然而,這些方法對於分析一些細小的行為是比較困難的。此時,易用性研究就可以派上用場。

案例:識別80/20規則

無論是有意而為,還是無心所至,大量的案例可以說明80/20規則在UI和UX設計師心中的地位。

以UI中最常見的下拉菜單為例,選擇註冊表中的國家項。 多數網站開發人員和內容設計者會發現,某些國家被選中的機率為80%。

如下圖,雖然不按字母排列順序似乎是不合適的,但按照80/20規則,將被選擇次數最多的選項安置到項端是一個慣例。

當在亞馬遜選擇一個新的地址時,默認選項一定是選擇率最高。如下圖,美國。

下面這個英國商務網站就是將英國作為默認選項。

以上的例子說明對最常使用的功能和選項進行優化的重要性。

用戶一般往哪看?

網絡用戶的「F型」閱讀和瀏覽習慣現在已經確定。雖然 「F型」不一定適合所有的環境,但了解這一點,在用戶與你的設計進行交互時,便大概知曉用戶的關注點。

下圖為用戶關注的熱圖分布:

假設這張圖很好的說明用戶的視覺關注點,這也正支持了80/20規則理論。圖上最受關注的區域佔到了頁面的20%,用戶80%的時間用於關注此20%的區域。

做為設計人員,掌握了這個知識以後,便會注重增強和優化用戶習慣性關注的區域。

當然,決定用戶關注點的往往是設計本身,「F型」僅僅是一個基本的嚮導,不可以教條的使用F型來決定20%的位置。

移動設計趨勢和80/20規則

伴隨著當前行動裝置的大行其道,許多設計師和開發人員嘗試首先設計行動裝置頁面。也就是說,在策劃和開發一個網站之前,應該先做出移動版本的頁面,以期獲得收益。

在傳統的網站和網絡應用中,使用頻率和交互頻率最高的區域被歸入20%部分。當設計移動界面時,只關注那20%的部分。

相比於傳統網站中所提供的豐富功能,即使此網站的移動版包含20%最常用的功能,那麼就可以說這個移動版本具有了大多數重要的功能。

我們看看以下這個案例:

上圖是一個網站的全貌,看起來有一種凌亂的歡樂氣氛。網站上有一些引導用戶形為的區域。這個網站設計絕對不是全世界最差的,但總的來說不是非常的集中,並且有太多的選擇。

對比下面的移動版頁面:

相比之下,移動版界面非常簡潔,引導用戶第一眼找到最重要的信息,而不是讓用戶感覺不知所措。

因此,緊湊的移動網頁應用是一個非常好的範例。設計師將大部分的精力投入到項目最重要的方面。也就是說,將精力投入到大部分時間裡(80%)用戶經常使用的功能和內容(20%)。

經驗總結:

在理解了80/20規則的作用原理後,設計人員便可以遵循以下方法,總結如下:

◆如果可以,仔細分析網站統計和可用性數據,以確定用戶最經常使用的那20%的功能。

◆排定優先級。關注網站和網絡應用中最重要的幾個方面,並不斷強化。

◆統計出歸入20%的最常使用的功能,在此基礎上簡化設計和布局。

◆去掉不重要的不經常被使用的功能和內容 。

◆不要在那些不太經常使用的功能上投入太多時間和資金,因為你的回報可能是非常小的。

◆對於不經常使用的但重要的元素,嘗試改進它的設計和功能,因為一旦使用頻率提高,這些元素會對交互產生很大的影響。

雖然80/20規則是一個仍在固有缺陷,並存有爭議的原理,可它並不是一無是處。在你做重新設計、重新組合乃至新項目時都可以運用80/20規則。

80/20規則能夠引導用戶關注最重要的功能和內容,並最終提高網站的轉換率。
 

原文連結:http://article.yeeyan.org/view/163030/172511

【編輯推薦】

  1. Web表單設計: 創建高可用性的網頁表單
  2. 中國的網頁設計為什麼這麼爛?
  3. 推薦25個非常優秀的網頁表單設計案例
  4. 21個新奇古怪的網頁表格設計
  5. 沒有JavaScript,你的網頁會是啥樣?

【責任編輯:

陳貽新

TEL:(010)68476606】

相關焦點

  • 兔課網:網頁設計的9種基本原則,教你如何學會網頁設計!
    兔課網:網頁設計的9種基本原則,教你如何學會網頁設計!Web設計可能具有欺騙性,因為它涉及到實現一個既實用又令人愉悅的設計,提供信息和建立品牌,在技術上是健全的,而且在視覺上是一致的。此外,許多網頁設計師(包括我自己)都是自學的,網頁設計仍然很新穎,在許多設計機構中只是一個次要的學科,而且媒介的變化和底層技術一樣頻繁。所以今天我把我的9個原則良好的網頁設計...這些只是我的觀點,我試著聯繫到更多關於主題的閱讀,這樣你就不會只聽到我的聲音了。
  • 乾貨:網頁設計之柵格系統
    本文轉載自【微信公眾號:阿門教你PS,ID:meitian_PS】經微信公眾號授權轉載,如需轉載與原文作者聯繫01柵格系統的形成柵格系統(Grid system)最早使用在17世紀末的法國印刷業,出版業。
  • 網頁設計_HTML_CSS語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言描述的網頁      網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 打破80/20業績規則
    ALAN RIGG  2006-12-30 00:00:00   80/20Sales Performance 編者按:銷售團隊業績中的「80/20」現象,即80%的銷售額是由20%的頂級銷售人員完成的,原因之一是由於組織在招募、培訓和管理銷售人員的過程中過度依賴主觀信息而造成的。
  • 網頁設計HTML_CSS_VC#語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS_VC#語言描述的網頁網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 網頁設計與製作競賽通知
    一、競賽目的      網頁設計與製作賽項旨在通過學院技能大賽提升我校學生網頁製作的基本能力與創新能力,增強學生對主流製作工具的應用能力,提高網頁設計相應崗位職業能力和崗位協作性,加快推進產學結合的創新創業教育人才培養模式改革,形成以賽促教促學、以賽促教促改、賽教融合的良好局面。
  • 網頁設計HTML_CSS_JavaScript語言_外部文件
    WWW_WEB_入門實踐—網頁設計HTML_CSS_JavaScript語言_外部文件網頁內容與表現形式。
  • 《網頁設計綜合指南》(三):網頁設計看這篇文章就夠了
    這意味著當您設計交互時要應用不同的規則。交互元素的大小要合適。所有的交互元素(如連結,按鈕和菜單)應該都是可以手勢操作的。PC端網站適合交互區域(點擊)較小且精確的方式,但移動網頁需要較大的觸發區,可以用拇指輕鬆完成。當網站經常需要用戶操作時,請參考MIT Touch Lab的研究為您的按鈕選擇合適的尺寸。
  • 20個色彩明亮的超炫網頁設計
    隨著夏天腳步的到來,在網頁設計中大量使用明亮的色彩會讓讀者眼前一亮,增加對網頁的好感和好奇心。這期佳作賞析帶來的20個網站,或用明亮的色彩強調自身產品的質感,或用明亮色系的妝容突出模特的俊秀臉龐,或用絢麗的色彩營造令人愉悅的瀏覽氛圍。原本略顯死板的平面網頁在明亮色彩的潤澤下仿佛都跳躍了起來!
  • 網頁設計HTML_CSS_VB語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS_VB語言描述的網頁--VS平臺網頁內容與表現形式一般新聞或科技報導
  • 兔課網—網頁web設計應該如何排版?
    兔課網—網頁web設計應該如何排版?自1991年蒂姆·伯納斯-李(TimBerners-Lee)翻開這一開關以來,網絡排版已經走了很長一段路。早在IE1.0時代,好的網頁排版就有點自相矛盾了。今天的情況不一樣了。我們不僅有支持圖像的瀏覽器(喘息!),而且我們有機會讓我們的網頁通過太棒了排版。
  • 給新手的網頁設計指南
    首先在介紹網頁每個頁面之前,我們要明白一個概念,就是網頁設計中經常出現的「模塊」。不知道是不是因為「模塊」這個概念比較基礎,寫的人也很少,在我剛剛接觸網頁的時候,並不是很容易查到關於模塊的介紹,做圖的時候也遇到了一些困難。與平面不同,在UI和網頁設計中,模塊是經常出現,並且貫穿設計稿始終的。每個網頁都是由模塊組成的,並且常用模塊都會有固定的稱呼。
  • 網頁設計HTML_CSS語言_外部樣式
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言_外部樣式網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • HTML+CSS+JavaScript網頁設計課程的教與學
    你想要的都有了!
  • 網頁設計與製作專題 | HTML網頁代碼
    整理:@呈旭chx來源:@chx工作室official轉載  (註:僅供參考)基於Web標準的網頁設計與製作複習參考資料
  • 期末複習繼續:網頁設計與製作
    它不用考慮複雜畫面的拼接,只需掌握各色之間的搭配與對應,色塊一般是舉行,幾乎沒有其他形狀,處理起來比較方便56、運用色塊製作網頁時需要掌握的幾個要點1.冷暖色調在均勻使用時不宜靠近,如果必須的話,應當使用中間色(白色或黑色)2.純度接近的兩種顏色也不宜放在一起,如亮紅和亮綠3.整個頁面中最好有一個主色調57、網頁設計的通用規則:
  • 如何在自傳播邀新分享活動設計中運用80/20法則?
    想要增強活動的自傳播能力,可以通過80/20法則(即在眾多現象中,80%的結果,來自20%的原因;20%的努力,常產生80%的結果),從活動規則設計和視覺、交互和文案兩方面尋找突破。80/20法則是由義大利經濟家帕累託提出的,也就是大家所熟悉的帕累託定律。80/20法則指:在眾多現象中,80%的結果,來自20%的原因;20%的努力,常產生80%的結果。
  • 使用html表格和CSS進行混合網頁設計
    HTML表格用於設計呈現表格式的數據。所以,如果你希望數據看起來像在Excel中那樣,那麼使用表格就是最佳答案。除了毫不費力的應付這些數據,早年的網頁開發者們迅速發現 了表格還是控制網頁輸出與外觀的絕佳辦法。
  • 網頁設計製作5大原則
    網站,是一個企業或工作室的重要展示窗口,因此網站的設計是非常重要的。好的設計能給訪客眼前一亮的感覺,讓客戶對你留下深刻印象,提高轉化。那麼網頁設計製作該如何做好呢?這裡給大家分享5個重要的設計原則:1.用好網站黃金位置就跟超市的貨架一樣,首要視覺位置就是網站的黃金位置,企業網站應該放置重要的信息在這個地方。橫幅廣告、按鈕廣告、輪播圖等,都是企業網站常見的推廣展示手段,可用來突出某項新產品和某項促銷活動,或者告知客戶自己的品牌優勢、服務內容,讓用戶能一眼明白你是做什麼的。
  • 快速完成網頁設計,10個頂尖響應式HTML5網頁模板助你一臂之力
    HTML5軟體公司和網頁設計公司的創意網站模板。你要知道,一個具有啟發性的令人驚嘆的免費HTML5網頁模板可以大大減少耗時並提高生產力。2.幽靈按鈕可讓您連結到即將推出的產品。使用名為Animate Headline的Javascript插件,頁面變得更加美觀。在這個免費HTML5啟動畫面模板的演示中,你可以看到帶有美麗背景滑動圖像的頁面。3.