在你瀏覽的網(wǎng)站中，幾乎每一個(gè)網(wǎng)站都會(huì)有自己統(tǒng)一的一套動(dòng)態(tài)效果（或交互動(dòng)效）。今天我們將來看看最近比較流行的一種關(guān)于文本的效果：滾動(dòng)文本元素。

當(dāng)一個(gè)網(wǎng)站設(shè)計(jì)中帶有這種效果的時(shí)候，你一定可以第一眼就看出來，因?yàn)槲谋驹貢?huì)在屏幕上移動(dòng)。有時(shí)這種效果可以幫助提高可讀性和理解性，而其他時(shí)候它可能只是一個(gè)作為點(diǎn)綴的設(shè)計(jì)元素。但是無論哪種方式，它都是一種引人注目的效果，可以幫助為你的設(shè)計(jì)添加獨(dú)特的元素并增加互動(dòng)性。

讓我們深入探討這一趨勢(shì)，它的特點(diǎn)和一些例子。

識(shí)別這種設(shè)計(jì)趨勢(shì)（Identifying this Design Trend）

這種網(wǎng)站設(shè)計(jì)趨勢(shì)一目了然——它包括任何在屏幕上水平或垂直滾動(dòng)的帶有效果的文本元素。

滾動(dòng)文本可能會(huì)出現(xiàn)在Banner或者主KV中，但通常我們會(huì)將它設(shè)置在稍微再往下一點(diǎn)點(diǎn)的位置以免影響主視覺的表達(dá)。這是一個(gè)需要把握分寸的元素，因?yàn)樗次脩?，要么可能干擾到用戶導(dǎo)致其離開。

你可能還會(huì)從以上的示例中注意到，大多數(shù)具有滾動(dòng)文本元素的設(shè)計(jì)在同一空間中一般會(huì)有比較多的元素。在這些元素中，滾動(dòng)文本元素只是特點(diǎn)之一。

3個(gè)關(guān)鍵特征（3 Key Characteristics）

雖然對(duì)于這種網(wǎng)頁設(shè)計(jì)趨勢(shì)，你唯一需要主要的就是合理的安排帶有滾動(dòng)效果的文本元素，但還有一些其他常見的關(guān)鍵特征。

我們會(huì)注意到，隨著這種設(shè)計(jì)趨勢(shì)的不斷發(fā)展和轉(zhuǎn)變，這些附加特征可能會(huì)發(fā)生變化。

· 超大字號(hào)：如果沒有滾動(dòng)動(dòng)畫，你通常無法閱讀整個(gè)短語

· 簡(jiǎn)單或常見的措辭：易于理解的單詞有助于理解效果風(fēng)格

· 自動(dòng)滾動(dòng)或移動(dòng)：當(dāng)你到達(dá)滾動(dòng)文本元素區(qū)域時(shí)，動(dòng)效通常會(huì)單獨(dú)發(fā)生或以常見的滾動(dòng)交互方式發(fā)生

如何使用好這個(gè)趨勢(shì)（How to Use It Well）

要想很好地利用這種設(shè)計(jì)趨勢(shì)，請(qǐng)考慮兩個(gè)關(guān)鍵因素：

· 文本需要易于閱讀

· 用戶應(yīng)該能夠?qū)L動(dòng)或動(dòng)作有一些控制

這兩個(gè)元素都有助于提升用戶體驗(yàn)和對(duì)內(nèi)容的理解。如果設(shè)置不當(dāng)，滾動(dòng)文本可能很像自動(dòng)播放的視頻（這意味著它可能會(huì)干擾用戶并使他們感覺不太好）。

每個(gè)用戶以不同的速度閱讀或以不同的方式處理信息。滾動(dòng)文本效果本身沒有什么太大的問題，但用戶需要有足夠的能力來控制它，這樣他們才能理解你想讓他們閱讀的內(nèi)容。

讓它成為你自己的特色元素（Ways to Make It Your Own）

那么，你可以如何利用這種網(wǎng)站設(shè)計(jì)趨勢(shì)并真正將其變成你自己的呢？這里的所有示例都提供了處理和使用滾動(dòng)文本元素的不同方法。

以下是幫助自定義此元素以符合你的設(shè)計(jì)計(jì)劃的三種方法：

· 在滾動(dòng)文本中使用品牌或設(shè)計(jì)很重要的關(guān)鍵詞。你可以強(qiáng)調(diào)你的品牌名稱、突出主題標(biāo)簽或標(biāo)語，或?qū)Ｗ⒂谀悛?dú)特的價(jià)值主張或使命等短語。

· 使用品牌獨(dú)有的字體，并且只在設(shè)計(jì)的這一部分中使用它。這將為滾動(dòng)文本元素創(chuàng)造視覺興趣，同時(shí)將其與你的品牌聯(lián)系起來。

· 允許用戶控制滾動(dòng)。雖然一些滾動(dòng)文本只是在沒有控件的情況下移動(dòng)，但讓用戶擁有實(shí)際控制的權(quán)利可以幫助設(shè)計(jì)更好的表達(dá)同時(shí)增加網(wǎng)站的互動(dòng)性，這也有助于提高可讀性。

3個(gè)我們喜歡的例子（3 Examples We Love）

當(dāng)談到任何設(shè)計(jì)趨勢(shì)時(shí)，都有一些明顯的、處理的比較好的站點(diǎn)你可以參考。以下是我們認(rèn)為比較脫穎而出的三個(gè)帶有滾動(dòng)文本效果的網(wǎng)站。

Exgalleria

滾動(dòng)文本在這里有一個(gè)具有針對(duì)性的目的：它可以幫助你瀏覽網(wǎng)站。淡入淡出的效果并不會(huì)對(duì)重要的內(nèi)容形成干擾，同時(shí)用戶可以通過一個(gè)大的鼠標(biāo)懸停箭頭來完全控制滾動(dòng)。

Di Costanzo

這種設(shè)計(jì)通過垂直滾動(dòng)效果重新定義了滾動(dòng)文本效果。結(jié)果是既保證了設(shè)計(jì)上的獨(dú)特風(fēng)格，在效果以及用戶體驗(yàn)上也是有趣的。它讓你想一直滾動(dòng)到最后。

Peppa Sauce

Peppa Sauce 是一個(gè)在同一空間上同時(shí)具有多種復(fù)雜元素的網(wǎng)站設(shè)計(jì)，滾動(dòng)文本在這里有很好的效果。所有的動(dòng)作都是用戶在滾動(dòng)時(shí)激活的，文本元素左右移動(dòng)，上下移動(dòng)，包括各種大小和結(jié)構(gòu)。同一時(shí)間和空間發(fā)生的事情太多了，你可能不會(huì)閱讀所有內(nèi)容，但是關(guān)鍵短語的字號(hào)大小和位置可以讓你首先注意到它們。

總結(jié)

這是幾乎在一夜之間突然出現(xiàn)并且無處不在的設(shè)計(jì)趨勢(shì)之一。它可能很有趣，但確實(shí)存在一些挑戰(zhàn)——可讀性和兼容性。

如果你打算在設(shè)計(jì)中使用滾動(dòng)文本元素，最好在設(shè)計(jì)之前先考慮好將要使用的文本內(nèi)容，并權(quán)衡效果是自動(dòng)的還是由用戶控制的利弊（后者對(duì)于可訪問性標(biāo)準(zhǔn)很重要 ）。最重要的是，如果你確實(shí)使用了這種設(shè)計(jì)趨勢(shì)，請(qǐng)確保它有目的并符合你的整體目標(biāo)。

----圖文來自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)