如何設(shè)計好的長頁面

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

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

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

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

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

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

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

就像我前面說的，因為手機屏幕比較小，導(dǎo)航欄占據(jù)的屏幕空間相對來說就會比較大。在用戶進行下拉瀏覽頁面內(nèi)容的時候，我們可以考慮隱藏導(dǎo)航欄，當用戶向上滑動的時候，再顯示導(dǎo)航欄。

返回按鈕為了避免用戶迷路，除了導(dǎo)航欄，我們還應(yīng)該做到合理使用“返回”按鈕。比如，我們在瀏覽一個電商網(wǎng)站，發(fā)現(xiàn)這個商品不錯就點進去了解一下。感覺不太滿意以后，我們點擊頁面左上角的“返回”按鈕。這時我發(fā)現(xiàn)返回到了商品列表頂部，而不是我之前瀏覽到的位置。這意味著我又要重新下拉到之前瀏覽到的位置。這種反人類的設(shè)置很容易讓用戶抓狂。

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

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

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

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

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

分享題目：如何設(shè)計好的長頁面
標題來源：http://www.muchs.cn/news29/159579.html

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

廣告

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