中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

用戶愿意瀏覽大量?jī)?nèi)容去尋找自己感興趣的東西，用戶會(huì)先關(guān)注內(nèi)容再關(guān)注其他東西，而無限滾屏形式能讓用戶找到他們想要的內(nèi)容。本文主要分析滾屏設(shè)計(jì)，一起進(jìn)來看看吧~

隨著社交網(wǎng)絡(luò)的流行，無限滾屏刷新feed流成為探索更多內(nèi)容的一種必要的交互方式，如同F(xiàn)lickr、Facebook所做的。用戶愿意瀏覽大量?jī)?nèi)容去尋找自己感興趣的東西，用戶會(huì)先關(guān)注內(nèi)容再關(guān)注其他東西，而無限滾屏形式能讓用戶找到他們想要的內(nèi)容。

此外，無限滾屏的線性結(jié)構(gòu)能讓網(wǎng)頁(yè)編輯容易操控。隨著用戶向下滾動(dòng)頁(yè)面，迥異的布局可以配合各種微動(dòng)畫效果，來營(yíng)造一種讓用戶好奇“接下來會(huì)發(fā)生什么”的氛圍。

The Boat 就是一個(gè)很好的案例，無限滾屏增強(qiáng)了故事性，創(chuàng)造一種全新的視覺文案布局形式。

無限滾屏形式給設(shè)計(jì)師打開了一扇新的大門，然而他也有缺點(diǎn)。它需要設(shè)計(jì)師花精力去關(guān)注內(nèi)容，導(dǎo)航以及動(dòng)畫。

如果無限滾屏是你的不二選擇，那么最好時(shí)刻銘記下面幾點(diǎn)：

1. 引導(dǎo)用戶滾屏
2. 調(diào)整導(dǎo)航形式以適應(yīng)滾屏
3. 用動(dòng)畫去強(qiáng)化滾屏形式

一、引導(dǎo)用戶滾屏

盡管用戶通常會(huì)在加載完頁(yè)面就開始向下滾屏查看，第一屏的內(nèi)容仍然是非常重要的。

首屏的內(nèi)容會(huì)產(chǎn)生第一印象并讓用戶對(duì)后面的內(nèi)容質(zhì)量有一個(gè)相應(yīng)的預(yù)期，只有當(dāng)首屏內(nèi)容足夠吸引的時(shí)候用戶才會(huì)愿意滾屏查看更多。這種情況不管是在手機(jī)，平板電腦或者PC上都是適用的，只有當(dāng)用戶認(rèn)為滾屏查看的內(nèi)容值得的時(shí)候才會(huì)去做。

1. 給用戶有趣的內(nèi)容

用戶不需要付出任何操作成本看到的內(nèi)容才是能讓用戶產(chǎn)生向下滾屏行為的動(dòng)力。想確保用戶下拉查看更多內(nèi)容，你就必須提供用戶感興趣的內(nèi)容。因此，首屏必須放最有吸引力的內(nèi)容：

• 好的頁(yè)面簡(jiǎn)介，是內(nèi)容的一個(gè)縮影并幫助用戶了解這個(gè)頁(yè)面是干嘛的。
• 有趣并且真實(shí)的內(nèi)容能夠吸引用戶產(chǎn)生持續(xù)的關(guān)注。
• 吸引人的圖片（內(nèi)容與質(zhì)量）用戶對(duì)包含他們感興趣的相關(guān)信息的圖片非常關(guān)注

Tips：用一款叫做where is the fold？的免費(fèi)工具來查看在當(dāng)前流行的屏幕分辨率下你的第一屏內(nèi)容到底有多少？

2. 避免錯(cuò)誤的頁(yè)底展示?

首屏的內(nèi)容會(huì)影響余下的內(nèi)容，首屏的內(nèi)容應(yīng)該提示用戶滾屏后有更多有價(jià)值的內(nèi)容。當(dāng)你錯(cuò)誤的展示首頁(yè)底部時(shí)，或者說首屏內(nèi)容展示完畢看起來下面沒有更多內(nèi)容了，那么用戶也沒有理由相信下面有更多內(nèi)容，因而用戶就很少會(huì)滾屏。

避免錯(cuò)誤的首頁(yè)底部展示其實(shí)很簡(jiǎn)單，只需要在視覺上提示用戶下面有更多信息。例如：網(wǎng)格狀或者卡片式布局就可以在第一屏的結(jié)束位置被裁剪來告訴用戶滾動(dòng)方向以及有更多內(nèi)容

或者你也可以直接告訴用戶可以滾屏——一個(gè)明顯的提示，比如：一個(gè)指向屏幕下方的箭頭或者一句“下滑查看更多”文案，這都能很明顯的提示用戶下面有更多內(nèi)容。

二、調(diào)整導(dǎo)航形式以適應(yīng)滾屏

導(dǎo)航在網(wǎng)站的用戶體驗(yàn)中會(huì)產(chǎn)生好的或壞的影響，一個(gè)好用的導(dǎo)航很關(guān)鍵，因?yàn)橛脩舯仨毮軌蚩焖俚亩ㄎ凰麄冊(cè)陧?yè)面中的位置，并且知道怎樣去他們想要的頁(yè)面。

1. 使用固定式的導(dǎo)航（欄）

長(zhǎng)長(zhǎng)的滾屏?xí)寣?dǎo)航變得很麻煩，如果用戶在滾動(dòng)到頁(yè)面深處后看不到導(dǎo)航欄，那么他們就不得不一直往上滾動(dòng)頁(yè)面到頂部。一個(gè)很直接的解決辦法就是固定式的導(dǎo)航欄，它能始終讓導(dǎo)航欄保持可見，因而可以讓用戶很方便和快捷地導(dǎo)航去不同的頁(yè)面或區(qū)域。

然而，如果你想節(jié)約有限的屏幕空間，那么可以在查看更多的滾動(dòng)方向上隱藏導(dǎo)航欄并在相反方向上讓其可用。

這種方法在移動(dòng)端尤其適用，因?yàn)槭謾C(jī)屏幕比平板電腦、筆記本、PC都要小得多，導(dǎo)航欄會(huì)占掉相當(dāng)一部分屏幕空間。如果屏幕展示的是一個(gè)滾動(dòng)的瀑布流，那么當(dāng)用戶滾屏查看新內(nèi)容時(shí)可以隱藏導(dǎo)航欄而在用戶準(zhǔn)備返回頂部時(shí)顯示。

2. 考慮使用定位按鈕

無限滾屏的另外一個(gè)普遍存在的問題就是——可能造成用戶迷失。用戶可能會(huì)很難找到頁(yè)面中之前看過的內(nèi)容，當(dāng)頁(yè)面內(nèi)容被分割成許多同等重要的部分，或者區(qū)塊時(shí)（例如：一個(gè)很長(zhǎng)的用戶引導(dǎo)頁(yè)面）這種問題（用戶迷失），顯得尤為明顯，使用頁(yè)面快速定位按鈕能夠解決這個(gè)問題。

頁(yè)面定位其實(shí)是一系列能夠讓用戶快速跳到頁(yè)面相關(guān)內(nèi)容的頁(yè)面內(nèi)鏈接，它其實(shí)與內(nèi)容目錄幾乎同理。例如：在Tumblr上，用戶可以直接跳到頁(yè)面底部，或者當(dāng)他們迷失的時(shí)候直接跳回頂部。頁(yè)面內(nèi)容被分割為不同的區(qū)塊，這些區(qū)塊很容易區(qū)分并且有大大的定位點(diǎn)固定在屏幕的左側(cè)。

3. 確保返回按鈕好用

當(dāng)用戶打開一個(gè)頁(yè)面內(nèi)（不跳轉(zhuǎn)）的鏈接后，然后點(diǎn)擊返回按鈕，他們是期望能夠回到上一個(gè)頁(yè)面的相同位置的。

但如果在頁(yè)面中的位置沒有被保留，那么使用瀏覽器的返回按鈕就會(huì)將位置重置到頁(yè)面的頂部，失去之前的閱讀位置使用戶不得不滾屏一段他們已經(jīng)看過的內(nèi)容。在這種情況下用戶很容易因?yàn)闆]有返回原來位置的功能而感到沮喪。

Flickr的返回按鈕是一個(gè)很好的符合用戶預(yù)期的案例，它會(huì)記住用戶下拉的位置，因此當(dāng)用戶點(diǎn)擊返回按鈕的時(shí)候會(huì)回到他之前頁(yè)面內(nèi)的初始位置。

三、用動(dòng)畫去強(qiáng)化滾屏形式

考慮到用戶在一個(gè)頁(yè)面的注意力大概能集中8秒左右，一個(gè)非常愉悅的滾屏體驗(yàn)?zāi)軌蛎黠@延長(zhǎng)用戶的停留時(shí)間，使用得當(dāng)?shù)膭?dòng)畫能夠在滾屏體驗(yàn)中很好的引導(dǎo)用戶。

1. 滾屏激活的動(dòng)畫效果?

考慮到把頁(yè)面分割成可滾屏的部分，而每一個(gè)部分都可以通過動(dòng)畫效果來引入其內(nèi)容。當(dāng)用戶滾屏?xí)r，動(dòng)畫通過創(chuàng)造內(nèi)容的運(yùn)動(dòng)軌跡將用戶的視線過度到下一屏。

這是一種對(duì)于要保持用戶對(duì)接下來內(nèi)容感興趣，而展示給用戶內(nèi)容流的非常有效的方法（通過動(dòng)畫銜接不同區(qū)塊的內(nèi)容并讓用戶保持持續(xù)的興趣）。

2. 視差效果

當(dāng)你的網(wǎng)站想要把故事講得很流暢，長(zhǎng)滾屏加上視差效應(yīng)可以創(chuàng)造出一個(gè)完全沉浸式的瀏覽體驗(yàn)。

視差滾屏意味著背景內(nèi)容相對(duì)于前景元素移動(dòng)得稍慢點(diǎn)，當(dāng)你下滾頁(yè)面時(shí)它可以創(chuàng)造出一個(gè)3D效果。如果運(yùn)用得當(dāng)，它可以創(chuàng)造出一個(gè)非常好的縱深感。這種形式很適合那些故事描述性的網(wǎng)站，用好的視覺元素創(chuàng)造一個(gè)更加沉浸式并且更有趣更刺激的體驗(yàn)。

Tips：視差網(wǎng)站的代碼開發(fā)可以閱讀Dave Gamache 寫的文章 “Parallax DoneRight”。

當(dāng)你設(shè)計(jì)長(zhǎng)滾屏形式并且?guī)в袆?dòng)畫的網(wǎng)時(shí)，必須要考慮到用戶加載頁(yè)面所需CPU和內(nèi)存的消耗。多頁(yè)面多內(nèi)容的滾屏，包括各種圖片、GIF圖和視頻，還不需要重新加載的頁(yè)面會(huì)占用系統(tǒng)很大的資源。可以在不同設(shè)備上進(jìn)行測(cè)試，并且運(yùn)用一些小技巧。比如：當(dāng)用戶滑過時(shí)不播放動(dòng)畫和視頻來減少這種內(nèi)存資源的浪費(fèi)。

3. 加載時(shí)提供視覺上的反饋

這種方法尤其適合無限滾屏的頁(yè)面，對(duì)內(nèi)容很多的長(zhǎng)滾屏頁(yè)面也很有用。當(dāng)新內(nèi)容載入時(shí)，用戶需要一個(gè)網(wǎng)站傳遞一個(gè)明確的加載信號(hào)，通過使用進(jìn)程信號(hào)來展示有新的內(nèi)容正在加載并且會(huì)很快在頁(yè)面顯示讓用戶一直感知。

因?yàn)榧虞d新內(nèi)容是一個(gè)很快速的行為（通常不會(huì)超過2-10秒），你可以用小圈圈動(dòng)畫來作為告知系統(tǒng)正在工作的反饋信號(hào)。誠(chéng)然，這種動(dòng)畫非常短并且可以重復(fù)使用。

同樣也可以增加額外的信號(hào)，來告知用戶包括使用文案來解釋用戶為什么在等待。

4. 避免過渡使用滾屏

那些被滾屏形式綁架了的網(wǎng)站，忽略了網(wǎng)站瀏覽的基本功能。被滾屏劫持體驗(yàn)非常不好，因?yàn)橛脩魧?duì)自身的操作行為及結(jié)果不能夠充分預(yù)知，用戶對(duì)網(wǎng)站滾屏交互的預(yù)期，不應(yīng)該被狹隘的體驗(yàn)所劫持。

Tumblr uses scroll hijacking on their current homepage

這里tumblr被作者當(dāng)成了反面教材，大意應(yīng)該是批判tumblr滾屏屏數(shù)太多，一共有六屏

5. 緩解SEO的缺點(diǎn) （SEO= Search Engine Optimization，這一部分不是特別懂）

長(zhǎng)滾屏對(duì)SEO會(huì)產(chǎn)生負(fù)面效果，但是如果能遵守Googlerecommendations 這種情況就能避免。做一個(gè)用戶行為分析，來看看你設(shè)計(jì)的網(wǎng)站實(shí)際上是怎樣工作的。

我們來看看他們是怎么說的： （這里指Google recommendations）

確定每一屏有多少內(nèi)容：

• 確保如果一個(gè)搜索用戶直接來到這個(gè)頁(yè)面，他們能夠很容易找到他們想要的內(nèi)容（在定位到想要的內(nèi)容之前不要有太多的滾屏）；
• 使用合理的頁(yè)面(分屏)加載時(shí)間

分配內(nèi)容以讓各個(gè)分屏之間不會(huì)重疊。

四、結(jié)語

在網(wǎng)頁(yè)設(shè)計(jì)中，用戶的瀏覽過程應(yīng)該像目標(biāo)內(nèi)容一樣有趣。長(zhǎng)滾屏可以創(chuàng)造一個(gè)完全的沉浸式瀏覽體驗(yàn)，就像Josh Porter 說的：

“滾屏是過程，點(diǎn)擊作出決定?！?/p>

如果用戶喜歡這個(gè)網(wǎng)頁(yè)的UI，那么他們不會(huì)在意滾屏的長(zhǎng)度。因此，專注于用戶們目標(biāo)并且讓頁(yè)面瀏覽更便捷。

說明：喜歡翻譯國(guó)外交互設(shè)計(jì)體驗(yàn)設(shè)計(jì)網(wǎng)站優(yōu)秀文章案例，僅供互相學(xué)習(xí)探討，翻譯有版權(quán)，如有錯(cuò)誤，請(qǐng)多指正~

原文作者：Nick Babich

原文鏈接：http://www.uxbooth.com/articles/best-practices-for-scrolling/

本文由 @vanhelsinglhj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議