建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
3個要點設(shè)計好無限滾屏
隨著社交網(wǎng)絡(luò)的流行，無限滾屏刷新feed流成為探索更多內(nèi)容的一種必要的交互方式，如同F(xiàn)lickr、Facebook所做的。用戶愿意瀏覽大量內(nèi)容去尋找自己感興趣的東西，用戶會先關(guān)注內(nèi)容再關(guān)注其他東西，而無限滾屏形式能讓用戶找到他們想要的內(nèi)容。
此外，無限滾屏的線性結(jié)構(gòu)能讓網(wǎng)頁編輯容易操控。隨著用戶向下滾動頁面，迥異的布局可以配合各種微動畫效果，來營造一種讓用戶好奇“接下來會發(fā)生什么”的氛圍。
TheBoat就是一個很好的案例，無限滾屏增強了故事性，創(chuàng)造一種全新的視覺文案布局形式。
無限滾屏形式給設(shè)計師打開了一扇新的大門，然而他也有缺點。它需要設(shè)計師花精力去關(guān)注內(nèi)容，導航以及動畫。
如果無限滾屏是你的不二選擇，那么成都網(wǎng)站建設(shè)科技告誡，最好時刻銘記下面幾點：
引導用戶滾屏調(diào)整導航形式以適應(yīng)滾屏用動畫去強化滾屏形式。
一、引導用戶滾屏
盡管用戶通常會在加載完頁面就開始向下滾屏查看，第一屏的內(nèi)容仍然是非常重要的。
首屏的內(nèi)容會產(chǎn)生第一印象并讓用戶對后面的內(nèi)容質(zhì)量有一個相應(yīng)的預(yù)期，只有當首屏內(nèi)容足夠吸引的時候用戶才會愿意滾屏查看更多。這種情況不管是在手機，平板電腦或者PC上都是適用的，只有當用戶認為滾屏查看的內(nèi)容值得的時候才會去做。
1.給用戶有趣的內(nèi)容
用戶不需要付出任何操作成本看到的內(nèi)容才是能讓用戶產(chǎn)生向下滾屏行為的動力。想確保用戶下拉查看更多內(nèi)容，你就必須提供用戶感興趣的內(nèi)容。因此，首屏必須放最有吸引力的內(nèi)容：
好的頁面簡介，是內(nèi)容的一個縮影并幫助用戶了解這個頁面是干嘛的。有趣并且真實的內(nèi)容能夠吸引用戶產(chǎn)生持續(xù)的關(guān)注。吸引人的圖片（內(nèi)容與質(zhì)量）用戶對包含他們感興趣的相關(guān)信息的圖片非常關(guān)注
Tips：用一款叫做whereisthefold？的免費工具來查看在當前流行的屏幕分辨率下你的第一屏內(nèi)容到底有多少？
2.避免錯誤的頁底展示
首屏的內(nèi)容會影響余下的內(nèi)容，首屏的內(nèi)容應(yīng)該提示用戶滾屏后有更多有價值的內(nèi)容。當你錯誤的展示首頁底部時，或者說首屏內(nèi)容展示完畢看起來下面沒有更多內(nèi)容了，那么用戶也沒有理由相信下面有更多內(nèi)容，因而用戶就很少會滾屏。
避免錯誤的首頁底部展示其實很簡單，只需要在視覺上提示用戶下面有更多信息。例如：網(wǎng)格狀或者卡片式布局就可以在第一屏的結(jié)束位置被裁剪來告訴用戶滾動方向以及有更多內(nèi)容
二、調(diào)整導航形式以適應(yīng)滾屏
導航在網(wǎng)站的用戶體驗中會產(chǎn)生好的或壞的影響，一個好用的導航很關(guān)鍵，因為用戶必須能夠快速的定位他們在頁面中的位置，并且知道怎樣去他們想要的頁面。
1.使用固定式的導航（欄）
長長的滾屏會讓導航變得很麻煩，如果用戶在滾動到頁面深處后看不到導航欄，那么他們就不得不一直往上滾動頁面到頂部。一個很直接的解決辦法就是固定式的導航欄，它能始終讓導航欄保持可見，因而可以讓用戶很方便和快捷地導航去不同的頁面或區(qū)域。
然而，如果你想節(jié)約有限的屏幕空間，那么可以在查看更多的滾動方向上隱藏導航欄并在相反方向上讓其可用。
這種方法在移動端尤其適用，因為手機屏幕比平板電腦、筆記本、PC都要小得多，導航欄會占掉相當一部分屏幕空間。如果屏幕展示的是一個滾動的瀑布流，那么當用戶滾屏查看新內(nèi)容時可以隱藏導航欄而在用戶準備返回頂部時顯示。
2.考慮使用定位按鈕
無限滾屏的另外一個普遍存在的問題就是——可能造成用戶迷失。用戶可能會很難找到頁面中之前看過的內(nèi)容，當頁面內(nèi)容被分割成許多同等重要的部分，或者區(qū)塊時（例如：一個很長的用戶引導頁面）這種問題（用戶迷失），顯得尤為明顯，使用頁面快速定位按鈕能夠解決這個問題。
頁面定位其實是一系列能夠讓用戶快速跳到頁面相關(guān)內(nèi)容的頁面內(nèi)鏈接，它其實與內(nèi)容目錄幾乎同理。例如：在Tumblr上，用戶可以直接跳到頁面底部，或者當他們迷失的時候直接跳回頂部。頁面內(nèi)容被分割為不同的區(qū)塊，這些區(qū)塊很容易區(qū)分并且有大大的定位點固定在屏幕的左側(cè)。
3.確保返回按鈕好用
當用戶打開一個頁面內(nèi)（不跳轉(zhuǎn)）的鏈接后，然后點擊返回按鈕，他們是期望能夠回到上一個頁面的相同位置的。
但如果在頁面中的位置沒有被保留，那么使用瀏覽器的返回按鈕就會將位置重置到頁面的頂部，失去之前的閱讀位置使用戶不得不滾屏一段他們已經(jīng)看過的內(nèi)容。在這種情況下用戶很容易因為沒有返回原來位置的功能而感到沮喪。
Flickr的返回按鈕是一個很好的符合用戶預(yù)期的案例，它會記住用戶下拉的位置，因此當用戶點擊返回按鈕的時候會回到他之前頁面內(nèi)的初始位置。
三、用動畫去強化滾屏形式
考慮到用戶在一個頁面的注意力大概能集中8秒左右，一個非常愉悅的滾屏體驗?zāi)軌蛎黠@延長用戶的停留時間，使用得當?shù)膭赢嬆軌蛟跐L屏體驗中很好的引導用戶。
1.滾屏激活的動畫效果
考慮到把頁面分割成可滾屏的部分，而每一個部分都可以通過動畫效果來引入其內(nèi)容。當用戶滾屏時，動畫通過創(chuàng)造內(nèi)容的運動軌跡將用戶的視線過度到下一屏。
這是一種對于要保持用戶對接下來內(nèi)容感興趣，而展示給用戶內(nèi)容流的非常有效的方法（通過動畫銜接不同區(qū)塊的內(nèi)容并讓用戶保持持續(xù)的興趣）。
2.視差效果
當你的網(wǎng)站想要把故事講得很流暢，長滾屏加上視差效應(yīng)可以創(chuàng)造出一個完全沉浸式的瀏覽體驗。
視差滾屏意味著背景內(nèi)容相對于前景元素移動得稍慢點，當你下滾頁面時它可以創(chuàng)造出一個3D效果。如果運用得當，它可以創(chuàng)造出一個非常好的縱深感。這種形式很適合那些故事描述性的網(wǎng)站，用好的視覺元素創(chuàng)造一個更加沉浸式并且更有趣更刺激的體驗。
當前題目：3個要點設(shè)計好無限滾屏
網(wǎng)頁URL：http://ef60e0e.cn/article/esspps.html
此外，無限滾屏的線性結(jié)構(gòu)能讓網(wǎng)頁編輯容易操控。隨著用戶向下滾動頁面，迥異的布局可以配合各種微動畫效果，來營造一種讓用戶好奇“接下來會發(fā)生什么”的氛圍。
TheBoat就是一個很好的案例，無限滾屏增強了故事性，創(chuàng)造一種全新的視覺文案布局形式。
無限滾屏形式給設(shè)計師打開了一扇新的大門，然而他也有缺點。它需要設(shè)計師花精力去關(guān)注內(nèi)容，導航以及動畫。
如果無限滾屏是你的不二選擇，那么成都網(wǎng)站建設(shè)科技告誡，最好時刻銘記下面幾點：
引導用戶滾屏調(diào)整導航形式以適應(yīng)滾屏用動畫去強化滾屏形式。
一、引導用戶滾屏
盡管用戶通常會在加載完頁面就開始向下滾屏查看，第一屏的內(nèi)容仍然是非常重要的。
首屏的內(nèi)容會產(chǎn)生第一印象并讓用戶對后面的內(nèi)容質(zhì)量有一個相應(yīng)的預(yù)期，只有當首屏內(nèi)容足夠吸引的時候用戶才會愿意滾屏查看更多。這種情況不管是在手機，平板電腦或者PC上都是適用的，只有當用戶認為滾屏查看的內(nèi)容值得的時候才會去做。
1.給用戶有趣的內(nèi)容
用戶不需要付出任何操作成本看到的內(nèi)容才是能讓用戶產(chǎn)生向下滾屏行為的動力。想確保用戶下拉查看更多內(nèi)容，你就必須提供用戶感興趣的內(nèi)容。因此，首屏必須放最有吸引力的內(nèi)容：
好的頁面簡介，是內(nèi)容的一個縮影并幫助用戶了解這個頁面是干嘛的。有趣并且真實的內(nèi)容能夠吸引用戶產(chǎn)生持續(xù)的關(guān)注。吸引人的圖片（內(nèi)容與質(zhì)量）用戶對包含他們感興趣的相關(guān)信息的圖片非常關(guān)注
Tips：用一款叫做whereisthefold？的免費工具來查看在當前流行的屏幕分辨率下你的第一屏內(nèi)容到底有多少？
2.避免錯誤的頁底展示
首屏的內(nèi)容會影響余下的內(nèi)容，首屏的內(nèi)容應(yīng)該提示用戶滾屏后有更多有價值的內(nèi)容。當你錯誤的展示首頁底部時，或者說首屏內(nèi)容展示完畢看起來下面沒有更多內(nèi)容了，那么用戶也沒有理由相信下面有更多內(nèi)容，因而用戶就很少會滾屏。
避免錯誤的首頁底部展示其實很簡單，只需要在視覺上提示用戶下面有更多信息。例如：網(wǎng)格狀或者卡片式布局就可以在第一屏的結(jié)束位置被裁剪來告訴用戶滾動方向以及有更多內(nèi)容
二、調(diào)整導航形式以適應(yīng)滾屏
導航在網(wǎng)站的用戶體驗中會產(chǎn)生好的或壞的影響，一個好用的導航很關(guān)鍵，因為用戶必須能夠快速的定位他們在頁面中的位置，并且知道怎樣去他們想要的頁面。
1.使用固定式的導航（欄）
長長的滾屏會讓導航變得很麻煩，如果用戶在滾動到頁面深處后看不到導航欄，那么他們就不得不一直往上滾動頁面到頂部。一個很直接的解決辦法就是固定式的導航欄，它能始終讓導航欄保持可見，因而可以讓用戶很方便和快捷地導航去不同的頁面或區(qū)域。
然而，如果你想節(jié)約有限的屏幕空間，那么可以在查看更多的滾動方向上隱藏導航欄并在相反方向上讓其可用。
這種方法在移動端尤其適用，因為手機屏幕比平板電腦、筆記本、PC都要小得多，導航欄會占掉相當一部分屏幕空間。如果屏幕展示的是一個滾動的瀑布流，那么當用戶滾屏查看新內(nèi)容時可以隱藏導航欄而在用戶準備返回頂部時顯示。
2.考慮使用定位按鈕
無限滾屏的另外一個普遍存在的問題就是——可能造成用戶迷失。用戶可能會很難找到頁面中之前看過的內(nèi)容，當頁面內(nèi)容被分割成許多同等重要的部分，或者區(qū)塊時（例如：一個很長的用戶引導頁面）這種問題（用戶迷失），顯得尤為明顯，使用頁面快速定位按鈕能夠解決這個問題。
頁面定位其實是一系列能夠讓用戶快速跳到頁面相關(guān)內(nèi)容的頁面內(nèi)鏈接，它其實與內(nèi)容目錄幾乎同理。例如：在Tumblr上，用戶可以直接跳到頁面底部，或者當他們迷失的時候直接跳回頂部。頁面內(nèi)容被分割為不同的區(qū)塊，這些區(qū)塊很容易區(qū)分并且有大大的定位點固定在屏幕的左側(cè)。
3.確保返回按鈕好用
當用戶打開一個頁面內(nèi)（不跳轉(zhuǎn)）的鏈接后，然后點擊返回按鈕，他們是期望能夠回到上一個頁面的相同位置的。
但如果在頁面中的位置沒有被保留，那么使用瀏覽器的返回按鈕就會將位置重置到頁面的頂部，失去之前的閱讀位置使用戶不得不滾屏一段他們已經(jīng)看過的內(nèi)容。在這種情況下用戶很容易因為沒有返回原來位置的功能而感到沮喪。
Flickr的返回按鈕是一個很好的符合用戶預(yù)期的案例，它會記住用戶下拉的位置，因此當用戶點擊返回按鈕的時候會回到他之前頁面內(nèi)的初始位置。
三、用動畫去強化滾屏形式
考慮到用戶在一個頁面的注意力大概能集中8秒左右，一個非常愉悅的滾屏體驗?zāi)軌蛎黠@延長用戶的停留時間，使用得當?shù)膭赢嬆軌蛟跐L屏體驗中很好的引導用戶。
1.滾屏激活的動畫效果
考慮到把頁面分割成可滾屏的部分，而每一個部分都可以通過動畫效果來引入其內(nèi)容。當用戶滾屏時，動畫通過創(chuàng)造內(nèi)容的運動軌跡將用戶的視線過度到下一屏。
這是一種對于要保持用戶對接下來內(nèi)容感興趣，而展示給用戶內(nèi)容流的非常有效的方法（通過動畫銜接不同區(qū)塊的內(nèi)容并讓用戶保持持續(xù)的興趣）。
2.視差效果
當你的網(wǎng)站想要把故事講得很流暢，長滾屏加上視差效應(yīng)可以創(chuàng)造出一個完全沉浸式的瀏覽體驗。
視差滾屏意味著背景內(nèi)容相對于前景元素移動得稍慢點，當你下滾頁面時它可以創(chuàng)造出一個3D效果。如果運用得當，它可以創(chuàng)造出一個非常好的縱深感。這種形式很適合那些故事描述性的網(wǎng)站，用好的視覺元素創(chuàng)造一個更加沉浸式并且更有趣更刺激的體驗。
當前題目：3個要點設(shè)計好無限滾屏
網(wǎng)頁URL：http://ef60e0e.cn/article/esspps.html
