設(shè)計(jì)和藝術(shù)是我們經(jīng)常并舉、對比和討論的話題。兩者相對，差別也頗為明顯。相比于仿若天成、引人深思，令人驚艷的藝術(shù)，設(shè)計(jì)常常以一種富有規(guī)律、精心布置的形態(tài)出現(xiàn)，呈現(xiàn)出人為的機(jī)巧，當(dāng)我們對于背后的原理有所洞悉之時，多會用“充滿設(shè)計(jì)感”來描述眼前的事物。設(shè)計(jì)是科學(xué)，設(shè)計(jì)講道理。
廣泛意義上的設(shè)計(jì)所牽涉到的行業(yè)、領(lǐng)域之多，怕是一本書都無法盡述，而設(shè)計(jì)法則，卻常常能通行于這些多樣的行業(yè)與領(lǐng)域之間，這也是設(shè)計(jì)法則的實(shí)用和迷人之處。所以，不論我們以何種姿態(tài)、怎樣的知識背景踏入設(shè)計(jì)的領(lǐng)域之后，總會忍不住去探索設(shè)計(jì)的規(guī)律，尋求設(shè)計(jì)的法則。
常見的設(shè)計(jì)法則很多，它們深入到設(shè)計(jì)的方方面面。而今天我們準(zhǔn)備聊的，是80/20法則。
80/20 法則有很多種不同的叫法，中文簡稱“二八法則”，還有人會根據(jù)這一法則的發(fā)現(xiàn)者經(jīng)濟(jì)學(xué)家Vifredo Pareto 而稱之為“帕列托法則”。
對，80/20 法則起源于經(jīng)濟(jì)學(xué)。Pareto 觀察到80%的財(cái)富掌握在20%人的手里，從而有此理論，隨后這一理論在Joseph M. Juran 手里發(fā)揚(yáng)光大?，F(xiàn)在我們所說的80/20法則可以抽象為下面的概念：
“在復(fù)雜多樣的大系統(tǒng)當(dāng)中，大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵的因素來決定?！?
在很多相關(guān)的統(tǒng)計(jì)數(shù)據(jù)當(dāng)中，“大部分”并非精確的80%，而“幾項(xiàng)關(guān)鍵因素”也不是穩(wěn)定的20%比例，這是一個大概的范疇，常常是在80%和20%上下浮動，這種配比可以是90%+10%，也可能是60%+40%，而它所反映的是普適的分配原則。
80/20 原則適用領(lǐng)域非常廣泛，尤其是在經(jīng)濟(jì)、管理和工程領(lǐng)域。同樣的，它在 UI & UX 領(lǐng)域同樣有著廣泛的運(yùn)用。圖形化界面出現(xiàn)于70年代中期，而在80年代末就有設(shè)計(jì)師將80/20 法則加入到相關(guān)的設(shè)計(jì)規(guī)范當(dāng)中去了。
80/20 法則的核心在于分清主次，更有效地調(diào)配和整合資源，提升設(shè)計(jì)的效率，達(dá)到最大化的目的。
占據(jù)產(chǎn)品中80%使用量的是20%的功能;
80%的進(jìn)步，是來自于20%關(guān)鍵性的努力
80%的產(chǎn)品誤差，源自于20%的組件
企業(yè)80%的收益，來自于20%的產(chǎn)品
城市80%的擁堵，集中在20%的道路上
在設(shè)計(jì)決策過程中，80/20 法則所提供的思路，能夠很大程度上幫你梳理出設(shè)計(jì)的方向。既然用戶將80%的時間都消耗在20%的關(guān)鍵功能上，那么從研究到原型設(shè)計(jì)，從開發(fā)到產(chǎn)品測試，都可以有意識地沿著這個思路來進(jìn)行，將設(shè)計(jì)和測試的重心都圍繞著這20%來進(jìn)行，剩下的80%則按照這種策略，進(jìn)行評估。同樣的，產(chǎn)品中多數(shù)問題也通常集中在20%的內(nèi)容上，產(chǎn)品在不斷迭代升級中，解決問題的方向也可以如此來制定。
在內(nèi)容的選取上，20%的內(nèi)容是80%的用戶所關(guān)注的，而這也正是進(jìn)行內(nèi)容規(guī)劃的思路。最典型的，用戶注冊表單內(nèi)容的變遷。隨著大量用戶數(shù)據(jù)和用研經(jīng)驗(yàn)的積累，網(wǎng)站和APP的注冊表單從最開始的6到7個不同的字段，逐步縮減到現(xiàn)在僅有2~3個關(guān)鍵的字段(用戶名，密碼，注冊郵箱/手機(jī)號)，甚至使用通用的社交媒體帳號一鍵注冊/登錄，這種優(yōu)化的方向可以說是80/20法則的一種隱形的優(yōu)化。
在圖形化界面的設(shè)計(jì)當(dāng)中，80/20法則的運(yùn)用，一點(diǎn)都不比其其他的領(lǐng)域少，甚至可以說，現(xiàn)代UI和交互設(shè)計(jì)一刻都離不開80/20這一“關(guān)鍵少數(shù)”法則。
在很多時候，想要弄清楚影響整個設(shè)計(jì)決策的關(guān)鍵性的20%的內(nèi)容，其實(shí)是有辦法的。最典型的Web后臺分析和統(tǒng)計(jì)數(shù)據(jù)，用戶提交的表單，瀏覽器Cookie 都可以幫助你跟蹤和了解用戶的行為。這些數(shù)據(jù)能夠幫助我們了解UI的哪些區(qū)域是用戶互動的較多的。
另一方面，有許多較為細(xì)微末節(jié)的行為是無法通過這些工具和數(shù)據(jù)獲取的，而這個時候，則可以通過測試時觀察用戶，以及可用性研究來達(dá)成目的。
在進(jìn)行具體的UI和交互設(shè)計(jì)的時候，80/20法則所起到的作用也相當(dāng)?shù)年P(guān)鍵。我們常見的編輯器，不論是我們熟知的PS還是辦公用的Office 系列軟件，都會將最常用的工具和控件置于顯眼的地方，而將使用率相對較低的部分隱藏，以避免出現(xiàn)下面的狀況：
表單設(shè)計(jì)
在進(jìn)行表單設(shè)計(jì)的時候，有些選項(xiàng)的下拉框過長，比如國家和地區(qū)的列表，絕大多數(shù)的設(shè)計(jì)人員也都會意識到這一問題，國家和地區(qū)會按照字母表的順序排列。然而由于許多網(wǎng)站本身所適用的國家，相對而言比較固定，所以打破列表排序，將特定的幾個國家提到前面來讓用戶可以快速選取，就是許多網(wǎng)站所采用的策略了。比如下面的 Fenn Wright Manson 的結(jié)帳頁面：
而亞馬遜美國官網(wǎng)上，用戶添加新地址的時候，國家選項(xiàng)默認(rèn)值是美國：
而來自英國的另外一家名為 North Rock Gallery 的網(wǎng)站，其中主要用戶來自英國，于是他們的表單設(shè)計(jì)也采用了類似的策略：
正如同我們所熟知的，F(xiàn)式布局已經(jīng)成為如今網(wǎng)頁和UI設(shè)計(jì)中效率最高的布局方式之一。根據(jù) NNGroup 的眼動測試，用戶在網(wǎng)頁上最高效的瀏覽方式，常常遵循著F 式的瀏覽路徑，而這張視覺熱區(qū)圖同樣的是80/20法則的一個有力佐證：整個頁面布局當(dāng)中，20%的關(guān)鍵區(qū)域，占據(jù)了用戶80%的注意力。
極簡風(fēng)的網(wǎng)頁和APP設(shè)計(jì)，和 80/20 原則在精神上保持著高度的一致。在極簡主義的設(shè)計(jì)當(dāng)中，整個設(shè)計(jì)中每一個元素都應(yīng)該是有目的、有針對性的存在，沒有多余的、無用的元素。所以，極簡主義的設(shè)計(jì)應(yīng)該只保留絕對必要的那些組件。而為了突出這些關(guān)鍵性的元素，極簡風(fēng)的網(wǎng)站中，通常會大量使用留白來作為襯托：
如果說，設(shè)計(jì)師使用80/20 法則來做設(shè)計(jì)，是一種對于規(guī)則的認(rèn)可，那么這個曾經(jīng)由來自Adobe 和蘋果的設(shè)計(jì)師所構(gòu)成的設(shè)計(jì)團(tuán)隊(duì)，就是對80/20 法則赤裸裸的膜拜了：他們直接使用80/20來作為設(shè)計(jì)工作室的名稱。
8020 Design Studio 曾經(jīng)為許多著名的企業(yè)和機(jī)構(gòu)做過設(shè)計(jì)，而其中最為出名并且對如今的UI和交互都產(chǎn)生極大影響的設(shè)計(jì)作品，就是 Meego 系統(tǒng)的交互設(shè)計(jì)稿了。
這套最初名為 Swipe UI的交互設(shè)計(jì)重新規(guī)劃了移動端UI，將界面劃分為上下兩層，總計(jì)5個主要界面模塊，上層是鎖屏和快速啟動頁，下層為交互最多的通知頁、APP列表頁和多任務(wù)界面頁。所有的這些頁面借助滑動交互串聯(lián)在了一起。
雖然這樣的劃分和如今iOS、Android 略有不同，但是整個規(guī)劃保持了高度的一致。
當(dāng)然，關(guān)于Meego的掌故還有很多，我們今后可以聊聊這個。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《網(wǎng)頁設(shè)計(jì)中的80/20法則》的全部內(nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：行業(yè)研究報(bào)告，于此同時，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：機(jī)械行業(yè)營銷型網(wǎng)站建設(shè)案例
