網(wǎng)站交互設(shè)計(jì)：從淘寶網(wǎng)首頁(yè)看內(nèi)容隨機(jī)展示應(yīng)用

開(kāi)始之前先解釋下相關(guān)概念，當(dāng)然都是按自己的理解杜撰的。

　　什么是隨機(jī)展示?為什么會(huì)有這種需求?

　　從下圖可以看到，現(xiàn)在的網(wǎng)站，特別是電子商務(wù)網(wǎng)站，都有內(nèi)容切換模塊?；旧戏譃閮煞N，一種是tab內(nèi)容切換/js輪轉(zhuǎn)切換，都是用戶可以手動(dòng)點(diǎn)擊切換或自動(dòng)切換，用戶可以查看所有內(nèi)容，但一次只能查看一個(gè)單元內(nèi)容，稱(chēng)之為“顯性隱藏”;一種是沒(méi)有切換按鈕，后臺(tái)有一個(gè)一定容量的內(nèi)容池子，在當(dāng)前模塊區(qū)域內(nèi)只能顯示固定數(shù)量的內(nèi)容，除非用戶刷新網(wǎng)頁(yè)，用戶看不到其余的內(nèi)容，稱(chēng)之為“隱形隱藏”。

不管是顯性隱藏還是隱形隱藏，都需要用戶交互互動(dòng)后才能看到全部?jī)?nèi)容或者更多內(nèi)容，即使是自動(dòng)切換的也是需要用戶等待一段時(shí)間才能達(dá)到前面的目標(biāo)(看到全部?jī)?nèi)容或者更多內(nèi)容)。但從數(shù)據(jù)統(tǒng)計(jì)來(lái)看，沒(méi)有交互的設(shè)計(jì)才是最好的，因?yàn)橛脩粽娴暮?ldquo;懶”，沒(méi)有多少人原因去點(diǎn)擊切換，有隱藏等交互的內(nèi)容區(qū)域，除去設(shè)計(jì)和內(nèi)容的因素之外，往往第一個(gè)顯示模塊的點(diǎn)擊率比其它的內(nèi)容要高很多。

　　在這種情況下，如何保證每個(gè)切換模塊的內(nèi)容的展示機(jī)會(huì)均等?那就是隨機(jī)展示，不管是顯性隱藏還是隱形隱藏，通過(guò)程序來(lái)控制每次用戶第一次打開(kāi)的內(nèi)容都是不一樣的，這樣就能保證自然狀態(tài)下，每個(gè)內(nèi)容的展示機(jī)會(huì)是均等的，從而避免從宏觀上來(lái)看很多內(nèi)容根本就沒(méi)有和用戶見(jiàn)面的機(jī)會(huì)。

說(shuō)了這么多，回歸正題來(lái)看看淘寶首頁(yè)是怎么做的，從截圖來(lái)看，淘寶首頁(yè)一共有10個(gè)顯性隱藏或者隱形隱藏區(qū)域(有廣告圖片、促銷(xiāo)信息、單品、功能，但都可歸類(lèi)為內(nèi)容)，基本上都是采用隨機(jī)展示的方式來(lái)保證每個(gè)內(nèi)容模塊的展示機(jī)會(huì)是一樣的，大家可以手動(dòng)刷新看看，每個(gè)顯性隱藏或者隱形隱藏區(qū)域第一次展示的內(nèi)容都是不一樣的。

不過(guò)一個(gè)頁(yè)面有這多的隱藏展示區(qū)域，個(gè)人感覺(jué)從易用性來(lái)說(shuō)并不好，還是要掌握好一個(gè)度，畢竟用戶“懶”是一個(gè)方面，另一方面太多的隱藏內(nèi)容也會(huì)影響加載速度。特別是自動(dòng)切換的展示方式更應(yīng)該慎用，如果一屏之類(lèi)有太多的動(dòng)態(tài)切換，對(duì)用戶干擾太大。當(dāng)然自動(dòng)切換的方式也有很多種，國(guó)內(nèi)的都喜歡帶點(diǎn)動(dòng)畫(huà)，要么上下要么左右，動(dòng)作挺大的，一屏之內(nèi)如果超過(guò)2個(gè)區(qū)域都這樣子的話，用戶就很難集中精力去看他想看的內(nèi)容了。關(guān)于這一點(diǎn)，棒子做的比較好，盡管棒子的網(wǎng)站從上到下都是隱藏/顯示的區(qū)域，但人家的切換方式比較低調(diào)，只換內(nèi)容，不帶動(dòng)作，就是簡(jiǎn)單的顯示隱藏切換，這樣視覺(jué)上來(lái)看變化不大，甚至有時(shí)候悄無(wú)聲息的。當(dāng)然從網(wǎng)站定位來(lái)看，taobao首頁(yè)作為超級(jí)入口，又有超級(jí)多的用戶做后盾，有這么多的隱藏切換區(qū)域也很正常。而棒子的網(wǎng)站另當(dāng)別論，可能棒子用戶適應(yīng)這樣的感覺(jué)，再說(shuō)人家的帶寬也夠給力。

　　可以看個(gè)棒子的網(wǎng)站，首頁(yè)居然有13個(gè)隱藏展示區(qū)域，當(dāng)然都是采用隨機(jī)方式，切換方式很低調(diào)，顯示和隱藏，不帶過(guò)渡動(dòng)畫(huà)。

附帶幾個(gè)棒子網(wǎng)站地址，感興趣的同學(xué)可以看看：

　　http://www.11st.co.kr

　　http://www.bandinlunis.com

　　http://www.shilladfs.com

　　http://www.lotte.com

　　文章來(lái)源：uedwow