您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

網(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




 

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id992.html
網(wǎng)頁(yè)設(shè)計(jì)中浮窗的使用實(shí)例
設(shè)計(jì)規(guī)范友好的網(wǎng)頁(yè)表單應(yīng)有特點(diǎn)
圖趣網(wǎng)微信
建議反饋
×