現(xiàn)如今長(zhǎng)頁面乃至瀑布流頁面開始越來越受到用戶的青睞，其突然的走紅不是沒有原因的。長(zhǎng)頁面允許用戶在快速閱讀的模式下在短時(shí)間內(nèi)獲取更多的信息，而且交互模式非常簡(jiǎn)單，用戶只需滾動(dòng)鼠標(biāo)或者滑動(dòng)手指，新的內(nèi)容就會(huì)不斷加載出來。
為什么是長(zhǎng)頁面? 長(zhǎng)頁面更能創(chuàng)建沉浸式用戶體驗(yàn)，因?yàn)橄啾扔邳c(diǎn)擊“下一頁”按鈕，直接滾動(dòng)或者滑動(dòng)對(duì)于用戶來說操作更加簡(jiǎn)單，而且滑動(dòng)的精準(zhǔn)程度遠(yuǎn)比點(diǎn)擊鏈接和按鈕要好得多。此外進(jìn)入下一個(gè)頁面，意味著用戶進(jìn)入了一個(gè)新的“環(huán)境”，重復(fù)的熟悉過程會(huì)分散用戶的注意力。哪些產(chǎn)品適合長(zhǎng)頁面?1 長(zhǎng)頁面適合展示敘事性內(nèi)容，內(nèi)容都處于同一級(jí)別，而且可以線性排布。
展示連續(xù)冗長(zhǎng)內(nèi)容，而且被分為幾個(gè)單獨(dú)頁面展示的用戶體驗(yàn)比單頁要差。其中最典型的一個(gè)例子就是教程頁面。有的教程會(huì)比較長(zhǎng)，而且上下步關(guān)聯(lián)性強(qiáng)，如果分頁展示會(huì)對(duì)理解造成障礙。比如你看到一個(gè)C4D教程，第5步會(huì)用到第4步里的知識(shí)，這時(shí)候如果要跳轉(zhuǎn)頁面回到第4步去看就會(huì)顯得很麻煩。首屏設(shè)計(jì)長(zhǎng)頁面想要獲得成功，就要鼓勵(lì)用戶往下拉，因?yàn)殚L(zhǎng)頁面的大部分信息需要用戶不斷下拉去獲取。這個(gè)就意味著長(zhǎng)頁面的首屏要做的足夠出色，這樣才能吸引用戶往下滑動(dòng)。一般首屏我們會(huì)放banner，首屏設(shè)計(jì)其實(shí)主要就是banner設(shè)計(jì)。那么如何才能設(shè)計(jì)出優(yōu)秀的長(zhǎng)頁面banner呢?
（1） 相關(guān)性這是最基本的，然而卻是最容易被我們忽視的。我們做banner，除了手繪插畫，還喜歡用攝影圖來做背景。因?yàn)榘鏅?quán)原因，我們更喜歡去國(guó)外網(wǎng)站找素材。我們會(huì)犯一個(gè)錯(cuò)誤，就是只找那些好看。誠(chéng)然好看的頁面更能吸引用戶駐足停留，但是圖文不符會(huì)讓用戶感覺自己受到了欺騙。
（2） 功能性現(xiàn)在設(shè)計(jì)都講究功能性，功能性插畫，功能性動(dòng)畫。單純意義上作為花瓶來進(jìn)行點(diǎn)綴的設(shè)計(jì)元素很容易被用戶忽視。我們盡量給頁面中每一個(gè)元素都賦予其價(jià)值，具有存在意義。
情緒化設(shè)計(jì)首屏是用戶對(duì)一個(gè)長(zhǎng)頁面的第一印象，第一印象所產(chǎn)生的情感會(huì)一直伴隨你整個(gè)長(zhǎng)頁面的瀏覽過程。用戶在進(jìn)行決策的時(shí)候，情感往往會(huì)超越理性。
導(dǎo)航欄當(dāng)我們創(chuàng)建一個(gè)長(zhǎng)頁面的時(shí)候，為了避免用戶在使用過程中迷失，我們應(yīng)該時(shí)刻給用戶展示導(dǎo)航欄。讓用戶對(duì)于位置感(當(dāng)前所處的位置)和方向感(可能的路徑)有一個(gè)了解。但是傳統(tǒng)導(dǎo)航欄有一個(gè)缺點(diǎn)，導(dǎo)航欄處于頁面頂部，當(dāng)向下滑動(dòng)的時(shí)候，導(dǎo)航欄就會(huì)就移上去，用戶就看不到了。為了解決這個(gè)問題，我們應(yīng)該對(duì)導(dǎo)航欄進(jìn)行浮動(dòng)處理，無論你的頁面如何滑動(dòng)，導(dǎo)航欄所處的位置都是不變的
就像我前面說的，因?yàn)槭謾C(jī)屏幕比較小，導(dǎo)航欄占據(jù)的屏幕空間相對(duì)來說就會(huì)比較大。在用戶進(jìn)行下拉瀏覽頁面內(nèi)容的時(shí)候，我們可以考慮隱藏導(dǎo)航欄，當(dāng)用戶向上滑動(dòng)的時(shí)候，再顯示導(dǎo)航欄。
返回按鈕為了避免用戶迷路，除了導(dǎo)航欄，我們還應(yīng)該做到合理使用“返回”按鈕。比如，我們?cè)跒g覽一個(gè)電商網(wǎng)站，發(fā)現(xiàn)這個(gè)商品不錯(cuò)就點(diǎn)進(jìn)去了解一下。感覺不太滿意以后，我們點(diǎn)擊頁面左上角的“返回”按鈕。這時(shí)我發(fā)現(xiàn)返回到了商品列表頂部，而不是我之前瀏覽到的位置。這意味著我又要重新下拉到之前瀏覽到的位置。這種反人類的設(shè)置很容易讓用戶抓狂。
相比而言，F(xiàn)lickr就做的很好。用戶在瀏覽圖片時(shí)看到一個(gè)自己感興趣的，點(diǎn)進(jìn)去之后用戶再返回，系統(tǒng)會(huì)記住你之前瀏覽位置，并且返回到那個(gè)位置。跳轉(zhuǎn)功能長(zhǎng)頁面的內(nèi)容其實(shí)是可以被分為不同的模塊的，比如操作教程類頁面。這個(gè)情況下，用戶需要一個(gè)跳轉(zhuǎn)的功能。因?yàn)楫?dāng)內(nèi)容可以準(zhǔn)確的劃分的時(shí)候，也就意味著用戶對(duì)于不同模塊的內(nèi)容有著一定理解，他們也可以判斷對(duì)這個(gè)模塊的內(nèi)容是否感興趣。如果說普通的長(zhǎng)頁面是一篇長(zhǎng)篇小說而已，那么加了跳轉(zhuǎn)功能的長(zhǎng)頁面就是一本短篇小說集，用戶可以不用一頁一頁的去翻就可以精準(zhǔn)的到達(dá)他們感興趣的章節(jié)。
當(dāng)然在這里要提醒大家，跳轉(zhuǎn)按鈕尺寸和間距一定要注意，尺寸過小或者間距過窄都會(huì)增加用戶的點(diǎn)擊難度。提供視覺反饋良好的交互設(shè)計(jì)應(yīng)該給用戶的每一個(gè)操作都提供反饋，長(zhǎng)頁面中交互模式很簡(jiǎn)單，主要就是下拉加載新的內(nèi)容。那么我們就要給用戶直觀的展示這個(gè)加載狀態(tài)。在網(wǎng)絡(luò)情況正常的情況下，新內(nèi)容加載非常迅速，我們可以使用功能性動(dòng)畫來實(shí)現(xiàn)。
加載時(shí)間難題加載時(shí)間過長(zhǎng)這幾乎每個(gè)長(zhǎng)頁面的一個(gè)通病，這個(gè)問題亟需解決。因?yàn)楦鶕?jù)調(diào)查研究發(fā)現(xiàn)，47%的用戶對(duì)一個(gè)網(wǎng)頁的加載時(shí)間的期望值是2秒內(nèi)，如果3秒后頁面還沒有加載完成，57%的用戶會(huì)選擇離開。當(dāng)然這個(gè)也不是我們?cè)O(shè)計(jì)師應(yīng)該去解決的問題，但是多了解了解也是好的。標(biāo)記服務(wù)(收藏)一個(gè)長(zhǎng)頁面里給用戶提供的內(nèi)容是很多的，我們應(yīng)該考慮到有的情況下用戶看到感興趣的內(nèi)容，但是礙于時(shí)間關(guān)系沒有點(diǎn)擊進(jìn)去，這個(gè)時(shí)候我們提供標(biāo)記服務(wù)，讓用戶可以在之后找到。標(biāo)記服務(wù)可以理解為“收藏”。
展示內(nèi)容數(shù)量以電商網(wǎng)站為例，你搜索西服，結(jié)果頁面就是一個(gè)長(zhǎng)頁面。給用戶展示搜索結(jié)果數(shù)量是很有必要的，讓用戶對(duì)內(nèi)容有個(gè)了解，他們也會(huì)對(duì)瀏覽時(shí)間有一個(gè)預(yù)估。
總結(jié)這篇文章對(duì)長(zhǎng)頁面的設(shè)計(jì)套路做了一個(gè)歸納和總結(jié)，希望大家看完有所收獲。
以上就是上海網(wǎng)站設(shè)計(jì)提供的內(nèi)容，如果想要了解關(guān)于旅游網(wǎng)站建設(shè)公司案例及微博營(yíng)銷方案，可直接點(diǎn)擊查看
