網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì)中的法則:信息交互設(shè)計(jì)金字塔法則
發(fā)布時(shí)間:2012-07-18 16:14:11 作者:佚名
我要評(píng)論
金字塔方法這個(gè)說(shuō)法來(lái)源于美國(guó)著名的現(xiàn)代管理咨詢(xún)公司麥肯錫。大致的意思就是:任何事情都能歸納出一個(gè)中心點(diǎn),而此中心論點(diǎn)可以由數(shù)個(gè)一級(jí)論據(jù)支撐,這些一級(jí)論據(jù)也可以被數(shù)個(gè)二級(jí)論據(jù)支撐,如此延伸,狀如金字塔。
本文來(lái)自7月8日#36氪開(kāi)放日#北京站,卓衡科技運(yùn)營(yíng)總監(jiān)劉鵬的演講,文中劉鵬講述了他們?cè)趧?chuàng)業(yè)過(guò)程中總結(jié)出的交互設(shè)計(jì)的金字塔法則。卓衡科技是一家新興的用戶(hù)體驗(yàn)設(shè)計(jì)公司,為客戶(hù)提供定制性的用戶(hù)體驗(yàn)設(shè)計(jì)與移動(dòng)互聯(lián)網(wǎng)軟件設(shè)計(jì)開(kāi)發(fā)相關(guān)的全流程服務(wù)。

金字塔方法這個(gè)說(shuō)法來(lái)源于美國(guó)著名的現(xiàn)代管理咨詢(xún)公司麥肯錫。大致的意思就是:任何事情都能歸納出一個(gè)中心點(diǎn),而此中心論點(diǎn)可以由數(shù)個(gè)一級(jí)論據(jù)支撐,這些一級(jí)論據(jù)也可以被數(shù)個(gè)二級(jí)論據(jù)支撐,如此延伸,狀如金字塔。

當(dāng)然,你也可以說(shuō)這個(gè)說(shuō)法最早來(lái)源于中國(guó)的老子,因?yàn)樗凇兜赖陆?jīng)》中說(shuō):道生一,一生二,二生三,三生萬(wàn)物。
對(duì)于一般展示型的信息的交互設(shè)計(jì),我們的觀點(diǎn)是其設(shè)計(jì)核心不僅在于不斷豐富信息的表現(xiàn)形式,更在于不斷提升其被感知的速度與精準(zhǔn)度。
對(duì)應(yīng)這個(gè)觀點(diǎn),我們所采用的方法是:把信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示,再根據(jù)用戶(hù)在這個(gè)界面上所愿停留的時(shí)間逐級(jí)給予更多細(xì)節(jié),我們把這種方法稱(chēng)之為“信息交互設(shè)計(jì)金字塔法則”
下面這種布局類(lèi)型的網(wǎng)站大家一定還有映像,就是一打開(kāi)網(wǎng)站,會(huì)有個(gè)大大的Flash,先是暴長(zhǎng)的Loading,然后出現(xiàn)一個(gè)聲光化電但不知所云的Flash一通播放,右下角通常還有個(gè)小的英文字,寫(xiě)著Skip。

悲劇的是,通常我們通過(guò)漫長(zhǎng)而耐心等待之后看完這樣的東西,反應(yīng)是這樣的。

因?yàn)榇蠖鄶?shù)情況下我們實(shí)在不知道他們想要告訴我們的到底是什么,只是覺(jué)得浪費(fèi)了我們太多時(shí)間。
如果想讓用戶(hù)有效的接收信息,那么就必須從人對(duì)信息的感知特點(diǎn)來(lái)談起。通常說(shuō)來(lái),人對(duì)色彩的感知速度大過(guò)圖形,而對(duì)圖形的感知速度又大于語(yǔ)言和文字,好的設(shè)計(jì),順應(yīng)人的感知速度,運(yùn)用金字塔法則來(lái)分層級(jí)地展示,讓信息得到更迅速,或更精準(zhǔn)的傳達(dá)。

人對(duì)于信息的接收和解讀,其實(shí)是一個(gè)從模糊到精確,從定性到定量的過(guò)程。好的設(shè)計(jì),會(huì)關(guān)注人感知信息的過(guò)程,以及在不同感知階段的心理體驗(yàn)。
所以我們現(xiàn)在看到越來(lái)越多的信息展示型網(wǎng)站變成了這個(gè)樣子。進(jìn)入網(wǎng)站后,首先看到的是大圖和主題文字,然后下面有更多細(xì)節(jié)的入口。

說(shuō)到這兒,我們來(lái)舉個(gè)最近身邊的例子吧。大家都知道,蘋(píng)果最近推出了視網(wǎng)膜屏的MacBook Pro,為了向大家介紹這款產(chǎn)品的特性并促成銷(xiāo)售,讓我們來(lái)看看蘋(píng)果在他們的官方網(wǎng)站上是如何做的(該頁(yè)鏈接)。

接下來(lái),讓我們用金字塔法則來(lái)對(duì)這個(gè)網(wǎng)頁(yè)進(jìn)行一個(gè)分析。

如果我們?cè)谶@個(gè)網(wǎng)頁(yè)上停留的時(shí)間只有三秒鐘,那么我們看到的就只有一個(gè)核心賣(mài)點(diǎn)——視網(wǎng)膜屏,以及一個(gè)被強(qiáng)調(diào)的主任務(wù)——購(gòu)買(mǎi)。如果瀏覽者碰巧是一個(gè)我這樣的腦殘型果粉,可能直接撲上去就點(diǎn)了那個(gè)藍(lán)色的Buy Now。
但通常人們會(huì)在確定有興趣之后想得到更多的輔助信息。那么很好,當(dāng)我們打算在這個(gè)網(wǎng)頁(yè)上多停留一點(diǎn)時(shí)間,比如三分鐘,那么把這個(gè)網(wǎng)頁(yè)向下拖一拖我們能看到這臺(tái)機(jī)器的四個(gè)主要賣(mài)點(diǎn):視網(wǎng)膜屏、全閃存架構(gòu)、機(jī)體更纖薄以及速度更快。這就是金字塔的第二級(jí)。
如果你覺(jué)得這些信息還不夠呢?很好,你可以通過(guò)這四個(gè)主要賣(mài)點(diǎn)下面的Learn more點(diǎn)擊進(jìn)去,進(jìn)行長(zhǎng)達(dá)半個(gè)小時(shí)以上的瀏覽,直到你完全了解了這臺(tái)新機(jī)器的特性。在這里,我整理了一張視網(wǎng)膜屏MBP特性介紹的思維導(dǎo)圖,大家能看到越進(jìn)入金字塔的底部,我們所得到的信息也就越多,細(xì)節(jié)也就越豐富。

對(duì)于分層式信息展示,我們通常會(huì)先考慮頁(yè)面整體的色彩傾向,同時(shí)對(duì)一級(jí)信息作重點(diǎn)展示,對(duì)二級(jí)信息作縮略展示,提供提供三級(jí)信息的交互展示或提供入口。這部分工作需要重視信息與數(shù)據(jù)的可視化,強(qiáng)調(diào)在第一時(shí)間傳遞核心信息,別讓我想。
設(shè)計(jì)師做信息架構(gòu)的時(shí)候除了關(guān)心信息的展示,同時(shí)還會(huì)關(guān)注用戶(hù)的心理與行為,從而為之設(shè)計(jì)一系列的交互。
接下來(lái)讓我們從交互的角度,來(lái)看看蘋(píng)果是怎么做的。

首先,金字塔的最上層,也就是核心的主任務(wù),就是購(gòu)買(mǎi)。如果用戶(hù)的意愿很強(qiáng)烈和直接,那么在第一時(shí)間,就能找到那個(gè)被重點(diǎn)突出和強(qiáng)調(diào)的Buy now,如果用戶(hù)只是有興趣,購(gòu)買(mǎi)的意愿還不是很強(qiáng)烈,那么首先應(yīng)該分層次多渠道的讓了解更多的信息,然后不失時(shí)機(jī)的來(lái)通過(guò)增值服務(wù)和聰明的幫助來(lái)增強(qiáng)用戶(hù)的購(gòu)買(mǎi)意愿,在用戶(hù)產(chǎn)生了足夠強(qiáng)烈的意愿之后,根據(jù)用戶(hù)自身的情況,提供和推薦更多的渠道選擇確保交易的最終達(dá)成。

針對(duì)用戶(hù)行為,我們首先要關(guān)注的是用戶(hù)的主任務(wù),然后需要關(guān)注不同類(lèi)型用戶(hù)在不同階段的心理特點(diǎn),適時(shí)地出現(xiàn)幫助,為用戶(hù)提供多個(gè)選擇而不是主動(dòng)替用戶(hù)作出決定。
信息交互設(shè)計(jì)的金字塔法則,不僅十我們用來(lái)判斷一個(gè)信息交互設(shè)計(jì)是否優(yōu)秀的方法,同時(shí)也是我們自己做此類(lèi)設(shè)計(jì)時(shí)的一個(gè)指導(dǎo)原則。
鑒于時(shí)間的關(guān)系,在這里我能跟大家分享就只有這么小小的,然而實(shí)用的一招。如果以后機(jī)會(huì),也許我們可以一同探討下諸如“如來(lái)神掌”之類(lèi)的華麗大招。


對(duì)于一般展示型的信息的交互設(shè)計(jì),我們的觀點(diǎn)是其設(shè)計(jì)核心不僅在于不斷豐富信息的表現(xiàn)形式,更在于不斷提升其被感知的速度與精準(zhǔn)度。
對(duì)應(yīng)這個(gè)觀點(diǎn),我們所采用的方法是:把信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示,再根據(jù)用戶(hù)在這個(gè)界面上所愿停留的時(shí)間逐級(jí)給予更多細(xì)節(jié),我們把這種方法稱(chēng)之為“信息交互設(shè)計(jì)金字塔法則”
下面這種布局類(lèi)型的網(wǎng)站大家一定還有映像,就是一打開(kāi)網(wǎng)站,會(huì)有個(gè)大大的Flash,先是暴長(zhǎng)的Loading,然后出現(xiàn)一個(gè)聲光化電但不知所云的Flash一通播放,右下角通常還有個(gè)小的英文字,寫(xiě)著Skip。


如果想讓用戶(hù)有效的接收信息,那么就必須從人對(duì)信息的感知特點(diǎn)來(lái)談起。通常說(shuō)來(lái),人對(duì)色彩的感知速度大過(guò)圖形,而對(duì)圖形的感知速度又大于語(yǔ)言和文字,好的設(shè)計(jì),順應(yīng)人的感知速度,運(yùn)用金字塔法則來(lái)分層級(jí)地展示,讓信息得到更迅速,或更精準(zhǔn)的傳達(dá)。

所以我們現(xiàn)在看到越來(lái)越多的信息展示型網(wǎng)站變成了這個(gè)樣子。進(jìn)入網(wǎng)站后,首先看到的是大圖和主題文字,然后下面有更多細(xì)節(jié)的入口。



但通常人們會(huì)在確定有興趣之后想得到更多的輔助信息。那么很好,當(dāng)我們打算在這個(gè)網(wǎng)頁(yè)上多停留一點(diǎn)時(shí)間,比如三分鐘,那么把這個(gè)網(wǎng)頁(yè)向下拖一拖我們能看到這臺(tái)機(jī)器的四個(gè)主要賣(mài)點(diǎn):視網(wǎng)膜屏、全閃存架構(gòu)、機(jī)體更纖薄以及速度更快。這就是金字塔的第二級(jí)。
如果你覺(jué)得這些信息還不夠呢?很好,你可以通過(guò)這四個(gè)主要賣(mài)點(diǎn)下面的Learn more點(diǎn)擊進(jìn)去,進(jìn)行長(zhǎng)達(dá)半個(gè)小時(shí)以上的瀏覽,直到你完全了解了這臺(tái)新機(jī)器的特性。在這里,我整理了一張視網(wǎng)膜屏MBP特性介紹的思維導(dǎo)圖,大家能看到越進(jìn)入金字塔的底部,我們所得到的信息也就越多,細(xì)節(jié)也就越豐富。

設(shè)計(jì)師做信息架構(gòu)的時(shí)候除了關(guān)心信息的展示,同時(shí)還會(huì)關(guān)注用戶(hù)的心理與行為,從而為之設(shè)計(jì)一系列的交互。
接下來(lái)讓我們從交互的角度,來(lái)看看蘋(píng)果是怎么做的。


信息交互設(shè)計(jì)的金字塔法則,不僅十我們用來(lái)判斷一個(gè)信息交互設(shè)計(jì)是否優(yōu)秀的方法,同時(shí)也是我們自己做此類(lèi)設(shè)計(jì)時(shí)的一個(gè)指導(dǎo)原則。
鑒于時(shí)間的關(guān)系,在這里我能跟大家分享就只有這么小小的,然而實(shí)用的一招。如果以后機(jī)會(huì),也許我們可以一同探討下諸如“如來(lái)神掌”之類(lèi)的華麗大招。
相關(guān)文章

AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化,要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對(duì)你有所幫助2022-02-23- 這是我通過(guò)網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對(duì)html,css頁(yè)面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開(kāi)發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開(kāi)發(fā)協(xié)作,提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道,當(dāng)一個(gè)團(tuán)隊(duì)開(kāi)始指定并實(shí)行2017-01-21web前端開(kāi)發(fā)規(guī)范文檔(2014年版本)
這篇文章主要為大家介紹了前端開(kāi)發(fā)團(tuán)隊(duì)遵循和約定的代碼書(shū)寫(xiě)規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶(hù)都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少,在安裝過(guò)程中總會(huì)出現(xiàn)這樣那樣的問(wèn)題,基于這些問(wèn)題,下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29



