在浪訊仍是網(wǎng)頁(yè)規(guī)劃新手的時(shí)分，曾遇到許多的規(guī)劃問(wèn)題，其中包含翻頁(yè)規(guī)劃。網(wǎng)頁(yè)之所以要翻頁(yè)，原因是內(nèi)容超出了承載框。關(guān)于書(shū)本來(lái)說(shuō)，承載框是一頁(yè)紙張，一般是A8巨細(xì)，捧在手心閱覽剛好合適，而內(nèi)容則是全部文本。關(guān)于網(wǎng)頁(yè)、APP來(lái)說(shuō)，承載框是模塊，一般是根據(jù)閱覽器尺度和手機(jī)屏幕自適應(yīng)的。在這里，浪訊總結(jié)了一下網(wǎng)頁(yè)常見(jiàn)的翻頁(yè)方法。
一、頁(yè)碼翻頁(yè)
跟書(shū)本相同的頁(yè)碼翻頁(yè)是最經(jīng)典的一種翻頁(yè)方法。在瀑布流等交互方法還沒(méi)有盛行起來(lái)的時(shí)分，網(wǎng)站運(yùn)用的基本上都是頁(yè)碼翻頁(yè)。
頁(yè)碼規(guī)劃三個(gè)要素
頁(yè)碼數(shù)字陳設(shè)：頁(yè)碼數(shù)字陳設(shè)的作用是便利快速定位，一般會(huì)列出主頁(yè)和現(xiàn)在頁(yè)碼鄰近的頁(yè)碼。
逐頁(yè)翻頁(yè)：逐頁(yè)翻頁(yè)就是上一頁(yè)、下一頁(yè)了，必備的功用。用戶鼠標(biāo)能夠定在同一個(gè)方位不斷點(diǎn)擊，無(wú)須每次翻頁(yè)都看一眼頁(yè)碼到哪了。
跳進(jìn)翻頁(yè)：跳進(jìn)能夠是跳到最終一頁(yè)、主頁(yè)、后十頁(yè)、恣意一頁(yè)等，現(xiàn)在很少有網(wǎng)站會(huì)規(guī)劃跳到恣意一頁(yè)了，究竟很少有人記住想要查找的內(nèi)容詳細(xì)在哪一頁(yè)。
以下是豆瓣的翻頁(yè)規(guī)劃，我覺(jué)得做得很超卓。尤其是頁(yè)碼陳設(shè)部分，展現(xiàn)的是前2頁(yè)、后2頁(yè)和當(dāng)時(shí)頁(yè)碼鄰近的9頁(yè)。
豆瓣的翻頁(yè)規(guī)劃
合適的運(yùn)用場(chǎng)景
檢索需求較強(qiáng)的功用，比方“我的保藏”“音樂(lè)庫(kù)”等，便利快速定位查找。
內(nèi)容固定的功用，比方資訊網(wǎng)站中，修改寫(xiě)的長(zhǎng)達(dá)多頁(yè)的多圖長(zhǎng)文，或許網(wǎng)絡(luò)文學(xué)網(wǎng)站里的電子書(shū)。
不合適的場(chǎng)景
頁(yè)碼翻頁(yè)最大的缺陷在于每次翻頁(yè)都需求點(diǎn)擊，而且要求點(diǎn)擊的精準(zhǔn)度高，比方有必要點(diǎn)擊“下一頁(yè)”或許某個(gè)數(shù)字才干翻到想去的頁(yè)面。關(guān)于檢索需求弱，且內(nèi)容不斷更新的功用，比方微博，不主張運(yùn)用頁(yè)碼翻頁(yè)。
二、自動(dòng)瀑布流
自動(dòng)瀑布流，指的分段式加載，當(dāng)用戶閱覽到已加載的內(nèi)容底部時(shí)，網(wǎng)頁(yè)會(huì)自動(dòng)加載后續(xù)內(nèi)容。
瀑布流是移動(dòng)互聯(lián)網(wǎng)迸發(fā)后鼓起的交互方法。那個(gè)時(shí)分，交際網(wǎng)絡(luò)、碎片化時(shí)刻的概念如火如荼，許多網(wǎng)站將主頁(yè)以時(shí)刻線+訂閱的方法出現(xiàn)，facebook、twitter均運(yùn)用這種方法。用戶上網(wǎng)的意圖不再是搜索有用材料，而是隨便看看、消磨無(wú)聊時(shí)刻。上網(wǎng)習(xí)氣的改動(dòng)天然帶來(lái)了瀑布式加載的盛行。
合適運(yùn)用的場(chǎng)景
用戶的首要需求是閱覽最新內(nèi)容，比方資訊訂閱類、交際類網(wǎng)站。
不合適的場(chǎng)景
由于瀑布流缺少檢索功用，假如用戶需求頻頻查找老內(nèi)容，那么瀑布式加載會(huì)帶來(lái)嚴(yán)峻阻止。
三、手動(dòng)瀑布流
手動(dòng)瀑布流是需求用戶手動(dòng)點(diǎn)擊加載按鈕，才干取得更多內(nèi)容的方法。手動(dòng)瀑布流分為兩種情況：向前翻頁(yè)和向后翻頁(yè)。向前翻頁(yè)一般是有時(shí)刻線有新消息時(shí)的pop提示，向后翻頁(yè)的成果和自動(dòng)瀑布流相同，僅僅會(huì)出現(xiàn)一個(gè)按鈕，需求點(diǎn)擊才加載后續(xù)內(nèi)容。
合適的運(yùn)用場(chǎng)景
向前翻頁(yè)的瀑布流：適用于被迫更新的頁(yè)面。被迫更新指的是當(dāng)我停留在頁(yè)面時(shí)，接納到了他人更新內(nèi)容，比方知乎、微博都會(huì)提示你有xx條新內(nèi)容。
向后翻頁(yè)的瀑布流：適用于功用合適瀑布流，但是底部有內(nèi)容的網(wǎng)站。比方下圖：
人人都是產(chǎn)品司理的翻頁(yè)規(guī)劃
不過(guò)，我個(gè)人不看好向后翻頁(yè)的瀑布流，盡管不需求像頁(yè)碼那樣精準(zhǔn)定位，但仍然多出了一次點(diǎn)擊的過(guò)程。假如不是有有必要放在底部的內(nèi)容，能夠考慮把本來(lái)底部的內(nèi)容以低沉的方法放在側(cè)欄。比方像知乎這樣——
底部常見(jiàn)內(nèi)容被知乎放在了側(cè)欄
四、箭頭翻頁(yè)
箭頭翻頁(yè)是頁(yè)碼翻頁(yè)的簡(jiǎn)化方法，去掉頁(yè)碼數(shù)字，一起把“上一頁(yè)”“下一頁(yè)”簡(jiǎn)化成箭頭，如下圖：
豆瓣閱覽的箭頭翻頁(yè)
豆瓣音樂(lè)的箭頭翻頁(yè)
合適運(yùn)用的場(chǎng)景
模塊巨細(xì)固定而且內(nèi)容較少，一般是展現(xiàn)型模塊，比方修改引薦、今天特價(jià)。之所以運(yùn)用箭頭翻頁(yè)，有三點(diǎn)原因：
一是由于模塊巨細(xì)固定不合適會(huì)擴(kuò)展模塊長(zhǎng)度的瀑布流;
二是內(nèi)容較少?zèng)]有幾頁(yè)，顯示數(shù)字頁(yè)碼顯得負(fù)擔(dān)。
三是由于展現(xiàn)模塊需求略微富麗的交互作用，而箭頭翻頁(yè)簡(jiǎn)單做出比較炫的動(dòng)畫(huà)作用。
五、圓點(diǎn)頁(yè)碼
圓點(diǎn)頁(yè)碼是數(shù)字頁(yè)碼的簡(jiǎn)化，即把頁(yè)碼數(shù)字變成圓點(diǎn)，當(dāng)時(shí)頁(yè)碼用特別顏色凸顯出來(lái)。
合適運(yùn)用的場(chǎng)景
演示型模塊，比方輪播banner。自動(dòng)輪換的banner之所以大部分運(yùn)用圓點(diǎn)頁(yè)碼而非箭頭翻頁(yè)，是為了讓用戶知曉一共有幾張圖片，現(xiàn)在是第幾張。實(shí)際上，圓點(diǎn)頁(yè)碼的提示功用要多于操作功用。也有網(wǎng)頁(yè)一起運(yùn)用圓點(diǎn)和箭頭，比方下圖：
蝦米表演的banner
不合適的場(chǎng)景
用戶自動(dòng)翻頁(yè)需求較強(qiáng)的模塊。圓點(diǎn)頁(yè)碼就是為了簡(jiǎn)練漂亮而誕生的，一般比數(shù)字頁(yè)碼點(diǎn)擊規(guī)模小，不合適頻頻操作。
六、錨點(diǎn)滾輪翻頁(yè)
錨點(diǎn)滾輪翻頁(yè)指的是翻滾鼠標(biāo)滑輪后，頁(yè)面定位到下一個(gè)錨點(diǎn)。例子請(qǐng)見(jiàn)tumblr的產(chǎn)品介紹頁(yè)。這種翻頁(yè)方法的優(yōu)點(diǎn)有兩個(gè)，第一是能夠交互動(dòng)畫(huà)作用酷炫;第二點(diǎn)是無(wú)須點(diǎn)擊，輕輕翻滾滑輪就直接定位到下一頁(yè)，非常便利。缺陷是開(kāi)發(fā)程序繁瑣，不合適網(wǎng)站里許多運(yùn)用。
合適運(yùn)用的場(chǎng)景
具有展現(xiàn)功用的單頁(yè)，許多個(gè)人主頁(yè)、公司主頁(yè)都運(yùn)用錨點(diǎn)翻滾翻頁(yè)。 |
咨詢服務(wù)熱線：400-099-8848
