如何設(shè)計(jì)好的長(zhǎng)頁(yè)面

現(xiàn)如今長(zhǎng)頁(yè)面乃至瀑布流頁(yè)面開(kāi)始越來(lái)越受到用戶的青睞，其突然的走紅不是沒(méi)有原因的。長(zhǎng)頁(yè)面允許用戶在快速閱讀的模式下在短時(shí)間內(nèi)獲取更多的信息，而且交互模式非常簡(jiǎn)單，用戶只需滾動(dòng)鼠標(biāo)或者滑動(dòng)手指，新的內(nèi)容就會(huì)不斷加載出來(lái)。

為什么是長(zhǎng)頁(yè)面? 長(zhǎng)頁(yè)面更能創(chuàng)建沉浸式用戶體驗(yàn)，因?yàn)橄啾扔邳c(diǎn)擊“下一頁(yè)”按鈕，直接滾動(dòng)或者滑動(dòng)對(duì)于用戶來(lái)說(shuō)操作更加簡(jiǎn)單，而且滑動(dòng)的精準(zhǔn)程度遠(yuǎn)比點(diǎn)擊鏈接和按鈕要好得多。此外進(jìn)入下一個(gè)頁(yè)面，意味著用戶進(jìn)入了一個(gè)新的“環(huán)境”，重復(fù)的熟悉過(guò)程會(huì)分散用戶的注意力。哪些產(chǎn)品適合長(zhǎng)頁(yè)面?1 長(zhǎng)頁(yè)面適合展示敘事性內(nèi)容，內(nèi)容都處于同一級(jí)別，而且可以線性排布。

展示連續(xù)冗長(zhǎng)內(nèi)容，而且被分為幾個(gè)單獨(dú)頁(yè)面展示的用戶體驗(yàn)比單頁(yè)要差。其中最典型的一個(gè)例子就是教程頁(yè)面。有的教程會(huì)比較長(zhǎng)，而且上下步關(guān)聯(lián)性強(qiáng)，如果分頁(yè)展示會(huì)對(duì)理解造成障礙。比如你看到一個(gè)C4D教程，第5步會(huì)用到第4步里的知識(shí)，這時(shí)候如果要跳轉(zhuǎn)頁(yè)面回到第4步去看就會(huì)顯得很麻煩。首屏設(shè)計(jì)長(zhǎng)頁(yè)面想要獲得成功，就要鼓勵(lì)用戶往下拉，因?yàn)殚L(zhǎng)頁(yè)面的大部分信息需要用戶不斷下拉去獲取。這個(gè)就意味著長(zhǎng)頁(yè)面的首屏要做的足夠出色，這樣才能吸引用戶往下滑動(dòng)。一般首屏我們會(huì)放banner，首屏設(shè)計(jì)其實(shí)主要就是banner設(shè)計(jì)。那么如何才能設(shè)計(jì)出優(yōu)秀的長(zhǎng)頁(yè)面banner呢?

（1） 相關(guān)性這是最基本的，然而卻是最容易被我們忽視的。我們做banner，除了手繪插畫(huà)，還喜歡用攝影圖來(lái)做背景。因?yàn)榘鏅?quán)原因，我們更喜歡去國(guó)外網(wǎng)站找素材。我們會(huì)犯一個(gè)錯(cuò)誤，就是只找那些好看。誠(chéng)然好看的頁(yè)面更能吸引用戶駐足停留，但是圖文不符會(huì)讓用戶感覺(jué)自己受到了欺騙。

（2） 功能性現(xiàn)在設(shè)計(jì)都講究功能性，功能性插畫(huà)，功能性動(dòng)畫(huà)。單純意義上作為花瓶來(lái)進(jìn)行點(diǎn)綴的設(shè)計(jì)元素很容易被用戶忽視。我們盡量給頁(yè)面中每一個(gè)元素都賦予其價(jià)值，具有存在意義。

情緒化設(shè)計(jì)首屏是用戶對(duì)一個(gè)長(zhǎng)頁(yè)面的第一印象，第一印象所產(chǎn)生的情感會(huì)一直伴隨你整個(gè)長(zhǎng)頁(yè)面的瀏覽過(guò)程。用戶在進(jìn)行決策的時(shí)候，情感往往會(huì)超越理性。

導(dǎo)航欄當(dāng)我們創(chuàng)建一個(gè)長(zhǎng)頁(yè)面的時(shí)候，為了避免用戶在使用過(guò)程中迷失，我們應(yīng)該時(shí)刻給用戶展示導(dǎo)航欄。讓用戶對(duì)于位置感(當(dāng)前所處的位置)和方向感(可能的路徑)有一個(gè)了解。但是傳統(tǒng)導(dǎo)航欄有一個(gè)缺點(diǎn)，導(dǎo)航欄處于頁(yè)面頂部，當(dāng)向下滑動(dòng)的時(shí)候，導(dǎo)航欄就會(huì)就移上去，用戶就看不到了。為了解決這個(gè)問(wèn)題，我們應(yīng)該對(duì)導(dǎo)航欄進(jìn)行浮動(dòng)處理，無(wú)論你的頁(yè)面如何滑動(dòng)，導(dǎo)航欄所處的位置都是不變的

就像我前面說(shuō)的，因?yàn)槭謾C(jī)屏幕比較小，導(dǎo)航欄占據(jù)的屏幕空間相對(duì)來(lái)說(shuō)就會(huì)比較大。在用戶進(jìn)行下拉瀏覽頁(yè)面內(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)去了解一下。感覺(jué)不太滿意以后，我們點(diǎn)擊頁(yè)面左上角的“返回”按鈕。這時(shí)我發(fā)現(xiàn)返回到了商品列表頂部，而不是我之前瀏覽到的位置。這意味著我又要重新下拉到之前瀏覽到的位置。這種反人類的設(shè)置很容易讓用戶抓狂。

相比而言，F(xiàn)lickr就做的很好。用戶在瀏覽圖片時(shí)看到一個(gè)自己感興趣的，點(diǎn)進(jìn)去之后用戶再返回，系統(tǒng)會(huì)記住你之前瀏覽位置，并且返回到那個(gè)位置。跳轉(zhuǎn)功能長(zhǎng)頁(yè)面的內(nèi)容其實(shí)是可以被分為不同的模塊的，比如操作教程類頁(yè)面。這個(gè)情況下，用戶需要一個(gè)跳轉(zhuǎn)的功能。因?yàn)楫?dāng)內(nèi)容可以準(zhǔn)確的劃分的時(shí)候，也就意味著用戶對(duì)于不同模塊的內(nèi)容有著一定理解，他們也可以判斷對(duì)這個(gè)模塊的內(nèi)容是否感興趣。如果說(shuō)普通的長(zhǎng)頁(yè)面是一篇長(zhǎng)篇小說(shuō)而已，那么加了跳轉(zhuǎn)功能的長(zhǎng)頁(yè)面就是一本短篇小說(shuō)集，用戶可以不用一頁(yè)一頁(yè)的去翻就可以精準(zhǔn)的到達(dá)他們感興趣的章節(jié)。

當(dāng)然在這里要提醒大家，跳轉(zhuǎn)按鈕尺寸和間距一定要注意，尺寸過(guò)小或者間距過(guò)窄都會(huì)增加用戶的點(diǎn)擊難度。提供視覺(jué)反饋良好的交互設(shè)計(jì)應(yīng)該給用戶的每一個(gè)操作都提供反饋，長(zhǎng)頁(yè)面中交互模式很簡(jiǎn)單，主要就是下拉加載新的內(nèi)容。那么我們就要給用戶直觀的展示這個(gè)加載狀態(tài)。在網(wǎng)絡(luò)情況正常的情況下，新內(nèi)容加載非常迅速，我們可以使用功能性動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。

加載時(shí)間難題加載時(shí)間過(guò)長(zhǎng)這幾乎每個(gè)長(zhǎng)頁(yè)面的一個(gè)通病，這個(gè)問(wèn)題亟需解決。因?yàn)楦鶕?jù)調(diào)查研究發(fā)現(xiàn)，47%的用戶對(duì)一個(gè)網(wǎng)頁(yè)的加載時(shí)間的期望值是2秒內(nèi)，如果3秒后頁(yè)面還沒(méi)有加載完成，57%的用戶會(huì)選擇離開(kāi)。當(dāng)然這個(gè)也不是我們?cè)O(shè)計(jì)師應(yīng)該去解決的問(wèn)題，但是多了解了解也是好的。標(biāo)記服務(wù)(收藏)一個(gè)長(zhǎng)頁(yè)面里給用戶提供的內(nèi)容是很多的，我們應(yīng)該考慮到有的情況下用戶看到感興趣的內(nèi)容，但是礙于時(shí)間關(guān)系沒(méi)有點(diǎn)擊進(jìn)去，這個(gè)時(shí)候我們提供標(biāo)記服務(wù)，讓用戶可以在之后找到。標(biāo)記服務(wù)可以理解為“收藏”。

展示內(nèi)容數(shù)量以電商網(wǎng)站為例，你搜索西服，結(jié)果頁(yè)面就是一個(gè)長(zhǎng)頁(yè)面。給用戶展示搜索結(jié)果數(shù)量是很有必要的，讓用戶對(duì)內(nèi)容有個(gè)了解，他們也會(huì)對(duì)瀏覽時(shí)間有一個(gè)預(yù)估。

總結(jié)這篇文章對(duì)長(zhǎng)頁(yè)面的設(shè)計(jì)套路做了一個(gè)歸納和總結(jié)，希望大家看完有所收獲。

分享題目：如何設(shè)計(jì)好的長(zhǎng)頁(yè)面
標(biāo)題來(lái)源：http://www.bm7419.com/news29/159579.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)